@@ -76,7 +77,7 @@ const ProductInfo = () => (
충전 및 보관 시 잠재적인 화재 위험을 유의하시고, 반드시 사용 설명서를 엄격히 준수해 주세요.
추천 상점
;
+
+export default RecommanedBtn;
diff --git a/src/components/button/recommendBtn/reviewBtn.tsx b/src/components/button/recommendBtn/reviewBtn.tsx
new file mode 100644
index 0000000..996851d
--- /dev/null
+++ b/src/components/button/recommendBtn/reviewBtn.tsx
@@ -0,0 +1,53 @@
+import {
+ IcGoodGray16,
+ IcHandshakeGray16,
+ IcCometGray16,
+ IcGoodBlue16,
+ IcHandshakeBlue16,
+ IcCometBlue16,
+} from '@assets/icons';
+import { useState } from 'react';
+
+import { flexStyle, btnStyleMap, countStyle } from './reviewBtnStyle';
+
+interface ReviewBtnProps {
+ type: 'useful' | 'recommend' | 'like';
+ clickedCount: number;
+}
+
+const ReviewBtn = ({ type, clickedCount }: ReviewBtnProps) => {
+ const [isClicked, setIsClicked] = useState(false);
+ const [count, setCount] = useState(clickedCount);
+ const handleClick = (): void => {
+ setCount(isClicked ? count - 1 : count + 1); // 클릭시 이미 클릭된 버튼이면 -1, 클릭이 안 됐던 버튼은 +1
+ setIsClicked(!isClicked); // 버튼 클릭 상태 바꾸기
+ };
+ const formatCount = (value: number) => (value > 999 ? '999+' : value);
+ const buttonType = {
+ useful: {
+ icon: isClicked ?
+
+ {/* 오른쪽 섹션 */}
+
+ {/* 국가섹션 */}
+
+
+
+
+
+ 수원시 장안구
+/KO/KRW
+
+
+ {/* 카트섹션 */}
+
+
+ Hi,
+이
+
+
+ 장바구니
+9
+
+
+);
+
+export default Category;
diff --git a/src/components/header/productHeader/CategoryStyle.ts b/src/components/header/productHeader/CategoryStyle.ts
new file mode 100644
index 0000000..5a34887
--- /dev/null
+++ b/src/components/header/productHeader/CategoryStyle.ts
@@ -0,0 +1,46 @@
+import { Theme, css } from '@emotion/react';
+
+export const CategoryLayout = css`
+ position: absolute;
+ top: 3.5rem;
+ left: -9rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ align-items: center;
+ justify-content: center;
+`;
+
+export const CategoryContainerStyle = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.2rem;
+ padding: 0 0.1rem 0.6rem 0.6rem;
+
+ background-color: ${theme.colors.white};
+ border-radius: 9px;
+`;
+
+export const ScrollStyle = (theme: Theme) => css`
+ height: 38.4rem;
+ overflow: hidden scroll;
+
+ /* 스크롤바 스타일링 */
+ &::-webkit-scrollbar {
+ width: 0.4rem;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: ${theme.colors.gray4};
+ border-radius: 999px;
+ }
+`;
+
+export const TitleStyle = (theme: Theme) => css`
+ display: flex;
+ ${theme.fonts.kor.bodyBold13}
+ gap: 0.6rem;
+ padding: 1.2rem 9.425rem 1.2rem 0.575rem;
+
+ white-space: nowrap;
+`;
diff --git a/src/components/header/productHeader/MyList.tsx b/src/components/header/productHeader/MyList.tsx
new file mode 100644
index 0000000..c5691d5
--- /dev/null
+++ b/src/components/header/productHeader/MyList.tsx
@@ -0,0 +1,48 @@
+import { ImgProfile30, ImgVector7192 } from '@assets/icons/index';
+import CategoryItemBtn from '@components/button/categoryItemBtn/CategoryItemBtn';
+import {
+ MyLayoutStyle,
+ MyContainerStyle,
+ MyWrapperStyle,
+ infoStyle,
+ mFontStyle,
+ bFontStyle,
+ mFontColorStyle,
+ dividerStyle,
+} from '@components/header/productHeader/MyListStyle';
+import { MY_CATEGORIES } from '@constants/myList';
+import { useNavigate } from 'react-router-dom';
+
+const MyList = () => {
+ const nav = useNavigate();
+
+ return (
+
+
+
+
+ 모든 카테고리
+
+ {CATEGORIES.map(({ icon: IconComponent, label }) => {
+ return
+
+
+ );
+};
+
+export default MyList;
diff --git a/src/components/header/productHeader/MyListStyle.ts b/src/components/header/productHeader/MyListStyle.ts
new file mode 100644
index 0000000..aed2d4d
--- /dev/null
+++ b/src/components/header/productHeader/MyListStyle.ts
@@ -0,0 +1,53 @@
+import { Theme, css } from '@emotion/react';
+
+export const MyLayoutStyle = css`
+ position: absolute;
+ top: 4.5rem;
+ right: -4rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ align-items: center;
+ justify-content: center;
+`;
+
+export const MyContainerStyle = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
+ width: 20rem;
+ height: 25.7rem;
+ padding: 2rem 1.3rem;
+
+ background-color: ${theme.colors.white};
+ border-radius: 12px;
+`;
+
+export const MyWrapperStyle = css`
+ display: flex;
+ gap: 0.9rem;
+`;
+
+export const infoStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.3rem;
+`;
+
+export const mFontStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionMedium10}
+`;
+export const bFontStyle = (theme: Theme) => css`
+ ${theme.fonts.eng.captionBold11}
+ margin-bottom: 0.3rem;
+`;
+export const mFontColorStyle = (theme: Theme) => css`
+ color: ${theme.colors.notificationPrimary};
+`;
+
+export const dividerStyle = (theme: Theme) => css`
+ width: 16.95rem;
+ height: 0;
+
+ border-top: 1px solid ${theme.colors.gray3};
+`;
diff --git a/src/components/header/productHeader/ProductHeader.tsx b/src/components/header/productHeader/ProductHeader.tsx
new file mode 100644
index 0000000..009481b
--- /dev/null
+++ b/src/components/header/productHeader/ProductHeader.tsx
@@ -0,0 +1,120 @@
+import {
+ ImgLogotypeL,
+ IcHamburgermenuWhite14,
+ IcSearchWhite24,
+ IcImagesearchBlack24,
+ IcQrcodeWhite24,
+ ImgFlagKorL,
+ IcArrowbottomSWhite12,
+ IcUserWhite24,
+ IcCartWhite24,
+} from '@assets/icons/index';
+import Category from '@components/header/productHeader/Category';
+import MyList from '@components/header/productHeader/MyList';
+import { useState } from 'react';
+
+import {
+ relativeStyle,
+ headerStyle,
+ logoDescStyle,
+ fontEnStyle,
+ fontKoStyle,
+ hambergerStyle,
+ inputStyle,
+ IconContainer,
+ searchStyle,
+ appLogLayout,
+ textContainer,
+ fontEnAppStyle,
+ flagLayout,
+ flagContainer,
+ fontKRWStyle,
+ arrowStyle,
+ fontMStyle,
+ fontBStyle,
+ cartLayout,
+ numBackStyle,
+} from './ProductHeaderStyle';
+
+const ProductHeader = () => {
+ const [activePopup, setActivePopup] = useState<'burger' | 'info' | null>(null);
+
+ const togglePopup = (popup: 'burger' | 'info') => {
+ setActivePopup(activePopup === popup ? null : popup);
+ };
+ return (
+
+
+
+
+
+ {MY_CATEGORIES.map(({ icon: IconComponent, label }, index) => (
+
+
+
+
+ 환영합니다
+데2걸
+로그아웃
+
+
+
+ {/* 햄버거 메뉴 */}
+
+
+ {/* 검색섹션 */}
+
+
+ Alibaba Group
+해외 직구 플랫폼
+
+
+
+
+ {/* 유틸리티 섹션 */}
+ {/* 앱 다운로드 */}
+
+
+
+
+ AliExpress
+앱 다운로드
+
+
+
+
+ KO/
+KRW
+
+
+ {/* 카테고리 팝업 */}
+ {activePopup === 'info' &&
+
+ 환영합니다!/
+로그인/회원가입
+
+
+ 0
+장바구니
+상품 정보
+|
+ |
+ 100g | +
+ |
+ USB-A | +
|---|---|---|---|
|
+ |
+ 포장됨 | +
+ |
+ 다양한 기기 | +
|
+ |
+ 10000mAh | +
+ |
+ 고속 충전 | +
+
+
+ 배송지:
+
+
+ Gangnam-gu, Seoul, Korea
+
+
+
+
+
+
+
+ 도착일:
+ 11 월 19 일-26 일
+
+
+
+
+
+
+
+ 안심 결제: 카드 정보는 안전하게 보호되며 유출되지 않습니다.
+개인정보 보호: 개인정보 보안을 최우선으로 생각합니다.
+수량
+
+
+ 1
+
+
+
+
+
+ 주문 내역
+
+);
+
+export default OrderHistory;
diff --git a/src/components/orderDetail/orderHistory/orderHistoryStyle.ts b/src/components/orderDetail/orderHistory/orderHistoryStyle.ts
new file mode 100644
index 0000000..342c05a
--- /dev/null
+++ b/src/components/orderDetail/orderHistory/orderHistoryStyle.ts
@@ -0,0 +1,123 @@
+import { Theme, css } from '@emotion/react';
+
+const flexCenter = css`
+ display: flex;
+ align-items: center;
+`;
+
+export const orderHistoryContainerStyle = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ width: 91.1rem;
+ height: 29.4rem;
+ padding: 2.4rem 2.1rem;
+
+ background-color: ${theme.colors.white};
+`;
+
+export const headerStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.titleBold20};
+`;
+
+export const storeNameContainerStyle = css`
+ ${flexCenter};
+ height: 2.4rem;
+ margin: 1rem 0 1.3rem;
+`;
+
+export const storeNameStyle = (theme: Theme) => css`
+ ${theme.fonts.eng.bodyBold14};
+`;
+
+export const productContentStyle = css`
+ display: flex;
+ min-width: 55.4rem;
+ margin-bottom: 2.4rem;
+`;
+
+export const productImageStyle = css`
+ position: relative;
+ margin-right: 1.4rem;
+
+ svg {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ z-index: 1;
+ }
+`;
+
+export const productInfoContainerStyle = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ margin-right: 4.3rem;
+ ${theme.fonts.eng.bodyBold14};
+`;
+
+export const productInfoStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.9rem;
+ width: 56rem;
+`;
+
+export const productTitleStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.bodyBold13};
+ width: 56rem;
+ overflow: hidden;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+`;
+
+export const productPriceStyle = css`
+ ${flexCenter};
+ gap: 1.1rem;
+`;
+
+export const blueInfoStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionMedium12};
+ color: ${theme.colors.blue};
+`;
+
+export const buttonContainerStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
+`;
+
+export const productCostStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.9rem;
+ padding-left: 41.7rem;
+`;
+
+export const costRowStyle = css`
+ ${flexCenter};
+ justify-content: space-between;
+`;
+
+export const costGrayLabelStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.bodySemibold13};
+ color: ${theme.colors.gray7};
+`;
+
+export const costLabelStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.bodySemibold13};
+`;
+
+export const costBoldLabelStyle = (theme: Theme) => css`
+ ${theme.fonts.eng.bodyBold13};
+ padding-right: 2rem;
+`;
+
+export const costValueStyle = (theme: Theme) => css`
+ display: flex;
+ gap: 0.9rem;
+ align-items: center;
+
+ ${theme.fonts.eng.bodyMedium13};
+ color: ${theme.colors.gray7};
+`;
diff --git a/src/components/orderDetail/orderInfo/buyerInfo/buyerInfo.tsx b/src/components/orderDetail/orderInfo/buyerInfo/buyerInfo.tsx
new file mode 100644
index 0000000..3918c27
--- /dev/null
+++ b/src/components/orderDetail/orderInfo/buyerInfo/buyerInfo.tsx
@@ -0,0 +1,15 @@
+import { IcMapBlackStorke24 } from '@assets/icons';
+import BUYER_INFO from '@constants/buyerInfo';
+
+import { buyerInfoComponentStyle, korStringStyle, engStringStyle, infoDetailStyle } from './buyerInfoStyle';
+
+export const BuyerInfoComponent = () => (
+
+
+ Toocki Flagship Direct store
+
+
+
+ 
+
+
+
+
+
+ {ORDER_HISTORYT.detail}
+Clear
+
+
+ ￦{ORDER_HISTORYT.price.toLocaleString()}
+x{ORDER_HISTORYT.quantity}
+빠른 배송 · 무료 반품 · 배송 약속
+
+
+
+
+
+
+ 합계
+
+
+ ￦{ORDER_HISTORYT.price.toLocaleString()}
+
+
+ 총 금액
+￦1,202
+
+
+);
diff --git a/src/components/orderDetail/orderInfo/buyerInfo/buyerInfoStyle.ts b/src/components/orderDetail/orderInfo/buyerInfo/buyerInfoStyle.ts
new file mode 100644
index 0000000..1e18053
--- /dev/null
+++ b/src/components/orderDetail/orderInfo/buyerInfo/buyerInfoStyle.ts
@@ -0,0 +1,25 @@
+import { Theme, css } from '@emotion/react';
+
+export const buyerInfoComponentStyle = (theme: Theme) => css`
+ display: flex;
+ gap: 1.7rem;
+ width: 44.8rem;
+ height: 10.8rem;
+ padding: 1.6rem 2.4rem;
+
+ background-color: ${theme.colors.white};
+`;
+
+export const infoDetailStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.9rem;
+`;
+
+export const korStringStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.bodyMedium14}
+`;
+
+export const engStringStyle = (theme: Theme) => css`
+ ${theme.fonts.eng.bodyBold14}
+`;
diff --git a/src/components/orderDetail/orderInfo/orderInfo.tsx b/src/components/orderDetail/orderInfo/orderInfo.tsx
new file mode 100644
index 0000000..6c468fc
--- /dev/null
+++ b/src/components/orderDetail/orderInfo/orderInfo.tsx
@@ -0,0 +1,17 @@
+import { PurchaseInfoComponent } from './purchaseInfo/purchaseInfo';
+import { BuyerInfoComponent } from './buyerInfo/buyerInfo';
+import { orderInfoComponentStyle, contentComponentStyle, headerComponentStyle } from './orderInfoStyle';
+
+export const OrderInfoComponent = () => {
+ return (
+
+ {BUYER_INFO.name}
+ {BUYER_INFO.phone}
+ {BUYER_INFO.address}
+
+
+
+
+
+ );
+};
diff --git a/src/components/orderDetail/orderInfo/orderInfoStyle.ts b/src/components/orderDetail/orderInfo/orderInfoStyle.ts
new file mode 100644
index 0000000..c2059d4
--- /dev/null
+++ b/src/components/orderDetail/orderInfo/orderInfoStyle.ts
@@ -0,0 +1,27 @@
+import { Theme, css } from '@emotion/react';
+
+export const orderInfoComponentStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+ width: 91.1rem;
+ height: 17.6rem;
+ margin-top: 4.8rem;
+`;
+
+export const headerComponentStyle = (theme: Theme) => css`
+ display: flex;
+ align-items: center;
+ width: 91.1rem;
+ min-height: 5.2rem;
+ padding-left: 2.1rem;
+
+ ${theme.fonts.kor.titleBold20}
+ background-color: ${theme.colors.white};
+`;
+
+export const contentComponentStyle = css`
+ display: flex;
+ gap: 1.5rem;
+ width: 100%;
+`;
diff --git a/src/components/orderDetail/orderInfo/purchaseInfo/purchaseInfo.tsx b/src/components/orderDetail/orderInfo/purchaseInfo/purchaseInfo.tsx
new file mode 100644
index 0000000..47ccb4e
--- /dev/null
+++ b/src/components/orderDetail/orderInfo/purchaseInfo/purchaseInfo.tsx
@@ -0,0 +1,46 @@
+import { IcListBlack24 } from '@assets/icons';
+import BUYER_INFO from '@constants/buyerInfo';
+
+import {
+ purchaseInfoComponentStyle,
+ korStringStyle,
+ engStringStyle,
+ infoDetailStyle,
+ copyButtonStyle,
+ copyStringStyle,
+} from './purchaseInfoStyle';
+
+export const PurchaseInfoComponent = () => {
+ const handleCopyClick = () => {
+ const copyText = `${BUYER_INFO.orderId}`;
+ navigator.clipboard.writeText(copyText);
+ };
+
+ return (
+ 주문 & 배송
+
+
+
+
+ );
+};
diff --git a/src/components/orderDetail/orderInfo/purchaseInfo/purchaseInfoStyle.ts b/src/components/orderDetail/orderInfo/purchaseInfo/purchaseInfoStyle.ts
new file mode 100644
index 0000000..4d61c78
--- /dev/null
+++ b/src/components/orderDetail/orderInfo/purchaseInfo/purchaseInfoStyle.ts
@@ -0,0 +1,35 @@
+import { Theme, css } from '@emotion/react';
+
+export const purchaseInfoComponentStyle = (theme: Theme) => css`
+ display: flex;
+ gap: 1rem;
+ width: 44.8rem;
+ height: 10.8rem;
+ padding: 1.6rem 2.4rem;
+
+ background-color: ${theme.colors.white};
+`;
+
+export const infoDetailStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 1.1rem;
+`;
+
+export const copyButtonStyle = css`
+ display: flex;
+ padding-left: 1rem;
+`;
+
+export const korStringStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.bodyMedium14}
+`;
+
+export const engStringStyle = (theme: Theme) => css`
+ ${theme.fonts.eng.bodyBold14}
+`;
+
+export const copyStringStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.bodyMediumBlue14}
+ cursor: pointer;
+`;
diff --git a/src/components/orderDetail/orderStatus/deliveryStauts/deliveryStatus.tsx b/src/components/orderDetail/orderStatus/deliveryStauts/deliveryStatus.tsx
new file mode 100644
index 0000000..5cb5180
--- /dev/null
+++ b/src/components/orderDetail/orderStatus/deliveryStauts/deliveryStatus.tsx
@@ -0,0 +1,93 @@
+import {
+ CardDelieverStatus1,
+ CardDelieverStatus2,
+ CardDelieverStatus3,
+ CardDelieverStatus4,
+ CardDelieverStatus5,
+ CardDelieverStatus6,
+ CardDelieverFinalStatus1,
+ CardDelieverFinalStatus2,
+ CardDelieverFinalStatus3,
+ CardDelieverFinalStatus4,
+ CardDelieverFinalStatus5,
+ CardDelieverFinalStatus6,
+ IcArrowrightGray24,
+} from '@assets/icons';
+import { LAST_STATUS } from '@constants/orderStatusList';
+
+import {
+ headerStringStyle,
+ textStringStyle,
+ deliveryStatusContainserStyle,
+ contentContainerStyle,
+ textStatusContainerStyle,
+ iconContainerStyle,
+ eachIconContainerStyle,
+ iconBoxStyle,
+ currentSpanStyle,
+ dateStatusContainerStyle,
+ arrowContainerStyle
+} from './deliveryStatusStyle';
+
+type StatusName = '결제 완료' | '상품 준비' | '국제 운송' | '국내 입고' | '국내 배송' | '배송 완료';
+
+const getIconComponent = (status: StatusName, currentStatus: StatusName) => {
+ const isFinal = status === currentStatus;
+
+ const iconMap = {
+ '결제 완료': isFinal ?
+
+
+ 주문
+ ID:
+ {BUYER_INFO.orderId}
+
+
+ 주문일:
+ {BUYER_INFO.orderYear}
+ 년
+ {BUYER_INFO.orderMonth}
+ 월
+ {BUYER_INFO.orderDay}
+ 일
+
+ 결제 수단: {BUYER_INFO.paymentMethod}
+
+
+ 복사
+
+
+
+
+
+
+ );
+};
+
+export default DeliveryStatusComponent;
diff --git a/src/components/orderDetail/orderStatus/deliveryStauts/deliveryStatusStyle.ts b/src/components/orderDetail/orderStatus/deliveryStauts/deliveryStatusStyle.ts
new file mode 100644
index 0000000..ebf987d
--- /dev/null
+++ b/src/components/orderDetail/orderStatus/deliveryStauts/deliveryStatusStyle.ts
@@ -0,0 +1,92 @@
+import { Theme, css } from '@emotion/react';
+
+export const headerStringStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.bodyMedium14};
+ color: ${theme.colors.gray6};
+`;
+
+export const textStringStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.titleBold20};
+`;
+
+export const deliveryStatusContainserStyle = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+ align-items: flex-start;
+ width: 48.5rem;
+ height: 35.7rem;
+ padding: 2rem 2.4rem 3rem;
+
+ background-color: ${theme.colors.gray1};
+ border-radius: 8px;
+`;
+
+export const contentContainerStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 3.2rem;
+ align-items: center;
+ justify-content: center;
+`;
+
+export const textStatusContainerStyle = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.7rem;
+ align-items: center;
+ justify-content: center;
+ width: 43.7rem;
+ height: 7rem;
+ padding: 1.3rem 0;
+
+ background: ${theme.colors.gray2};
+ border: 1px solid ${theme.colors.gray3};
+ border-radius: 12px;
+`;
+
+export const dateStatusContainerStyle = (theme: Theme) => css`
+ display: flex;
+ align-items: center;
+ height: 1.6rem;
+
+ ${theme.fonts.both.captionBothMedium12};
+ color: ${theme.colors.gray6};
+`;
+
+export const iconContainerStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ align-items: center;
+ justify-content: center;
+`;
+
+export const eachIconContainerStyle = (theme: Theme) => css`
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 1.6rem;
+ align-items: center;
+ width: 31.7rem;
+ height: 17.2rem;
+
+ color: ${theme.colors.gray6};
+`;
+
+export const iconBoxStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.6rem;
+ align-items: center;
+ width: 5.6rem;
+`;
+
+export const currentSpanStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionBold12};
+ color: ${theme.colors.black};
+`;
+
+export const arrowContainerStyle = css`
+ display: flex;
+ justify-content: center;
+`;
diff --git a/src/components/orderDetail/orderStatus/detailStatus/detailStatus.tsx b/src/components/orderDetail/orderStatus/detailStatus/detailStatus.tsx
new file mode 100644
index 0000000..5ca5f10
--- /dev/null
+++ b/src/components/orderDetail/orderStatus/detailStatus/detailStatus.tsx
@@ -0,0 +1,54 @@
+import { IcDetailedstatusDotDefault, IcDetailedstatusDotVarient } from '@assets/icons';
+import { ORDER_STATUS } from '@constants/orderStatusList';
+
+import {
+ dateStringStyle,
+ stepMessageStringStyle,
+ headerStringStyle,
+ deliveryStatusContainserStyle,
+ statusNameStringStyle,
+ firstStringStyle,
+ frameTitleStyle,
+ titleDateStringStyle,
+ deliveryStatusCardStyle,
+ frameDetailStyle,
+ frameDetailContentStyle,
+ frameContentStyle,
+ lineConnectorStyle,
+} from './detailStatusStyle';
+
+const DetailStatusComponent = () => {
+ const statuses = Object.values(ORDER_STATUS);
+ return (
+ 배송 현황
+
+
+
+
+
+
+ + {LAST_STATUS.steps.month}월 {LAST_STATUS.steps.day}일 {LAST_STATUS.steps.time} +
+
+
+ {LAST_STATUS.steps.message}
+
+
+
+ {statusList.map((status, index) => (
+ <>
+
+
+ {getIconComponent(status, currentStatus)}
+ {status}
+
+ {index !== 2 && index < statusList.length - 1 && (
+
+
+ )}
+
+ ))}
+
+
+
+
+ );
+};
+
+export default DetailStatusComponent;
diff --git a/src/components/orderDetail/orderStatus/detailStatus/detailStatusStyle.ts b/src/components/orderDetail/orderStatus/detailStatus/detailStatusStyle.ts
new file mode 100644
index 0000000..2ca48e5
--- /dev/null
+++ b/src/components/orderDetail/orderStatus/detailStatus/detailStatusStyle.ts
@@ -0,0 +1,120 @@
+import { Theme, css } from '@emotion/react';
+
+export const headerStringStyle = (theme: Theme) => css`
+ display: flex;
+ align-items: center;
+ min-height: 5.7rem;
+
+ ${theme.fonts.kor.bodyMedium14};
+ color: ${theme.colors.gray6};
+`;
+
+export const deliveryStatusContainserStyle = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 35.6rem;
+ height: 35.7rem;
+ padding: 0 2.4rem 0 2.5rem;
+
+ background-color: ${theme.colors.gray1};
+ border-radius: 8px;
+`;
+
+export const deliveryStatusCardStyle = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ gap: 2.4rem;
+ box-sizing: border-box;
+ width: 30.4rem;
+ max-height: 30rem;
+ padding: 0 4rem 2.4rem 2rem;
+ overflow: hidden auto;
+
+ &::-webkit-scrollbar {
+ width: 1rem;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ width: 1rem;
+ height: 10rem;
+
+ background: ${theme.colors.gray6};
+ border-radius: 24px;
+ }
+
+ &::-webkit-scrollbar-track {
+ margin-bottom: 1rem;
+
+ background: ${theme.colors.white};
+ border-radius: 24px;
+ }
+`;
+
+export const lineConnectorStyle = (theme: Theme) => css`
+ position: relative;
+
+ &::after {
+ position: absolute;
+ top: 1.6rem;
+ left: 6.5rem;
+ width: 0.2rem;
+ height: calc(100% + 0.7rem);
+
+ background-color: ${theme.colors.gray3};
+ transform: translateX(-50%);
+
+ content: '';
+ }
+`;
+
+export const statusNameStringStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.bodyBold13};
+ color: ${theme.colors.gray7};
+`;
+
+export const firstStringStyle = (theme: Theme) => css`
+ color: ${theme.colors.brandPrimary};
+`;
+export const stepMessageStringStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionMedium10};
+ color: ${theme.colors.gray7};
+`;
+
+export const dateStringStyle = (theme: Theme) => css`
+ ${theme.fonts.both.captionBothMedium10};
+ color: ${theme.colors.gray4};
+`;
+
+export const titleDateStringStyle = (theme: Theme) => css`
+ width: 4.3rem;
+ height: 2.4rem;
+
+ color: ${theme.colors.gray4};
+ text-align: right;
+ ${theme.fonts.both.captionBothMedium10};
+`;
+
+export const frameContentStyle = css`
+ display: flex;
+ flex-direction: column;
+ min-width: 22.3rem;
+`;
+
+export const frameTitleStyle = css`
+ display: flex;
+ gap: 1.4rem;
+`;
+
+export const frameDetailStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.8rem;
+ padding-left: 8.7rem;
+`;
+
+export const frameDetailContentStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.4rem;
+`;
diff --git a/src/components/orderDetail/orderStatus/orderStatus.tsx b/src/components/orderDetail/orderStatus/orderStatus.tsx
new file mode 100644
index 0000000..184b4dc
--- /dev/null
+++ b/src/components/orderDetail/orderStatus/orderStatus.tsx
@@ -0,0 +1,25 @@
+import { LAST_STATUS } from '@constants/orderStatusList';
+import DeliveryStatusComponent from './deliveryStauts/deliveryStatus';
+import DetailStatusComponent from './detailStatus/detailStatus';
+import {
+ orderStatusComponentStyle,
+ componentsStyle,
+ headerStringStyle,
+ contentStringStyle,
+ headerComponentStyle,
+} from './orderStatusStyle';
+
+const OrderStatusComponent = () => (
+ 상세 현황
+
+ {statuses.map((status, index) => (
+
+
+
+ ))}
+
+
+
+ {`${status.steps[status.steps.length - 1].month}월 ${status.steps[status.steps.length - 1].day}일`}
+
+ {status.steps[status.steps.length - 1].time}
+
{status.name}
+-
+ {status.steps.map((step) => (
+
-
+
{step.message}
+{`${step.month}월 ${step.day}일 ${step.time}`}
+
+ ))}
+
+
+
+
+);
+
+export default OrderStatusComponent;
diff --git a/src/components/orderDetail/orderStatus/orderStatusStyle.ts b/src/components/orderDetail/orderStatus/orderStatusStyle.ts
new file mode 100644
index 0000000..7c7e77a
--- /dev/null
+++ b/src/components/orderDetail/orderStatus/orderStatusStyle.ts
@@ -0,0 +1,33 @@
+import { Theme, css } from '@emotion/react';
+
+export const orderStatusComponentStyle = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+ align-items: flex-start;
+ width: 91.1rem;
+ height: 47.1rem;
+ padding: 2.4rem;
+
+ background-color: ${theme.colors.white};
+`;
+
+export const headerComponentStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 1.3rem;
+`;
+
+export const componentsStyle = css`
+ display: flex;
+ gap: 2.1rem;
+ width: 86.3rem;
+`;
+
+export const headerStringStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.titleBold20};
+`;
+
+export const contentStringStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.bodyMedium14};
+`;
diff --git a/src/components/orderDetail/productRecommend/productRecommend.tsx b/src/components/orderDetail/productRecommend/productRecommend.tsx
new file mode 100644
index 0000000..655bb0c
--- /dev/null
+++ b/src/components/orderDetail/productRecommend/productRecommend.tsx
@@ -0,0 +1,59 @@
+import { BtnLeftDefault, BtnRightDefault } from '@assets/icons';
+import ProductCard from '@components/product/ProductCard';
+import PRODUCT_RECOMMEND_DATA from '@constants/productRecommend';
+import { useRef } from 'react';
+
+import {
+ productRecommandContainer,
+ productListContainer,
+ headerStringStyle,
+ btnLeftStyle,
+ btnRightStyle,
+ scrollContainerStyle,
+} from './productRecommendStyle';
+
+const ProductRecommendComponent = () => {
+ const products = PRODUCT_RECOMMEND_DATA;
+
+ const scrollContainerRef = useRef상태: {LAST_STATUS.name}
+{LAST_STATUS.description}
+
+
+ 다른 상품 추천
+
+ {products.map((product) => (
+
+
+
+
+
+ {contentData.map((content, index) => (
+
+
+ );
+};
+
+export default ServiceIntroduce;
diff --git a/src/components/orderDetail/serviceIntroduce/serviceIntroduceStyle.ts b/src/components/orderDetail/serviceIntroduce/serviceIntroduceStyle.ts
new file mode 100644
index 0000000..0c5d265
--- /dev/null
+++ b/src/components/orderDetail/serviceIntroduce/serviceIntroduceStyle.ts
@@ -0,0 +1,59 @@
+import { Theme, css } from '@emotion/react';
+
+export const serviceIntroduceContainer = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+ width: 91.1rem;
+ height: 28rem;
+ padding: 2.4rem 1.6rem;
+
+ background-color: ${theme.colors.white};
+`;
+
+export const hedarTitleStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.bodyBold14};
+ color: ${theme.colors.gray9};
+`;
+
+export const sectionContainerStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+ width: 87.9rem;
+ height: 19.6rem;
+`;
+
+export const contentTitleStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.bodyBold14};
+ color: ${theme.colors.gray10};
+`;
+
+export const contentStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionMedium12};
+ color: ${theme.colors.gray7};
+`;
+
+export const contentContainerStyle = css`
+ display: flex;
+ gap: 0.8rem;
+ align-items: center;
+ height: 4.4rem;
+`;
+
+export const contentBoxStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.8rem;
+ width: 100%;
+`;
+
+export const contentLineStyle = css`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+`;
+
+export const diverStyle = css`
+ margin-top: 1.6rem;
+`;
diff --git a/src/components/orderDetail/sideBar/menuBar/menuBar.tsx b/src/components/orderDetail/sideBar/menuBar/menuBar.tsx
new file mode 100644
index 0000000..6482df6
--- /dev/null
+++ b/src/components/orderDetail/sideBar/menuBar/menuBar.tsx
@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { menuComponentStyle, menuTitleStyle, inviteStyle, selectedMenuItemStyle } from './menuBarStyle';
+import { DividerSmall } from '@assets/icons';
+import MENU_ITEMS from '@components/constants/menuItems';
+
+export const MenuBarComponent = () => {
+ const [currentPage, setCurrentPage] = useState('주문 & 배송');
+
+ return (
+ 서비스 안내
+
+
+ ))}
+
+ {content.icon}
+
+ {index < contentData.length - 1 &&
+
+ {content.title}
+
+
+ {content.content}
+
+ );
+};
diff --git a/src/components/orderDetail/sideBar/menuBar/menuBarStyle.ts b/src/components/orderDetail/sideBar/menuBar/menuBarStyle.ts
new file mode 100644
index 0000000..4bdf895
--- /dev/null
+++ b/src/components/orderDetail/sideBar/menuBar/menuBarStyle.ts
@@ -0,0 +1,66 @@
+import { Theme, css } from '@emotion/react';
+
+export const menuComponentStyle = (theme: Theme) => css`
+ display: inline-flex;
+ flex-direction: column;
+ gap: 1.4rem;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 1.8rem;
+ padding: 1.4rem 0 1.2rem;
+
+ background-color: ${theme.colors.white};
+`;
+
+export const menuTitleStyle = (theme: Theme) => css`
+ width: 24.8rem;
+ ${theme.fonts.kor.bodyBold16};
+`;
+
+export const inviteStyle = (theme: Theme) => css`
+ display: flex;
+ align-items: center;
+ width: 28rem;
+ height: 3.4rem;
+ padding-left: 1.5rem;
+
+ color: ${theme.colors.gray10};
+ font-size: 1rem;
+
+ cursor: pointer;
+
+ ${theme.fonts.kor.bodyMedium14};
+`;
+
+export const menuItemStyle = (theme: Theme) => css`
+ display: flex;
+ align-items: center;
+ width: 28rem;
+ height: 3.4rem;
+ padding-left: 1.5rem;
+
+ color: ${theme.colors.gray10};
+ font-size: 1rem;
+
+ cursor: pointer;
+
+ ${theme.fonts.kor.bodyMedium14};
+`;
+
+export const selectedMenuItemStyle = (theme: Theme) => css`
+ position: relative;
+
+ background-color: ${theme.colors.gray2};
+
+ ::before {
+ position: absolute;
+ left: 0;
+ display: block;
+ width: 0.4rem;
+ height: 100%;
+
+ background-color: ${theme.colors.warningPrimary};
+
+ content: '';
+ }
+`;
diff --git a/src/components/orderDetail/sideBar/qrCode/qrCode.tsx b/src/components/orderDetail/sideBar/qrCode/qrCode.tsx
new file mode 100644
index 0000000..2924a52
--- /dev/null
+++ b/src/components/orderDetail/sideBar/qrCode/qrCode.tsx
@@ -0,0 +1,15 @@
+import qrCodeImg from '@assets/images/img_appapproachqr.png';
+import { qrCodeComponentStyle, qrTitleStyle, qrCodeTextStyle, qrContentStyle, qrImageStyle } from './qrCodeStyle';
+
+export const QrCodeComponent = () => {
+ return (
+ 계정
+-
+ {MENU_ITEMS.map((item) => {
+ if (item === '친구 초대') {
+ return (
+
+ );
+ }
+ return (
+
- setCurrentPage(item)}> + {item} + + ); + })} +
+
+ );
+};
diff --git a/src/components/orderDetail/sideBar/qrCode/qrCodeStyle.ts b/src/components/orderDetail/sideBar/qrCode/qrCodeStyle.ts
new file mode 100644
index 0000000..4d0da92
--- /dev/null
+++ b/src/components/orderDetail/sideBar/qrCode/qrCodeStyle.ts
@@ -0,0 +1,33 @@
+import { Theme, css } from '@emotion/react';
+
+export const qrCodeComponentStyle = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 28rem;
+ height: 22.6rem;
+
+ background-color: ${theme.colors.white};
+`;
+
+export const qrCodeTextStyle = css`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+`;
+
+export const qrTitleStyle = (theme: Theme) => css`
+ ${theme.fonts.eng.bodyBold16};
+ margin-bottom: 0.6rem;
+`;
+
+export const qrContentStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionMedium12};
+ color: ${theme.colors.gray6};
+`;
+
+export const qrImageStyle = css`
+ margin: 0.8rem 0;
+`;
diff --git a/src/components/orderDetail/sideBar/sideBar.tsx b/src/components/orderDetail/sideBar/sideBar.tsx
new file mode 100644
index 0000000..4c98583
--- /dev/null
+++ b/src/components/orderDetail/sideBar/sideBar.tsx
@@ -0,0 +1,30 @@
+import { MenuBarComponent } from './menuBar/menuBar';
+import { QrCodeComponent } from './qrCode/qrCode';
+import { sideBarComponentStyle, pathInfoStyle } from './sideBarStyle';
+
+const pathRoutes = ['주문', '주문상세'];
+
+const PathInfoComponent = () => {
+ return (
+ <>
+ {pathRoutes.map((item, index) => (
+
+ AliExpress 모바일 앱
+ 언제 어디서든 검색해보세요!
+ 
+ 스캔 또는 다운로드 클릭
+
+
+ > {item}
+
+ ))}
+
+ );
+};
+
+export const SideBarComponent = () => {
+ return (
+
+
+ );
+};
diff --git a/src/components/orderDetail/sideBar/sideBarStyle.ts b/src/components/orderDetail/sideBar/sideBarStyle.ts
new file mode 100644
index 0000000..d78739c
--- /dev/null
+++ b/src/components/orderDetail/sideBar/sideBarStyle.ts
@@ -0,0 +1,27 @@
+import { Theme, css } from '@emotion/react';
+
+export const sideBarComponentStyle = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ align-items: flex-end;
+ width: 28rem;
+ height: 133.4rem;
+ padding-right: 1.1rem;
+
+ background-color: ${theme.colors.gray2};
+`;
+
+export const pathInfoStyle = (theme: Theme) => css`
+ display: flex;
+ align-items: center;
+ width: 28rem;
+ height: 4.8rem;
+ padding-left: 1.2rem;
+
+ .last-item {
+ color: ${theme.colors.gray10};
+ }
+ color: ${theme.colors.gray6};
+ ${theme.fonts.kor.captionRegular12};
+`;
diff --git a/src/components/product/ProductCard.tsx b/src/components/product/ProductCard.tsx
index 9f808f9..aebd210 100644
--- a/src/components/product/ProductCard.tsx
+++ b/src/components/product/ProductCard.tsx
@@ -1,42 +1,80 @@
import { IcArrowrightGray12 } from '@assets/icons';
import FreeTag from './FreeTag';
-import { couponBtnStyle, imageContainer, imageStyle, priceContainer, productContainer, productDiscountStyle, productInfoContainer, productInfoWrapper, productNameStyle, productPriceStyle, productWonStyle, tagContainer } from './ProductCardStyle';
+import {
+ couponBtnStyle,
+ imageContainer,
+ imageStyle,
+ priceContainer,
+ productContainer,
+ productDiscountStyle,
+ productInfoContainer,
+ productInfoWrapper,
+ productNameStyle,
+ productPriceStyle,
+ productWonStyle,
+ productWrapper,
+ tagContainer,
+} from './ProductCardStyle';
import StarBtn from '@components/button/starBtn/StarBtn';
interface ProductProps {
- image: string;
- name: string;
- price: number;
- discountRate: number;
- hasCoupon?: boolean;
- rating: number;
- reviewCount: number;
+ image: string;
+ name: string;
+ price: number;
+ discountRate: number;
+ hasCoupon?: boolean;
+ rating: number;
+ reviewCount: number;
+ width?: string;
+ hoverLarge?: boolean;
}
-const ProductCard = ({ image, name, price, discountRate, hasCoupon = false, rating, reviewCount }: ProductProps) => (
-
+ 홈
+
+
- 
-
-
-
- {hasCoupon && }
-
-
-
- {name}
-
- ₩
- {price.toLocaleString()}
- {discountRate}%
-
- -
-
+
+
+
+
+
+
+ {hasCoupon && (
+
+ {name}
+
+
+ ₩
+ {price.toLocaleString()}
+ {discountRate}%
+
+ -
+
-
+
+
+ -
+
+
+
couponBtnStyle(theme, hoverLarge)}>
+
+
+ )}
+
+
+ 연관 상품
+
+
+);
+
+export default ProductOrderBox;
diff --git a/src/components/productPage/review/review/Card.tsx b/src/components/productPage/review/review/Card.tsx
new file mode 100644
index 0000000..da41f48
--- /dev/null
+++ b/src/components/productPage/review/review/Card.tsx
@@ -0,0 +1,87 @@
+import { IcShieldWhite12, IcMeatballLightgray20 } from '@assets/icons/index';
+import userImg from '@assets/images/userImg';
+import ReviewBtn from '@components/button/recommendBtn/reviewBtn';
+import {
+ cardLayout,
+ relativeStyle,
+ nameStyle,
+ dateStyle,
+ colorStyle,
+ sizeStyle,
+ circleStyle,
+ reviewStyle,
+ infoWrapper,
+ monthChipStyle,
+ reportBtnStyle,
+ cardTitleStyle,
+ nameRightStyle,
+ imgWrapper,
+ reviewBtnWrapper,
+} from '@components/productPage/review/review/CardStyle';
+import RenderStar from '@components/productPage/review/review/RenderStar';
+import { Review } from '@constants/userReview';
+import { useState } from 'react';
+
+interface CardProps {
+ review: Review;
+ isOriginal: boolean;
+}
+
+const Card = ({ review, isOriginal }: CardProps) => {
+ const [isHovered, setIsHovered] = useState(false);
+
+ return (
+
+ {/* 작성자 프로필 이미지 */}
+
+ );
+};
+
+export default Card;
diff --git a/src/components/productPage/review/review/CardList.tsx b/src/components/productPage/review/review/CardList.tsx
new file mode 100644
index 0000000..9c227c3
--- /dev/null
+++ b/src/components/productPage/review/review/CardList.tsx
@@ -0,0 +1,36 @@
+import Card from '@components/productPage/review/review/Card';
+import { reviewContainer, reviewLayout } from '@components/productPage/review/review/CardListStyle';
+import { data } from '@constants/userReview';
+
+interface CardListProps {
+ activeTab: string;
+ isOriginal: boolean;
+}
+
+const CardList = ({ activeTab, isOriginal }: CardListProps) => {
+ const { goodReviews, badReviews } = data;
+
+ return (
+
+ {userImg.map((image, index) =>
+ index === review.reviewId % userImg.length ? (
+
+ ) : null,
+ )}{' '}
+
+ {/* 리뷰 상세 내용 */}
+
+ {/* 작성자 정보, 신고기능 */}
+
+
+ {review.username}
+
+
+ {/* 별점 렌더링 */}
+
+ 24.08.22
+ setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} />
+ {isHovered && (
+
+ )}
+
+
+ {review.isMonth === true &&
+
+ {/* 리뷰 이미지 데이터 받아오면 한개로 줄일예정 */}
+ 한달사용리뷰
}
+ {isOriginal ? review.contentOriginal : review.contentKorean}
+
+ 
+
+
+
+ {/* 좋아요 버튼 */}
+
+
+
+ {/* 긍정 리뷰 */}
+ {activeTab !== 'negative' && (
+
+ );
+};
+
+export default CardList;
diff --git a/src/components/productPage/review/review/CardListStyle.ts b/src/components/productPage/review/review/CardListStyle.ts
new file mode 100644
index 0000000..e3a167f
--- /dev/null
+++ b/src/components/productPage/review/review/CardListStyle.ts
@@ -0,0 +1,16 @@
+import { css } from '@emotion/react';
+
+export const reviewContainer = css`
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2rem;
+ width: 96rem;
+ height: 62rem;
+ overflow: hidden;
+`;
+
+export const reviewLayout = (activeTab: string) => css`
+ display: flex;
+ flex-flow: ${activeTab === 'total' ? 'column' : 'row'} wrap;
+ gap: 2rem;
+`;
diff --git a/src/components/productPage/review/review/CardStyle.ts b/src/components/productPage/review/review/CardStyle.ts
new file mode 100644
index 0000000..50c8927
--- /dev/null
+++ b/src/components/productPage/review/review/CardStyle.ts
@@ -0,0 +1,133 @@
+import { Theme, css } from '@emotion/react';
+
+export const cardLayout = (theme: Theme) => css`
+ display: flex;
+ gap: 1.2rem;
+ width: 47rem;
+ height: 29.4rem;
+ padding: 1.6rem 1.2rem;
+
+ background-color: ${theme.colors.white};
+ border: 1px solid ${theme.colors.gray3};
+ border-radius: 8px;
+`;
+
+export const relativeStyle = css`
+ position: relative;
+`;
+
+export const sizeStyle = css`
+ width: 4rem;
+ height: 4rem;
+`;
+
+export const circleStyle = (theme: Theme) => css`
+ position: absolute;
+ top: 1.2rem;
+ left: 4rem;
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 2rem;
+ padding: 0.4rem;
+
+ background: ${theme.colors.brandPrimary};
+ border-radius: 99px;
+`;
+
+export const infoWrapper = css`
+ display: flex;
+ flex-direction: column;
+`;
+
+export const cardTitleStyle = css`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+`;
+
+export const nameRightStyle = css`
+ display: flex;
+ gap: 1.2rem;
+ align-items: center;
+`;
+
+export const nameStyle = (theme: Theme) => css`
+ width: 31.2rem;
+ height: 2rem;
+
+ color: ${theme.colors.gray8};
+ ${theme.fonts.eng.titleBold16}
+`;
+
+export const dateStyle = (theme: Theme) => css`
+ color: ${theme.colors.gray5};
+ ${theme.fonts.eng.captionMedium10}
+`;
+
+export const colorStyle = (theme: Theme) => css`
+ margin-top: 0.8rem;
+
+ color: ${theme.colors.gray6};
+ ${theme.fonts.eng.captionMedium12};
+`;
+export const reviewStyle = (theme: Theme) => css`
+ display: -webkit-box;
+ width: 39rem;
+ height: 3.4rem;
+ margin-top: 1.2rem;
+ overflow: hidden;
+
+ color: ${theme.colors.gray9};
+ text-overflow: ellipsis;
+ word-break: break-word;
+ ${theme.fonts.eng.captionMedium12};
+
+ /* 말줄임표 처리 */
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+`;
+
+export const monthChipStyle = (theme: Theme) => css`
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 7.5rem;
+ height: 2rem;
+ margin-right: 0.3rem;
+ padding: 0.2rem 0.4rem;
+
+ color: ${theme.colors.brandPrimary};
+
+ ${theme.fonts.eng.captionMedium12};
+ background-color: ${theme.colors.brandBg};
+ border-radius: 2px;
+`;
+
+export const imgWrapper = css`
+ display: flex;
+ gap: 0.8rem;
+ padding: 1.6rem 0;
+`;
+
+export const reviewBtnWrapper = css`
+ display: flex;
+ gap: 0.8rem;
+`;
+
+export const reportBtnStyle = (theme: Theme) => css`
+ position: absolute;
+ top: 2.4rem;
+ right: 0;
+
+ width: 4.9rem;
+ height: 3.8rem;
+ padding: 1rem 1.4rem;
+
+ background-color: ${theme.colors.white};
+ border: 1px solid ${theme.colors.gray3};
+ ${theme.fonts.kor.captionMedium10};
+ border-radius: 4px;
+`;
diff --git a/src/components/productPage/review/review/FilterBtn.tsx b/src/components/productPage/review/review/FilterBtn.tsx
new file mode 100644
index 0000000..6f6f1a0
--- /dev/null
+++ b/src/components/productPage/review/review/FilterBtn.tsx
@@ -0,0 +1,31 @@
+import { IcArrowbottomGray12 } from '@assets/icons/index';
+import {
+ fontStyle,
+ FilterBtnContainer,
+ dropDownLayoutStyle,
+ listStyle,
+} from '@components/productPage/review/review/FilterBtnStyle';
+import { useState } from 'react';
+
+const FilterBtn = () => {
+ const [isHovered, setIsHovered] = useState(false);
+
+ return (
+
+ {goodReviews.map((review) => (
+
+ )}
+
+ {/* 비판 리뷰 */}
+ {activeTab !== 'positive' && (
+
+ {badReviews.map((review) => (
+
+ )}
+
+
+ );
+};
+
+export default FilterBtn;
diff --git a/src/components/productPage/review/review/FilterBtnStyle.ts b/src/components/productPage/review/review/FilterBtnStyle.ts
new file mode 100644
index 0000000..8bee49b
--- /dev/null
+++ b/src/components/productPage/review/review/FilterBtnStyle.ts
@@ -0,0 +1,43 @@
+import { Theme, css } from '@emotion/react';
+
+export const FilterBtnContainer = (theme: Theme) => css`
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 15.4rem;
+ height: 3rem;
+ padding: 0.8rem 1.2rem;
+
+ background-color: ${theme.colors.gray2};
+ border-radius: 6px;
+`;
+
+export const fontStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionMedium12}
+ z-index: 5;
+`;
+
+export const dropDownLayoutStyle = (theme: Theme) => css`
+ position: absolute;
+ top: 5rem;
+ width: 15.4rem;
+
+ background-color: ${theme.colors.gray1};
+ border: 1px solid ${theme.colors.gray3};
+ border-radius: 6px;
+`;
+
+export const listStyle = (theme: Theme) => css`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 3rem;
+ padding: 0.8rem 1.2rem;
+
+ border-bottom: 1px solid ${theme.colors.gray3};
+
+ &:nth-of-type(3) {
+ border-bottom: none;
+ }
+`;
diff --git a/src/components/productPage/review/review/OriginalTextBtn.tsx b/src/components/productPage/review/review/OriginalTextBtn.tsx
new file mode 100644
index 0000000..7d42ab4
--- /dev/null
+++ b/src/components/productPage/review/review/OriginalTextBtn.tsx
@@ -0,0 +1,21 @@
+import { Theme, css } from '@emotion/react';
+
+export const btnStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionMedium12}
+ color: ${theme.colors.notificationPrimary};
+
+ background-color: transparent;
+ border: none;
+`;
+
+interface OriginalTextBtnProps {
+ onClick: () => void;
+}
+
+const OriginalTextBtn = ({ onClick }: OriginalTextBtnProps) => (
+
+);
+
+export default OriginalTextBtn;
diff --git a/src/components/productPage/review/review/RenderStar.tsx b/src/components/productPage/review/review/RenderStar.tsx
new file mode 100644
index 0000000..5717b15
--- /dev/null
+++ b/src/components/productPage/review/review/RenderStar.tsx
@@ -0,0 +1,28 @@
+import { IcCometReviewStarFill18, IcCometReviewStarBlank18 } from '@assets/icons/index';
+import { css } from '@emotion/react';
+
+interface RenderStarProps {
+ rating: number;
+}
+
+export const starBox = css`
+ display: flex;
+`;
+
+const RenderStar = ({ rating }: RenderStarProps) => (
+ setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+
+
+ {isHovered && (
+ 최근 작성된 리뷰
+
+
+ )}
+ 최근 작성된 리뷰
+추천 리뷰
+재구매 리뷰
+
+ {Array.from({ length: 5 }, (_, index) =>
+ index < rating ? (
+
+
+);
+
+export default RenderStar;
diff --git a/src/components/productPage/review/review/ReviewPage.tsx b/src/components/productPage/review/review/ReviewPage.tsx
new file mode 100644
index 0000000..510b359
--- /dev/null
+++ b/src/components/productPage/review/review/ReviewPage.tsx
@@ -0,0 +1,36 @@
+import { DividerMedium } from '@assets/icons/index';
+import TextBtn from '@components/button/textBtn/TextBtn';
+import FilterBtn from '@components/productPage/review/review/FilterBtn';
+import Tab from '@components/productPage/review/review/Tab';
+import OriginalTextBtn from '@components/productPage/review/review/OriginalTextBtn';
+import { reviewContainer, flexStyle, commonBtnStyle } from '@components/productPage/review/review/ReviewPageStyle';
+import { reviewNum } from '@constants/userReview';
+import { useState } from 'react';
+
+const ReviewPage = () => {
+ const [isOriginal, setIsOriginal] = useState(false);
+
+ const handleShowOriginalText = () => {
+ setIsOriginal((prev) => !prev);
+ };
+ return (
+
+
+ );
+};
+
+export default ReviewPage;
diff --git a/src/components/productPage/review/review/ReviewPageStyle.ts b/src/components/productPage/review/review/ReviewPageStyle.ts
new file mode 100644
index 0000000..8cadec3
--- /dev/null
+++ b/src/components/productPage/review/review/ReviewPageStyle.ts
@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+
+export const reviewContainer = css`
+ display: flex;
+ flex-direction: column;
+`;
+
+export const flexStyle = css`
+ display: flex;
+ gap: 1.2rem;
+ align-items: center;
+ padding: 1.4rem 0;
+`;
+
+export const commonBtnStyle = css`
+ display: flex;
+ justify-content: center;
+ width: 96rem;
+ height: 3.4rem;
+ margin: 1.3rem 0 2.4rem;
+`;
diff --git a/src/components/productPage/review/review/ReviewTypeLabel.tsx b/src/components/productPage/review/review/ReviewTypeLabel.tsx
new file mode 100644
index 0000000..ba13e8b
--- /dev/null
+++ b/src/components/productPage/review/review/ReviewTypeLabel.tsx
@@ -0,0 +1,21 @@
+import {
+ LabelWrapper,
+ fontBox,
+ fontEnStyle,
+ fontKoStyle,
+} from '@components/productPage/review/review/ReviewTypeLabelStyle';
+
+const ReviewTypeLabel = () => (
+
+
+
+
+
+
+);
+
+export default ReviewTypeLabel;
diff --git a/src/components/productPage/review/review/ReviewTypeLabelStyle.ts b/src/components/productPage/review/review/ReviewTypeLabelStyle.ts
new file mode 100644
index 0000000..0e9f00c
--- /dev/null
+++ b/src/components/productPage/review/review/ReviewTypeLabelStyle.ts
@@ -0,0 +1,23 @@
+import { Theme, css } from '@emotion/react';
+
+export const LabelWrapper = css`
+ display: flex;
+ gap: 2rem;
+ margin: 1.4rem 0;
+`;
+
+export const fontBox = css`
+ display: flex;
+ gap: 0.4rem;
+ width: 47rem;
+`;
+
+export const fontEnStyle = (theme: Theme) => css`
+ color: ${theme.colors.brandPrimary};
+ ${theme.fonts.eng.titleBold16}
+`;
+
+export const fontKoStyle = (theme: Theme) => css`
+ color: ${theme.colors.gray9};
+ ${theme.fonts.kor.bodyBold16}
+`;
diff --git a/src/components/productPage/review/review/Tab.tsx b/src/components/productPage/review/review/Tab.tsx
new file mode 100644
index 0000000..f16cd44
--- /dev/null
+++ b/src/components/productPage/review/review/Tab.tsx
@@ -0,0 +1,41 @@
+import CardList from '@components/productPage/review/review/CardList';
+import ReviewTypeLabel from '@components/productPage/review/review/ReviewTypeLabel';
+import { tabLayout, btnStyle } from '@components/productPage/review/review/TabStyle';
+import { useTheme } from '@emotion/react';
+import { useState } from 'react';
+
+interface TabProps {
+ total: number;
+ positive: number;
+ negative: number;
+ isOriginal: boolean;
+}
+
+const Tab = ({ total, positive, negative, isOriginal }: TabProps) => {
+ const [activeTab, setActiveTab] = useState
+
+ Best
+긍정 리뷰
+
+
+ Best
+비판 리뷰
+
+
+ );
+};
+
+export default Tab;
diff --git a/src/components/productPage/review/review/TabStyle.ts b/src/components/productPage/review/review/TabStyle.ts
new file mode 100644
index 0000000..60d3521
--- /dev/null
+++ b/src/components/productPage/review/review/TabStyle.ts
@@ -0,0 +1,24 @@
+import { Theme, css } from '@emotion/react';
+
+export const tabLayout = (theme: Theme, isActive: boolean) => css`
+ display: flex;
+ gap: 0.6rem;
+ align-items: center;
+ width: 96rem;
+ height: 5.6rem;
+ margin-bottom: ${isActive ? '0rem' : '2rem'};
+ padding: 0.4rem;
+
+ background-color: ${theme.colors.gray2};
+ border-radius: 12px;
+`;
+
+export const btnStyle = (theme: Theme, isActive: boolean) => css`
+ width: 31.3rem;
+ height: 4.8rem;
+
+ ${theme.fonts.kor.bodyBold13}
+ background-color: ${isActive ? theme.colors.white : theme.colors.gray2};
+ border: none;
+ border-radius: 8px;
+`;
diff --git a/src/components/productPage/review/reviewTop/Level.tsx b/src/components/productPage/review/reviewTop/Level.tsx
new file mode 100644
index 0000000..c72d48b
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/Level.tsx
@@ -0,0 +1,22 @@
+import { Theme, css } from '@emotion/react';
+
+export const levelContainer = css`
+ display: flex;
+ justify-content: space-between;
+ width: 27.6rem;
+`;
+
+export const fontStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionMedium10}
+ color: ${theme.colors.gray6}
+`;
+
+const Level = () => (
+
+
+
+
+
+ {activeTab === 'total' &&
+
+);
+
+export default Level;
diff --git a/src/components/productPage/review/reviewTop/Nav.tsx b/src/components/productPage/review/reviewTop/Nav.tsx
new file mode 100644
index 0000000..75af99a
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/Nav.tsx
@@ -0,0 +1,22 @@
+import {
+ NavContainer,
+ fontLayout,
+ fontKoStyle,
+ fontEnStyle,
+ fontStyle,
+} from '@components/productPage/review/reviewTop/NavStyle';
+
+const Nav = () => (
+ 낮음
+보통
+높음
+
+
+);
+
+export default Nav;
diff --git a/src/components/productPage/review/reviewTop/NavStyle.ts b/src/components/productPage/review/reviewTop/NavStyle.ts
new file mode 100644
index 0000000..b8e61d9
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/NavStyle.ts
@@ -0,0 +1,26 @@
+import { Theme, css } from '@emotion/react';
+
+export const NavContainer = css`
+ display: flex;
+ gap: 1.6rem;
+ align-items: center;
+ height: 4.8rem;
+`;
+
+export const fontLayout = css`
+ display: flex;
+ gap: 0.2rem;
+ align-items: center;
+`;
+
+export const fontKoStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionBold12}
+`;
+
+export const fontEnStyle = (theme: Theme) => css`
+ ${theme.fonts.eng.captionBold12}
+`;
+
+export const fontStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionRegular12}
+`;
diff --git a/src/components/productPage/review/reviewTop/RatingAverageCard.tsx b/src/components/productPage/review/reviewTop/RatingAverageCard.tsx
new file mode 100644
index 0000000..638f87f
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/RatingAverageCard.tsx
@@ -0,0 +1,25 @@
+import { IcCometReviewStarFill18, IcCometReviewStarHalf18 } from '@assets/icons/index';
+import {
+ cardLayout,
+ numStyle,
+ starWrapper,
+ descStyle,
+} from '@components/productPage/review/reviewTop/RatingAverageCardStyle';
+
+const RatingAverageCard = () => (
+
+
+ 리뷰
+(497)
+상품 정보
+개요
+상점
+연관 상품
+
+ {/* 카드1 */}
+
+);
+
+export default RatingAverageCard;
diff --git a/src/components/productPage/review/reviewTop/RatingAverageCardStyle.ts b/src/components/productPage/review/reviewTop/RatingAverageCardStyle.ts
new file mode 100644
index 0000000..8f97f1e
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/RatingAverageCardStyle.ts
@@ -0,0 +1,27 @@
+import { Theme, css } from '@emotion/react';
+
+export const cardLayout = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.6rem;
+ width: 26.6rem;
+ height: 13.2rem;
+ padding: 1.4rem 2.4rem;
+
+ background-color: ${theme.colors.gray2};
+ border-radius: 8px;
+`;
+
+export const numStyle = (theme: Theme) => css`
+ ${theme.fonts.eng.headBold48};
+`;
+
+export const starWrapper = css`
+ display: flex;
+ gap: 0.6rem;
+`;
+
+export const descStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionSemibold12}
+ color: ${theme.colors.successPrimary};
+`;
diff --git a/src/components/productPage/review/reviewTop/RatingCountCard.tsx b/src/components/productPage/review/reviewTop/RatingCountCard.tsx
new file mode 100644
index 0000000..4258386
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/RatingCountCard.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable jsx-a11y/alt-text */
+import { frameImg } from '@assets/images/frame';
+import { cardLayout, cardWrapper, fontStyle } from '@components/productPage/review/reviewTop/RatingCountCardStyle';
+import RenderStars from '@components/productPage/review/reviewTop/RenderStar';
+
+const RatingCountCard = () => (
+
+
+ 4.8
+
+ {[...Array(4)].map((_, idx) => (
+
+ 모든 리뷰는 구매 인증 후 작성되었습니다
+
+
+);
+export default RatingCountCard;
diff --git a/src/components/productPage/review/reviewTop/RatingCountCardStyle.ts b/src/components/productPage/review/reviewTop/RatingCountCardStyle.ts
new file mode 100644
index 0000000..2ca6ea4
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/RatingCountCardStyle.ts
@@ -0,0 +1,23 @@
+import { Theme, css } from '@emotion/react';
+
+export const cardLayout = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.6rem;
+ justify-content: center;
+ width: 26.6rem;
+ height: 13.2rem;
+ padding: 1.4rem 2.4rem;
+
+ background-color: ${theme.colors.gray2};
+ border-radius: 8px;
+`;
+
+export const cardWrapper = css`
+ display: flex;
+ gap: 0.8rem;
+`;
+
+export const fontStyle = (theme: Theme) => css`
+ ${theme.fonts.eng.captionMedium10}
+`;
diff --git a/src/components/productPage/review/reviewTop/RatingPage.tsx b/src/components/productPage/review/reviewTop/RatingPage.tsx
new file mode 100644
index 0000000..6f279d9
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/RatingPage.tsx
@@ -0,0 +1,20 @@
+import RatingAverageCard from '@components/productPage/review/reviewTop/RatingAverageCard';
+import RatingCountCard from '@components/productPage/review/reviewTop/RatingCountCard';
+import RatingServiceCard from '@components/productPage/review/reviewTop/RatingServiceCard';
+import { css } from '@emotion/react';
+
+export const AverageContainer = css`
+ display: flex;
+ gap: 1.2rem;
+ width: 96rem;
+`;
+
+const RatingPage = () => (
+
+ 
+
+ 454
+
+ 
+
+ 22
+
+ 
+
+ 11
+
+ 
+
+ 2
+
+ 
+
+ 8
+
+
+);
+
+export default RatingPage;
diff --git a/src/components/productPage/review/reviewTop/RatingServiceCard.tsx b/src/components/productPage/review/reviewTop/RatingServiceCard.tsx
new file mode 100644
index 0000000..a67e7b6
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/RatingServiceCard.tsx
@@ -0,0 +1,38 @@
+import { ImgGraph } from '@assets/icons/index';
+import Level from '@components/productPage/review/reviewTop/Level';
+import {
+ cardLayout,
+ cardWrapper,
+ titleStyle,
+ cardBox,
+ svgStyle,
+} from '@components/productPage/review/reviewTop/RatingServiceCardStyle';
+
+const RatingServiceCard = () => (
+
+
+);
+
+export default RatingServiceCard;
diff --git a/src/components/productPage/review/reviewTop/RatingServiceCardStyle.ts b/src/components/productPage/review/reviewTop/RatingServiceCardStyle.ts
new file mode 100644
index 0000000..3182992
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/RatingServiceCardStyle.ts
@@ -0,0 +1,37 @@
+import { Theme, css } from '@emotion/react';
+
+export const cardLayout = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
+ justify-content: center;
+ width: 48rem;
+ height: 13.2rem;
+ padding: 2.1rem 2.4rem;
+
+ background-color: ${theme.colors.gray2};
+ border-radius: 8px;
+`;
+
+export const cardWrapper = css`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+`;
+
+export const titleStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.captionBold12}
+`;
+
+export const cardBox = css`
+ display: flex;
+ flex-direction: column;
+ gap: 0.4rem;
+`;
+
+export const svgStyle = ({ width }: { width: number }) => css`
+ rect:last-of-type {
+ width: ${width}rem;
+ }
+`;
diff --git a/src/components/productPage/review/reviewTop/RenderStar.tsx b/src/components/productPage/review/reviewTop/RenderStar.tsx
new file mode 100644
index 0000000..8afb9c8
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/RenderStar.tsx
@@ -0,0 +1,36 @@
+import { IcCometReviewStarFill12, IcCometReviewStarBlank12 } from '@assets/icons/index';
+import { css } from '@emotion/react';
+
+export const starBox = css`
+ display: flex;
+ gap: 0;
+`;
+
+type RenderStarsProps = {
+ rating: number; // 1부터 5까지의 숫자 (별점)
+};
+
+const RenderStars = ({ rating }: RenderStarsProps) => {
+ const totalStars = 5; // 별점은 총 5개
+
+ // rating에 해당하는 채운 별 개수
+ const filledCount = Math.floor(rating);
+
+ // 빈 별 개수는 5개에서 채운 별을 뺀 값
+ const blankCount = totalStars - filledCount;
+
+ return (
+
+
+
+ 성능
+
+
+
+
+ 안전성
+
+
+
+
+ A/S 서비스
+
+
+
+ {/* 채운 별 */}
+ {[...Array(filledCount)].map((_, idx) => (
+
+ );
+};
+
+export default RenderStars;
diff --git a/src/components/productPage/review/reviewTop/Title.tsx b/src/components/productPage/review/reviewTop/Title.tsx
new file mode 100644
index 0000000..9a2cc58
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/Title.tsx
@@ -0,0 +1,29 @@
+import { IcHelpGray20 } from '@assets/icons/index';
+import {
+ relativeStyle,
+ titleContainer,
+ fontKoStyle,
+ fontEnStyle,
+ alignStyle,
+ toolStyle,
+} from '@components/productPage/review/reviewTop/TitleStyle';
+import { useState } from 'react';
+
+const Title = () => {
+ const [isHovered, setIsHovered] = useState(false);
+
+ const handleMouseEnter = () => setIsHovered(true);
+ const handleMouseLeave = () => setIsHovered(false);
+ const TOOL_MSG = '별점 4개 이상은 긍정 리뷰, 별점 3개 이하는 비판 리뷰로 분류했습니다.';
+
+ return (
+
+
+ );
+};
+
+export default Title;
diff --git a/src/components/productPage/review/reviewTop/TitleStyle.ts b/src/components/productPage/review/reviewTop/TitleStyle.ts
new file mode 100644
index 0000000..1a0cc76
--- /dev/null
+++ b/src/components/productPage/review/reviewTop/TitleStyle.ts
@@ -0,0 +1,41 @@
+import { Theme, css } from '@emotion/react';
+
+export const relativeStyle = css`
+ position: relative;
+`;
+
+export const titleContainer = css`
+ display: flex;
+ align-items: center;
+ margin: 1.8rem 0 1.5rem;
+`;
+
+export const fontKoStyle = (theme: Theme) => css`
+ ${theme.fonts.kor.titleBold20}
+`;
+
+export const fontEnStyle = (theme: Theme) => css`
+ margin: 0 0.4rem 0 0.6rem;
+ ${theme.fonts.eng.titleBold20}
+`;
+
+export const alignStyle = css`
+ margin-top: 0.2rem;
+
+ cursor: pointer;
+`;
+export const toolStyle = (theme: Theme) => css`
+ position: absolute;
+ top: 2.8rem;
+ left: 9.9rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 1rem 1.4rem;
+
+ color: ${theme.colors.white};
+
+ background: ${theme.colors.black};
+ ${theme.fonts.eng.captionMedium12}
+ border-radius: 4px;
+`;
diff --git a/src/components/productSummary/ProductSummaryStyle.ts b/src/components/productSummary/ProductSummaryStyle.ts
new file mode 100644
index 0000000..77e83d7
--- /dev/null
+++ b/src/components/productSummary/ProductSummaryStyle.ts
@@ -0,0 +1,69 @@
+import { css, Theme } from '@emotion/react';
+
+export const ProductSummayContainer = css`
+ width: 96rem;
+`;
+
+export const productInfoLayoutStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 2.4rem;
+ align-items: center;
+ width: 96rem;
+ height: 27rem;
+`;
+
+export const productImgLayoutStyle = (theme: Theme) => css`
+ display: flex;
+ flex-direction: column;
+ gap: 2.4rem;
+ align-items: center;
+ width: 96rem;
+ height: 111.3rem;
+ margin-bottom: 2.4rem;
+ padding: 2.4rem 0;
+
+ border-top: 1px solid ${theme.colors.gray3};
+ border-bottom: 1px solid ${theme.colors.gray3};
+`;
+
+export const titleStyle = (theme: Theme) => css`
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 4.6rem;
+ margin-bottom: 0.8rem;
+
+ ${theme.fonts.kor.titleBold20}
+`;
+
+export const purchaseInquiryLayoutStyle = (theme: Theme) => css`
+ width: 96rem;
+ height: 13.4rem;
+ margin-bottom: 2.4rem;
+
+ border-bottom: 1px solid ${theme.colors.gray3};
+`;
+
+export const agencyServiceInfoLayoutStyle = (theme: Theme) => css`
+ width: 96rem;
+ height: 9.8rem;
+ margin-bottom: 2.4rem;
+
+ border-bottom: 1px solid ${theme.colors.gray3};
+`;
+
+export const textBoxStyle = css`
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+`;
+
+export const textStyle = (theme: Theme) => css`
+ display: flex;
+ gap: 0.8rem;
+ align-items: center;
+ height: 2rem;
+
+ ${theme.fonts.eng.captionBold11}
+`;
diff --git a/src/components/productSummary/ProductSummay.tsx b/src/components/productSummary/ProductSummay.tsx
new file mode 100644
index 0000000..9256ec4
--- /dev/null
+++ b/src/components/productSummary/ProductSummay.tsx
@@ -0,0 +1,52 @@
+import detailImg from '@assets/images/img_detail_xl.png';
+import TextBtn from '@components/button/textBtn/TextBtn';
+import InfoTable from '@components/infoTable/InfoTable';
+import {
+ agencyServiceInfoLayoutStyle,
+ productImgLayoutStyle,
+ productInfoLayoutStyle,
+ purchaseInquiryLayoutStyle,
+ titleStyle,
+ textStyle,
+ textBoxStyle,
+} from '@components/productSummary/ProductSummaryStyle';
+import { IcAskBlack20, IcHandshakeGray20 } from '@assets/icons';
+
+const ProductSummay = () => (
+ 리뷰
+(497)
+{TOOL_MSG}
}
+
+ 
+
+ 개요
+구매 문의 (2)
+
+
+
+
+
구매대행 서비스 안내
+
+
+
+
+
+ Toocki Flagship Direct Store
+
+
+ 98.3%가 긍정적 평가
+ +100,000+ 개 판매 완료
+
+ {children}
+
+
+);
+
+export default OrderLayout;
diff --git a/src/layout/ProductLayout.tsx b/src/layout/ProductLayout.tsx
new file mode 100644
index 0000000..55cd052
--- /dev/null
+++ b/src/layout/ProductLayout.tsx
@@ -0,0 +1,18 @@
+import Footer from '@components/footer/Footer';
+import ProductHeader from '@components/header/productHeader/ProductHeader';
+import { layoutContainer, productMainStyle } from 'layout/layoutStyle';
+import { ReactNode } from 'react';
+
+interface LayoutProps {
+ children: ReactNode;
+}
+
+const ProductLayout = ({ children }: LayoutProps) => (
+
+ {children}
+
+
+);
+
+export default ProductLayout;
diff --git a/src/layout/layoutStyle.ts b/src/layout/layoutStyle.ts
new file mode 100644
index 0000000..b813c77
--- /dev/null
+++ b/src/layout/layoutStyle.ts
@@ -0,0 +1,11 @@
+import { css } from '@emotion/react';
+
+export const layoutContainer = css`
+ width: 100vw;
+ margin: 0 auto;
+`;
+
+export const productMainStyle = css`
+ width: 127.7rem;
+ margin: 0 auto;
+`;
diff --git a/src/layout/orderLayoutStyle.ts b/src/layout/orderLayoutStyle.ts
new file mode 100644
index 0000000..7a00e96
--- /dev/null
+++ b/src/layout/orderLayoutStyle.ts
@@ -0,0 +1,17 @@
+import { Theme, css } from '@emotion/react';
+
+export const orderLayoutContainerStyle = (theme: Theme) => css`
+ width: 100vw;
+ margin: 0 auto;
+
+ background-color: ${theme.colors.gray2};
+`;
+
+export const orderLayoutStyle = css`
+ display: flex;
+ gap: 1.2rem;
+ width: 121.4rem;
+ margin: 0 auto;
+ margin-top: 0.6rem;
+ margin-bottom: 4rem;
+`;
diff --git a/src/pages/OrderPage.tsx b/src/pages/OrderPage.tsx
index a64db3b..42cdb64 100644
--- a/src/pages/OrderPage.tsx
+++ b/src/pages/OrderPage.tsx
@@ -1,3 +1,23 @@
-const OrderPage = () => OrderPage
;
+import OrderLayout from 'layout/OrderLayout';
+import { SideBarComponent } from '@components/orderDetail/sideBar/sideBar';
+import { OrderInfoComponent } from '@components/orderDetail/orderInfo/orderInfo';
+import OrderStatusComponent from '@components/orderDetail/orderStatus/orderStatus';
+import OrderHistory from '@components/orderDetail/orderHistory/orderHistory';
+import ServiceIntroduce from '@components/orderDetail/serviceIntroduce/serviceIntroduce';
+import ProductRecommendComponent from '@components/orderDetail/productRecommend/productRecommend';
+import { mainComponentStyle } from './orderPageStyle';
+
+const OrderPage = () => (
+
+
+
-
+