3단계. 프로젝트 도메인 테크스펙 작성 - 100-hours-a-week/KTB4-1st-wiki GitHub Wiki

  1. 공통 도메인
  2. 물품 도메인

공통 도메인

참고한 페이지 : 이문기 - 프론트엔드에서 의존성 살펴보기

AI 채팅

  • AIChatBot (AI 챗봇 플로팅 버튼)

    • 개요

      • AI 플로팅 버튼을 누르면 AI 채팅화면이 뜨게 된다.

    • Props & Interface

      X

    • 내부 상태 & 이벤트

      • 현재 AI채팅 모달의 열림 유무
      • 현재 대화 내용 상태 저장

    • 상태

      • 클라이언트 상태 : AI 대화 내용 상태
      • 서버 상태 : X

    • 사용 예시

      1. AI 챗봇과 대화할 수 있는 플로팅 버튼을 눌러 진입한다. 이 때 플로팅 버튼은 CSR로 한다. 
2. 대화할 때마다 `POST /api/chatbot/ask` API를 호출하여 답을 받아온다.
3. 응답값을 화면에 그린다.
      • CSR로 하는 이유: 브라우저를 통해 실시간으로 사용자와 상호작용해야 하는 컴포넌트이기 때문에 CSR을 사용

    • 에러 처리 / 엣지 케이스

      • 로그인 세션 확인 후 인증이 되지 않았다면, 로그인 페이지로 이동시키는 모달을 띄운다
      • 입력 값이 없다면 전송 버튼은 비활성화 된다
      • 검색 처리 중에는 버튼이 비활성화 된다
      • 현재 서비스가 대답할 수 없는 질문을 묻는다면 응답하지 않고 다른 질문으로 유도하는 질문을 내보낸다 (AI 쪽 기능 처리)
      • AI 챗봇 모달창을 닫으면 대화 내용을 초기화 한다

    • 스타일링

      • 컴포넌트 스타일은 AIChat.module.css로 분리.

    • Storybook

      • Default 버튼 모양

네비게이션 바

  • NavBar (네비게이션 바)

    • 개요

      • 네비게이션 바에는 홈 (상품 목록페이지), 관심, 나의 물품, 채팅, 마이페이지의 항목이 있다. 각각의 버튼을 누르면 해당하는 페이지로 이동하고, 네비게이션 바에서 현재 어디에 포함되어 있는지 나타낼 수 있다.

    • Props & Interface

      X

    • 내부 상태 & 이벤트

      • 현재 클릭된 페이지 → 로그아웃 하기 전까지 계속 트래킹해서 표시

    • 상태

      • 클라이언트 상태 : 현재 클릭한 메뉴 상태
      • 서버 상태 : X

    • 사용 예시

      1. 로그인 이후 물품 목록 페이지(홈)에 진입한다
2. 네비게이션 바를 CSR로 렌더링한다
3. 메뉴를 누르면 해당 페이지로 이동한다
      • CSR을 사용하는 이유 : 브라우저를 통해 사용자와 실시간을 상호작용 하는 컴포넌트 이기 때문에 CSR을 사용한다

    • 에러 처리 / 엣지 케이스

      • X

    • 스타일링

      • 컴포넌트 스타일은 NavBar.module.css로 분리.
      • 반응형 시 썸네일 크기, 상품명 영역 등을 적절히 축소 표시.

    • Storybook

      • 현재 선택이 된 네비게이션 바, 선택이 되지 않은 네비게이션 바

    • 라우팅

      • 홈 : /items/page
      • 관심 : /liked/page
      • 나의 물품 : /myItem/page
      • 채팅 : /chat/list/page
      • 마이페이지 : mypage/page

모달

일반 모달창

  • ModalCard/Default (일반 모달창)

    • 개요

      • ‘확인’ 외에 다른 기능 필요 없이 알림만을 위한 모달 창

    • Props & Interface

      interface ModalCardDefaultProps{
	content: string
}

    • 내부 상태 & 이벤트

      • 모달 열림 유무

    • 상태

      • 클라이언트 상태 : 모달 열림 유무 상태
      • 서버 상태 : X

    • 사용 예시 (해당 모달창이 쓰이는 시나리오 중 1)

      1. 현재 물품이 99개 등록되어있는 상태에서 '물건 등록하기'를 누른다
