Skip to content

Comments

[fix] pwa layout 수정#489

Merged
inyminymoe merged 3 commits intoKernel360:developfrom
geumyoung00:fix/pwa-layout-#487
Aug 5, 2025
Merged

[fix] pwa layout 수정#489
inyminymoe merged 3 commits intoKernel360:developfrom
geumyoung00:fix/pwa-layout-#487

Conversation

@geumyoung00
Copy link
Collaborator

@geumyoung00 geumyoung00 commented Aug 5, 2025

🚀 풀 리퀘스트 제안

📋 작업 내용

closes #487

🔧 변경 사항

  • 📃 README.md
  • 📦 package.json
  • 🔥 파일 삭제
  • 🧹 그 외 ex) .gitignore 등

주요 변경 사항을 요약해 주세요.

📸 스크린샷

📄 기타

추가적으로 전달하고 싶은 내용이나 특별한 요구 사항이 있으면 작성해 주세요.

Sourcery에 의한 요약

새로운 Container 컴포넌트에 패딩 및 래퍼 로직을 중앙 집중화하고, 내비게이션 및 헤더 위치를 업데이트하며, 업데이트된 구조를 사용하도록 페이지 및 레이아웃 파일을 리팩토링하여 PWA 레이아웃 불일치를 수정합니다.

버그 수정:

  • 이슈 #487을 닫아 PWA 레이아웃 문제 해결

개선 사항:

  • noNav/noHead 변형 및 안전 영역 인셋을 인식하는 패딩을 가진 Container 컴포넌트 도입
  • 새로운 Container를 사용하여 콘텐츠를 감싸거나 풀도록 페이지 및 레이아웃 컴포넌트(chat, profile, auction, account, address, createAuction) 리팩토링
  • Navigation 및 HeaderWrapper를 절대 위치 지정 및 환경 안전 영역 패딩을 사용하도록 업데이트
  • 하단 안전 영역 인셋을 위한 pb-safe CSS 유틸리티 추가

잡무:

  • grid 클래스를 제거하고 크기 제약을 업데이트하여 RootLayout 컨테이너 단순화
  • 메뉴 목록 항목 및 로그아웃 버튼의 사소한 UI 간격 조정
Original summary in English

Summary by Sourcery

Fix PWA layout inconsistencies by centralizing padding and wrapper logic in a new Container component, updating navigation and header positioning, and refactoring page and layout files to use the updated structure

Bug Fixes:

Enhancements:

  • Introduce Container component with noNav/noHead variants and safe-area-inset-aware padding
  • Refactor page and layout components (chat, profile, auction, account, address, createAuction) to wrap or un-wrap content using the new Container
  • Update Navigation and HeaderWrapper to use absolute positioning and environment-safe-area padding
  • Add pb-safe CSS utility for bottom safe-area inset

Chores:

  • Simplify RootLayout container by removing grid classes and updating size constraints
  • Adjust minor UI spacing in menu-list items and the sign-out button

@geumyoung00 geumyoung00 requested a review from dolmeengii August 5, 2025 14:11
@sourcery-ai
Copy link
Contributor

sourcery-ai bot commented Aug 5, 2025

리뷰어 가이드

이 PR은 설정 가능한 noNav/noHead props를 사용하여 Container 컴포넌트를 확장하고, 개별 페이지의 수동 래퍼를 Container로 교체하며, 중복을 제거하기 위해 섹션 레이아웃을 다듬고, 일관된 위치 지정 및 안전 영역 지원을 위해 내비게이션 및 헤더 컴포넌트를 업데이트함으로써 앱 전반의 페이지 및 레이아웃 구조를 표준화합니다.

파일 수준 변경 사항

변경 사항 세부 정보 파일
Container 컴포넌트 noNav/noHead 플래그 및 안전 영역 지원으로 개선
  • Container API에 noNavnoHead props 도입
  • 동적 패딩을 위해 tailwind-variants를 사용하도록 Container 리팩토링
  • shared-stylesenv(safe-area-inset-bottom)를 위한 CSS 지원 추가
apps/web/src/components/layout/container.tsx
packages/tailwind-config/shared-styles.css
페이지 컴포넌트 콘텐츠를 Container로 래핑하도록 리팩토링
  • Q&A, 채팅, 경매 편집, 생성, 상세, 프로필, 위치 페이지를 Container로 래핑
  • 직접적인 div 래퍼를 Container 및 적절한 플래그로 교체
apps/web/app/profile/support/page.tsx
apps/web/app/chat/page.tsx
apps/web/app/auction/[id]/edit/page.tsx
apps/web/app/auction/createAuction/page.tsx
apps/web/app/auction/[id]/page.tsx
apps/web/app/chat/[id]/layout.tsx
apps/web/app/profile/location/page.tsx
apps/web/app/profile/page.tsx
중복 래퍼 제거를 통해 섹션 레이아웃 간소화
  • 계정, 주소, 채팅, 경매, 프로필 레이아웃에서 중첩된 Container 제거
  • 상대적 위치 지정을 사용하도록 RootLayout 컨테이너 구조 조정
