#38 #52 [Feat/Style] 상품 상세 페이지, 마이페이지 목업

client/src/App.js

@@ -11,9 +11,11 @@ import Loading from "./components/common/loading/Loading";
 import Login from "./pages/member/LoginPage";
 import SingUp from "./pages/member/SingUp";
 import Mypage from "./pages/mypage/Mypage";
+import DetailProduct from "./pages/detailProducts/DetailProduct";
 import ProductRanking from "./pages/product/ProductRanking";
 import ProductBasket from "./pages/mypage/ProductBasket";
 
+
 function App() {
   const [loading, setLoading] = useState(true);
 
@@ -30,7 +32,8 @@ function App() {
           </Route>
           <Route path="/login" element={<Login />}></Route>
           <Route path="/singup" element={<SingUp />}></Route>
-          <Route path="/mypage" element={<Mypage />}></Route>
+          <Route path="/mypage" element={<Mypage/>}></Route>
+          <Route path="/detail" element={<DetailProduct/>}></Route>
           <Route path="/product" element={<ProductRanking />}></Route>
           <Route path="/productbasket" element={<ProductBasket />}></Route>
           <Route path="*" element={<div>NotFound</div>} />

client/src/assets/styles/theme.js

@@ -1,101 +1,102 @@
 const calcRem = (size) => `${size / 16}rem`;
 
 const fontSizes = {
-  xxs: calcRem(10),
-  xs: calcRem(12),
-  small: calcRem(14),
-  base: calcRem(16),
-  lg: calcRem(18),
-  xl: calcRem(20),
-  xxl: calcRem(22),
-  xxxl: calcRem(24),
-  titleSize: calcRem(36),
+    xxs: calcRem(10),
+    xs: calcRem(12),
+    small: calcRem(14),
+    base: calcRem(16),
+    lg: calcRem(18),
+    xl: calcRem(20),
+    xxl: calcRem(22),
+    xxxl: calcRem(24),
+    titleSize: calcRem(36),
 };
 
 const paddings = {
-  small: calcRem(8),
-  base: calcRem(10),
-  lg: calcRem(12),
-  xl: calcRem(14),
-  xxl: calcRem(16),
-  xxxl: calcRem(18),
+    small: calcRem(8),
+    base: calcRem(10),
+    lg: calcRem(12),
+    xl: calcRem(14),
+    xxl: calcRem(16),
+    xxxl: calcRem(18),
 };
 
 const margins = {
-  small: calcRem(8),
-  base: calcRem(10),
-  lg: calcRem(12),
-  xl: calcRem(14),
-  xxl: calcRem(16),
-  xxxl: calcRem(18),
+    small: calcRem(8),
+    base: calcRem(10),
+    lg: calcRem(12),
+    xl: calcRem(14),
+    xxl: calcRem(16),
+    xxxl: calcRem(18),
 };
 
 const interval = {
-  base: calcRem(50),
-  lg: calcRem(100),
-  xl: calcRem(150),
-  xxl: calcRem(200),
+    base: calcRem(50),
+    lg: calcRem(100),
+    xl: calcRem(150),
+    xxl: calcRem(200),
 };
 
 const verticalInterval = {
-  base: `${calcRem(10)} 0 ${calcRem(10)} 0`,
+    base: `${calcRem(10)} 0 ${calcRem(10)} 0`,
 };
 
 const deviceSizes = {
-  mobileS: "320px",
-  mobileM: "375px",
-  mobileL: "450px",
-  tablet: "768px",
-  tabletL: "1024px",
+    mobileS: "320px",
+    mobileM: "375px",
+    mobileL: "450px",
+    tablet: "768px",
+    tabletL: "1024px",
 };
 
 const colors = {
-  White: "hsl(0, 0%, 100%)",
-  Gray_010: "#F2F2F2",
-  Gray_020: "#C6C6C6",
-  Gray_030: "#AEAEB2",
-  Gray_040: "#8E8E93",
-  Gray_050: "#636366",
-  Gray_060: "#48484A",
-  Gray_070: "#363639",
-  Gray_080: "#2C2C2E",
-  Gray_090: "#1C1C1E",
-  Blue_010: "#E9F1FF",
-  Blue_020: "#CADEFF",
-  Blue_030: "#437BEC",
-  Blue_040: "#185DE8",
-  Blue_050: "#0946BF",
-  Orange_030: "#FDA94F",
-  Orange_040: "#F88408",
-  Yellow_030: "#E9F34D",
-  Yellow_040: "#C1CD0D",
+    White: "hsl(0, 0%, 100%)",
+    Gray_010: "#F2F2F2",
+    Gray_020: "#C6C6C6",
+    Gray_030: "#AEAEB2",
+    Gray_040: "#8E8E93",
+    Gray_050: "#636366",
+    Gray_060: "#48484A",
+    Gray_070: "#363639",
+    Gray_080: "#2C2C2E",
+    Gray_090: "#1C1C1E",
+    Blue_010: "#E9F1FF",
+    Blue_020: "#CADEFF",
+    Blue_030: "#437BEC",
+    Blue_040: "#185DE8",
+    Blue_050: "#0946BF",
+    Orange_030: "#FDA94F",
+    Orange_040: "#F88408",
+    Yellow_030: "#E9F34D",
+    Yellow_040: "#C1CD0D",
+    Purple: "#652F8D",
   Eleven: "#269546;",
   CU: "#652F8D;",
   GS25: "#007CFF;",
 };
 
 const device = {
-  mobileS: `only screen and (max-width: ${deviceSizes.mobileS})`,
-  mobileM: `only screen and (max-width: ${deviceSizes.mobileM})`,
-  mobileL: `only screen and (max-width: ${deviceSizes.mobileL})`,
-  tablet: `only screen and (max-width: ${deviceSizes.tablet})`,
-  tabletL: `only screen and (max-width: ${deviceSizes.tabletL})`,
+    mobileS: `only screen and (max-width: ${deviceSizes.mobileS})`,
+    mobileM: `only screen and (max-width: ${deviceSizes.mobileM})`,
+    mobileL: `only screen and (max-width: ${deviceSizes.mobileL})`,
+    tablet: `only screen and (max-width: ${deviceSizes.tablet})`,
+    tabletL: `only screen and (max-width: ${deviceSizes.tabletL})`,
 };
 const radius = {
-  small: calcRem(10),
-  base: calcRem(20),
-  lg: calcRem(30),
+    small: calcRem(10),
+    base: calcRem(20),
+    lg: calcRem(30),
 };
 const theme = {
-  fontSizes,
-  colors,
-  deviceSizes,
-  device,
-  paddings,
-  margins,
-  interval,
-  verticalInterval,
-  radius,
+    fontSizes,
+    colors,
+    deviceSizes,
+    device,
+    paddings,
+    margins,
+    interval,
+    verticalInterval,
+    radius,
 };
 
-export default theme;
+export default theme;

client/src/components/myPage/MyLikeReview.js

@@ -0,0 +1,166 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Noimg from "../../assets/images/userinfo/Noimg.png";
+import HeartButton from '../common/button/HeartButton';
+
+
+
+const MyLikeReview = () => {
+
+  const userName = "리코"
+  const explanation = "할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어할수있어"
+  const create_At = "1986.06.28";
+
+
+  return (
+    <Maindiv>
+    <PageSection>
+      <PageTtitle>
+        <span>{userName}</span>
+        <span>님이 찜꽁한 리뷰</span>
+      </PageTtitle>
+      <RivewSection>
+        <div className='Productinformation'>
+            <img src={Noimg} alt="이미지 없음"/>
+            <section className='here'>
+              <div className='title'>
+                <div className='productName'>상품명</div>
+                <span><HeartButton/></span>                
+              </div>
+              <Productsulmung>
+                <p>{explanation}</p>
+              </Productsulmung>
+              <CreateAt>{create_At}</CreateAt>
+            </section>
+        </div>
+        <div className='Productinformation'>
+            <img src={Noimg} alt="이미지 없음"/>
+            <section className='here'>
+              <div className='title'>
+                <div className='productName'>상품명</div>
+                <span><HeartButton/></span>                
+              </div>
+              <Productsulmung>
+                <p>{explanation}</p>
+              </Productsulmung>
+              <CreateAt>{create_At}</CreateAt>
+            </section>
+        </div>
+        <div className='Productinformation'>
+            <img src={Noimg} alt="이미지 없음"/>
+            <section className='here'>
+              <div className='title'>
+                <div className='productName'>상품명</div>
+                <span><HeartButton/></span>                
+              </div>
+              <Productsulmung>
+                <p>{explanation}</p>
+              </Productsulmung>
+              <CreateAt>{create_At}</CreateAt>
+            </section>
+        </div>
+        <div className='Productinformation'>
+            <img src={Noimg} alt="이미지 없음"/>
+            <section className='here'>
+              <div className='title'>
+                <div className='productName'>상품명</div>
+                <span><HeartButton/></span>                
+              </div>
+              <Productsulmung>
+                <p>{explanation}</p>
+              </Productsulmung>
+              <CreateAt>{create_At}</CreateAt>
+            </section>
+        </div>
+      </RivewSection>
+    </PageSection>
+    </Maindiv>
+  );
+};
+
+export default MyLikeReview;
+
+const Maindiv = styled.div`
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  margin-bottom:150px;
+`
+
+const PageSection = styled.div`
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  text-align:center;
+  width: 1280px;
+`
+
+const PageTtitle = styled.div`
+  text-align:center;
+  margin-bottom:40px;
+  span:first-child{
+    font-size:40px;
+    color:${({ theme }) => theme.colors.Blue_040};
+    font-weight:700;
+  }
+  span:last-child{
+    font-size:40px;
+    color:${({ theme }) => theme.colors.Gray_090};
+    font-weight:700;
+  }
+`
+const RivewSection = styled.section`
+  display:grid;
+  gap:10px;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  .Productinformation{
+    display:flex;
+    justify-content:center;    
+    text-align:center;
+    margin-right:${({ theme }) => theme.margins.base};
+    img{
+      width:200px;
+      height:200px;
+    }
+    .title{
+      display:flex;
+      margin-bottom:${({ theme }) => theme.margins.xl};
+      .productName{        
+        margin-top:20px;
+        width:331px;
+        height:16px;
+        font-size:${({ theme }) => theme.fontSizes.base};
+        color:${({ theme }) => theme.colors.Gray_090};
+        font-weight:700;
+        text-align:left;
+      }
+      span{
+        margin-top:${({ theme }) => theme.margins.xl};
+      }
+    }
+  }
+`
+
+const Productsulmung = styled.div`
+  width:355px;
+  height:60px;
+  p{
+    text-align:left;
+    font-size: ${({ theme }) => theme.fontSizes.base};
+    font-weight:400;
+    color:${({ theme }) => theme.colors.Gray_050};
+    display: -webkit-box;
+    -webkit-line-clamp:3;
+    -webkit-box-orient:vertical;
+    overflow:hidden;
+  }
+`
+const CreateAt= styled.div`
+  margin-top:${({ theme }) => theme.margins.xl};
+  color:${({ theme }) => theme.colors.Gray_030};
+  font-weight:400;
+  font-size: ${({ theme }) => theme.fontSizes.small};
+  text-align:right;
+`

client/src/components/myPage/PbtiBanner.js

@@ -49,6 +49,7 @@ const PBanner = styled.section`
 
 const Middlecontents = styled.span`
     text-align:center;
+    margin-left: 100px;
     font-size: ${({ theme }) => theme.fontSizes.xs};
     color: ${({ theme }) => theme.colors.White};
     p {

client/src/components/myPage/PersonalInfo.js

@@ -35,7 +35,7 @@ const PersonalInfo = () => {
                         <TextInput/>                        
                     </UserForm>
                 </UserPassing>                                
-            </UserInfo>
+            </UserInfo>            
         </TopDiv>
     );
 };