Skip to content

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

@l2juhan

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

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions