[FEAT] 상품 소개, 리뷰 탭으로 변경 (#204)

* [FEAT] 상품 소개, 리뷰 탭으로 변경

* [ui] 주문 탭 반응형

src/component/order/Introduction.js

@@ -0,0 +1,8 @@
+// 상품 소개
+export default function Introduction({ introductionImageUrl }) {
+  return introductionImageUrl ? (
+    <img src={introductionImageUrl} alt="상품 정보" style={{ width: "100%" }} />
+  ) : (
+    <div style={{ textAlign: "center" }}>상품 정보가 없습니다</div>
+  );
+}

src/component/order/OrderTab.js

@@ -0,0 +1,103 @@
+import { Box, Tabs, Tab } from "@mui/material";
+import PropTypes from "prop-types";
+import { useState } from "react";
+import Review from "./review/Review";
+import Introduction from "./Introduction";
+import styled from "styled-components";
+
+const OrderTabBox = styled(Box)`
+  margin: 0 200px;
+  @media screen and (max-width: 768px) {
+    margin: 0;
+  }
+`;
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`product-tabpanel-${index}`}
+      aria-labelledby={`product-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
+function a11yProps(index) {
+  return {
+    id: `product-tab-${index}`,
+    "aria-controls": `product-tabpanel-${index}`,
+  };
+}
+
+export default function OrderTab({ introductionImageUrl }) {
+  const [value, setValue] = useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  const tabConfigs = [
+    {
+      value: "intro",
+      label: "상품 소개",
+      content: <Introduction introductionImageUrl={introductionImageUrl} />,
+    },
+    {
+      value: "review",
+      label: "리뷰",
+      content: <Review />,
+    },
+  ];
+
+  return (
+    <OrderTabBox>
+      <Box
+        sx={{
+          borderBottom: 1,
+          borderColor: "divider",
+        }}
+      >
+        <Tabs
+          sx={{ mt: 7 }}
+          value={value}
+          onChange={handleChange}
+          aria-label="basic tabs example"
+          centered
+        >
+          {tabConfigs.map((t, i, arr) => {
+            return (
+              <Tab
+                key={i}
+                sx={{
+                  fontSize: 18,
+                  fontWeight: "bold",
+                }}
+                label={t.label}
+                {...a11yProps(i)}
+              />
+            );
+          })}
+        </Tabs>
+      </Box>
+      {tabConfigs.map((t, i, arr) => {
+        return (
+          <TabPanel key={i} value={value} index={i}>
+            {t.content}
+          </TabPanel>
+        );
+      })}
+    </OrderTabBox>
+  );
+}

src/screen/order/review/Review.css → src/component/order/review/Review.css

@@ -1,41 +1,17 @@
 .review {
-  padding: 40px 200px 15px;
+  padding-bottom: 15px;
 }
 
-.review .tab {
-  padding: 7px 0;
-  border-bottom: 1px solid gray;
-  text-align: center;
-}
-
-.review .title-div {
-  margin: 13px 0;
+.review .review-content {
+  margin: 15px 0;
 }
 
 .review .filter,
-.review .review-content .review-header,
-.review .review-content,
 .review .content,
 .review .pages {
   margin: 8px 0;
 }
 
-.review .title-div {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.review .title-div .title {
-  font-size: 15px;
-  font-weight: bold;
-}
-
-.review .title-div .button {
-  width: auto;
-  padding: 6px 10px;
-}
-
 .review .filter {
   display: flex;
   justify-content: flex-end;
@@ -102,11 +78,11 @@
   color: black;
   font-weight: bold;
 }
-.pages span:hover{
+.pages span:hover {
   cursor: pointer;
 }
 @media screen and (max-width: 500px) {
   .review {
     padding: 4px 20px 1px;
   }
-}
+}

src/screen/order/review/Review.js → src/component/order/review/Review.js

@@ -191,11 +191,6 @@ export default function Review() {
 
   return (
     <div className="review">
-      <div className="tab">리뷰</div>
-      <div className="title-div">
-        <div className="title">구매평 (개수)</div>
-      </div>
-      <div className="button-div"></div>
       <div className="filter">
         <Checkbox
           text="포토 구매평만 보기"

src/screen/order/Order.js

@@ -1,7 +1,6 @@
 import "./Order.css";
 import Header from "../../component/common/Header";
 import Footer from "../../component/common/Footer";
-import Review from "./review/Review";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import product_img from "../../image/icon/product.png";
@@ -14,6 +13,7 @@ import $ from "jquery";
 import useAppContext from "../../hooks/useAppContext";
 import Swal from "sweetalert2";
 import { getProductInfo } from "../../axios/order/Order";
+import OrderTab from "../../component/order/OrderTab";
 
 const Order = () => {
   const { frameOption, setFrameOption } = useAppContext();
@@ -214,12 +214,7 @@ const Order = () => {
           </div>
         </div>
       </div>
-      <img
-        src={productInfo.introductionImageUrl}
-        alt="상품 정보"
-        style={{ width: "70%", margin: "auto", display: "block" }}
-      />
-      <Review />
+      <OrderTab introductionImageUrl={productInfo.introductionImageUrl} />
       <Footer />
     </div>
   );