Skip to content

Commit

Permalink
Merge pull request #248 from Kernel360/feature-review-preparing
Browse files Browse the repository at this point in the history 
컴포넌트 기능: 리뷰 UI 제작
  • Loading branch information
@bottlewook
bottlewook authored Mar 3, 2024
2 parents 8d6ebfc + a597e61 commit 2315511
Showing 1 changed file with 107 additions and 91 deletions.
198 changes: 107 additions & 91 deletions src/app/product/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -53,7 +60,6 @@ function ProductDetailsPage() {
firstAid,
} = productDetailsData.value;

// TODO: 리뷰 기능 추가
return (
<>
<Header type="product" className={cx('product')} />
Expand All @@ -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>
)}
</>
);
}
Expand Down

0 comments on commit 2315511

Please sign in to comment.