diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx index 9a1845ef..3439d74d 100644 --- a/src/app/product/[id]/page.tsx +++ b/src/app/product/[id]/page.tsx @@ -1,5 +1,7 @@ 'use client'; +import { ChangeEvent, useCallback, useState } from 'react'; + import classNames from 'classnames/bind'; import Image from 'next/image'; import { usePathname } from 'next/navigation'; @@ -25,6 +27,11 @@ const cx = classNames.bind(styles); function ProductDetailsPage() { const path = usePathname(); let productNo = Number(path.split('/').at(-1)); + const [type, setType] = useState('info'); + + const handleType = useCallback((event: ChangeEvent) => { + setType(event.target.value); + }, []); if (productNo == null) { productNo = 1; @@ -53,7 +60,6 @@ function ProductDetailsPage() { firstAid, } = productDetailsData.value; - // TODO: 리뷰 기능 추가 return ( <>
@@ -76,97 +82,107 @@ function ProductDetailsPage() { - - + + - - - } - closeIcon={} - > - 기본정보 - - - - 제품명 - - {productName} - - - 업체명 - - {companyName} - - - 제품구분 - - {productType} - - - 품목 - - {upperItem} - - - 제조구분 - - {manufactureType} - - - 제조방식 - - {manufactureMethod} - - - 중량 - - {weight} - - - 신고번호 - - {reportNumber} - - - - - } - closeIcon={} - > - 제품 상세 - - - - 상세성분 - - {mainSubstance} - - - 제품용도 - - {usage} - - - 주의사항 - - {usagePrecaution} - - - 응급조치 - - {firstAid} - - - - + {type === 'info' && ( + + + } + closeIcon={} + > + 기본정보 + + + + 제품명 + + {productName} + + + 업체명 + + {companyName} + + + 제품구분 + + {productType} + + + 품목 + + {upperItem} + + + 제조구분 + + {manufactureType} + + + 제조방식 + + {manufactureMethod} + + + 중량 + + {weight} + + + 신고번호 + + {reportNumber} + + + + + } + closeIcon={} + > + 제품 상세 + + + + 상세성분 + + {mainSubstance} + + + 제품용도 + + {usage} + + + 주의사항 + + {usagePrecaution} + + + 응급조치 + + {firstAid} + + + + + )} + {type === 'review' && ( + + + 리뷰 기능은 아직 준비 중이에요 + + 빠른 시일 내에 찾아뵙겠습니다 + + )} ); }