과제 체크포인트

배포 링크

• https://j2h30728.github.io/front_6th_chapter1-1/

기본과제

상품목록

상품 목록 로딩

• 페이지 접속 시 로딩 상태가 표시된다
• 데이터 로드 완료 후 상품 목록이 렌더링된다
• 로딩 실패 시 에러 상태가 표시된다
• 에러 발생 시 재시도 버튼이 제공된다

상품 목록 조회

• 각 상품의 기본 정보(이미지, 상품명, 가격)가 카드 형태로 표시된다

한 페이지에 보여질 상품 수 선택

• 드롭다운에서 10, 20, 50, 100개 중 선택할 수 있으며 기본 값은 20개 이다.
• 선택 변경 시 즉시 목록에 반영된다

상품 정렬 기능

• 상품을 가격순/인기순으로 오름차순/내림차순 정렬을 할 수 있다.
• 드롭다운을 통해 정렬 기준을 선택할 수 있다
• 정렬 변경 시 즉시 목록에 반영된다

무한 스크롤 페이지네이션

• 페이지 하단 근처 도달 시 다음 페이지 데이터가 자동 로드된다
• 스크롤에 따라 계속해서 새로운 상품들이 목록에 추가된다
• 새 데이터 로드 중일 때 로딩 인디케이터와 스켈레톤 UI가 표시된다
• 홈 페이지에서만 무한 스크롤이 활성화된다

상품을 장바구니에 담기

• 각 상품에 장바구니 추가 버튼이 있다
• 버튼 클릭 시 해당 상품이 장바구니에 추가된다
• 추가 완료 시 사용자에게 알림이 표시된다

상품 검색

• 상품명 기반 검색을 위한 텍스트 입력 필드가 있다
• 검색 버튼 클릭으로 검색이 수행된다
• Enter 키로 검색이 수행된다
• 검색어와 일치하는 상품들만 목록에 표시된다

카테고리 선택

• 사용 가능한 카테고리들을 선택할 수 있는 UI가 제공된다
• 선택된 카테고리에 해당하는 상품들만 표시된다
• 전체 상품 보기로 돌아갈 수 있다
• 2단계 카테고리 구조를 지원한다 (1depth, 2depth)

카테고리 네비게이션

• 현재 선택된 카테고리 경로가 브레드크럼으로 표시된다
• 브레드크럼의 각 단계를 클릭하여 상위 카테고리로 이동할 수 있다
• "전체" > "1depth 카테고리" > "2depth 카테고리" 형태로 표시된다

현재 상품 수 표시

• 현재 조건에서 조회된 총 상품 수가 화면에 표시된다
• 검색이나 필터 적용 시 상품 수가 실시간으로 업데이트된다

장바구니

장바구니 모달

• 장바구니 아이콘 클릭 시 모달 형태로 장바구니가 열린다
• X 버튼이나 배경 클릭으로 모달을 닫을 수 있다
• ESC 키로 모달을 닫을 수 있다
• 모달에서 장바구니의 모든 기능을 사용할 수 있다

장바구니 수량 조절

• 각 장바구니 상품의 수량을 증가할 수 있다
• 각 장바구니 상품의 수량을 감소할 수 있다
• 수량 변경 시 총 금액이 실시간으로 업데이트된다

장바구니 삭제

• 각 상품에 삭제 버튼이 배치되어 있다
• 삭제 버튼 클릭 시 해당 상품이 장바구니에서 제거된다

장바구니 선택 삭제

• 각 상품에 선택을 위한 체크박스가 제공된다
• 선택 삭제 버튼이 있다
• 체크된 상품들만 일괄 삭제된다

장바구니 전체 선택

• 모든 상품을 한 번에 선택할 수 있는 마스터 체크박스가 있다
• 전체 선택 시 모든 상품의 체크박스가 선택된다
• 전체 해제 시 모든 상품의 체크박스가 해제된다

장바구니 비우기

• 장바구니에 있는 모든 상품을 한 번에 삭제할 수 있다

상품 상세

상품 클릭시 상세 페이지 이동

