중고차매매

July 6, 2023

상용화를 염두해 두고 Next.js로 개인 중고차 딜러의 웹 사이트를 만들었습니다.

사용자 사정으로 중단

상용화를 목표로 중고차 사이트를 만들어 보기로 했다. 보통 소비자는 메인 중고차 사이트에서 매물들을 보고 비교하기 때문에, 개인 중고차 사이트는 유저 편의를 제공하여 이용 시간을 늘리기 보다는 명함으로써 기능이 더 우선시 된다. 또한 자동차의 긴 수명 때문에 구매 후 재방문을 기대하기 힘드므로 회원 관리 기능도 불필요하다.

구현 기능 (진행중)

위와 같은 이유 때문에 회원 기능들을 모두 비회원 기능들로 전환 해야 할 필요성이 생긴다.

전환 기능

  • 좋아요 -> 최근 본 상품
  • 개인정보수집,이용 -> 직접연락채널 구현
  • 복합검색기능 -> 간편검색기능, 상사 보유물품 매물 추천
  • 장바구니 -> client에 조건 저장 후 연락 시 정보 전달 기능
  • 게시글 -> 비회원 비밀글 (구현 후순위)

백엔드

기본 상품 정보는 유료 api를 활용해 전국 등록 상품을 조회할 수 있다. 하지만 상사 고유 상품 정보를 가져오거나 기본 상품 정보의 가공 필요성 수요가 있을 수 있기 때문에 중간에 nextjs api 서버를 둬서 중개지로 삼는다.

프론트엔드

앱은 Next.js를 사용하여 최대한 정적으로 구성한다. 트래픽이 몰리지 않을 것이라 예상되고 상품을 게시하는 사이트 특성 상 서버와 상호작용을 하는것은 사실상 관리자 뿐이기 때문에 최대한 SSR로 페이지 구성을 몰아 넣어도 서버부하를 예상되지 않기 때문이다. 따라서 서버 데이터를 사용하는 페이지는 ISR로 구성하고 나머지는 next.js의 app component를 이용해서 CSR은 제한적으로 사용한다.

프로젝트 구성

src
 ┣ app
 ┃ ┣ products
 ┃ ┃ ┣ [id]
 ┃ ┃ ┃ ┗ page.tsx
 ┃ ┃ ┣ layout.tsx
 ┃ ┃ ┗ page.tsx
 ┃ ┣ favicon.ico
 ┃ ┣ globals.css
 ┃ ┣ layout.tsx
 ┃ ┗ page.tsx
 ┣ components
 ┃ ┣ Category
 ┃ ┃ ┣ Category.tsx
 ┃ ┃ ┣ Company.tsx
 ┃ ┃ ┣ Manufacturer.tsx
 ┃ ┃ ┣ ManufacturerList.tsx
 ┃ ┃ ┣ MileageRange.tsx
 ┃ ┃ ┣ PriceRange.tsx
 ┃ ┃ ┣ VehicleType.tsx
 ┃ ┃ ┣ VehicleTypes.tsx
 ┃ ┃ ┗ YearRange.tsx
 ┃ ┣ Header
 ┃ ┃ ┣ Header.tsx
 ┃ ┃ ┗ SearchInput.tsx
 ┃ ┣ Icons
 ┃ ┃ ┣ ContactIcon.tsx
 ┃ ┃ ┣ FavIcon.tsx
 ┃ ┃ ┣ FixIcon.tsx
 ┃ ┃ ┗ ShareIcon.tsx
 ┃ ┣ ProductDetail
 ┃ ┃ ┣ ImgContainer.tsx
 ┃ ┃ ┣ ProductDescription.tsx
 ┃ ┃ ┣ ProductHeader.tsx
 ┃ ┃ ┣ ProductHistory.tsx
 ┃ ┃ ┣ ProductOptions.tsx
 ┃ ┃ ┣ ProductSidebar.tsx
 ┃ ┃ ┗ RelatedProducts.tsx
 ┃ ┣ ProductsPage
 ┃ ┃ ┣ GeneralList.tsx
 ┃ ┃ ┗ RecommendList.tsx
 ┃ ┣ SearchBox
 ┃ ┃ ┣ Buttons
 ┃ ┃ ┣ CategoryContainer.tsx
 ┃ ┃ ┣ CompanyList.tsx
 ┃ ┃ ┣ ModelList.tsx
 ┃ ┃ ┣ SearchBox.tsx
 ┃ ┃ ┣ SearchModal.tsx
 ┃ ┃ ┣ SelectionButton.tsx
 ┃ ┃ ┣ SelectionContainer.tsx
 ┃ ┃ ┗ SpecificModelList.tsx
 ┃ ┣ SideBar
 ┃ ┃ ┗ SideBar.tsx
 ┃ ┣ Banner.tsx
 ┃ ┣ Footer.tsx
 ┃ ┣ NoticeContainer.tsx
 ┃ ┣ ProductCard.tsx
 ┃ ┗ TagButton.tsx
 ┣ redux
 ┃ ┣ slices
 ┃ ┃ ┣ categorySlice.ts
 ┃ ┃ ┗ simpleCategory.ts
 ┃ ┣ ReduxProvider.tsx
 ┃ ┗ store.ts
 ┣ service
 ┃ ┣ client
 ┃ ┗ server
 ┗ utils
 ┃ ┣ clientSideFetch.ts
 ┃ ┗ utils.ts