Chore/ 환경 설정

[dasosann]

요약

구현 사항

• 폰트 설정
• shadcn 설치
• max-w 설정
• metadata 설정

📸 스크린샷

Need Review

• ~ 부분 이렇게 구현했어요, 피드백 부탁해요!

Reference

📜 리뷰 규칙

Reviewer는 아래 P5 Rule을 참고하여 리뷰를 진행합니다.
P5 Rule을 통해 Reviewer는 Reviewee에게 리뷰의 의도를 보다 정확히 전달할 수 있습니다.

• P1: 꼭 반영해주세요 (Comment)
• P2: 적극적으로 고려해주세요 (Comment)
• P3: 웬만하면 반영해 주세요 (Comment)
• P4: 반영해도 좋고 넘어가도 좋습니다 (Approve)
• P5: 그냥 사소한 의견입니다 (Approve)

[gemini-code-assist]

Summary of Changes

Hello @dasosann, 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은 프로젝트의 초기 개발 환경을 설정하고 전반적인 사용자 경험을 개선하는 데 중점을 둡니다. 코드 일관성을 위한 포맷터 설정부터, 시각적 통일성을 위한 폰트 및 테마 시스템 도입, 그리고 SEO 및 반응형 디자인을 위한 메타데이터 및 레이아웃 조정까지 다양한 기반 작업을 포함합니다. 또한, 향후 UI 개발을 위한 shadcn/ui 라이브러리 통합 준비도 진행되었습니다.

Highlights

• 개발 환경 설정 파일 추가: .vscode/settings.json 파일을 추가하여 Prettier를 이용한 저장 시 자동 코드 포맷팅을 설정했습니다.
• 전역 스타일 및 테마 업데이트: app/globals.css 파일에 새로운 CSS 변수들을 정의하여 테마 시스템을 구축하고, 다크 모드 지원을 위한 변수들을 추가했습니다. 또한 tw-animate-css를 임포트했습니다.
• 레이아웃 및 메타데이터 개선: app/layout.tsx 파일에서 기본 폰트를 로컬 Pretendard 폰트로 변경하고, 웹사이트의 메타데이터(제목, 설명, 키워드, OpenGraph, 뷰포트)를 상세하게 설정했습니다. 또한, 반응형 디자인을 위한 태그의 스타일을 조정했습니다.
• shadcn/ui 설정 추가: components.json 파일을 추가하여 shadcn/ui 컴포넌트 라이브러리 설정을 초기화했습니다.
• 유틸리티 함수 도입: lib/utils.ts 파일을 추가하여 clsx와 tailwind-merge를 결합한 cn 유틸리티 함수를 제공합니다.
• 의존성 업데이트: package.json 및 pnpm-lock.yaml 파일에 class-variance-authority, clsx, lucide-react, tailwind-merge, tw-animate-css, husky, lint-staged 등 새로운 라이브러리 의존성을 추가했습니다.

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 잘 보았습니다. Pretendard 폰트 설정, shadcn/ui 연동, 기본 레이아웃 및 메타데이터 설정 등 프로젝트의 기반을 잘 다져주셨습니다.

몇 가지 코드 개선 및 접근성 관련하여 리뷰 코멘트를 남겼습니다.

• app/layout.tsx: 사용자의 화면 확대 기능을 막는 viewport 설정은 접근성에 치명적이므로 수정이 필요합니다.
• app/globals.css: 모든 요소에 보더를 적용하는 전역 스타일은 잠재적인 문제를 일으킬 수 있어 수정을 제안합니다.
• app/page.tsx: Tailwind CSS 클래스 사용 시 테마 값을 활용하여 일관성을 높이는 방향을 제안합니다.

확인 후 반영 부탁드립니다.

[gemini-code-assist]

viewport 메타데이터에 user-scalable=false와 maximum-scale=1이 설정되어 있습니다. 이 설정은 사용자가 페이지를 확대하는 것을 막아, 저시력 사용자 등에게 큰 접근성 문제를 야기합니다. 웹 접근성 표준에 따라 사용자의 확대/축소 기능을 막지 않는 것이 강력히 권장됩니다.

  viewport: {
    width: "device-width",
    initialScale: 1,
  },