• 상품 목록에서 상품 이미지나 상품 정보 클릭 시 상세 페이지로 이동한다
• URL이 /product/{productId} 형태로 변경된다
• 상품의 자세한 정보가 전용 페이지에서 표시된다

상품 상세 페이지 기능

• 상품 이미지, 설명, 가격 등의 상세 정보가 표시된다
• 전체 화면을 활용한 상세 정보 레이아웃이 제공된다

상품 상세 - 장바구니 담기

• 상품 상세 페이지에서 해당 상품을 장바구니에 추가할 수 있다
• 페이지 내에서 수량을 선택하여 장바구니에 추가할 수 있다
• 수량 증가/감소 버튼이 제공된다

관련 상품 기능

• 상품 상세 페이지에서 관련 상품들이 표시된다
• 같은 카테고리(category2)의 다른 상품들이 관련 상품으로 표시된다
• 관련 상품 클릭 시 해당 상품의 상세 페이지로 이동한다
• 현재 보고 있는 상품은 관련 상품에서 제외된다

상품 상세 페이지 내 네비게이션

• 상품 상세에서 상품 목록으로 돌아가는 버튼이 제공된다
• 브레드크럼을 통해 카테고리별 상품 목록으로 이동할 수 있다
• SPA 방식으로 페이지 간 이동이 부드럽게 처리된다

사용자 피드백 시스템

토스트 메시지

• 장바구니 추가 시 성공 메시지가 토스트로 표시된다
• 장바구니 삭제, 선택 삭제, 전체 삭제 시 알림 메시지가 표시된다
• 토스트는 3초 후 자동으로 사라진다
• 토스트에 닫기 버튼이 제공된다
• 토스트 타입별로 다른 스타일이 적용된다 (success, info, error)

심화과제

SPA 네비게이션 및 URL 관리

페이지 이동

• 어플리케이션 내의 모든 페이지 이동(뒤로가기/앞으로가기를 포함)은 하여 새로고침이 발생하지 않아야 한다.

상품 목록 - URL 쿼리 반영

• 검색어가 URL 쿼리 파라미터에 저장된다
• 카테고리 선택이 URL 쿼리 파라미터에 저장된다
• 상품 옵션이 URL 쿼리 파라미터에 저장된다
• 정렬 조건이 URL 쿼리 파라미터에 저장된다
• 조건 변경 시 URL이 자동으로 업데이트된다
• URL을 통해 현재 검색/필터 상태를 공유할 수 있다

상품 목록 - 새로고침 시 상태 유지

• 새로고침 후 URL 쿼리에서 검색어가 복원된다
• 새로고침 후 URL 쿼리에서 카테고리가 복원된다
• 새로고침 후 URL 쿼리에서 옵션 설정이 복원된다
• 새로고침 후 URL 쿼리에서 정렬 조건이 복원된다
• 복원된 조건에 맞는 상품 데이터가 다시 로드된다

장바구니 - 새로고침 시 데이터 유지

• 장바구니 내용이 브라우저에 저장된다
• 새로고침 후에도 이전 장바구니 내용이 유지된다
• 장바구니의 선택 상태도 함께 유지된다

상품 상세 - URL에 ID 반영

• 상품 상세 페이지 이동 시 상품 ID가 URL 경로에 포함된다 (/product/{productId})
• URL로 직접 접근 시 해당 상품의 상세 페이지가 자동으로 로드된다

상품 상세 - 새로고침시 유지

• 새로고침 후에도 URL의 상품 ID를 읽어서 해당 상품 상세 페이지가 유지된다

404 페이지

• 존재하지 않는 경로 접근 시 404 에러 페이지가 표시된다
• 홈으로 돌아가기 버튼이 제공된다

AI로 한 번 더 구현하기

• 기존에 구현한 기능을 AI로 다시 구현한다.
• 이 과정에서 직접 가공하는 것은 최대한 지양한다.

과제 셀프회고

과제의 요구사항 우선순위를 잘못 선택한 점이 아쉬웠습니다.

과제의 주제가 ‘프레임워크 없이 SPA 만들기’ 였던 만큼 라우터객체를 높은 우선순위로 두어 개발을 진행해야했었습니다. 하지만, 순서대로 해야한다는 강박에 사로잡혀 다른 곳에 집중했던 것이 패착이었습니다.

