Merge pull request #112 from UMC-FITple/feature/#111

Feature/#111 qa

FITple-Frontend/public/TestData/ItemTestData.json

@@ -2,6 +2,7 @@
   {
     "cloth_id": 1,
     "like": "1",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 5,
     "brand": "칼하트",
     "cloth_name": "칼하트 K122 미드웨이트 후드집업",
@@ -13,9 +14,14 @@
     "url": "https://www.musinsa.com/app/goods/1382869",
     "memo": "팔기장이 조금 길다"
   },
+
+
+
+
   {
     "cloth_id": 2,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 5,
     "brand": "헤일로샵",
     "cloth_name": "5도 쿨링 이글루 세미 와이드 데님팬츠",
@@ -30,6 +36,7 @@
   {
     "cloth_id": 3,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 2,
     "brand": "키뮤어",
     "cloth_name": "COOL 워셔블 하프 니트",
@@ -44,6 +51,7 @@
   {
     "cloth_id": 4,
     "like": "1",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 2,
     "brand": "MUSINSA STANDARD",
     "cloth_name": "라운지 스웨트 팬츠",
@@ -58,6 +66,7 @@
   {
     "cloth_id": 5,
     "like": "1",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 2,
     "brand": "DRAW FIT",
     "cloth_name": "소프 울 오버fit 니트 베스트",
@@ -72,6 +81,7 @@
   {
     "cloth_id": 6,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 3,
     "brand": "매니크",
     "cloth_name": "빈티지 스냅버튼 와이드 데님팬츠",
@@ -86,6 +96,7 @@
   {
     "cloth_id": 7,
     "like": "1",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 3,
     "brand": "러브이즈트루",
     "cloth_name": "IN LOVE TEE",
@@ -100,6 +111,7 @@
   {
     "cloth_id": 8,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 3,
     "brand": "파르티멘토",
     "cloth_name": "링클 체크 박시 오버fit 롤업 하프 셔츠",
@@ -114,6 +126,7 @@
   {
     "cloth_id": 9,
     "like": "1",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 3,
     "brand": "aeae",
     "cloth_name": "WEB LOGO T-SHIRT",
@@ -128,6 +141,7 @@
   {
     "cloth_id": 10,
     "like": "1",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 4,
     "brand": "랜덤오프",
     "cloth_name": "MOZZI MEONZI 반팔티",
@@ -142,6 +156,7 @@
   {
     "cloth_id": 11,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 4,
     "brand": "브렌슨",
     "cloth_name": "원턱 와이드 트레이닝 팬츠",
@@ -156,6 +171,7 @@
   {
     "cloth_id": 12,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 4,
     "brand": "모즈모즈",
     "cloth_name": "와이드 원턱 스웨트 쇼츠 세트",
@@ -170,6 +186,7 @@
   {
     "cloth_id": 13,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 4,
     "brand": "엘리메노",
     "cloth_name": "EL 하이 스피드 반팔티셔츠 멜란지",
@@ -184,6 +201,7 @@
   {
     "cloth_id": 14,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "ERTR(이알티알)",
     "cloth_name": "Big Basket Pants (Navy)",
@@ -198,6 +216,7 @@
   {
     "cloth_id": 15,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "스웨이드(SUADE)",
     "cloth_name": "CARPENTER DENIM SHORTS",
@@ -212,6 +231,7 @@
   {
     "cloth_id": 16,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "PunchDrunkParties(펀치드렁크파티즈)",
     "cloth_name": "Basic Logo Narrow T-shirt",
@@ -227,6 +247,7 @@
   {
     "cloth_id": 17,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "밀로 우먼",
     "cloth_name": "레터링 아카이브 티셔츠",
@@ -241,6 +262,7 @@
   {
     "cloth_id": 18,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "아디다스",
     "cloth_name": "파이어버드 숏 팬츠",
@@ -255,6 +277,7 @@
   {
     "cloth_id": 19,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "aeae",
     "cloth_name": "WEB LOGO T-SHIRTS",
@@ -269,6 +292,7 @@
   {
     "cloth_id": 20,
     "like": "1",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "스투시",
     "cloth_name": "BASIC STÜSSY TEE",
@@ -283,6 +307,7 @@
   {
     "cloth_id": 21,
     "like": "1",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "러브이즈트루",
     "cloth_name": "IN LOVE TEE",
@@ -297,6 +322,7 @@
   {
     "cloth_id": 22,
     "like": "1",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "파르티멘토",
     "cloth_name": "링클 체크 박시 오버핏 롤업 하프 셔츠",
@@ -311,6 +337,7 @@
   {
     "cloth_id": 23,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "aeae",
     "cloth_name": "WEB LOGO T-SHIRT",
@@ -325,6 +352,7 @@
   {
     "cloth_id": 24,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "인스턴트펑크",
     "cloth_name": "벨티드 더블 울 자켓",
@@ -339,6 +367,7 @@
   {
     "cloth_id": 25,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "인스턴트펑크",
     "cloth_name": "하트넥 슬림 라인 맨투맨",
@@ -353,6 +382,7 @@
   {
     "cloth_id": 26,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "스컬프터",
     "cloth_name": "Classic Logo Tee",
@@ -367,6 +397,7 @@
   {
     "cloth_id": 27,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "마뗑킴",
     "cloth_name": "MATIN LOGO CROP TOP",
@@ -381,6 +412,7 @@
   {
     "cloth_id": 28,
     "like": "0",
+    "clothImg": "../../assets/RecomImg/cloth ",
     "closet_num": 1,
     "brand": "로라로라(rolarola)",
     "cloth_name": "BASIC LETTERING T-SHIRT",

FITple-Frontend/src/App.jsx

@@ -67,7 +67,7 @@ function App() {
           <Route path="/recommend" element={<RecomMainPage />} />
           <Route path="/recommendall" element={<RecomAllPage />} />
           <Route path="/recommendFeed" element={<RecomUserFeedPage />} />
-          <Route path="/recommendClo" element={<RecomUserCloInfomPage />} />
+          <Route path="/recommendclo" element={<RecomUserCloInfomPage />} />
           <Route path="/brand/:id" element={<BrandPage />} />
           <Route
             path="/recommendUserSearch"

FITple-Frontend/src/components/Closet/Closet.jsx

@@ -2,9 +2,17 @@ import { Container } from "./Closet.style";
 import Goods from "../Goods/Goods"; // Goods 컴포넌트
 import EX_IMG from "../../../assets/EXadidas.svg";
 
+import { useNavigate } from "react-router-dom";
 
 
 function Closet({ clothes }) {
+  const navigate = useNavigate();
+
+  const handleUserClick = (cloth) => {
+    console.log(cloth);
+    navigate("/recommendclo", { state: cloth });
+  };
+
 
   return (
     <Container>
@@ -17,6 +25,13 @@ function Closet({ clothes }) {
           size={cloth.size}
           fit={cloth.fit}
           like={cloth.like}
+          color={cloth.color}
+          cloth_num={cloth.cloth_num}
+          clothImg={cloth.clothImg}
+          cloth_id={cloth.cloth_id}
+          url={cloth.url}
+          memo={cloth.memo}
+          onClick={()=>handleUserClick(cloth)}//클릭 옷 상세
         />
       ))}
     </Container>

FITple-Frontend/src/components/Goods/Goods.jsx

@@ -6,12 +6,21 @@ import {
   GoodsSize,
   HeartIcon,
 } from "./Goods.style";
+import { useNavigate } from "react-router-dom";
+
 
 function Goods({ ...props }) {
-  console.log(props);
+  const navigate = useNavigate();
+
+  const handleUserClick = (cloth) => {
+    console.log(cloth);
+    navigate("/recommendclo", { state: cloth });
+  };
+
+
   return (
-    <Container>
-      <SetGoodsImg src={props.src} />
+    <Container onClick={props.onClick}>
+      <SetGoodsImg src={`${props.clothImg}(${props.cloth_id}).png`} />
       <Brand>{props.brand}</Brand>
       <GoodsName>{props.cloth_name}</GoodsName>
       <GoodsSize>{props.size} - {props.fit}</GoodsSize>

FITple-Frontend/src/components/Goods/Goods.style.js

@@ -1,16 +1,18 @@
-import { Link } from "react-router-dom";
 import styled from "styled-components";
 
 export const Container = styled.div`
   position: relative;
   max-width:250px;
+  cursor: pointer;
 `;
 export const SetGoodsImg = styled.img`
   width: 250px;
   height: 250px;
   background-color: #d9d9d9;
   border-radius: 20px;
   box-shadow: 8px 8px 20px #c9c7c7;
+  object-fit: cover;
+
 `;
 
 export const Brand = styled.h3`

FITple-Frontend/src/components/InfomBox/InfomBox.style.js

@@ -14,6 +14,6 @@ export const Title = styled.div`
 `
 
 export const Desc = styled.div`
-    font-size:32px;
+    font-size:28px;
     font-weight:800;
 `