diff --git a/public/assets/icons/star.svg b/public/assets/icons/star.svg new file mode 100644 index 00000000..c402ff4a --- /dev/null +++ b/public/assets/icons/star.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/product.png b/public/assets/product.png new file mode 100644 index 00000000..590c698e Binary files /dev/null and b/public/assets/product.png differ diff --git a/src/app/product/[id]/page.module.scss b/src/app/product/[id]/page.module.scss new file mode 100644 index 00000000..3f56f6c3 --- /dev/null +++ b/src/app/product/[id]/page.module.scss @@ -0,0 +1,7 @@ +.product { + padding: 0 24px; +} + +.productInfo { + padding: 16px 24px; +} diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx new file mode 100644 index 00000000..d91fce7d --- /dev/null +++ b/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 ( + <> +
+ 상품 이미지 + + 카믹스 + 아머올 세차용품 스피드 왁스 스프레이 + + 코팅제 + + • + + + + 4.5 + + (20) + + + + + + + + ); +} + +export default SuppliesPage; diff --git a/src/components/icons/Star.tsx b/src/components/icons/Star.tsx new file mode 100644 index 00000000..c67a08b0 --- /dev/null +++ b/src/components/icons/Star.tsx @@ -0,0 +1,10 @@ +function Star({ size }: { size: number }) { + return ( + + + + + ); +} + +export default Star; diff --git a/src/components/shared/radio/Radio.module.scss b/src/components/shared/radio/Radio.module.scss index 0a5a8838..94a35a03 100644 --- a/src/components/shared/radio/Radio.module.scss +++ b/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); +} diff --git a/src/components/shared/radio/Radio.tsx b/src/components/shared/radio/Radio.tsx index 44a916cf..57ef2b05 100644 --- a/src/components/shared/radio/Radio.tsx +++ b/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 { - type: 'gender' | 'ageGroup' | 'additionalInfo' | 'filter' + type: 'gender' | 'ageGroup' | 'additionalInfo' | 'filter' | 'product' label: string value: string | number }