Skip to content

[Bug] 보낸 근무 요청 카드에서 날짜/시간 박스가 겹침 #60

Description

@l2juhan

요약

보낸 근무 요청 화면에서 기존 근무 시간과 요청 근무 시간의 날짜/시간 박스가 겹치는 UI 버그

재현 방법

  1. 근로자로 로그인
  2. 마이페이지 → 보낸 근무 요청 화면 이동
  3. 요청 카드의 날짜/시간 박스 확인

기대 동작

  • 기존 근무 시간과 요청 근무 시간의 날짜/시간 박스가 겹치지 않고 정상 표시

실제 동작

  • 날짜 박스와 시간 박스들이 서로 겹쳐서 표시됨

원인 분석

src/components/mypage/BaseRequestCard.tsx (Line 364-397)

detailTimeRow: { flexDirection: "row", gap: 8 },
detailDateBox: { paddingHorizontal: 12, paddingVertical: 10, borderRadius: 8 },
detailHourRow: { flex: 1, flexDirection: "row", justifyContent: "center", gap: 4 },
detailHourBox: { minWidth: 40, paddingHorizontal: 12, paddingVertical: 10, gap: 4 },

문제점

  • detailHourBoxminWidth: 40 + paddingHorizontal: 12 = 실제 너비 64px 이상
  • 여러 시간 박스(시작시간 시/분, ~, 종료시간 시/분)가 gap: 4로 너무 좁게 배치
  • justifyContent: "center"로 인해 화면 너비가 좁을 때 컨테이너를 벗어남

수정 방향

  1. detailHourBoxminWidth, paddingHorizontal 조정
  2. detailHourRowgap 값 증가 또는 flexWrap: "wrap" 추가
  3. 또는 날짜/시간 레이아웃을 세로 배치로 변경

관련 파일

  • src/components/mypage/BaseRequestCard.tsx
  • src/components/mypage/sentRequests/SentRequestCard.tsx

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions