feature: prettier 추가 & eslint와 통합

[caseBread]

이슈 넘버

• close prettier추가 #8

구현 사항

• prettier 추가
• eslint 와 prettier연동

📸 스크린샷

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 @caseBread, 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은 프로젝트에 Prettier를 도입하여 코드 서식의 일관성을 확보하고, 이를 ESLint와 통합하여 개발자들이 정의된 스타일 가이드를 준수하도록 합니다. 이는 코드베이스의 가독성과 유지보수성을 향상시키는 데 기여할 것입니다.

Highlights

• Prettier 설정 추가: 코드 일관성을 위해 .prettierrc 파일을 추가하여 세미콜론 사용, 작은따옴표 사용, JSX 작은따옴표 사용, 후행 쉼표, 탭 너비, 인쇄 너비 등 Prettier의 서식 규칙을 정의했습니다.
• ESLint와 Prettier 통합: ESLint 설정 파일(eslint.config.mjs)에 plugin:prettier/recommended를 추가하여 Prettier를 ESLint와 통합했습니다. 이를 통해 ESLint가 Prettier의 서식 규칙을 따르도록 강제하여 코드 스타일 일관성을 유지합니다.
• 새로운 개발 의존성 추가: package.json에 prettier, eslint-config-prettier, eslint-plugin-prettier를 개발 의존성으로 추가하고, pnpm-lock.yaml 파일을 업데이트하여 관련 패키지들을 포함시켰습니다.
• 기존 코드 서식 적용: 새로운 Prettier 규칙에 따라 eslint.config.mjs, next.config.ts, postcss.config.mjs, src/app/layout.tsx, src/app/page.tsx 파일의 문자열 리터럴을 큰따옴표에서 작은따옴표로 변경하는 등 기존 코드에 서식을 적용했습니다.

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

Prettier를 도입하고 ESLint와 통합하여 코드 스타일을 일관되게 유지하도록 설정한 점이 좋습니다. 전반적으로 변경 사항은 정확하며, 프로젝트의 코드 품질 향상에 기여할 것입니다. 한 가지 개선점으로, Prettier가 의도치 않은 파일을 포맷하지 않도록 .prettierignore 파일을 추가하는 것을 제안합니다. 자세한 내용은 관련 파일에 남긴 코멘트를 참고해주세요.

[gemini-code-assist]

Prettier를 프로젝트에 추가하신 것을 환영합니다! Prettier가 의도치 않은 파일들(예: 빌드 결과물, node_modules)을 포맷팅하는 것을 방지하기 위해, 프로젝트 루트에 .prettierignore 파일을 추가하는 것을 강력히 권장합니다. ESLint의 ignores 설정은 Prettier CLI를 직접 실행할 때는 적용되지 않기 때문입니다.

다음과 같은 내용으로 .prettierignore 파일을 생성할 수 있습니다:

# Build output
.next/
out/
build/

# Dependencies
node_modules/

# Lock files
pnpm-lock.yaml
package-lock.json
yarn.lock

# Others
next-env.d.ts

[dasosann]

p5 논의했던 부분 그대로 잘 들어있는 것 같습니다!

[dasosann]

p5 prettier 설치한부분 확인했습니다! 따로 특별한 내용은 없어서 merge 하셔도 될 것 같습니다

[dasosann]

merge 해도 문제없을 것 같습니다!