apps/web/app/account/layout.tsx
apps/web/app/address/layout.tsx
apps/web/app/chat/layout.tsx
apps/web/app/auction/layout.tsx
apps/web/app/profile/layout.tsx
apps/web/app/layout.tsx
Navigation 컴포넌트 동작 및 위치 표준화
  • 내비게이션이 숨겨져야 할 때 빈 div 대신 null 반환
  • 안전 영역 패딩을 사용하여 내비게이션을 절대 위치로 업데이트
apps/web/src/components/layout/navigation.tsx
사소한 UI 스타일 및 임포트 개선 적용
  • HeaderWrapper를 절대 위치로 설정
  • menu-list의 패딩 조정 및 ButtonSignOut의 추가 마진 제거
  • account list 컴포넌트에서 useQueryClient 임포트 순서 변경
apps/web/src/components/layout/header/wrapper.tsx
apps/web/src/components/common/profile/menu-list.tsx
apps/web/src/components/user/button-sign-out.tsx
apps/web/src/components/personal-info/account/list.tsx

연결된 이슈에 대한 평가

Issue 목표 해결 여부 설명
#487 PWA 환경에서 스크롤 처리 문제를 수정하여 전체 페이지가 아닌 주요 콘텐츠 영역만 스크롤되도록 합니다.
#487 헤더와 내비게이션이 주요 콘텐츠와 함께 스크롤되지 않도록 절대 또는 고정 위치 지정을 사용하도록 설정합니다.
#487 올바른 레이아웃 및 스크롤 동작을 보장하기 위해 헤더 및 내비게이션 높이를 컨테이너 영역에 계산하여 적용합니다.

관련 가능성이 있는 이슈


팁 및 명령어

Sourcery와 상호 작용하기

  • 새로운 리뷰 트리거: 풀 리퀘스트에 @sourcery-ai review 댓글을 남기세요.
  • 논의 계속: Sourcery의 리뷰 댓글에 직접 답글을 달아주세요.
  • 리뷰 댓글에서 GitHub 이슈 생성: Sourcery에게 리뷰 댓글에서 이슈를 생성하도록 요청하려면 해당 댓글에 답글을 달아주세요. 또한 리뷰 댓글에 @sourcery-ai issue라고 답글을 달아 이슈를 생성할 수도 있습니다.
  • 풀 리퀘스트 제목 생성: 풀 리퀘스트 제목의 아무 곳에나 @sourcery-ai를 작성하여 언제든지 제목을 생성할 수 있습니다. 또한 풀 리퀘스트에 @sourcery-ai title 댓글을 달아 언제든지 제목을 (재)생성할 수 있습니다.
  • 풀 리퀘스트 요약 생성: 풀 리퀘스트 본문의 아무 곳에나 @sourcery-ai summary를 작성하여 원하는 위치에 언제든지 PR 요약을 생성할 수 있습니다. 또한 풀 리퀘스트에 @sourcery-ai summary 댓글을 달아 언제든지 요약을 (재)생성할 수 있습니다.
  • 리뷰어 가이드 생성: 풀 리퀘스트에 @sourcery-ai guide 댓글을 달아 언제든지 리뷰어 가이드를 (재)생성할 수 있습니다.
  • 모든 Sourcery 댓글 해결: 풀 리퀘스트에 @sourcery-ai resolve 댓글을 달아 모든 Sourcery 댓글을 해결할 수 있습니다. 이미 모든 댓글을 처리했고 더 이상 보고 싶지 않을 때 유용합니다.
  • 모든 Sourcery 리뷰 해제: 풀 리퀘스트에 @sourcery-ai dismiss 댓글을 달아 모든 기존 Sourcery 리뷰를 해제할 수 있습니다. 새로운 리뷰로 처음부터 시작하고 싶을 때 특히 유용합니다. 새로운 리뷰를 트리거하려면 @sourcery-ai review 댓글을 남기는 것을 잊지 마세요!

경험 맞춤 설정

대시보드에 접속하여 다음을 수행할 수 있습니다:

  • Sourcery가 생성한 풀 리퀘스트 요약, 리뷰어 가이드 등과 같은 리뷰 기능을 활성화 또는 비활성화합니다.
  • 리뷰 언어를 변경합니다.
  • 사용자 지정 리뷰 지침을 추가, 제거 또는 편집합니다.
  • 다른 리뷰 설정을 조정합니다.

도움 받기

Original review guide in English

Reviewer's Guide

This PR standardizes page and layout structures across the app by extending the Container component with configurable noNav/noHead props, replacing manual wrappers in individual pages with Container, refining section layouts to remove redundancies, and updating navigation and header components for consistent positioning and safe-area support.

File-Level Changes

Change Details Files
Enhanced Container component with noNav/noHead flags and safe-area support
  • Introduced noNav and noHead props to Container API
  • Refactored Container to use tailwind-variants for dynamic padding
  • Added CSS support for env(safe-area-inset-bottom) in shared-styles
