[3팀 김단헌] Chapter2-1. 프레임워크 없이 SPA 만들기

[sjgske]

과제 체크포인트

배포 링크

기본과제

상품목록

상품 목록 로딩

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

상품 목록 조회

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

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

• 드롭다운에서 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로 다시 구현한다.
• 이 과정에서 직접 가공하는 것은 최대한 지양한다.

과제 셀프회고

기술적 성장

자랑하고 싶은 코드

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

학습 효과 분석

과제 피드백

AI 활용 경험 공유하기

리뷰 받고 싶은 내용

[JunilHwang]

이 피드백은 n8n + ai (gpt-5-mini)를 활용하여 자동으로 생성된 내용입니다.

아직 제출해주신 코드를 확인할 수 없으므로 구체적인 리뷰는 제공하지 못합니다. 그러나 요구사항이 매우 방대하고 복잡하므로 전체적인 설계와 아키텍처에 대해 몇 가지 방향을 제시드리겠습니다.

---

전체 리뷰 요약 및 설계 제언

1. 전체적인 구조 및 상태 관리 분리

• 상품 목록, 장바구니, 상품 상세 등 주요 도메인 영역별로 상태와 UI를 명확히 분리하는 것이 중요합니다.
• 예를 들어, 상품 목록 페이지는 상품 조회, 필터링, 검색, 정렬, 페이지네이션 등 복잡한 상태를 관리하므로 별도의 상태 관리 레이어(예: Redux, Zustand, Context API 등)를 고려하세요.

2. 컴포넌트 구조와 책임 분리

• 로딩, 에러, 상품 카드, 페이징, 무한스크롤 등 UI 컴포넌트는 최대한 재사용 가능하고 단일 책임 원칙을 따르는 방식으로 설계합니다.
• 상품 목록과 필터 UI는 상호 연동되며, 필터 변경 시 상태가 즉시 반영되어야 하므로 상태 변경 로직을 컴포넌트 바깥으로 잘 분리하는 것이 필요합니다.

3. URL 상태 동기화 설계

• 심화 과제에 명시된 URL 쿼리 반영 및 복원 부분은 SPA에서 UX 향상을 위해 꼭 필요합니다.
• 필터, 검색어, 정렬 조건, 페이지네이션 상태를 URL에 동기화하고, 새로고침 시 URL에서 상태를 읽어 재구성 할 수 있게 구현합니다.

4. 무한 스크롤과 페이지네이션 확장성

• 현재 단순 무한 스크롤 구현이라도, 추후 다양한 페이지 타입이나 조건별 페이지 네비게이션 확장이 예상됩니다.
• 무한스크롤 로직과 데이터 요청 로직을 분리하고, 로딩 상태 및 에러 핸들링을 명확히 관리하십시오.

5. 장바구니 구조의 확장성 고려

• 장바구니는 UI 모달, 수량 조정, 삭제, 선택 삭제, 전체 선택 등 다양한 기능을 포함합니다.
• 장바구니 상태가 브라우저 저장소(localStorage 등)와 잘 연동되도록 설계하여 새로고침 시 상태 유지가 가능해야 합니다.

---

추후 코드 제출 시에는 위 요구사항 별로 각 기능의 구조, 상태 관리, UI 분리, 주소 동기화 여부 등을 중점으로 리뷰해드리겠습니다.

[JunilHwang]

이 피드백은 n8n + ai (gpt-5-mini)를 활용하여 자동으로 생성된 내용입니다.

전체 코드 리뷰 요약

현재 PR에는 변경 사항(diff)이 제공되지 않아 실제 코드를 열람하거나 구체적인 라인 단위 피드백을 드리기 어렵습니다. 이 경우, 요구사항 기반의 구조 및 확장성 측면에서 점검해볼 수 있는 일반적인 관점들을 아래에 정리했습니다.

• 상태/데이터 흐름 분리: 상품 목록, 정렬, 필터, 검색 등 다양한 UI 상태가 복합적으로 작동하는 만큼, 각 기능의 상태가 한 곳에 뭉쳐 있으면 나중에 조건이 하나 더 추가될 때마다 수정 범위가 커집니다. 예를 들어 검색어, 카테고리, 정렬 조건 등을 한꺼번에 관리하는 중앙 상태(예: 커스텀 훅, 컨텍스트, 또는 상태 머신)를 도입하면 재사용성과 테스트 편의성이 올라갑니다.
• 컴포넌트의 역할 분리: 상품 목록, 로딩/에러 상태, 무한 스크롤, 카테고리 브레드크럼, 장바구니 모달 등 각 UI 블록이 독립적 책임을 가지도록 분리하면, SPA에서 네비게이션이나 URL 동기화 요구사항이 추가될 때에도 각 컴포넌트가 자신의 로직만 다루므로 영향 범위가 제한됩니다.
• URL 동기화 구조: 조건별로 URL 쿼리가 필요한 요구사항(검색어, 카테고리, 정렬 등)을 충족시키려면 상태 변화가 발생할 때마다 useSearchParams나 URLHelper를 통해 상태와 URL을 양방향 동기화하는 레이어가 필요합니다. 현재 상태 관리가 중앙화되어 있지 않다면 이 동기화를 위한 중간 레이어 구현 도중 상태가 여러 군데로 분산되어 더욱 복잡해질 수 있습니다.

실 코드가 있는 경우, 위 이슈들을 중심으로 실제 구조를 점검하고 각 컴포넌트에서 어떻게 확장성을 확보할 수 있을지 다시 확인해보시면 좋겠습니다.

질문에대한 답변

추가 질문이 없으셔서 현재 단계를 기준으로 피드백을 드리자면, 10년차 프론트엔드 개발자 입장에서 가장 중요한 부분은 요구사항이 늘어날 때 기존 구조가 얼마나 유연하게 변화할 수 있는지에 집중하는 것입니다. 예를 들어, 현재 상품 필터링/정렬 상태를 하나의 훅이나 서비스에서 관리하고 있지 않다면, URL 동기화나 새 필터 추가 시 수정해야 할 범위가 지수적으로 늘어납니다. 따라서 다음 작업으로는 요구사항 전반 전에 상태 작성, URL 동기화, 장바구니 저장(logic+UI) 등을 하나의 축으로 묶어서 재사용 가능한 레이어를 고민해보시는 것이 좋습니다.

또한, 장바구니와 토스트 같은 사용자 피드백 시스템은 대부분 전역 UI 서비스(예: ToastProvider)로 설계하는 것이 일반적입니다. 이를 통해 다양한 페이지/모듈에서 공통 메시지를 발생시킬 수 있고, 새로고침 시 상태 복원을 포함한 요구사항이 있어도 중앙에서 처리할 수 있습니다.

마지막으로 심화 요구사항들—SPA 내비게이션, URL 복원, 404 페이지, 브레드크럼—은 큰 그림에서 라우팅과 데이터 fetching 전략(예: route params vs query param, prefetching, caching)이 잘 맞아야 구현이 편합니다. 만약 아직 시도하지 않으셨다면 라우터와 상태 로직을 분리해 두는 작업을 먼저 고려해보시는 것을 권장드립니다.