[#15] 차량 목록 리스트 컴포넌트 구현

[youngminss]

해결한 이슈

• 차량 목록 리스트 구현 #15

해결 방법

차량 목록 서버 데이터 가져오기

• 실제로 사용할 차량 목록 데이터를 단순히 GET 해와서 클라이언트에서는 필요한 컴포넌트에서 표현만 하면됨.
• 즉, 서버 상태이면서 클라이언트에서 크게 관여하지 않기 때문에 React-Query 데이터 패칭 라이브러리를 사용해서 서버 상태를 관리.
• TypeScript 를 효과적으로 사용하기 위해 사전에 API 스펙과 연관된 Type 들을 정의해서 API Response OR Request 시에 사용.

export type Fuel = 'gasoline' | 'hybrid' | 'ev';
export type Segment = 'C' | 'D' | 'E' | 'SUV';

export type Insurance = {
	name: string;
	description: string;
};

export type AdditionalProduct = {
	name: string;
	amount: number;
};

export type Attribute = {
	brand: string;
	name: string;
	segment: Segment;
	fuelType: Fuel;
	imageUrl: string;
};

export type Car = {
	id: number;
	amount: number;
	attribute: Attribute;
	startDate: string;
	createdAt: string;
	insurance?: Insurance[];
	addtionalProduct?: AdditionalProduct[];
};

export type CarsReponseDto = {
	payload: Car[];
};

실제 차량 데이터 내 Attribute 속성의 FuelType, Segment 데이터에 맞는 UI 데이터 렌더링

• 실제 서버 데이터에 표현된 Property 값(영어)에 매핑되는 실제 UI 에 표현해야할 데이터로 매핑해서 사용

import { Fuel, Segment } from '@src/types/car';

const fuelTable: { [fuel in Fuel]: string } = {
	gasoline: '가솔린',
	hybrid: '하이브리드',
	ev: '전기',
};

const segmentTable: { [segment in Segment]: string } = {
	C: '소형',
	D: '중형',
	E: '대형',
	SUV: 'SUV',
};

export const carAttributeTable = { fuelTable, segmentTable };

실제 렌더링할 UI 데이터 가공

• 서버로부터 받아오는 차량 정보 중, 차량 등록일(craeteAt) 로부터 하루가 지난 차량 데이터인지 판단하는 로직

const MILLISECOND_TO_HOUR = 1000 * 60 * 60 * 24;
const DAY1 = 1;

export const isNewDate = (createdDateString: string) =>
	(new Date().getTime() - new Date(createdDateString).getTime()) / MILLISECOND_TO_HOUR <= DAY1;

• 숫자(number) 타입의 차량 금액 데이터 -> 실제 렌더링 금액 데이터는 1000단위에서 쉼표(,) 로 구분된 데이터로 변환

export const numberWithCommasConverter = (n: number) => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

캡처 첨부

차량 목록 서버 데이터받아 렌더링된 결과

추가적인 태스크

• 차량 목록 리스트 컨테이너의 전체 Height 를 조절(Header 와 차량 필터링 세션을 제외한 전체 영역까지로)
• 차량 목록 데이터가 많아졌을 경우를 가정해서 TopMoveButton 컴포넌트까지 만들어줄 것

PR Submit 이전에 확인하세요 !

체크리스트

• Merge 하는 브랜치에 Master/Main 브랜치가 아닙니다.

[od-log]

수고하셨습니다👍

[forest-6]

LGTM