💄 Fix double header in mobile ui

[jun-0411]

📝 작업 내용

모바일 환경에서 이중 헤더가 나타나는 문제를 수정했습니다.

• Subheader 상태를 감지하는 zustand 스토어를 추가했습니다.
• 위 스토어로 Subheader가 마운트 된 경우 Header.tsx에서 가로 길이가 md 미만인지 확인하고, 글로벌 '모이밍' 헤더를 숨김 처리합니다.
• <Subheader>를 사용하던 EventMain.tsx, EventRegister.tsx, Guests.tsx, EventForm.tsx에서 문제가 해결되었습니다.
• 웹 환경에서는 기존과 동일하게 두 헤더가 모두 노출됩니다.

📸 스크린샷 (선택)

모바일 ui

웹 ui

🚀 리뷰 요구사항 (선택)

모바일 / 웹 구분 기준 통일

이번 작업을 하면서 사이트 전반적으로 모바일 환경과 웹 환경을 구분하는 기준이 md와 sm으로 혼용되고 있는 것을 발견하였습니다.

발견한 반응형 ui들은 다음과 같습니다.

1. 상단 네비게이션 컨테이너 (Header.tsx)
   sm:w-screen-sm md:w-screen-md lg:w-screen-lg xl:max-w-screen-xl
   화면이 커질 때마다 중앙 영역의 최대 넓이 제한을 기기 크기에 맞춰 단계별로 늘려줍니다.
2. 참여자 명단 리스트 (Guests.tsx)
   sm:gap-4, sm:text-xl, sm:text-lg, sm:px-4, sm:py-3
   기본적으로 작은 모바일 화면에 맞춘 텍스트 크기(text-sm, text-lg)와 간격을 사용하다가, sm(640px)을 넘어가면 폰트와 버튼 크기를 조금 더 큼직하게 키웁니다.
3. 시간 선택기 (SimpleDateTimePicker.tsx)
   sm:flex-row, sm:flex-col, sm:hidden 등
   작은 화면에서는 스크롤과 요소들을 세로로 길게 배치하지만, sm(640px) 이상에서는 시간/날짜 선택 영역을 가로(가로 분할 창 형태)로 재배치하고 불필요한 스크롤바를 숨깁니다.
4. 사용자 프로필 버튼 (ProfileButton.tsx)
   w-8 h-8 sm:w-10 sm:h-10 text-md sm:text-lg
   우측 상단의 프로필 아바타 크기가 모바일에서는 작고(8), 태블릿 이상에서는 커집니다(10).
5. Shadcn UI 공통 컴포넌트들 (src/components/ui/)
   Input, Textarea: 데스크탑 환경(md:)에서 텍스트 사이즈 조정(md:text-sm).
   AlertDialog: 모바일에서는 버튼이 세로로 쌓이고 팝업이 전체 화면을 차지하지만, 640px(sm:) 이상에서는 팝업의 최대 넓이를 제한(sm:max-w-md)하고 확인/취소 버튼을 가로로 나란히(sm:flex-row) 배치합니다.
   Calendar: 달력 컴포넌트가 넓은 화면(md:)에서는 가로로 배치(md:flex-row)됩니다.

제미나이는 md가 아이패드 미니의 규격이어서 sm을 md로 통일하는 것을 추천하였습니다.

혹은 네비게이션 헤더 토글, 달력 가로/세로 배치 전환 등 큼직한 ui 변화는 md로 통일하고, 소소한 여백 / 크기 조정은 기존처럼 sm을 유지하는 것도 방법이라고 했습니다.(프로필 아바타 크기는 sm에서 크기가 변하는 것에 최적화 되어있긴 합니다)

어떻게 작업하는게 좋을까요? 만약 한다면 새로 이슈를 파고 작업하겠습니다!

[young-52]

추가로 수정한 사항

• 서브헤더의 제목을 아래와 같이 수정하였습니다.
  • 모임 메인 화면: 상세보기 → {모임 이름}
  • 모임 신청 화면: 정보 입력 → 모임 신청하기

진입 경로에 따른 헤더 분기

• 피그마 와이어프레임에서는, 모임 메인 화면으로 진입할 때 대시보드를 거쳤는지, 또는 URL을 직접 입력했는지에 따라 헤더를 다르게 표시하고 있습니다. 이 사항도 반영하여 수정 가능할까요…?

반응형 웹 관련

• 저도 반응형은 잘 몰라서 AI와 대화를 해봤더니 비슷한 내용을 추천받았습니다.

  화면 구조가 가로/세로로 뒤바뀌는 큰 변화는 무조건 md:, 그 외에 단순히 폰트나 여백이 커지는 자잘한 변화는 sm:을 쓴다.

• 이 추천을 받아들인다면, 큰 변화는 md, 비교적 작은 변화는 sm으로 분기점을 삼으면 될 것 같습니다.

[jun-0411]

서브헤더 노출 조건 수정

Home.tsx에서 EventCard를 눌러 EventMain에 진입할 때 or Admin인 경우에만 서브헤더가 노출되게 수정했습니다.

5/30 회의에서 Admin인 경우에도 홈페이지에서 접근할 때만 서브헤더를 노출하기로 했지만, 서브헤더에 점 3개 메뉴(수정하기, 삭제하기)가 같이 묶여있어 우선 Admin인 경우에는 항상 서브헤더가 보여지게 설정했습니다.

만약 Admin 유저가 링크를 이용해서 바로 일정 상세 페이지에 접근하고 서브헤더의 뒤로가기 버튼을 누르면 직전 페이지가 아닌 홈페이지로 이동합니다.

모바일/웹 ui 기준 md로 통일

다음과 같은 페이지에서 sm이던 기준을 md로 수정했습니다.

• 모달창 최대 크기 제한(alert-dialog.tsx)
• 날짜/시간 선택기 가로-세로 배치(SimpleDateTimePicker.tsx)
• 참여자 명단 아이템 여백 및 글자 크기(Guests.tsx)
• 우측 상단 프로필 이미지 크기(ProfileButton.tsx)

[young-52]

잘 작동하네요!