신입 프론트엔드 개발자 코딩 테스트

안녕하세요! 코딩 테스트에 참여해주셔서 감사합니다.

• 본 프로젝트를 Fork하여 작업 후, 완료되면 Pull Request를 생성해 주세요.
• 문제 풀이 기준 시간은 1시간 입니다. 시간이 부족하신 경우 좀 더 진행하셔도 됩니다.
• 단, 초과된 시간에 대해서는 평가에 반영될 수 있습니다.

준비하기

1. 프로젝트 클론

먼저 이 저장소를 개인 Github 계정으로 Fork 하여 로컬 환경으로 클론합니다.

2. 의존성 설치 및 실행

• 프로젝트에 필요한 모든 의존성을 설치합니다.

npm install

• 개발 서버를 실행하여 브라우저에서 과제를 확인합니다.

npm run dev

3. 테스트 실행

• 제공된 Unit Test를 실행하여 데이터 조작 및 버그 수정 문제의 정답 여부를 확인할 수 있습니다.
• Visual Source Code 사용시 Vitest 확장프로그램을 설치하시면 좀 더 편리하게 테스트를 확인 하실 수 있습니다.

npm run test

---

과제 안내

이 코딩 테스트는 총 5개의 과제로 구성되어 있습니다. 각 과제는 상단의 탭을 통해 확인할 수 있습니다.

과제 1: UI 리팩토링

파일 위치: src/components/UserProfile.tsx

• 단일 컴포넌트를 여러 개의 작은 재사용 가능한 컴포넌트로 분리하는 과제입니다.
• 자세한 요구사항은 해당 파일 내의 주석을 참고해주세요.

과제 2: Debounce 함수 구현

파일 위치: src/utils/debounce.ts

• 연속적인 이벤트를 그룹화하여 마지막 호출만 실행하는 debounce 함수를 직접 구현하는 과제입니다.
• 자세한 요구사항은 해당 파일 내의 주석을 참고해주세요.

과제 3: 데이터 조작

파일 위치: src/utils/dataUtils.ts

• 이 과제는 다양한 데이터 처리 함수를 구현하는 과제입니다.
• 요구사항에 맞게 각 함수를 완성하여, 미리 작성된 Unit Test(npm test)를 모두 통과시켜야 합니다.
• 일부 결과는 UI에 연동되어 시각적으로 확인할 수 있습니다.

과제 4: 버그 수정

파일 위치: src/components/BuggyCart.tsx

• React 관련 버그를 수정하는 과제입니다.
• 수량 변경 시 총가격이 즉시 업데이트되지 않는 문제를 해결해야 합니다.
• 자세한 버그 시나리오와 해결 요구사항은 해당 파일 내의 주석을 참고해주세요.

과제 5: 코드 리뷰

파일 위치: src/components/CodeReviewChallenge.tsx

• 주어진 컴포넌트 코드의 문제점(가독성, 성능, 안정성 등)을 파악하고, 코드 리뷰를 주석으로 작성하는 과제입니다.
• 3개 이상의 유의미한 리뷰를 작성하길 기대합니다.
• 자세한 요구사항은 파일 내 주석을 참고해주세요.

---

제출 방법

1. 커밋은 해결한 문제별로 나누어서 기록하세요.
2. 테스트가 완료되면 마지막에 PR을 만들어 주세요.
3. PR 제목은 FE채용코딩테스트 <이름> 형식으로 작성해 주세요.

시작

• 본 내용을 모두 읽고 시작할 준비가 되셨으면 [x] 로 체크 하여 커밋후 시작해주세요.
• 첫 커밋을 시작으로 시간을 측정합니다.