Conversation
- 활성/비활성 상태 전환 시 layout shift 방지를 위해 투명 테두리 적용 - 스크린 리더 지원을 위한 aria 속성 추가
header가 children 앞에 오는게 더 자연스럽게 느껴져서 옮겼습니다.
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
SSoT 원칙에 의거하여 탭 데이터(TABS)와 타입(Tab)을 분리하였습니다.
Summary of ChangesHello @AndyH0ng, I'm Gemini Code Assist1! 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은 애플리케이션의 공통 레이아웃 컴포넌트(헤더, GNB, 전체 레이아웃)를 개발하여 UI의 일관성과 재사용성을 확보하는 것을 목표로 합니다. 또한, 폰트 로딩 최적화 및 ESLint 설정 업데이트를 통해 개발 환경의 품질을 향상시키고, Copilot 코드 리뷰 지침을 상세하게 업데이트하여 코드 품질 및 개발 표준을 강화했습니다. Highlights
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이번 PR은 공통 레이아웃 컴포넌트(Header, GNB, Layout)를 구현하고 관련 설정을 개선하는 중요한 변경사항을 담고 있습니다. 전반적으로 코드 품질이 우수하며, 특히 폰트 로딩 최적화와 Copilot 지침 업데이트는 프로젝트의 기반을 튼튼하게 만드는 좋은 시도입니다. 몇 가지 유지보수성 및 타입 안정성 향상을 위한 제안 사항을 리뷰 댓글로 남겼습니다. constants/navigation.ts에서 as const를 사용하여 타입을 데이터로부터 추론하게 하고, layout 모듈의 API를 명확히 하는 부분을 확인해주시면 좋겠습니다. 수고하셨습니다!
There was a problem hiding this comment.
Pull request overview
이 PR은 공통 레이아웃 컴포넌트를 개발하고 폰트 로딩 방식을 최적화합니다.
- Header, GNB, Layout 컴포넌트 구현 및 재사용 가능한 구조 설계
- 폰트 로딩을 CSS import에서 HTML head로 이동하고 preconnect 적용
- Copilot 코드 리뷰 지침을 TailwindCSS와 디자인 토큰 사용 중심으로 업데이트
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
src/components/layout/Layout.tsx |
전체 레이아웃 컴포넌트 추가 (header와 main 영역 구조 제공) |
src/components/layout/Header.tsx |
고정 헤더 컴포넌트 추가 |
src/components/layout/GNB.tsx |
탭 기반 Global Navigation Bar 컴포넌트 추가 |
src/components/layout/index.ts |
레이아웃 컴포넌트들의 named export 제공 |
src/constants/navigation.ts |
탭 타입과 탭 목록 상수 정의 |
src/styles/index.css |
fonts.css import 제거 (HTML head로 이동) |
src/styles/fonts.css |
폰트 import CSS 파일 삭제 |
index.html |
폰트를 head에서 직접 로드하도록 변경 및 preconnect 최적화 추가 |
.github/copilot-instructions.md |
기술 스택, 스타일링, 폴더 구조 등 상세 가이드라인 추가 |
.eslintrc |
TypeScript ESLint typed linting을 위한 project 설정 추가 |
.github/PULL_REQUEST_TEMPLATE.md |
템플릿 형식 개선 |
.github/ISSUE_TEMPLATE/feature-request.md |
템플릿 형식 개선 |
.github/ISSUE_TEMPLATE/bug-report.md |
템플릿 형식 개선 |
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
CI 체크 Fail은 PR 참고사항 2번에 의한 것이므로 무시하고 머지하겠습니다! |
📌 관련 이슈
✨ 변경 내용
💡 참고 사항
폰트 로딩을
head에서 불러오는 방식으로 리팩토링하고,preconnect를 통해 성능 최적화를 꾀했습니다. 참고@typescript-eslint/naming-convention룰이 타입 정보를 필요로 해서parserOptions.project설정을 추가했습니다. 참고Copilot 코드 리뷰 지침을 TailwindCSS와 디자인 토큰을 적극 사용하도록 업데이트했습니다.
React Router를 통해 라우팅 작업 진행할 예정입니다.