[개인 프로젝트(5)] 신상품 페이지 구현

위와 같이 간단하게 신상품 페이지 UI를 만들고 담기 기능을 추가함

고민점

1. 이 페이지는 어떤 방식으로 렌더링을 시켜줘야 할까? CSR? SSR?
2. 담을 때 어떤 데이터 형식을 db에 전달해줘야 할까?
3. 정렬 기준을 어느 부분까지 가져가야 할까?

1. 렌더링 방식

이 페이지 또한 검색 엔진에 걸리면 좋을 다량의 정보가 렌더링 되므로 서버사이드 렌더링을 시켜야 겠다는 생각을 했음.

import NewProductPageContent from "@/components/pages/NewProductPageContent";
import { dataQueryOptions } from "@/queries/queryOptions";
import {
  HydrationBoundary,
  QueryClient,
  dehydrate,
} from "@tanstack/react-query";

async function prefetchNewProductPageData() {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery(dataQueryOptions.fetchNewProductPageData());

  return dehydrate(queryClient);
}

export default async function NewProductPage() {
  const dehydratedState = await prefetchNewProductPageData();

  return (
    <div className="mx-8">
      <h1 className="w-full flex items-center justify-center text-3xl font-semibold py-5 ">
        신상품
      </h1>
      <HydrationBoundary state={dehydratedState}>
        <NewProductPageContent />
      </HydrationBoundary>
    </div>
  );
}

위의 코드로 굳이 h1 태그까지 따로 컴포넌트를 만들 필요성까진 못느껴서 복붙을 해주었고 내부 컨텐트들에 데이터를 반건조 오징어(디하이드레이트)화 시켜서 미리 준비해주어 진행함

2. 장바구니 데이터는 어떻게?

담기 버튼을 누르면 장바구니에 해당 데이터들이 담겨야함

기존 데이터 형식은 아래와 같음

export type DefaultContentType = {
  h1Texts: string[];
  h2Texts: string[];
  h3Texts: string[];
  id: string;
  images: string[];
  pTexts: string[];
  spanTexts: string[];
};

그래서 일단 위의 데이터 형식을 따라 진행을 하였으나 후에 문제가 생김

위의 사진을 보면 수량을 수정해주는 기능이 있는데 이를 장바구니 페이지 또는 컴포넌트에서 따로 데이터 형식을 만들어 db에 넣어주고 기존 데이터를 없애는 과정이 필요했음.
그럴 바에는 초기부터 order에 대한 값을 포함해 주어 위의 페이지에서도 쉽게 다룰 수 있도록 수정함 데이터 형식은 아래와 같음.

3. 정렬 기준을 어느 정도까지?

마켓컬리 사이트를 보면 가격순, 추천 순 등등 여러 정렬 기준이 존재하는데 현재 나의 DB로는 불가능한 부분이 많음
그러므로 간단하게 가격순의 정렬만을 구현하여 제작