[Feat] 모바일 접근 모달 UI 및 로직 구현 #32
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Walkthrough모바일 감지 훅과 MobileModal 컴포넌트를 추가하고 레이아웃에 마운트했으며, ModalOverlay에 클래스명 옵션을 도입하고 가입 페이지 로고의 z-index를 조정했습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User as 사용자
participant Layout as 레이아웃
participant MobileModal as MobileModal
participant useMediaQuery as useMediaQuery
participant ModalOverlay as ModalOverlay
User->>Layout: 페이지 요청/로드
Layout->>MobileModal: MobileModal 마운트
MobileModal->>useMediaQuery: maxWidth=1244px 호출
useMediaQuery->>useMediaQuery: MediaQueryList 생성\n(max-width: 1243px)
useMediaQuery-->>MobileModal: 초기 매칭 상태 반환
rect rgba(100,150,200,0.5)
Note over MobileModal,ModalOverlay: 화면이 모바일(매칭)인 경우
MobileModal->>ModalOverlay: 모달 렌더링 (className 전달)
ModalOverlay-->>User: 반투명 배경과 모달 표시
User->>MobileModal: 닫기 버튼 클릭
MobileModal->>MobileModal: isClosed = true
MobileModal-->>User: 모달 숨김
end
rect rgba(150,200,150,0.5)
Note over useMediaQuery,MobileModal: 화면 크기 변경 이벤트
useMediaQuery->>useMediaQuery: 'change' 이벤트 감지
useMediaQuery-->>MobileModal: 상태 업데이트
MobileModal->>MobileModal: isClosed = false (데스크톱 전환 시 리셋)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
chaeyoungwon
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/components/common/MobileModal.tsx`:
- Around line 29-35: The close button uses absolute positioning (button with
onClick={handleClose} and <Close />) but its immediate parent wrapper is missing
the relative positioning; update the parent container element that wraps the
modal content (the div that currently lacks "relative" near where the close
button is rendered) to include the "relative" class so the absolute-positioned
button is positioned correctly relative to the modal content.
🧹 Nitpick comments (2)
src/components/common/MobileModal.tsx (2)
37-41: 하드코딩된 한국어 텍스트 - i18n 미적용프로젝트가
next-intl을 사용한 다국어 지원 구조인데, 모달 텍스트가 하드코딩되어 있습니다.src/app/[locale]/layout.tsx에서NextIntlClientProvider내부에 렌더링되므로useTranslations훅을 사용할 수 있습니다.♻️ 개선 제안
+import { useTranslations } from "next-intl"; const MobileModal = () => { + const t = useTranslations("mobileModal"); const [isClosed, setIsClosed] = useState(false); // ... - <h1 className="Subhead_2_semibold text-Grey-100 mt-[3.25rem] text-center"> - 원활한 이용을 위해 - <br /> - PC 환경에서 접속해 주세요. - </h1> + <h1 className="Subhead_2_semibold text-Grey-100 mt-[3.25rem] text-center whitespace-pre-line"> + {t("message")} + </h1>
43-52: 이미지 alt 텍스트 개선 권장
alt="mobile only"는 이미지의 내용을 설명하지 않습니다. 접근성을 위해 더 명확한 설명을 제공하거나, 순수 장식용 이미지라면 빈 문자열(alt="")을 사용하세요.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/components/common/MobileModal.tsx`:
- Around line 29-33: 모달의 닫기 버튼에 하드코딩된 영어 aria-label("close modal")이 있어 로캘화가
필요합니다; MobileModal.tsx의 해당 <button>에서 aria-label을 직접 문자열 대신 i18n 키(예:
t('modal.close') 또는 props로 전달된 closeLabel)로 교체하고, 필요한 경우 props 인터페이스(예:
MobileModalProps)에 closeLabel?: string 추가 또는 내부에서 useTranslation 훅을 사용해 현재 로캘에
맞춘 문자열을 반환하도록 변경하세요; 또한 테스트와 접근성 검증을 위해 기본값을 제공하고(handleClose는 그대로 유지), 스냅샷/aria
테스트에서 i18n 키가 적용되는지 확인하도록 수정하세요.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
💡 PR 타입
📝 PR 내용
[locale] 하위 페이지에서 기기 너비 기준 모바일 접근 모달이 노출되도록 구현했습니다. 이에 따라 app/layout.tsx가 아닌 app/[locale]/layout.tsx에 관련 코드를 추가했습니다.
피그마 답변에 따라 1244px 미만에서 모달이 노출되도록 했으며, 기기 종류와 무관하게 데스크탑에서도 화면 크기를 줄이면 동일하게 노출되도록 처리했습니다. 따라서 별도의 기기 감지 라이브러리는 사용하지 않고, 화면 너비를 기준으로 판단하는 방식으로 구현했습니다! 해당 로직은 커스텀 훅으로 분리해두었습니다.
ModalOverlay를 공통 컴포넌트로 사용하기 위해, 배경 투명도는 props로 제어할 수 있도록 수정했습니다.
🔍 관련 이슈
📸 작업 화면
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일
수정
✏️ Tip: You can customize this high-level summary in your review settings.