[교보문고] 클론코딩 상세 페이지

 

 아래는 실제 교보문고 상세 페이지다.

 

 

상세 페이지 클론코딩 하면서 생긴 문제점..

 

실제 교보문고 처럼 만들고 싶었는데, 기존 타입에는 discount 타입이 없고, 책 가격은 number 타입이여서, 숫자에 쉼표를 어떻게 넣을지, 원가에서 할인을 해서, 할인율로 보여주는 방법을 고민을 했었다.

 

기존 Mock 데이터는 아래처럼 되어 있었다.

`export interface Book {
    id: number;
    title: string;
    author: string;
    accumulation: number;
    content: string;
    price: number;
    period: string;
    delivery: string;
    image: string;
    comment: string;
}`

 

여기에 discount: number; 를 추가를 해줬다.

 

유틸리티 파일을 만들어 formatPrice 라는 함수를 만들었다.

src/utils/formatPrice.ts

`export const formatPrice = (price:number): string => {
	return new Inil.NumberFormat('ko-KR').format(price);
}

Intl.NumberFormat은 숫자를 특정 언어에 맞는 형식으로 출력할 수 있도록 도와주는 
JavaScript 내장 객체이다.`

 

유틸리티 파일을 만들어서 함수를 만든 이유는 나중에 장바구니 같은 페이지에서도 사용이 될 수 있을 것 같아서, 재사용할 수 있을 것 같아서 별도의 파일로 만들었다.

 

상세 페이지에서
{formatPrice(book.price)} 함수를 사용 했더니, 쉽게 쉼표를 적용할 수 있었다

 

아래 이미지는 formatPrice 함수를 사용 해서, 쉼표를 설정한 이미지다.

 

 

정가 가격에서 할인된 가격으로 보여주는 방법

 

기존에는 Mock 데이터 가격이 40,500원이였는데, 똑같이 하고 싶어서, 정가 가격으로 고쳤다.

 

정가 가격 45,000원에서 10%을 곱해서 계산을 하면 됐다. -> 45,000 * ( 1 - 0.1 ) = 42,000원

 

코드로는 아래와 같다.

`const discount = price * ( 1 - 10 / 100);
1 - 10 / 100 = 할인율을 빼기 위한 계산이다. 10% 적용하려면 1 - 0.1이 되어 0.9가 된다.
이렇게 하면 원가의 90%만큼 계산이 된다. 

실제 적용한 코드
const discount = book.price * (1 - book.discount / 100);`

 

위의 discount 식별자를 사용을 해서, 쉽게 정가에서 할인율을 뺀 할인가격을 표시할 수 있었다.

 

아래는 정가에서 할인이 된 가격 이미지다.

 

마치며

앞으로 더 나은 모습을 보여드릴 수 있도록, 계속해서 공부하고, 도전하며, 나  혼자만 레벨업 만화처럼, 빨리 성장할 수 있는 개발자가 되겠습니담.

감사합니다.

(클론코딩 끝 아닙니당)