2. 물품 등록하기 화면이 CSR로 렌더링된다
3. 입력칸을 다 채우고 등록하기 버튼을 눌렀을 때, 100개 이상은 등록할 수 없다는 내용의
		모달창을 띄운다.
      • CSR로 렌더링 하는 이유 : 사용자와 브라우저로 실시간 상호작용 하는 컴포넌트이기 때문에 CSR을 활용한다.

    • 에러 처리 / 엣지 케이스

      • 만약 모달창에 띄울 내용이 전달되지 않으면 모달창을 띄우지 않는다
      • 모달이 작동하지 않고 네트워크 오류로 인해 뜨지 않아도 비정상적인 행동을 막기위한 조치(ex. 버튼 비활성화, 입력창 비활성화)를 이중으로 설정해놓는다.

    • 스타일링

      • 컴포넌트 스타일은 ModalDefault.module.css로 분리.
      • 반응형 시 썸네일 크기, 상품명 영역 등을 적절히 축소 표시.

    • Storybook

      • 어떤 내용이 주어진 상태의 모달창 화면

예 아니오 선택지가 주어지는 모달창

  • ModalCard/YN (Yes or No로 선택지가 주어지는 모달창

    • 개요

      • 예, 또는 아니오의 해답이 필요한 상황을 위한 모달창

    • Props & Interface

      interface ModalCardYNProps{
	content: string,
	onBtnClick: () => boolean;
}

    • 내부 상태 & 이벤트

      • 모달창에 대한 응답 상태 관리
      • 어떤 버튼을 눌렀는지에 대한 이벤트 감지

    • 상태

      • 클라이언트 상태 : 모달 창 응답 상태, 버튼 이벤트 상태, 모달 열림 상태
      • 서버 상태 : X

    • 사용 예시

      1. '물품 등록하기' 버튼을 누른다.
2. 물품 등록 화면이 CSR로 렌더링된다
3. 등록 과정에서 작성을 하다가 뒤로가기를 누른다
4. 임시저장이 되지 않는다는 모달창이 CSR로 렌더링 되어 뜬다.
5. 예를 누르면 나가지고, 아니오를 누르면 물품등록 창에 남아있는다.
      • CSR을 사용하는 이유 : 물품 등록 도중 사용자의 행동에 맞춰 동적으로 나타나는 화면이기 때문에 CSR이 적합하다고 판단.

    • 에러 처리 / 엣지 케이스

      • 만약 모달창에 띄울 내용이 전달되지 않으면 모달창을 띄우지 않는다
      • 모달이 작동하지 않고 네트워크 오류로 인해 뜨지 않아도 비정상적인 행동을 막기위한 조치(ex. 버튼 비활성화, 입력창 비활성화)를 이중으로 설정해놓는다.

    • 스타일링

      • 컴포넌트 스타일은 ModalYN.module.css로 분리.
      • 반응형 시 썸네일 크기, 상품명 영역 등을 적절히 축소 표시.

    • Storybook

      • 어떤 내용이 주어진 상태의 모달창 화면

물품 도메인

설계 및 기술 자료 (Architecture and Technical Documentation)

아키텍쳐 개요

  • 프레임워크/라이브러리: React (v19.2) + Next.js (v16)
  • 상태 관리 (State Management): React 내부 기능 + Zustand
  • UI 컴포넌트: figma 참고
  • 스타일링: CSS Modules
  • 폼(Form) 관리: React hook form
  • 데이터 페칭(Data Fetching): Axios

주요 페이지 & 컴포넌트

app/
└─ items/
   ├─ page.tsx             ← /items : 물건 목록
   │
   ├─ [itemId]/
   │  └─ page.tsx          ← /items/123 : 물건 상세
   │
   ├─ create/
   │  └─ page.tsx          ← /items/create : 물건 등록
   │
   └─ search/
      │ page.tsx          ← /items/search : 일반 검색
      └─ smart/
	       └─ page.tsx          ← /items/search/smart : 스마트 검색
  • 페이지 (Pages) :
    • /items/page : 물건 목록 페이지
      • 주요 기능: 그룹별 업로드된 상품 목록 조회, 관심 물품 등록/삭제, 조회 할 그룹 선택
      • 사용 컴포넌트:
        • ItemList (물건 목록)
        • NavBar (네비게이션 바)
        • AIChatBot (AI 챗봇 플로팅 버튼)
        • LikeIcon (좋아요 버튼)
      • 데이터 로딩 시점: 페이지 진입 전, SSR로 페이지를 미리 만드는 시점에 데이터 fetch.
      • 라우팅 :
        • /items/page → (사용자가 ‘등록하기’ 클릭 시) → /items/create/page
        • /items/page → (사용자가 물품을 클릭 시) → /items/[itemId]/page
        • /items/page → (사용자가 돋보기 아이콘을 클릭 시) → /items/search/page
    • /items/create/page : 물건 등록 페이지
      • 주요 기능: 물건 사진 업로드, 물건 설명 작성
      • 사용 컴포넌트:
        • ModalCard/Default (일반 모달창)
        • ModalCard/YN (Yes or No로 선택지가 주어지는 모달창)
        • CreateItemForm (물건 등록 폼)
      • 라우팅 : /items/create/page → (사용자가 ‘작성완료’ 버튼을 누르고 정상적으로 진행됐을 경우) → /items/page
    • /items/[itemId]/page : 물건 상세 페이지
      • 주요 기능: 물품 조회, 관심 물품 등록/해제, (판매자일시) 물품 수정, (구매자일시) 물품 교환 제안, 신고하기
      • 사용 컴포넌트:
        • LikeIcon (좋아요 버튼)
      • 데이터 로딩 시점: 페이지 진입 시 GET /api/items/{itemId} API 호출
      • 라우팅 :
        • 판매자(물품 주인)인 경우 /items/[itemId]/page → (사용자가 ‘수정하기’ 버튼을 클릭) → /items/create/page
        • 구매자(교환요청자)인 경우 /items/[itemId]/page → (사용자가 ‘제안하기’ 버튼을 클릭) → /exchange/page
    • /items/search/page : 물건 검색 페이지
      • 주요 기능: 검색한 물건 조회, 최근 검색어 조회, 관심물품 등록, 물건 목록 조회
      • 사용 컴포넌트:
        • NavBar (네비게이션 바)
        • AIChatBot (AI 챗봇 플로팅 버튼)
        • ItemList (물건 목록)
        • LikeIcon (좋아요 버튼)
      • 데이터 로딩 시점: 사용자가 키워드를 입력하고 돋보기 버튼을 눌렀을 때 GET /api/groups/{groupId}/items?keyword={keyword} &size=30&cursor={cursor} API 호출
      • 라우팅 : /items/search/page → (사용자가 물품 카드를 클릭) → /items/[itemId]/page
    • /items/search/smart/page : 물건 스마트 검색 페이지
      • 주요 기능: 검색한 물건 조회, 최근 검색어 조회, 관심물품 등록, 물건 목록 조회
      • 사용 컴포넌트:
        • ModalCard/Default (일반 모달창)
        • NavBar (네비게이션 바)
        • AIChatBot (AI 챗봇 플로팅 버튼)
        • CardItem (물건 목록 단위)
        • SmartSearchForm (스마트검색 조건 입력 폼)
        • LikeIcon (좋아요 버튼)
      • 데이터 로딩 시점: 사용자가 키워드를 입력하고 돋보기 버튼을 눌렀을 때 POST /api/search/rank-candidates API 호출
      • 라우팅 : /items/search/smart/page → (사용자가 물품 카드를 클릭) → /items/search/smart/result/page

주요 컴포넌트 (Components):

  • ItemList: 물건 목록 단위

    • 개요

      • 역할 : 물건 목록 페이지에서 해당 그룹에 업로드된 물건들의 정보를 렌더링하고 관심 물건 등록 이벤트를 처리한다.

    • Props & Interface

      interface ItemListProps {
  isGroupSelected: boolean;
  isDataLoaded: boolean;
  isItemEmpty: boolean;
}

    • 내부 상태 & 이벤트 :

      • 상품을 선택하면 물품 상세 페이지로 이동한다
      • 목록이 뜨기 전까지는 로딩화면을 표시한다

    • 상태

      • 클라이언트 상태 : 그룹 선택 유무 상태, 데이터 로딩 유무 상태, 물건 등록 유무 상태
      • 서버 상태 : 그룹 정보 상태, 물건 등록 정보 상태

    • 사용 예시 :

      1. 로그인 이후 메인 페이지에 진입한다.
2. 사용자의 로그인 세션 확인
	- 인증됐다면 조회할 그룹 정보 확인
	- 인증되지 않았다면 로그인 페이지로 이동
3. 그룹 정보가 없다면 그룹 추가 페이지로 유도하는 화면
	그룹 정보가 있다면 물건 목록을 불러오는 동안 스켈레톤 표시
4. API 호출하여 받은 물건을 목록으로 SSR
5. 브라우저에서 hydration (등록하기, 검색, AI챗봇, 네비게이션 바 등 이벤트 추가, 상태 저장)
      • 그룹과 물건 정보를 SSR로 하는 이유 : 그룹 정보와 물건 정보를 DB가 들고 있고 사용자가 해당 정보가 담긴 화면을 봤을 때 재렌더링 없이 한 번에 볼 수 있게 하기 위함.

    • 에러 처리 / 엣지 케이스 :

      • 로그인 세션 확인 후 인증이 되지 않았다면, 로그인 페이지로 이동시키는 모달을 띄운다
      • 그룹이 선택되지 않았을 때는 그룹에 참여하는 것을 유도하는 화면을 그리고, 그룹에 선택이 됐다면 해당 그룹에 업로드 된 물건들을 목록으로 그린다.
      • 그룹에 속하지 않았는데 등록하기 버튼을 누른다면 등록할 수 없다는 모달을 띄운다
      • 그룹에 속해있지만, 물건이 아무것도 등록되지 않았을 경우에는 등록하기로 유도하는 화면을 띄운다
      • 물건은 한 번에 최대 30개까지 띄운 다음 다시 로딩을 진행한다

    • 스타일링 :

      • 컴포넌트 스타일은 ItemList.module.css로 분리.
      • 반응형 시 썸네일 크기, 상품명 영역 등을 적절히 축소 표시.

    • Storybook : 그룹에 속해 있을 때 화면, 그룹에 속해있지 않을 때 화면

  • ItemCard : 물건 카드

    • 개요

    • Props & Interface

      interface ItemCardProps {
  productId: number;
  productName: string;
  authorName: string;
  thumbnailUrl: string;
  quantity: number;
  content: number;
	createdAt: string;
  contentPreview: string;
  status: string;
  totalLikes: number;
  totalRequests:number;
  isLiked: boolean;
  isAuthorActive: boolean;

  onCardClick: (productId: number) => void;
}

    • 내부 상태 & 이벤트 :

      • 상품을 선택하면 물품 상세 페이지로 이동한다

    • 상태

      • 클라이언트 상태 : X
      • 서버 상태 : X

    • 사용 예시 :

      1. Props로 받은 물건을 목록으로 SSR
3. 브라우저에서 hydration ( 클릭 이벤트 )
      • 그룹과 물건 정보를 SSR로 하는 이유 : 그룹 정보와 물건 정보를 DB가 들고 있고 사용자가 해당 정보가 담긴 화면을 봤을 때 재렌더링 없이 한 번에 볼 수 있게 하기 위함.

    • 에러 처리 & 엣지 이벤트 :

      • 내용 미리보기가 길면 지정된 줄 수를 초과한 내용을 말줄임표로 처리한다.
      • 비활성화된 작성자인 경우 작성자명을 탈퇴한 사용자로 표시한다.

    • 스타일링 :

      • 컴포넌트 스타일은 ItemCard.module.css로 분리.
      • 반응형 시 썸네일 크기, 상품명 영역 등을 적절히 축소 표시.

    • Storybook : 그룹에 등록된 물건의 정보를 표시하고 있는 카드 화면

  • CreateItemForm (물건 등록 폼)

    • 개요

      • 역할 : 등록할 물건에 대해 정보를 입력 받은 후 등록 이벤트 처리를 진행한다.

    • Props & Interface

      interface ItemFormValues {
  images: File[];
  title: string;
  content: string;
  status: "AVAILABLE" | "COMPLETED";
  quantity: number;
  selectedGroupIds: string[];
  tradeUrgency: number;
  valueTolerance: number;
}

interface CreateItemFormProps {
  initialValues?: Partial<ItemFormValues>;
  onSubmit: (values: ItemFormValues) => Promise<void>;
  onBackClick: () => void;
}

    • 내부 상태 & 이벤트

      • onSubmit으로 폼을 제출할 때 ItemFormValues에 속해있는 요소들의 타입을 비동기(Axios)로 제출.
      • onBackClick으로 뒤로가기 버튼을 눌렀을 때 이전 화면으로 돌아간다.

    • 상태

      • 클라이언트 상태 : 물건 등록을 위해 업로드한 사진, 입력한 제목/내용/상태/수량/거래옵션
      • 서버 상태 : X

    • 사용 예시

      1. 물품 등록 페이지에 진입한다
2. CSR로 화면을 그린다.
3. React hook form을 통해 폼 생성
4. '작성 완료'버튼을 누를 시. `POST /api/items`로 API 호출하여 등록
5. 예외는 모달로 처리
      • 물품 등록 페이지를 CSR로 하는 이유 : 해당 페이지에 포함되는 값이 전부 브라우저를 통해 사용자에게 입력받는 값들이고, 해당 값들은 클라이언트에서 관리되기 때문에 CSR을 사용.

    • 에러 처리 / 엣지 케이스

      • 로그인 세션 확인 후 인증이 되지 않았다면, 로그인 페이지로 이동시키는 모달을 띄운다
      • 한 명의 사용자가 등록할 수 있는 물품의 수는 최대 99개이며 100개를 넘기려고 시도할 시, 모달로 막는다.
      • 제목과 내용은 각각 100자와 3000자로 제한한다. 만약 넘어갈 시 등록 진행을 막고, 헬퍼텍스트가 띄워진다.
      • 물품당 수량의 한도는 99개로 둔다. 만약 개수를 넘어갈 시 등록 진행을 막고, 헬퍼텍스트가 띄워진다.
      • 물건 사진은 1개 이상, 3개 이하까지 업로드 할 수 있다. 만약 3장 이상을 업로드할 시 모달 창으로 막는다.
      • 그룹은 반드시 하나 이상을 추가해야 한다. 만약 그룹을 하나도 선택하지 않았을 시, 등록 진행을 막고 헬퍼텍스트를 띄운다.
      • ‘작성 완료’ 버튼을 누를 때 AI를 통해 내용을 검열한다. 이때 부적절한 내용 또는 사진이 포함되어 있을 시, 모달로 막는다.

    • 스타일링

      • 컴포넌트 스타일은 CreateItem.module.css로 분리.
      • 반응형 시 썸네일 크기, 상품명 영역 등을 적절히 축소 표시.

    • Storybook

      • 필수 항목을 넣은 경우, 필수항목 누락 경우, 부적절한 내용 입력 경우
  • SmartSearchForm (스마트검색 조건 입력 폼)

    • 개요

      • 역할 : 원하는 물품과 수량을 입력하고 조건을 자연어로 넣었을 때 교환 가능한 물품들을 조회하여 보여준다.

    • Props & Interface

      interface OwnedItem {
  itemId: string;
  itemName: string;
  thumbnailUrl: string;
  availableQuantity: number;
}

interface SelectedItem {
  itemId: string;
  quantity: number;
}

interface SmartSearchFormValues {
  selectedItems: SelectedItem[];
  desiredCondition: string;
}

interface SmartSearchFormProps {
  items: OwnedItem[];
  initialValues: SmartSearchFormValues;

  onSubmit: (
    values: SmartSearchFormValues
  ) => Promise<void>;

  onBackClick: () => void;
}

    • 내부 상태 & 이벤트

      • onSubmit으로 제출할 때 SmartSearchFormValues의 값을 비동기(Axios)로 제출
      • onBackClick으로 뒤로가기 버튼을 눌렀을 때 이전 화면으로 돌아간다.

    • 상태

      • 클라이언트 상태 : 선택한 물품 종류 상태, 선택한 물품들의 선택 수량 상태, 입력된 교환 조건 상태
      • 서버 상태 : 내가 등록한 물품 정보 상태

    • 사용 예시

      1. 스마트 검색 페이지 진입
2. 서버에서 보유 물품 조회 이후 SSR
3. 브라우저에서 hydration
4. React hook form을 통해 폼 상태 관리
5. 검색 조회 값 입력 검증
6. Axios `POST /api/search/rank-candidates` 요청
7. 응답 상태 저장
8. 목록 표시
      • 그룹과 물건 정보를 SSR로 하는 이유 : 그룹 정보와 물건 정보를 DB가 들고 있고 사용자가 해당 정보가 담긴 화면을 봤을 때 재렌더링 없이 한 번에 볼 수 있게 하기 위함.

    • 에러 처리 / 엣지 케이스

      • 로그인 세션 확인 후 인증이 되지 않았다면, 로그인 페이지로 이동시키는 모달을 띄운다
      • 물품 수량의 최소는 1개, 최대는 현재 보유 수량만큼만으로 제한 → 만약 개수를 벗어나려고 하면 모달을 띄운다.
      • 교환 조건을 작성하지 않아도 검색 가능하다
      • 만약 물건을 하나도 고르지 않는다면 헬퍼텍스트와 모달을 함께 띄워 검색을 막는다
      • 스마트 검색의 에러 처리와 엣지케이스는 일반 검색과 동일하게 진행된다

    • 스타일링

      • 컴포넌트 스타일은 SmartSearchForm.module.css로 분리.
      • 반응형 시 썸네일 크기, 상품명 영역 등을 적절히 축소 표시.

    • Storybook

      • 검색 결과가 있는 경우, 검색 결과가 없는 경우, 올바른 검색 조건을 입력한 경우, 올바르지 않은 검색 조건을 입력한 경우
  • LikeIcon (좋아요 버튼)

    • 개요

      • 하트 이모티콘을 누르면 좋아요 기능을 수행하고, 한 번 더 누르면 취소가 된다

    • Props & Interface

      interface LikeButtonProps {
  isLiked: boolean;
  onChange: ( nextIsLiked: boolean ) => Promise<void>;
}

    • 내부 상태 & 이벤트

      • onChange를 통해 버튼의 상태를 업데이트 하는 API를 호출한다. (not clicked ↔ clicked)
      • 현재 상태에 따라 하트 이모티콘의 색이 채워지거나 비워지는 등 UI가 변경된다.

    • 상태

      • 클라이언트 상태 : 변경된 좋아요 버튼 상태
      • 서버 상태 : 초기 좋아요 버튼 상태

    • 사용 예시

      1. 좋아요 버튼이 있는 화면으로 진입 (물품 목록 조회 API를 통해 화면 SSR,
		좋아요 상태 props로 받음)
2. 좋아요 버튼을 누른다
		-> 만약 누르지 않은 상태였다면 누른 것으로 상태 변화가 일어나고,
			 누른 상태였다면 누르지 않은 것으로 상태변화가 일어난다.
4. 상태변화에 따라 UI가 변경되고(누른 상태라면 채워지고, 안 눌렀다면 비워진 UI),
		API호출을 통해 상태변화를 전송한다.
		`POST /api/items/{itemId}/likes` : 물품 좋아요
		`DELETE /api/items/{itemId}/likes` : 물품 좋아요 취소

    • 에러 처리 / 엣지 케이스

      • 로그인 세션 확인 후 인증이 되지 않았다면, 로그인 페이지로 이동시키는 모달을 띄운다
      • 좋아요 변경 사항 반영 실패 시 모달로 예외 처리

    • 스타일링

      • LikeButton.module.css 로 분리
      • 반응형 시 썸네일 크기, 상품명 영역 등을 적절히 축소 표시.

    • Storybook

      • 하트 비었을 때의 모달
      • 하트 채워져 있을 때의 모달

컴포넌트 간 관계

  • CardItem 를 import 하는 페이지
    • items/page
    • items/search/page
    • items/search/smart/page
  • CreateItemForm
    • items/create/page
  • SmartSearchForm
    • items/search/smart/page

상태 관리 전략

  • Local State (React 내장 기능)
    • 현재 선택하고 있는 그룹, 물품 재고 수

API 연동 (API Integration)

  • 호출할 백엔드 API 목록:
    • POST api/images/presigned-urls : 이미지 업로드
    • POST /api/items : 물품 등록
    • PUT /api/items/{itemId} : 물품 수정
    • GET /api/groups/{groupId}/items?size=30&cursor={cursor} : 물품 목록 조회
    • GET /api/groups/{groupId}/items?keyword={keyword}&size=30&cursor={cursor} : 물품 검색 조회
    • POST /api/search/rank-candidates : 물품 스마트 검색 조회
    • POST /api/items/{itemId}/likes : 물품 좋아요
    • DELETE /api/items/{itemId}/likes : 물품 좋아요 취소
    • GET /api/items/{itemId} : 물품 상세 조회
  • API 호출 처리:
    • axios 사용
      • 이유 : 우리 서비스에는 대부분의 API 요청에 인증 토큰을 보내야 하고, 공통적인 HTTP 오류(401, 500 등…) 처리가 반복되기 때문에 그 부분을 공통적으로 묶어주어야 한다. 이 부분을 직접 구현해도 되지만, Axios가 제공하는 추상화(interceptor)를 사용함으로써 직접 구현하는 비용과 유지보수 비용을 줄이고자 함.

라우팅

  • Next.js의 File-based Routing 사용

폼 처리 및 유효성 검증 (Forms & Validation)

  • React Hook Form 사용해서 폼 관리 및 검증 로직 구현
    • 선정 사유 : 커스텀 폼을 사용해도 되지만, 커스텀 폼을 사용하게 될 경우 필요한 요소들을 일일히 구현해야 하기 때문에 번거로움 발생. 해당 책임을 React Hook Form으로 위임했을 때 부담이 덜하다

상태 전이 관계도

참고한 페이지 : 이문기 - 프론트엔드에서 의존성 살펴보기

image

컴포넌트 의존성

image

부모 → 자식 : 부모가 해당 자식을 렌더링/props전달

자식 → 부모 : 이벤트/콜백값 반환

컴포넌트 생명주기

마운트 업데이트 언마운트
isGroupSelected, isDataLoaded, isItemEmpty의 state 초기값 저장 useEffect에서 API 응답 state 반영 후 리렌더링
• 처음 로딩
• 이후 페이지네이션으로 페이지 넘어갈 때마다 리렌더링		 ItemCard 클릭 이벤트 리스너 제거
/api/groups/{groupId}/items?size=30&cursor={cursor} API 호출 → useEffect 의존성 배열 공백

컴포넌트의 생명주기는 마운트-업데이트-언마운트의 단계로 이루어진 일련의 과정.

= 컴포넌트가 생성되고 사용되고 소멸되는 과정

마운트 : React 요소들을 DOM 노드에 추가할 때 발생, 한 번만 실행.

업데이트 : 속성/상태가 변경되어서 React 요소를 업데이트 할 때 발생, 여러 번 실행 가능

언마운트 : React 요소들을 DOM에서 제거할 때 발생, 한 번만 실행.

⚠️ **GitHub.com Fallback** ⚠️