apps/web/src/components/layout/container.tsx
packages/tailwind-config/shared-styles.css
Refactored page components to wrap content with Container
  • Wrapped Q&A, chat, auction edit, create, detail, profile, and location pages in Container
  • Replaced direct div wrappers with Container and appropriate flags
apps/web/app/profile/support/page.tsx
apps/web/app/chat/page.tsx
apps/web/app/auction/[id]/edit/page.tsx
apps/web/app/auction/createAuction/page.tsx
apps/web/app/auction/[id]/page.tsx
apps/web/app/chat/[id]/layout.tsx
apps/web/app/profile/location/page.tsx
apps/web/app/profile/page.tsx
Streamlined section layouts by removing redundant wrappers
  • Removed nested Container in account, address, chat, auction, and profile layouts
  • Adjusted RootLayout container structure to use relative positioning
apps/web/app/account/layout.tsx
apps/web/app/address/layout.tsx
apps/web/app/chat/layout.tsx
apps/web/app/auction/layout.tsx
apps/web/app/profile/layout.tsx
apps/web/app/layout.tsx
Standardized Navigation component behavior and positioning
  • Return null when navigation should be hidden instead of empty div
  • Updated nav to absolute positioning with safe-area padding
apps/web/src/components/layout/navigation.tsx
Applied minor UI style and import refinements
  • Set HeaderWrapper to absolute positioning
  • Adjusted padding in menu-list and removed extra margins in ButtonSignOut
  • Reordered useQueryClient import in account list component
apps/web/src/components/layout/header/wrapper.tsx
apps/web/src/components/common/profile/menu-list.tsx
apps/web/src/components/user/button-sign-out.tsx
apps/web/src/components/personal-info/account/list.tsx

Assessment against linked issues

Issue Objective Addressed Explanation
#487 Fix scroll handling issues in PWA environment so that only the main content area is scrollable, not the entire page.
#487 Set header and navigation to use absolute or fixed positioning to prevent them from scrolling with the main content.
#487 Calculate and apply header and navigation heights to the container area to ensure correct layout and scrolling behavior.

Possibly linked issues


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

안녕하세요 @geumyoung00님 - 변경 사항을 검토했습니다. 다음은 몇 가지 피드백입니다:

  • 컨테이너 컴포넌트 외부로 containerStyle에 대한 tv() 호출을 이동하여 모든 렌더링에서 변형이 다시 계산되는 것을 방지하세요.
  • 업데이트된 AuctionLayout을 검토하세요: ContainerNavigation 제거는 경매 페이지의 일관된 패딩 및 탐색을 손상시킬 수 있습니다—하위 페이지가 여전히 안전 영역 인셋을 올바르게 적용하는지 확인하세요.
  • 단일 자식을 감싸는 여러 개의 중복된 React 프래그먼트가 있습니다; <> </> 대신 자식 컴포넌트를 직접 반환하여 단순화할 수 있습니다.
AI 에이전트용 프롬프트
이 코드 검토의 의견을 처리해 주세요:
## 전체 의견
- 컨테이너 컴포넌트 외부로 `containerStyle`에 대한 `tv()` 호출을 이동하여 모든 렌더링에서 변형이 다시 계산되는 것을 방지하세요.
- 업데이트된 `AuctionLayout`을 검토하세요: `Container``Navigation` 제거는 경매 페이지의 일관된 패딩 및 탐색을 손상시킬 수 있습니다—하위 페이지가 여전히 안전 영역 인셋을 올바르게 적용하는지 확인하세요.
- 단일 자식을 감싸는 여러 개의 중복된 React 프래그먼트가 있습니다; `<> </>` 대신 자식 컴포넌트를 직접 반환하여 단순화할 수 있습니다.

Sourcery는 오픈 소스에 무료입니다 - 저희 리뷰가 마음에 드신다면 공유를 고려해 주세요 ✨
제가 더 유용해지도록 도와주세요! 각 댓글에 👍 또는 👎를 클릭해 주시면 피드백을 활용하여 리뷰를 개선하겠습니다.
Original comment in English

Hey @geumyoung00 - I've reviewed your changes - here's some feedback:

  • Move the tv() call for containerStyle outside of the Container component to avoid recomputing the variants on every render.
  • Review the updated AuctionLayout: removing Container and Navigation may break consistent padding and navigation for auction pages—make sure child pages still apply safe-area insets correctly.
  • There are several redundant React fragments wrapping single children; you can simplify by returning the child component directly instead of using <> </>.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Move the tv() call for containerStyle outside of the Container component to avoid recomputing the variants on every render.
- Review the updated AuctionLayout: removing Container and Navigation may break consistent padding and navigation for auction pages—make sure child pages still apply safe-area insets correctly.
- There are several redundant React fragments wrapping single children; you can simplify by returning the child component directly instead of using <> </>.

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@inyminymoe inyminymoe merged commit 1a82076 into Kernel360:develop Aug 5, 2025
2 checks passed
@geumyoung00 geumyoung00 deleted the fix/pwa-layout-#487 branch August 5, 2025 19:13
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.

[fix] layout PWA 기준으로 수정

2 participants