From a597e612c7f3d8accfa8cd935c55946e3a9ae430 Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Sun, 3 Mar 2024 23:33:28 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=20ui=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/product/[id]/page.tsx | 198 ++++++++++++++++++----------------
 1 file changed, 107 insertions(+), 91 deletions(-)

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<HTMLInputElement>) => {
+    setType(event.target.value);
+  }, []);
 
   if (productNo == null) {
     productNo = 1;
@@ -53,7 +60,6 @@ function ProductDetailsPage() {
     firstAid,
   } = productDetailsData.value;
 
-  // TODO: 리뷰 기능 추가
   return (
     <>
       <Header type="product" className={cx('product')} />
@@ -76,97 +82,107 @@ function ProductDetailsPage() {
         </Flex>
       </Flex>
       <Flex>
-        <Radio type="product" label="제품정보" value="info" name="product" defaultChecked />
-        <Radio type="product" label="리뷰" value="review" name="product" />
+        <Radio type="product" label="제품정보" value="info" name="product" defaultChecked onChange={handleType} />
+        <Radio type="product" label="리뷰" value="review" name="product" onChange={handleType} />
       </Flex>
-      <Accordion defaultActiveItems={['basicInformation']}>
-        <AccordionItem itemName="basicInformation">
-          <AccordionHeader
-            className={cx('accordionHeader')}
-            openIcon={<DropdownArrow isRotate={false} color="gray400" />}
-            closeIcon={<DropdownArrow isRotate color="gray400" />}
-          >
-            <Text typography="t5" color="gray700">기본정보</Text>
-          </AccordionHeader>
-          <AccordionBody
-            className={cx('accordionBody')}
-          >
-            <Flex>
-              <Text typography="t7" className={cx('infoTitle')}>제품명</Text>
-              <Spacing size={8} direction="vertical" />
-              <Text color="gray600" typography="t6" className={cx('infoDescription')}>{productName}</Text>
-            </Flex>
-            <Flex>
-              <Text typography="t7" className={cx('infoTitle')}>업체명</Text>
-              <Spacing size={8} direction="vertical" />
-              <Text color="gray600" typography="t6" className={cx('infoDescription')}>{companyName}</Text>
-            </Flex>
-            <Flex>
-              <Text typography="t7" className={cx('infoTitle')}>제품구분</Text>
-              <Spacing size={8} direction="vertical" />
-              <Text color="gray600" typography="t6" className={cx('infoDescription')}>{productType}</Text>
-            </Flex>
-            <Flex>
-              <Text typography="t7" className={cx('infoTitle')}>품목</Text>
-              <Spacing size={8} direction="vertical" />
-              <Text color="gray600" typography="t6" className={cx('infoDescription')}>{upperItem}</Text>
-            </Flex>
-            <Flex>
-              <Text typography="t7" className={cx('infoTitle')}>제조구분</Text>
-              <Spacing size={8} direction="vertical" />
-              <Text color="gray600" typography="t6" className={cx('infoDescription')}>{manufactureType}</Text>
-            </Flex>
-            <Flex>
-              <Text typography="t7" className={cx('infoTitle')}>제조방식</Text>
-              <Spacing size={8} direction="vertical" />
-              <Text color="gray600" typography="t6" className={cx('infoDescription')}>{manufactureMethod}</Text>
-            </Flex>
-            <Flex>
-              <Text typography="t7" className={cx('infoTitle')}>중량</Text>
-              <Spacing size={8} direction="vertical" />
-              <Text color="gray600" typography="t6" className={cx('infoDescription')}>{weight}</Text>
-            </Flex>
-            <Flex>
-              <Text typography="t7" className={cx('infoTitle')}>신고번호</Text>
-              <Spacing size={8} direction="vertical" />
-              <Text color="gray600" typography="t6" className={cx('infoDescription')}>{reportNumber}</Text>
-            </Flex>
-          </AccordionBody>
-        </AccordionItem>
-        <AccordionItem itemName="productDetails" className={cx('accordionItem')}>
-          <AccordionHeader
-            className={cx('accordionHeader')}
-            openIcon={<DropdownArrow isRotate={false} color="gray400" />}
-            closeIcon={<DropdownArrow isRotate color="gray400" />}
-          >
-            <Text typography="t5" color="gray700">제품 상세</Text>
-          </AccordionHeader>
-          <AccordionBody
-            className={cx('accordionBody')}
-          >
-            <Flex align="flex">
-              <Text typography="t7" className={cx('infoTitle')}>상세성분</Text>
-              <Spacing size={8} direction="vertical" />
-              <Text color="gray600" typography="t6" className={cx('infoDescription')}>{mainSubstance}</Text>
-            </Flex>
-            <Flex>
-              <Text typography="t7" className={cx('infoTitle')}>제품용도</Text>
-              <Spacing size={8} direction="vertical" />
-              <Text color="gray600" typography="t6" className={cx('infoDescription')}>{usage}</Text>
-            </Flex>
-            <Flex>
-              <Text typography="t7" className={cx('infoTitle')}>주의사항</Text>
-              <Spacing size={8} direction="vertical" />
-              <Text color="gray600" typography="t6" className={cx('infoDescription')}>{usagePrecaution}</Text>
-            </Flex>
-            <Flex>
-              <Text typography="t7" className={cx('infoTitle')}>응급조치</Text>
-              <Spacing size={8} direction="vertical" />
-              <Text color="gray600" typography="t6" className={cx('infoDescription')}>{firstAid}</Text>
-            </Flex>
-          </AccordionBody>
-        </AccordionItem>
-      </Accordion>
+      {type === 'info' && (
+        <Accordion defaultActiveItems={['basicInformation']}>
+          <AccordionItem itemName="basicInformation">
+            <AccordionHeader
+              className={cx('accordionHeader')}
+              openIcon={<DropdownArrow isRotate={false} color="gray400" />}
+              closeIcon={<DropdownArrow isRotate color="gray400" />}
+            >
+              <Text typography="t5" color="gray700">기본정보</Text>
+            </AccordionHeader>
+            <AccordionBody
+              className={cx('accordionBody')}
+            >
+              <Flex>
+                <Text typography="t7" className={cx('infoTitle')}>제품명</Text>
+                <Spacing size={8} direction="vertical" />
+                <Text color="gray600" typography="t6" className={cx('infoDescription')}>{productName}</Text>
+              </Flex>
+              <Flex>
+                <Text typography="t7" className={cx('infoTitle')}>업체명</Text>
+                <Spacing size={8} direction="vertical" />
+                <Text color="gray600" typography="t6" className={cx('infoDescription')}>{companyName}</Text>
+              </Flex>
+              <Flex>
+                <Text typography="t7" className={cx('infoTitle')}>제품구분</Text>
+                <Spacing size={8} direction="vertical" />
+                <Text color="gray600" typography="t6" className={cx('infoDescription')}>{productType}</Text>
+              </Flex>
+              <Flex>
+                <Text typography="t7" className={cx('infoTitle')}>품목</Text>
+                <Spacing size={8} direction="vertical" />
+                <Text color="gray600" typography="t6" className={cx('infoDescription')}>{upperItem}</Text>
+              </Flex>
+              <Flex>
+                <Text typography="t7" className={cx('infoTitle')}>제조구분</Text>
+                <Spacing size={8} direction="vertical" />
+                <Text color="gray600" typography="t6" className={cx('infoDescription')}>{manufactureType}</Text>
+              </Flex>
+              <Flex>
+                <Text typography="t7" className={cx('infoTitle')}>제조방식</Text>
+                <Spacing size={8} direction="vertical" />
+                <Text color="gray600" typography="t6" className={cx('infoDescription')}>{manufactureMethod}</Text>
+              </Flex>
+              <Flex>
+                <Text typography="t7" className={cx('infoTitle')}>중량</Text>
+                <Spacing size={8} direction="vertical" />
+                <Text color="gray600" typography="t6" className={cx('infoDescription')}>{weight}</Text>
+              </Flex>
+              <Flex>
+                <Text typography="t7" className={cx('infoTitle')}>신고번호</Text>
+                <Spacing size={8} direction="vertical" />
+                <Text color="gray600" typography="t6" className={cx('infoDescription')}>{reportNumber}</Text>
+              </Flex>
+            </AccordionBody>
+          </AccordionItem>
+          <AccordionItem itemName="productDetails" className={cx('accordionItem')}>
+            <AccordionHeader
+              className={cx('accordionHeader')}
+              openIcon={<DropdownArrow isRotate={false} color="gray400" />}
+              closeIcon={<DropdownArrow isRotate color="gray400" />}
+            >
+              <Text typography="t5" color="gray700">제품 상세</Text>
+            </AccordionHeader>
+            <AccordionBody
+              className={cx('accordionBody')}
+            >
+              <Flex align="flex">
+                <Text typography="t7" className={cx('infoTitle')}>상세성분</Text>
+                <Spacing size={8} direction="vertical" />
+                <Text color="gray600" typography="t6" className={cx('infoDescription')}>{mainSubstance}</Text>
+              </Flex>
+              <Flex>
+                <Text typography="t7" className={cx('infoTitle')}>제품용도</Text>
+                <Spacing size={8} direction="vertical" />
+                <Text color="gray600" typography="t6" className={cx('infoDescription')}>{usage}</Text>
+              </Flex>
+              <Flex>
+                <Text typography="t7" className={cx('infoTitle')}>주의사항</Text>
+                <Spacing size={8} direction="vertical" />
+                <Text color="gray600" typography="t6" className={cx('infoDescription')}>{usagePrecaution}</Text>
+              </Flex>
+              <Flex>
+                <Text typography="t7" className={cx('infoTitle')}>응급조치</Text>
+                <Spacing size={8} direction="vertical" />
+                <Text color="gray600" typography="t6" className={cx('infoDescription')}>{firstAid}</Text>
+              </Flex>
+            </AccordionBody>
+          </AccordionItem>
+        </Accordion>
+      )}
+      {type === 'review' && (
+        <Flex direction="column" justify="center" align="center">
+          <Spacing size={50} />
+          <Text typography="t4">리뷰 기능은 아직 준비 중이에요</Text>
+          <Spacing size={4} />
+          <Text typography="t6" color="gray500">빠른 시일 내에 찾아뵙겠습니다</Text>
+        </Flex>
+      )}
     </>
   );
 }