Skip to content

fix: 휴대폰 폭에서 상단 바 글자가 쪼개지고 신청 마법사·대시보드 내용이 좁아지던 문제를 고침 - #223

Merged
yoon6yo merged 1 commit into
mainfrom
fix/v3.3.74-mobile-layout
Oct 13, 2026
Merged

yoon6yo merged 1 commit into
mainfrom
fix/v3.3.74-mobile-layout

Conversation

@yoon6yo

@yoon6yo yoon6yo commented Oct 13, 2026

Copy link
Copy Markdown
Contributor

원인

  • 상단 바 오른쪽 묶음(역할 전환·언어·이름)이 줄어들 수 있고 줄바꿈 금지가 없어, 폭이 모자라면 글자가 세로로 쪼개짐
  • 신청 마법사 단계 목록이 최소 160px을 차지해 360px 화면에서 내용 칸이 약 54px만 남음
  • 사용자·관리자 대시보드의 고정 열 격자가 휴대폰 폭에서도 그대로 유지됨

변경

  • 상단 바: 오른쪽 묶음은 줄지 않고 한 줄 고정, 휴대폰 폭(639px 이하)에서는 아이콘 있는 항목의 글자를 숨김
  • 마법사: 휴대폰 폭에서 단계 목록을 번호만 내용 위에 가로로 놓음
  • 본문 여백: 휴대폰 폭에서 32px → 16px
  • 카드·항목 목록·대시보드·컨테이너 상세 격자: 휴대폰 폭에서 한 열(관리자 지표 카드는 두 열)
  • 포트 입력줄(신청 마법사·변경 요청 양식): 좁으면 줄을 바꿈
  • 화면 폭 판별을 design-system/hooks/useMediaQuery.js 한 곳으로 모음

검증

  • eslint . 오류 0건·경고 58건(기준과 동일), vite build 통과
  • 로컬 미리보기에 가짜 API 응답을 물려 360·390·768·1440px에서 /user, /user/request, /admin 확인: 가로 넘침 0, 상단 바 높이 48px 유지, 360px에서 내용 폭 278px

확인하지 못한 것

  • 실제 데이터가 있는 화면(GPU 카드, 포트 표, 컨테이너 상세)과 변경 요청 양식
  • 실험 스택에서의 확인
  • 360px 관리자 계정에서는 상단 바 제목이 가려지고 로고만 보임

🤖 Generated with Claude Code

- 상단 바 오른쪽 묶음이 줄지 않고 한 줄에 놓이게 하고, 휴대폰 폭에서는 아이콘 있는 항목의 글자를 숨김
- 마법사 단계 목록을 휴대폰 폭에서 번호만 내용 위에 가로로 놓음
- 본문 여백을 휴대폰 폭에서 줄이고 카드·항목 목록·대시보드 격자를 한 열로 쌓음
- 포트 입력줄이 좁으면 줄을 바꾸게 함
- 화면 폭 판별을 useMediaQuery 한 곳으로 모음

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@yoon6yo
yoon6yo merged commit e0ec199 into main Oct 13, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant