김여진 week01

[duwlsl]

작업 내용

Figma 시안을 기반으로 React와 TypeScript를 사용해 포켓몬 카드 화면을 구현했습니다.

변경 사항

• Vite 기반 React + TypeScript 프로젝트를 세팅했습니다.
• Vite 기본 예제 코드와 사용하지 않는 에셋을 정리했습니다.
• PokemonHeader, PokemonList, PokemonCard 컴포넌트를 분리했습니다.
• 포켓몬 데이터를 배열로 관리하고 map()과 props를 사용해 카드 4개를 렌더링했습니다.
• JSX의 Curly Braces를 사용해 텍스트, 이미지 경로, alt 속성 등을 바인딩했습니다.
• Figma 시안에 맞춰 spacing, typography, color, radius, shadow를 적용했습니다.
• 작은 화면에서도 가로 스크롤이 발생하지 않도록 반응형 스타일을 적용했습니다.
• npm run lint와 npm run build가 정상적으로 통과하는 것을 확인했습니다.

스크린샷

화면	이미지
메인 화면

참고 사항

• 이번 과제는 UI 구현 범위로, 검색과 버튼의 실제 동작은 구현하지 않았습니다.
• Figma의 PC 화면인 1440×1024 CSS viewport를 기준으로 확인했습니다.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 8a03ae36-4bc9-42a0-81a0-5a77e923a5ac

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[canofmato]

여진님 수고하셨습니다! PokemonHeader, PokemonList, PokemonCard로 역할을 나누고 배열과 map, props를 사용해 반복 UI를 구성한 점이 좋습니다!!👍🏻