Skip to content

[Fix] 근무 요청 카드 시간 박스 겹침 해결 #77

Open
l2juhan wants to merge 1 commit into
developfrom
bug/request-card-time-overlap#60
Open

[Fix] 근무 요청 카드 시간 박스 겹침 해결 #77
l2juhan wants to merge 1 commit into
developfrom
bug/request-card-time-overlap#60

Conversation

@l2juhan
Copy link
Copy Markdown
Collaborator

@l2juhan l2juhan commented May 14, 2026

📌 Issue number and Link

closed #60

✏️ Summary

보낸/받은 근무 요청 카드의 상세 영역에서 시:분 박스가 좁은 화면(iPhone SE 등)에서 컨테이너를 벗어나 겹쳐 보이던 UI 버그를 해결했습니다.

근본 원인은 한 줄에 8개 element(날짜 박스 + 시 박스 + 분 박스 + ~ + 시 박스 + 분 박스 + 콜론 2개)를 욱여넣은 구조 자체였기 때문에, 단순 크기 축소가 아닌 시:분을 통합된 "HH:mm" 박스 하나로 단순화하는 방식으로 해결했습니다.

📝 Changes

  • BaseRequestCard.tsx — 기존/요청 근무 시간 양쪽 모두 시:분 박스 4개 → "HH:mm" 통합 박스 2개로 변경
  • detailHourBox 스타일에 flex: 1 적용 → 화면 너비에 자동 적응 (iPhone SE ~ Pro Max 안정)
  • detailTilde 스타일에 color/fontSize 명시로 박스 텍스트와 톤 통일

🔎 PR Type

  • Bugfix

📸 Screenshot

팀원 테스트를 위한 PR입니다. 테스트 후 스크린샷 첨부 부탁드립니다.

테스트 시나리오

  • Golden path: 마이페이지 → 보낸 근무 요청 → 카드 펼침 → 박스 겹침 없이 한 줄 정상 표시
  • 요청 타입 분기: CREATE / UPDATE / DELETE 각각 정상 표시
  • 회귀 — 받은 요청: 사장님 계정 → 받은 근무 요청 화면도 정상 표시
  • 회귀 — 카드 헤더: 접힌 상태의 시간 텍스트(2/18 09:00 ~ 18:00)도 그대로 표시
  • 좁은 기기: iPhone SE급 폭에서 박스 잘림/겹침 없음

네이티브 빌드

불필요 (스타일/렌더링 변경만)

시:분을 분리된 박스 4개로 두던 구조를 "HH:mm" 통합 박스 2개로
단순화하고, detailHourBox에 flex: 1을 적용해 화면 너비에 자동
적응되도록 변경. 좁은 화면(iPhone SE 등)에서 박스가 겹쳐 보이던
문제 해결.

- BaseRequestCard: 기존/요청 근무 시간 양쪽 박스 통합
- detailTilde 스타일에 color/fontSize 명시로 톤 통일
@l2juhan l2juhan self-assigned this May 15, 2026
@l2juhan l2juhan requested a review from wonyeoe May 15, 2026 07:14
Copy link
Copy Markdown
Collaborator

@wonyeoe wonyeoe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저는 문제없이 잘 뜹니다!

Image

@l2juhan l2juhan added the bug Something isn't working label May 17, 2026
@l2juhan l2juhan changed the title [Fix] 근무 요청 카드 시간 박스 겹침 해결 (#60) [Fix] 근무 요청 카드 시간 박스 겹침 해결 May 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants