Merge pull request #99 from Kernel360/page-product-detail-ui

페이지 UI: 제품 상세 페이지 미완성

src/app/product/[id]/page.module.scss

@@ -0,0 +1,7 @@
+.product {
+  padding: 0 24px;
+}
+
+.productInfo {
+  padding: 16px 24px;
+}

src/app/product/[id]/page.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+
+import Star from '@components/icons/Star';
+import Flex from '@shared/flex/Flex';
+import Header from '@shared/header/Header';
+import Radio from '@shared/radio/Radio';
+import Spacing from '@shared/spacing/Spacing';
+import Text from '@shared/text/Text';
+
+import styles from './page.module.scss';
+
+const cx = classNames.bind(styles);
+
+function SuppliesPage() {
+  return (
+    <>
+      <Header isDisplayLogo={false} displayRightIconType="heartShare" className={cx('product')} />
+      <Image src="/assets/product.png" alt="상품 이미지" width={375} height={375} />
+      <Flex direction="column" className={cx('productInfo')}>
+        <Text color="primary" typography="t6">카믹스</Text>
+        <Text typography="t4" bold>아머올 세차용품 스피드 왁스 스프레이</Text>
+        <Flex align="center">
+          <Text color="tertiary" typography="t6">코팅제</Text>
+          <Spacing size={4} direction="vertical" />
+          <Text color="tertiary" typography="t6">•</Text>
+          <Spacing size={4} direction="vertical" />
+          <Star size={14} />
+          <Spacing size={4} direction="vertical" />
+          <Text color="tertiary" typography="t6">4.5</Text>
+          <Spacing size={4} direction="vertical" />
+          <Text color="tertiary" typography="t6">(20)</Text>
+        </Flex>
+      </Flex>
+      <Flex>
+        <Radio type="product" label="제품정보" value="info" name="product" />
+        <Radio type="product" label="리뷰" value="review" name="product" />
+      </Flex>
+    </>
+  );
+}
+
+export default SuppliesPage;

src/components/icons/Star.tsx

@@ -0,0 +1,10 @@
+function Star({ size }: { size: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M6.61835 0.820337C6.77435 0.504305 7.225 0.504305 7.381 0.820337L9.01274 4.12607C9.13652 4.37683 9.37567 4.55073 9.65238 4.59117L13.3021 5.12464C13.6508 5.1756 13.7898 5.60418 13.5373 5.85005L10.8974 8.42133C10.6968 8.61673 10.6052 8.89835 10.6526 9.17436L11.2755 12.8064C11.3351 13.1538 10.9704 13.4187 10.6585 13.2547L7.39554 11.5387C7.14772 11.4084 6.85163 11.4084 6.60381 11.5387L3.34089 13.2547C3.02892 13.4187 2.66425 13.1538 2.72383 12.8064L3.34677 9.17436C3.39411 8.89835 3.30254 8.61673 3.10193 8.42133L0.46201 5.85005C0.209584 5.60418 0.348549 5.1756 0.697217 5.12464L4.34697 4.59117C4.62368 4.55073 4.86283 4.37683 4.98661 4.12607L6.61835 0.820337Z" fill="#FFD15B" />
+    </svg>
+
+  );
+}
+
+export default Star;

src/components/shared/radio/Radio.module.scss

@@ -64,3 +64,11 @@
   background-color: var(--primary);
   color: var(--white);
 }
+
+.label.product {
+  height: 36px;
+}
+
+.input[type="radio"]:checked + .label.product {
+  border-bottom: 1px solid var(--black);
+}

src/components/shared/radio/Radio.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames/bind';
 import styles from './Radio.module.scss';
 
 interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
-  type: 'gender' | 'ageGroup' | 'additionalInfo' | 'filter'
+  type: 'gender' | 'ageGroup' | 'additionalInfo' | 'filter' | 'product'
   label: string
   value: string | number
 }