그렇기에 목록과 장바구니 모달의 유닛테스트에 매몰되어 진도속도가 부진했습니다.

‘테스트를 위한 코드는 아닐지언정, 테스트코드를 부터 통과하는 코드를 작성해보자.’ 라는 기준으로 시작했지만, 어느 정도 기본 구조는 잡고 시작했어야 했다는 것을 알았습니다.

하지만, 기능이 동작한다는 것을 테스트코드가 보장할 것이니 추후에 구조를 잡는 리팩토링을 잡자는 다짐을 하고 과제를 계속 진행했습니다.

어떤 우선순위로 기본 구조를 잡는가에 대해서 궁금증이 일어, 준일 코치님 멘토링때 질문을 드렸었습니다. 야근으로 인해 알려주셨던 구조를 잡지 못해 아쉬운 점이 큽니다.

기술적 성장

해당 요구사항을 확인할 때 어떤 것을 우선순위로 두어야하는 지에 대한 중요성과 고민하는 힘을 기르게 되었습니다.

테스트코드에 친숙하지 못한 편이었는데 과제를 진행하면서 조금 더 익숙해 졌습니다. 장바구니 모달에서 기존 수량조절 테스트코드가 왜 통과하지 못하는지에 대해서 디버깅했었습니다. 구현 방식으로 장바구니의 상태가 변경된다면 모달 컨텐츠 전체를 새로 그리는 방식을 채택했었습니다. 하지만, 실제 브라우저에서 기능은 동작하지만 vitest는 통과하지 못했었습니다.

이는 vitest에서 querySelect로 찾은 엘리먼트의 값이 참조하고 있는 주소 값 때문이었습니다. 모달 컨텐츠를 새로 그려 새로운 엘리먼트로 교체하는 제코드와 달리, vitest 이벤트 이후에도 계속 동일한 엘리먼트를 참조하기 때문이었습니다.
'이전 돔과 비교해서 태그타입, 어트리뷰트 등이 동일하지만 textNode이 다르다면 그 부분만 새로운 값으로 교체해준다.’ 라는 것이 이미 구현되어 자동으로 진행되는 리액트의 기술과 편리함을 또 느낄 수 있었습니다.

그래서 장바구니 모달 수량조절은 이벤트 발생 후 수량체크하는 값을 새로 셀렉팅하는것으로 수정해두었습니다.

급하게 에러이슈를 커서를 사용해 무마한 부분도 있어서 다소 이상한부분도 있습니다. 수정하려했는데 시간이 나지않아 그대로 제출하게되었습니다. ㅜㅜ

자랑하고 싶은 코드

현재 다른 코드와 달리 의존성이 적은 Toast컴포넌트말고는 없는 것 같습니다.

개선이 필요하다고 생각하는 코드

전체적으로 구조 개선이 필요합니다. 기본 구조를 잡지않은채로 테스트 통과 및 기능을 위한 코드 작성이다 보니 누더기코드로 되어있습니다. 이벤트 시스템 > 라이프사이클 > 상태관리 순서대로 개선을 하고싶습니다.

학습 효과 분석

테스트의 중요성을 깨달았습니다.

과제 피드백

AI 활용 경험 공유하기

• 에러핸들링때 정말 많이 썼었던 것 같습니다. 구조가 잡히지 않은채로 코드를 짜다보니, 브라우저에서는 기능이 동작하는데 테스트에서는 동작하지 않은 경우가 많았습니다.
• 패스 기준만 통과시킨 이후인 지금은 커서에게 리팩토링 구조 개선을 시켜보고 있습니다. 원하는 구조리스트를 나열하고, 그에 관련된 구조를 설명하니 기존에 base 테스트에 통과하게끔 리팩토링을 진행해주고 있습니다.

리뷰 받고 싶은 내용

현재 코드 구조가 좋지못하고 반복되는 코드도 많습니다. 리팩토링 순서에 대해서 문의드립니다. 이벤트 시스템 > 컴포넌트 라이프 사이클 시스템 > 상태관리 시스템 > 관련 라우팅 시스템 순서가 괜찮을까요?