feat: Layout 컴포넌트 추가

[youngminss]

🎯 PR 제목

feat: Layout 시스템 초기화 및 모바일 최적화

📑 작업 상세 내역

• Layout 컴포넌트 구조 생성

  • Root: 최대 너비 430px, 중앙 정렬, 동적 뷰포트 높이 적용
  • Header: Fixed positioning, 상단 고정, z-index 적용
  • Content: Header/Footer 높이만큼 padding 적용
  • Footer: Fixed positioning, 하단 고정, Safe Area 지원, z-index 적용

• src/styles/layout.css 레이아웃 변수 정의

  • --max-width-root-layout: 430px (모바일/PC 공통 최대 너비)
  • --spacing-layout-header-height: 48px
  • --spacing-layout-footer-height: calc(72px + env(safe-area-inset-bottom))
  • min-h-screen-dynamic utility: 동적 뷰포트 높이 (100vh → 100dvh)

• src/styles/dimension.css z-index 변수 정의

  • --z-index-layout-header: 9
  • --z-index-layout-footer: 9

• app/layout.tsx viewport 설정 추가

  • viewportFit: "cover" 설정으로 Safe Area 지원

• app/globals.css 스타일 파일 import 추가

  • layout.css, dimension.css import

🙏 리뷰 요청 사항

• z-index 값(9)이 적절한지 확인 (다른 컴포넌트와의 레이어링 고려)
• 430px 최대 너비가 디자인 시안과 일치하는지 확인
• 모바일 브라우저(에코 브라우저 등)에서 동적 뷰포트 높이가 올바르게 작동하는지 확인
• Safe Area가 올바르게 적용되는지 (iPhone X 이후 기기에서 테스트)

📃 참고 자료

• Layout Figma

🖼️ 작업 결과물

[gemini-code-assist]

Summary of Changes

Hello @youngminss, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 애플리케이션의 페이지에 일관된 구조적 기반을 제공하는 BaseLayout 컴포넌트를 도입하여 전반적인 유지보수성과 반응형 디자인을 향상시킵니다. 또한, 모바일 환경에 최적화된 동적 뷰포트 높이와 최대 너비 설정을 위한 새로운 CSS 유틸리티를 포함하여, 사용자 인터페이스의 안정성과 예측 가능성을 높이는 데 중점을 둡니다.

Highlights

• 새로운 Layout 컴포넌트 추가: 페이지의 구조적 일관성을 제공하는 BaseLayout 컴포넌트가 src/components/layout 경로에 새로 추가되었습니다.
• 페이지 구조 리팩토링: app/page.tsx 파일이 기존의 RadiusExample 컴포넌트 사용을 중단하고 새로 추가된 BaseLayout 컴포넌트를 활용하도록 변경되었습니다.
• 레이아웃 관련 CSS 스타일 도입: 동적 뷰포트 높이(min-h-screen-dynamic)와 최대 레이아웃 너비(--max-width-root-layout)를 정의하는 새로운 layout.css 파일이 추가되고 전역 CSS에 임포트되었습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이 PR은 BaseLayout 컴포넌트를 추가하고 이를 app/page.tsx에 적용하는 변경 사항을 담고 있습니다. 새로운 레이아웃 컴포넌트와 관련 스타일(CSS) 추가는 잘 이루어졌습니다. 코드의 명확성과 유지보수성을 높이기 위해 몇 가지 개선 사항을 제안합니다. BaseLayout 컴포넌트의 props 타입을 더 명확하게 정의하고, page.tsx의 반복적인 JSX 구조를 리팩토링하는 것을 고려해 보세요.

[gemini-code-assist]

컴포넌트의 props 타입을 인라인으로 정의하는 것보다 React.PropsWithChildren을 사용하거나 별도의 type 또는 interface로 분리하여 정의하는 것이 더 명확하고 재사용성이 높습니다. React.PropsWithChildren을 사용하면 children prop의 타입을 간결하게 정의할 수 있습니다.

Suggested change

	export const BaseLayout = ({ children }: { children: React.ReactNode }) => {
	export const BaseLayout = ({ children }: React.PropsWithChildren) => {

[youngminss]

@RookieAND
prettier job 만 수정해봤는데 확인만 해주고, 리뷰하고 merge 해서 main 에 싹다 합치고 광인이 작업 이어서 할거면 해 !

[RookieAND]

좋아! 내가 보기에는 문제되는 부분은 없어보이네. 바로 병합해줘!