Guild Mobile 화면 대응 #280
Guild Mobile 화면 대응 #280
Conversation
Walkthrough이번 PR은 길드 기능 관련 메시지 업데이트와 UI 전반에서 z-index 값을 숫자에서 문자열 식별자로 변경하는 작업을 포함합니다. 또한, 길드 페이지와 관련 컴포넌트에 draggable 속성 추가, 불필요한 스타일 및 콘솔 로그 제거, 모바일 반응형 레이아웃 개선 등이 적용되었습니다. 패키지 내 테마 토큰 업데이트를 통해 다양한 요소의 스택 순서를 명확히 하는 변경도 이루어졌습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant U as 사용자
participant N as 알림 시스템
participant G as 길드 페이지
U->>N: 길드 관련 알림 확인
N->>G: /guild 경로로 리디렉션
G->>U: 페이지 렌더링 (비드래그 이미지 적용)
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![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
🔭 Outside diff range comments (3)
apps/web/src/app/[locale]/landing/AvailablePetSection/AnimalSliderContainerMobile.tsx (1)
28-29: 에러 처리가 개선되어야 합니다.빈 catch 블록은 잠재적인 문제를 숨길 수 있습니다.
다음과 같이 수정하는 것을 제안합니다:
try { flicking.current.next(); - } catch (error) {} + } catch (error) { + console.error('슬라이더 이동 중 오류 발생:', error); + }apps/web/src/components/GNB/LanguageSelector.tsx (1)
112-122: 모바일 뷰에서 안전 영역(Safe Area)을 고려해야 합니다.iOS 기기의 노치나 홈 바와 같은 안전 영역을 고려하지 않고 있습니다.
다음과 같이 수정하는 것을 제안합니다:
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, + paddingTop: 'env(safe-area-inset-top)', + paddingBottom: 'env(safe-area-inset-bottom)', backgroundColor: '#fff', maxHeight: '100vh', overflowY: 'auto', zIndex: 'drawer',apps/web/src/components/Global/FeedbackForm.tsx (1)
80-85: Next.js Image 컴포넌트에서 표준 img 태그로 변경됨Next.js의 Image 컴포넌트가 표준 HTML img 태그로 대체되었습니다. 이는 성능 최적화와 이미지 관리 측면에서 권장되지 않는 변경입니다.
Next.js의 이미지 최적화 기능을 활용하기 위해 다시 Image 컴포넌트로 되돌리는 것을 추천드립니다:
-<img src="/feedback/feedback-profile.png" alt="feedback" width={67.5} height={67} /> +<Image + src="/feedback/feedback-profile.png" + alt="feedback" + width={67.5} + height={67} +/>Also applies to: 92-92
🧹 Nitpick comments (8)
apps/web/src/components/PageModal/index.tsx (1)
22-26: 모바일 스타일 적용이 잘 되었습니다!모바일 화면에서의 레이아웃 조정이 적절하게 이루어졌습니다. 헤더 높이를 고려한
minHeight계산과 전체 너비 표시를 위한borderRadius제거가 모바일 UX를 개선하는데 도움이 될 것 같습니다.다만, 모바일에서의 패딩값(p: 5)이 데스크톱 버전(p: '40px')과 큰 차이가 있어 갑작스러운 변화로 느껴질 수 있습니다. 중간 크기의 화면을 위한 브레이크포인트를 추가하는 것을 고려해보시는 건 어떨까요?
_mobile: { minHeight: 'calc(100vh - var(--mobile-header-height))', borderRadius: 0, - p: 5, + p: { base: 5, sm: '20px', md: '40px' }, },packages/ui/panda/src/theme/tokens.ts (1)
12-26: z-index 토큰 정의가 잘 구성되어 있습니다!계층 구조가 명확하고 의미있는 이름을 사용하여 z-index 값을 관리하고 있습니다. 다만, 각 토큰의 사용 목적과 컨텍스트를 명확히 하기 위해 주석 추가를 제안드립니다.
아래와 같이 각 토큰에 대한 설명을 추가하면 좋을 것 같습니다:
zIndex: { + // 요소를 시각적으로 숨기기 위한 음수 값 hide: { value: '-1' }, + // 기본 스택 레벨 base: { value: '0' }, + // 기본 요소 위에 떠 있는 요소 (예: 드롭다운 버튼) floating: { value: '2' }, ... },apps/web/src/components/GNB/Notification/notification.contants.ts (2)
16-25: 길드 알림이 추가되었습니다만, ID 체계를 개선하면 좋겠습니다.ID가 순차적이지 않은 것이 눈에 띕니다 (1 다음에 3). 향후 유지보수를 위해 순차적인 ID 체계를 유지하는 것이 좋습니다.
- id: '3', + id: '2',
26-35: 주석 처리된 코드는 제거하는 것이 좋습니다.더 이상 사용하지 않는 크리스마스 이벤트 알림 코드가 주석 처리되어 있습니다. 버전 관리 시스템을 통해 히스토리를 확인할 수 있으므로, 주석 처리된 코드는 제거하는 것이 좋습니다.
apps/web/src/components/Select/Label.tsx (1)
33-33: 패딩 값의 반응형 처리를 고려해보세요.모바일 화면에서는 현재 패딩(14px 14px 14px 20px)이 너무 클 수 있습니다. 화면 크기에 따른 패딩 조정을 추천드립니다.
- padding: '14px 14px 14px 20px', + padding: { + base: '14px 14px 14px 20px', + _mobile: '10px 10px 10px 14px', + },apps/web/src/app/[locale]/landing/AvailablePetSection/AnimalSliderContainer.tsx (1)
15-17: TODO 주석에 대한 개선이 필요합니다.useMounted 훅으로의 분리가 제안되어 있습니다. 이를 구현하여 코드 품질을 개선할 수 있습니다.
useMounted 훅 구현을 도와드릴까요?
apps/web/src/app/[locale]/guild/_components/GuildPeopleList.tsx (1)
68-70: GuildCard 컴포넌트와 일관된 모바일 스타일링이 필요합니다.GuildCard 컴포넌트는
width를 사용하고 있지만, 여기서는maxW를 사용합니다. 일관성을 위해 동일한 접근 방식을 사용하는 것이 좋습니다.- maxW: 'calc(100vw - 40px)', + width: 'calc(100vw - 40px)',apps/web/src/components/GNB/Notification/InboxList.tsx (1)
67-68: 모바일 환경에서 너비 조정이 필요할 수 있습니다.현재 고정된 너비(375px)는 작은 화면에서 문제가 될 수 있습니다.
다음과 같이 수정하는 것을 제안합니다:
width: '375px', + _mobile: { + width: '100%', + right: '0', + },
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (49)
apps/web/messages/en_US.json(1 hunks)apps/web/messages/ko_KR.json(1 hunks)apps/web/src/app/[locale]/auth/page.tsx(1 hunks)apps/web/src/app/[locale]/event/(common)/BackgroundSlider/Arrow.tsx(1 hunks)apps/web/src/app/[locale]/event/(common)/Draw.tsx(1 hunks)apps/web/src/app/[locale]/event/(common)/EventEndOverlay.tsx(1 hunks)apps/web/src/app/[locale]/event/(halloween)/Content.tsx(2 hunks)apps/web/src/app/[locale]/guild/(subpage)/[id]/layout.tsx(1 hunks)apps/web/src/app/[locale]/guild/(subpage)/[id]/page.tsx(1 hunks)apps/web/src/app/[locale]/guild/(subpage)/[id]/setting/GuidlInfoFormClient.tsx(2 hunks)apps/web/src/app/[locale]/guild/(subpage)/detail/GuildDetail.tsx(0 hunks)apps/web/src/app/[locale]/guild/_components/GuildCard.tsx(1 hunks)apps/web/src/app/[locale]/guild/_components/GuildModalPageLayout.tsx(1 hunks)apps/web/src/app/[locale]/guild/_components/GuildPeopleList.tsx(3 hunks)apps/web/src/app/[locale]/guild/_components/GuildSearch.tsx(2 hunks)apps/web/src/app/[locale]/guild/layout.tsx(1 hunks)apps/web/src/app/[locale]/guild/page.tsx(6 hunks)apps/web/src/app/[locale]/landing/AvailablePetSection/AnimalSliderContainer.tsx(1 hunks)apps/web/src/app/[locale]/landing/AvailablePetSection/AnimalSliderContainerMobile.tsx(1 hunks)apps/web/src/app/[locale]/landing/AvailablePetSection/AvailablePetSection.style.ts(1 hunks)apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.style.ts(1 hunks)apps/web/src/app/[locale]/landing/MainSection/MainSection.style.ts(1 hunks)apps/web/src/app/[locale]/landing/MainSection/MainSlider.tsx(1 hunks)apps/web/src/app/[locale]/mypage/layout.tsx(1 hunks)apps/web/src/app/[locale]/mypage/my-pet/(merge)/MergePersona.tsx(1 hunks)apps/web/src/app/[locale]/shop/AuctionSection/Background.tsx(2 hunks)apps/web/src/app/[locale]/shop/AuctionSection/index.tsx(1 hunks)apps/web/src/app/[locale]/shop/BackgroundSection/BackgroundSection.tsx(2 hunks)apps/web/src/app/[locale]/shop/FloatingPointSection/FloatingPointSection.tsx(1 hunks)apps/web/src/app/[locale]/shop/PetGotcha/PetGotcha.tsx(1 hunks)apps/web/src/app/[locale]/shop/page.tsx(1 hunks)apps/web/src/app/globals.css(1 hunks)apps/web/src/components/CheckTime.tsx(1 hunks)apps/web/src/components/GNB/DesktopGNB.tsx(1 hunks)apps/web/src/components/GNB/LanguageSelector.tsx(2 hunks)apps/web/src/components/GNB/MobileGNB.tsx(3 hunks)apps/web/src/components/GNB/Notification/InboxList.tsx(1 hunks)apps/web/src/components/GNB/Notification/notification.contants.ts(1 hunks)apps/web/src/components/Global/FeedbackForm.tsx(5 hunks)apps/web/src/components/PageModal/index.tsx(1 hunks)apps/web/src/components/RouteModal.tsx(1 hunks)apps/web/src/components/Select/Label.tsx(1 hunks)apps/web/src/components/Select/Panel.tsx(1 hunks)apps/web/src/components/Slider/PerspectiveCenterSlider.tsx(1 hunks)apps/web/src/components/TextArea.tsx(1 hunks)packages/ui/panda/src/components/Banner/BannerPetSelect.tsx(1 hunks)packages/ui/panda/src/components/Banner/cva.ts(1 hunks)packages/ui/panda/src/components/SearchBar/SearchBar.tsx(2 hunks)packages/ui/panda/src/theme/tokens.ts(1 hunks)
💤 Files with no reviewable changes (1)
- apps/web/src/app/[locale]/guild/(subpage)/detail/GuildDetail.tsx
✅ Files skipped from review due to trivial changes (7)
- apps/web/src/app/[locale]/mypage/my-pet/(merge)/MergePersona.tsx
- apps/web/src/app/[locale]/event/(common)/Draw.tsx
- apps/web/src/components/TextArea.tsx
- apps/web/src/app/[locale]/guild/(subpage)/[id]/page.tsx
- apps/web/src/app/[locale]/shop/page.tsx
- apps/web/src/app/[locale]/guild/(subpage)/[id]/setting/GuidlInfoFormClient.tsx
- apps/web/src/components/RouteModal.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Install Dependencies
🔇 Additional comments (53)
apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.style.ts (1)
23-23: z-index 값의 테마 기반 관리로의 전환이 잘 이루어졌습니다!숫자형 z-index 값을 의미론적인 문자열 값으로 변경한 것이 코드의 가독성과 유지보수성을 향상시킵니다.
apps/web/src/app/[locale]/guild/layout.tsx (1)
24-28: 모바일 화면 대응이 적절하게 구현되었습니다.모바일 헤더 높이를 CSS 변수로 관리하고 컨테이너 높이를 동적으로 조정한 것이 좋은 접근 방식입니다.
모바일 헤더 높이 변수가 올바르게 정의되어 있는지 확인해 주세요:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Check if mobile header height variable is defined in globals.css rg --type css "mobile-header-height"Length of output: 99
모바일 헤더 높이 변수 정의가 올바르게 확인되었습니다.
- CSS 변수 "--mobile-header-height"가 apps/web/src/app/globals.css 파일에 60px로 정의되어 있습니다.
- 모바일 레이아웃 조정 역시 의도한 대로 동작할 것으로 판단됩니다.
apps/web/src/app/[locale]/event/(common)/EventEndOverlay.tsx (1)
19-19: 오버레이의 z-index 값이 의미론적으로 잘 변경되었습니다.숫자형 z-index 값(1000)을 의미론적인 'overlay' 값으로 변경한 것이 적절합니다.
packages/ui/panda/src/components/Banner/BannerPetSelect.tsx (1)
14-14: 이미지의 드래그 방지 처리가 잘 구현되었습니다.모바일 환경에서 의도치 않은 이미지 드래그를 방지하여 사용자 경험이 개선되었습니다.
apps/web/src/components/Select/Panel.tsx (1)
20-20: z-index 토큰 적용이 적절합니다.새로운 z-index 토큰 시스템에 맞게 잘 변경되었습니다. 드롭다운 패널의 특성을 고려할 때 'floating' 값이 적절한 선택입니다.
apps/web/src/app/[locale]/guild/_components/GuildModalPageLayout.tsx (1)
22-25: 모바일 대응이 적절하게 구현되었습니다.모바일 환경에서 패딩과 테두리 반경을 조정하여 더 나은 사용자 경험을 제공하도록 구현되었습니다. PR의 목적에 잘 부합합니다.
packages/ui/panda/src/components/Banner/cva.ts (1)
43-43: 모바일 화면에서의 높이 값 검토 필요고정된 높이 값은 모바일 화면에서 문제가 될 수 있습니다. 모바일 대응을 위해
_mobile미디어 쿼리를 사용하여 반응형 높이를 설정하는 것을 고려해보세요.medium: { width: '120px', padding: '12px 20px', - height: '149px', + height: '149px', + _mobile: { + height: 'auto', + minHeight: '120px', + }, },apps/web/src/app/[locale]/landing/MainSection/MainSection.style.ts (1)
60-60: z-index 테마 토큰 적용 승인숫자 값에서 테마 토큰으로의 변경이 적절하게 이루어졌습니다. 이는 z-index 관리의 일관성을 향상시킵니다.
apps/web/src/app/[locale]/auth/page.tsx (1)
47-47: 로딩 컨테이너의 z-index 테마 토큰 적용 승인로딩 컨테이너의 z-index 값이 테마 토큰으로 적절하게 변경되었습니다. 이는 애플리케이션 전반의 z-index 관리 일관성을 개선합니다.
apps/web/src/app/[locale]/guild/_components/GuildSearch.tsx (1)
46-50: 모바일 최적화 적용 승인SearchBar 컴포넌트의 모바일 화면 대응이 적절하게 구현되었습니다. viewport 단위를 사용한 너비 계산과 여백 고려가 잘 되어있습니다.
apps/web/src/app/[locale]/shop/FloatingPointSection/FloatingPointSection.tsx (1)
39-39: z-index 값의 테마 기반 관리로의 전환이 잘 이루어졌습니다!숫자 값에서 의미 있는 식별자로의 전환은 z-index 관리를 더 명확하고 일관되게 만들어줍니다.
apps/web/src/app/[locale]/guild/(subpage)/[id]/layout.tsx (1)
33-38: 모바일 레이아웃 대응이 추가되었습니다.모바일 환경에서의 레이아웃 개선이 이루어졌으나, 몇 가지 고려사항이 있습니다:
minHeight: 'fit-content'와height: 'calc(100vh - var(--mobile-header-height))'가 동시에 적용되어 있어 충돌이 발생할 수 있습니다.- 모바일에서 콘텐츠가 많을 경우 스크롤 처리가 필요할 수 있습니다.
다음과 같이 수정하는 것을 고려해보세요:
_mobile: { paddingY: '0', - minHeight: 'fit-content', height: 'calc(100vh - var(--mobile-header-height))', padding: 4, + overflow: 'auto', },packages/ui/panda/src/components/SearchBar/SearchBar.tsx (1)
3-3: className 처리 방식이 개선되었습니다!
cx유틸리티를 사용하여 기본 스타일과 외부에서 전달받은 className을 조합하는 방식으로 변경된 것이 좋습니다. 이는 컴포넌트의 스타일 확장성을 높여줍니다.Also applies to: 14-14
apps/web/src/app/[locale]/event/(common)/BackgroundSlider/Arrow.tsx (2)
44-44: z-index 값이 테마 토큰으로 잘 변경되었습니다!숫자형 z-index에서 'floating' 토큰으로의 전환이 적절하게 이루어졌습니다.
23-26: 모바일 환경에서의 화살표 크기와 위치 조정이 적절합니다.화살표의 크기와 위치가 모바일 환경에 맞게 잘 조정되었습니다. 특히 disabled 상태일 때의 크기 차이도 고려한 점이 좋습니다.
Also applies to: 51-53
apps/web/src/components/CheckTime.tsx (2)
24-24: z-index 값이 테마 기반으로 변경되었습니다.숫자형 z-index에서 테마 기반의 문자열 식별자로 변경된 것이 확인되었습니다. 이는 z-index 관리의 일관성을 향상시킵니다.
15-17: 모바일 반응형 레이아웃이 적절히 구현되었습니다.viewport 단위를 사용하여 화면 크기에 따라 적절히 조정되는 것이 확인되었습니다.
apps/web/src/app/[locale]/landing/AvailablePetSection/AvailablePetSection.style.ts (2)
21-21: z-index가 'floating'으로 변경되었습니다.숫자형 z-index에서 의미있는 문자열 식별자로 변경되어 스택 컨텍스트 관리가 개선되었습니다.
13-16: 모바일 대응이 적절히 구현되었습니다.모바일 화면에서:
- 패딩이 120px에서 80px로 조정
- 갭이 60px에서 40px로 조정
- 레이아웃이 column 방향으로 변경
- 적절한 패딩과 여백 조정
이러한 변경사항들이 모바일 환경에서 더 나은 사용자 경험을 제공할 것으로 보입니다.
Also applies to: 27-29, 50-55
apps/web/src/app/[locale]/shop/AuctionSection/index.tsx (2)
71-71: z-index가 'floating'으로 변경되었습니다.스택 컨텍스트 관리를 위해 숫자형 z-index에서 테마 기반 식별자로 변경되었습니다.
72-72: 모바일 화면에서 높이 값 검토가 필요합니다.고정된 높이 값(924px)은 모바일 기기에서 문제를 일으킬 수 있습니다. 반응형 높이 값 사용을 고려해보세요.
- height: '924px', + height: { + base: '924px', + _mobile: 'auto', + },apps/web/src/components/Select/Label.tsx (1)
39-39: 너비가 100%로 설정되어 반응형이 개선되었습니다.Select 컴포넌트의 라벨이 컨테이너의 전체 너비를 사용하도록 변경되어 모바일 환경에서의 사용성이 향상되었습니다.
apps/web/src/components/Slider/PerspectiveCenterSlider.tsx (2)
58-58: z-index 테마 기반 접근 방식으로의 전환을 승인합니다.숫자 값에서 의미론적 문자열로의 전환이 코드의 가독성과 유지보수성을 향상시킵니다.
68-72: 모바일 대응이 적절히 구현되었습니다.화살표 크기가 모바일 화면에 맞게 적절히 조정되었습니다.
apps/web/src/app/[locale]/landing/AvailablePetSection/AnimalSliderContainer.tsx (2)
56-56: z-index 값의 테마 기반 변경을 승인합니다.'floating' 값으로의 전환이 일관된 레이어 관리를 가능하게 합니다.
81-84: 모바일 반응형 처리가 적절합니다.슬라이더 컨테이너의 크기가 모바일 화면에 맞게 조정되었습니다.
apps/web/src/app/[locale]/shop/AuctionSection/Background.tsx (2)
36-36: z-index의 테마 기반 전환이 일관되게 적용되었습니다.'base' 값으로의 전환이 배경 요소의 레이어 관리를 명확하게 합니다.
Also applies to: 79-79
77-100: 모바일 화면에 대한 대응이 필요할 수 있습니다.배경 이미지와 애니메이션에 대한 모바일 대응이 없습니다. 작은 화면에서의 표시 방식을 검토해주세요.
모바일 화면에서 배경 이미지가 적절히 표시되는지 확인이 필요합니다.
apps/web/src/app/[locale]/mypage/layout.tsx (2)
64-64: z-index 테마 기반 변경이 적절합니다.레이아웃의 레이어 관리가 'floating' 값으로 명확해졌습니다.
71-76: 모바일 대응이 포괄적으로 구현되었습니다.그리드 레이아웃이 모바일에 맞게 적절히 조정되었습니다. 다만, TODO 주석에서 언급된 태블릿 대응도 고려해보시면 좋겠습니다.
태블릿 화면 크기에서의 레이아웃 테스트가 필요합니다.
apps/web/src/app/[locale]/guild/_components/GuildCard.tsx (1)
54-56: 모바일 레이아웃의 여백을 확인해주세요.
calc(100vw - 40px)는 양쪽에 20px의 여백을 가정합니다. 부모 컨테이너의 패딩과 일치하는지 확인이 필요합니다.apps/web/src/app/[locale]/event/(halloween)/Content.tsx (1)
65-65: z-index 값의 테마 기반 관리로의 전환이 잘 이루어졌습니다.숫자 값에서 의미론적 문자열(
floating,base)로의 전환이 명확하게 이루어졌습니다.Also applies to: 114-114
apps/web/src/app/[locale]/shop/PetGotcha/PetGotcha.tsx (1)
85-85: z-index 값의 의미가 명확해졌습니다.
-1에서'hide'로의 변경으로 z-index의 목적이 더 명확해졌습니다.apps/web/src/app/[locale]/landing/AvailablePetSection/AnimalSliderContainerMobile.tsx (2)
107-107: z-index 토큰 변경이 적절히 적용되었습니다.
zIndex: 'floating'값이 슬라이더 화살표의 용도에 맞게 잘 적용되었습니다.
86-89: 모바일 반응형 스타일이 잘 구현되었습니다.버튼 크기가 모바일 환경에 맞게 적절히 조정되었습니다.
apps/web/src/components/GNB/Notification/InboxList.tsx (1)
62-62: z-index 토큰 변경이 적절히 적용되었습니다.
zIndex: 'popover'값이 알림 목록의 용도에 맞게 잘 적용되었습니다.apps/web/src/components/GNB/LanguageSelector.tsx (1)
65-65: z-index 토큰들이 적절히 적용되었습니다.
zIndex: 'dropdown'과zIndex: 'drawer'값들이 각각의 용도에 맞게 잘 적용되었습니다.Also applies to: 121-121
apps/web/src/components/GNB/DesktopGNB.tsx (2)
81-81: z-index 토큰 변경이 적절히 적용되었습니다.
zIndex: 'header'값이 GNB의 용도에 맞게 잘 적용되었습니다.
119-121: 모바일 대응이 잘 구현되었습니다.데스크톱 GNB를 모바일에서 숨기는 처리가 적절히 되어있습니다.
apps/web/src/app/[locale]/landing/MainSection/MainSlider.tsx (1)
142-142: z-index 값의 시맨틱한 변경을 승인합니다.숫자 값에서 의미론적인 'floating' 값으로의 변경은 코드의 가독성과 유지보수성을 향상시킵니다.
apps/web/src/app/[locale]/shop/BackgroundSection/BackgroundSection.tsx (2)
82-82: TODO 주석에 대한 후속 조치가 필요합니다.이벤트 배경 타입이 비어있는 상태로 TODO 주석이 남아있습니다. 이벤트 배경 타입을 정의하거나 관련 로직을 구현해야 합니다.
이벤트 배경 타입 구현을 위한 이슈를 생성하시겠습니까?
115-115: z-index 값의 시맨틱한 변경을 승인합니다.숫자 값에서 의미론적인 'floating' 값으로의 변경은 일관된 z-index 관리를 가능하게 합니다.
apps/web/src/app/[locale]/guild/page.tsx (3)
82-90: Box 컴포넌트를 사용한 레이아웃 개선을 승인합니다.flex 속성을 가진 Box 컴포넌트의 도입으로 레이아웃 구조가 더 명확해졌습니다.
147-152: 모바일 반응형 스타일 개선을 승인합니다.적절한 패딩 값 조정으로 모바일 화면에서의 레이아웃이 개선되었습니다.
161-162: 모바일 그리드 레이아웃 개선을 승인합니다.모바일 화면에서 단일 컬럼 레이아웃으로 변경하여 가독성이 향상되었습니다.
apps/web/src/components/GNB/MobileGNB.tsx (2)
39-39: 헤더 높이 스페이서 추가를 승인합니다.고정된 헤더로 인한 콘텐츠 가림 현상을 방지하기 위한 적절한 스페이서가 추가되었습니다.
137-137: z-index 값들의 시맨틱한 변경을 승인합니다.
- 헤더의 z-index를 'header'로 변경
- 메뉴의 z-index를 'drawer'로 변경
이러한 의미론적 값의 사용으로 컴포넌트 간의 계층 구조가 더 명확해졌습니다.
Also applies to: 161-161
apps/web/src/components/Global/FeedbackForm.tsx (3)
186-191: 모바일 대응을 위한 스케일 조정이 적용됨피드백 아이콘의 모바일 대응이 적절하게 구현되었습니다.
203-211: z-index 값이 테마 기반으로 변경되고 모바일 스타일이 추가됨z-index 값이 숫자에서 테마 기반 문자열로 변경되어 일관성이 개선되었습니다. 모바일 화면에서의 레이아웃도 적절하게 조정되었습니다.
254-256: 모바일에서의 간격이 조정됨모바일 화면에서 폼 요소들 간의 간격이 적절하게 조정되었습니다.
apps/web/src/app/globals.css (1)
40-44: 모바일 헤더 높이를 위한 CSS 변수가 추가됨모바일 헤더의 높이를 CSS 변수로 관리하도록 개선되었습니다. 이는 유지보수성과 일관성을 향상시킵니다.
apps/web/messages/ko_KR.json (1)
160-161: 길드 기능 관련 메시지가 추가됨새로운 길드 기능에 대한 알림 메시지가 적절하게 추가되었습니다.
apps/web/messages/en_US.json (1)
158-159: 영문 길드 기능 메시지가 한글 버전과 일관되게 추가됨한글 버전과 동일한 의미를 가지는 영문 메시지가 적절하게 추가되었습니다.
| import { BannerPetSelectMedium } from '@gitanimals/ui-panda'; | ||
| import { UsersRoundIcon } from 'lucide-react'; | ||
|
|
||
| import { USER_GITHUB_URL } from '@/constants/route'; | ||
| import { getPersonaImage } from '@/utils/image'; | ||
|
|
||
| export function GuildPeopleList({ members, leader }: { members: GuildMember[]; leader: GuildLeader }) { | ||
| const isMobile = useIsMobile(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
사용되지 않는 변수를 제거해주세요.
isMobile 변수가 선언되었지만 사용되지 않습니다.
- const isMobile = useIsMobile();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const isMobile = useIsMobile(); |
💡 기능
🔎 기타
Summary by CodeRabbit