[Feat/#9] svgr setting

[ahcgnoej]

📝 요약

• SVG 아이콘을 React 컴포넌트로 import하여 사용할 수 있도록 SVGR 및 아이콘 index 자동 생성 스크립트를 추가했습니다.

⚙️ 작업 내용

• SVG → React 컴포넌트 변환 설정
• icons 폴더 기준으로 index.ts를 자동 생성하는 스크립트 추가
• package.json에 아이콘 생성 명령어 등록

🔗 관련 이슈

• Closes [FEAT/#9] SVG 컴포넌트화 환경 구축 #9

✅ 체크리스트

• 코딩 컨벤션(Biome/Lint)을 준수하였습니다.
• 모든 타입 에러를 해결하였습니다. (Typecheck)
• 변경 사항에 대한 테스트를 마쳤습니다.
• 불필요한 로그(console.log)를 제거하였습니다.

💬 리뷰어에게

사용법

1. SVG 파일을 src/shared/assets/icons 폴더에 추가합니다.
   예: check-icon.svg

2. 아래 명령어를 실행합니다.

   yarn icons
   

   → 스크립트가 실행되면서 icons/index.ts가 자동 생성/갱신됩니다.

3. 생성된 아이콘을 컴포넌트처럼 import하여 사용합니다.

   import { CheckIcon } from "@/shared/assets/icons";

4. React 컴포넌트처럼 props를 전달하여 사용할 수 있습니다.

   <CheckIcon width={40} height={40} />

[github-actions]

Thanks for the contribution!
I have applied any labels matching special text in your title and description.

Please review the labels and make any necessary changes.

[gemini-code-assist]

Summary of Changes

Hello @ahcgnoej, 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!

이 Pull Request는 애플리케이션에서 SVG 아이콘을 React 컴포넌트처럼 쉽게 사용할 수 있도록 지원하는 기능을 도입합니다. SVGR을 통합하여 SVG 파일을 React 컴포넌트로 변환하고, 아이콘 에셋 추가 및 관리를 간소화하기 위한 자동화된 스크립트를 구현하여 개발 워크플로우를 개선합니다.

Highlights

• SVGR 설정 추가: SVG 아이콘을 React 컴포넌트로 사용할 수 있도록 SVGR 설정을 추가했습니다.
• 아이콘 인덱스 자동 생성 스크립트 도입: src/shared/assets/icons 폴더 내 SVG 파일들을 자동으로 감지하여 index.ts 파일을 생성하는 스크립트를 도입했습니다.
• 아이콘 생성 명령어 추가: 아이콘 생성 및 갱신을 위한 yarn icons 명령어를 package.json에 추가했습니다.

Changelog

• declarations.d.ts
  • SVG 모듈에 대한 타입 선언 파일을 추가했습니다.
• metro.config.js
  • Metro 번들러가 SVG 파일을 React 컴포넌트로 처리하도록 react-native-svg-transformer 설정을 추가했습니다.
• package.json
  • Biome 린트/수정/포맷 명령어가 전체 프로젝트를 대상으로 하도록 업데이트했습니다.
  • 아이콘 생성 스크립트를 실행하는 icons 명령어를 추가했습니다.
  • react-native-svg 의존성을 추가했습니다.
  • concurrently 및 react-native-svg-transformer 개발 의존성을 추가했습니다.
• scripts/generate-icons.js
  • SVG 아이콘의 index.ts 파일을 자동으로 생성하고 변경 사항을 감지하는 새 스크립트를 추가했습니다.
• src/app/(tabs)/index.tsx
  • 예시로 CheckIcon 컴포넌트를 가져와 사용했습니다.
• src/shared/assets/icons/check-icon.svg
  • 샘플 SVG 아이콘을 추가했습니다.
• src/shared/assets/icons/index.ts
  • SVG 컴포넌트 내보내기를 위한 인덱스 파일을 추가했습니다.
• src/shared/utils/formatDate.ts
  • 파라미터 옵션 포맷팅을 조정했습니다.
• tailwind.config.js
  • 폰트 패밀리 배열 정의를 리팩토링했습니다.
• tsconfig.json
  • 새로운 선언 파일을 포함했습니다.
• yarn.lock
  • 다양한 패키지 의존성을 업데이트했습니다.

Activity

• PR 작성자 ahcgnoej가 Pull Request를 생성했습니다.
• 새로운 기능과 설정을 도입했습니다.
• 작성자는 코딩 컨벤션, 타입 에러, 테스트를 확인하고 불필요한 로그를 제거했습니다.
• PR 설명에 사용법 지침이 제공되었습니다.

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

SVG 아이콘을 React 컴포넌트로 사용할 수 있도록 SVGR 설정을 추가하고, 아이콘 인덱스를 자동으로 생성하는 스크립트를 구현하신 점이 인상적입니다. 전체적으로 코드 변경 사항은 명확하고 목적에 부합합니다. 다만, 아이콘 생성 스크립트(scripts/generate-icons.js)가 예상과 다르게 계속 실행되는 문제가 있어 이에 대한 리뷰 의견을 남겼습니다. 해당 부분을 수정하면 더 완벽한 PR이 될 것 같습니다.

[eunhyekimyeah]

아이콘 관련 세팅해주셔서 감사합니다. 일단 머지 전에는 임시 아이콘을 사용하겠습니답

[taegeon2]

아이콘 셋팅 해주시느라 고생하셨습니다!!