efub-ecyce · moooooonchild · Dec 2, 2024 · Dec 2, 2024 · Dec 2, 2024 · Dec 2, 2024
diff --git a/src/components/ProductDetailPage/ProductImage.style.ts b/src/components/ProductDetailPage/ProductImage.style.ts
@@ -22,6 +22,10 @@ export const Top = styled.div`
     z-index: 2;
 `;
 
+export const BackBtn = styled.div`
+    cursor: pointer;
+`;
+
 export const ImgContainer = styled.div`
     width: 100%;
     height: 100%;

diff --git a/src/components/ProductDetailPage/ProductImage.tsx b/src/components/ProductDetailPage/ProductImage.tsx
@@ -1,6 +1,7 @@
 import * as S from './ProductImage.style'
 import { ReactComponent as GoBack } from '../../assets/ProductDetailPage/arrow_key_left.svg'
 import { ReactComponent as Share } from '../../assets/ProductDetailPage/share.svg'
+import { useNavigate } from 'react-router-dom'
 
 interface ReviewProps {
     reviewImg1: string;
@@ -11,13 +12,17 @@ interface ReviewProps {
 }
 
 const ProductImage = ({ reviewImg1, reviewImg2, reviewImg3, reviewImg4, reviewImg5}: ReviewProps) => {
+    const navigate = useNavigate();
+
     return (
         <S.Container>
             <S.ImgContainer>
                 {reviewImg1 ? <img src={reviewImg1} alt="Review Image 1" /> : null}
             </S.ImgContainer>
             <S.Top>
-                <GoBack />
+                <S.BackBtn onClick={() => navigate(-1)}>
+                    <GoBack />
+                </S.BackBtn>
                 <Share />
             </S.Top>
         </S.Container>

diff --git a/src/components/ProfilePage/ProductList.tsx b/src/components/ProfilePage/ProductList.tsx
@@ -13,6 +13,7 @@ interface ArtistProduct {
   duration : number;
   productState : string;
   isMarked : boolean;
+  thumbnail : string;
 }
 
 const ProductList = () => {
@@ -53,7 +54,7 @@ const ProductList = () => {
             productName={product.productName}
             duration={product.duration}
             price={product.price}
-            // imageURL={product.imageURL}
+            thumbnail={product.thumbnail}
             isMarked={product.isMarked}
             productId={product.productId}
           />

diff --git a/src/components/ProfilePage/ReviewList.tsx b/src/components/ProfilePage/ReviewList.tsx
@@ -10,31 +10,13 @@ interface ArtistReview {
     reviewer: string;
     reviewContent: string;
     reviewDate: string;
-    reviewImages: string;
+    reviewImages: ReviewImages[];
 }
 
-
-// interface ReviewDataType {
-//     profileImg: string;
-//     userName: string;
-//     score: number;
-//     content: string;
-//     reviewImg1: string;
-//     reviewImg2: string;
-//     reviewImg3: string;
-//     writtenDate: string;
-// }
-
-// const ReviewData = {
-//     profileImg: "",
-//     userName: "가장긴닉네임은열글자",
-//     score: 5.0,
-//     content: "수없이 연결된 실 속에서 사랑한 너와 나의 모습은 헝클어진 채로 버려지고 말았지 영원히 남을 매듭과 시간의 흐름을 기억하는 것 바라지 않았던 눈보라 속에 빗발치듯이 쏟아진 눈물 이제야 마주한 꿈의 대양 춤을 추듯이 흘러가보자 믿을 수 없을만큼 아름다운 그 바다로 함께 갈 수 있다면",
-//     reviewImg1: "",
-//     reviewImg2: "",
-//     reviewImg3: "",
-//     writtenDate: "2024.10.13",
-// }
+export interface ReviewImages {
+    imageId: number;
+    imageUrl: string;
+}
 
 const ReviewList = () => {
     const { userId } = useParams<{ userId: string }>();
@@ -101,9 +83,9 @@ const ReviewList = () => {
                             userName={selectedReview.reviewer}
                             score={"5.0"}
                             content={selectedReview.reviewContent}
-                            reviewImg1={selectedReview.reviewImages[0] || ""}
-                            reviewImg2={selectedReview.reviewImages[1] || ""}
-                            reviewImg3={selectedReview.reviewImages[2] || ""}
+                            reviewImg1={selectedReview.reviewImages[0]}
+                            reviewImg2={selectedReview.reviewImages[1]}
+                            reviewImg3={selectedReview.reviewImages[2]}
                             writtenDate={selectedReview.reviewDate}
                         />
                     </S.DetailWrapper>

diff --git a/src/components/ReviewPage/ReviewComponent.tsx b/src/components/ReviewPage/ReviewComponent.tsx
@@ -2,15 +2,16 @@ import * as S from './ReviewComponent.style';
 import { ReactComponent as ProfileImg } from '../../assets/ReviewPage/default-profile.svg';
 import { ReactComponent as YellowStar } from '../../assets/ReviewPage/karma-logo-yellow.svg';
 import { ReactComponent as EmptyStar } from '../../assets/ReviewPage/karma-logo-gray.svg';
+import type { ReviewImages } from '../ProfilePage/ReviewList';
 
 interface ReviewProps {
     profileImg: string;
     userName: string;
     score: string;
     content: string;
-    reviewImg1: string;
-    reviewImg2: string;
-    reviewImg3: string;
+    reviewImg1: ReviewImages;
+    reviewImg2: ReviewImages;
+    reviewImg3: ReviewImages;
     writtenDate: string;
     onClick?: () => void;
 }
@@ -42,19 +43,19 @@ const ReviewComponent = ({ profileImg, userName, score, content, reviewImg1, rev
                 </S.StarsWrapper>
             </S.ProfileWrapper>
             <S.ReviewText>{content}</S.ReviewText>
-            {/* <S.ImagesWrapper>
+            <S.ImagesWrapper>
                 <S.Image1>
-                    {reviewImg1 ? <img src={reviewImg1} alt="Review Image 1" /> : null}
+                    {reviewImg1 ? <img src={reviewImg1.imageUrl} alt="Review Image 1" /> : null}
                 </S.Image1>
                 <S.SmallImagesWrapper>
                     <S.Image2>
-                        {reviewImg2 ? <img src={reviewImg2} alt="Review Image 2" /> : null}
+                        {reviewImg2 ? <img src={reviewImg2.imageUrl} alt="Review Image 2" /> : null}
                     </S.Image2>
                     <S.Image3>
-                        {reviewImg3 ? <img src={reviewImg3} alt="Review Image 3" /> : null}
+                        {reviewImg3 ? <img src={reviewImg3.imageUrl} alt="Review Image 3" /> : null}
                     </S.Image3>
                 </S.SmallImagesWrapper>
-            </S.ImagesWrapper> */}
+            </S.ImagesWrapper>
             <S.WrittenDate>{writtenDate}</S.WrittenDate>
         </S.Wrapper>
     );

diff --git a/src/components/ReviewPage/ReviewDetailComponent.tsx b/src/components/ReviewPage/ReviewDetailComponent.tsx
@@ -4,15 +4,16 @@ import { ReactComponent as YellowStar } from '../../assets/ReviewPage/karma-logo
 import { ReactComponent as EmptyStar } from '../../assets/ReviewPage/karma-logo-gray.svg';
 import { ReactComponent as LeftArrow } from '../../assets/ReviewPage/arrow_key_left.svg';
 import { ReactComponent as RightArrow } from '../../assets/ReviewPage/arrow_key_right.svg';
+import type { ReviewImages } from '../ProfilePage/ReviewList';
 
 interface ReviewProps {
     profileImg: string;
     userName: string;
     score: string;
     content: string;
-    reviewImg1: string;
-    reviewImg2: string;
-    reviewImg3: string;
+    reviewImg1: ReviewImages;
+    reviewImg2: ReviewImages;
+    reviewImg3: ReviewImages;
     writtenDate: string;
 }
 
@@ -46,7 +47,7 @@ const ReviewDetailComponent = ({ profileImg, userName, score, content, reviewImg
             <S.ImagesWrapper>
                 <S.ArrowBtn><LeftArrow /></S.ArrowBtn>
                 <S.Image>
-                    {reviewImg1 ? <img src={reviewImg1} alt="Review Image 1" /> : null}
+                    {reviewImg1 ? <img src={reviewImg1.imageUrl} alt="Review Image 1" /> : null}
                 </S.Image>
                 <S.ArrowBtn><RightArrow /></S.ArrowBtn>
             </S.ImagesWrapper>

diff --git a/src/components/common/ProductComponent1.tsx b/src/components/common/ProductComponent1.tsx
@@ -10,10 +10,10 @@ export interface ProductProps {
   price: number;
   isMarked: boolean;
   productId: number;
-  // imageURL: string;
+  thumbnail: string;
 }
 
-const ProductComponent1 = ({ productName, duration, price, isMarked, productId }: ProductProps) => {
+const ProductComponent1 = ({ productName, duration, price, isMarked, productId, thumbnail }: ProductProps) => {
   const [bookmarked, setBookmarked] = useState(isMarked);
   const navigate = useNavigate();
 
@@ -28,7 +28,7 @@ const ProductComponent1 = ({ productName, duration, price, isMarked, productId }
 
   return (
     <S.Wrapper onClick={handleNavigate}>
-      <S.ProductPicture imageURL={"imageURL"}></S.ProductPicture>
+      <S.ProductPicture imageURL={thumbnail}></S.ProductPicture>
       <S.Title>{productName}</S.Title>
       <S.Term>제작 소요 기간 {duration}일</S.Term>
       <S.PNB>

diff --git a/src/pages/Main/MainPage/MainPage.tsx b/src/pages/Main/MainPage/MainPage.tsx
@@ -14,6 +14,7 @@ export interface ProductProps {
   price: number;
   productId: number;
   productName: string;
+  thumbnail: string;
 }
 
 const productDummyData: ProductProps[] = [
@@ -25,7 +26,7 @@ const productDummyData: ProductProps[] = [
     price: 20000,
     productId: 1,
     productName: "청바지를 활용한 텀블러 가방",
-    // imageURL: "",
+    thumbnail: "",
   },
 ];
 
@@ -77,7 +78,7 @@ const MainPage = () => {
             productName={product.productName}
             duration={product.duration}
             price={product.price}
-            // imageURL={product.imageURL}
+            thumbnail={product.thumbnail}
             isMarked={product.isMarked}
             productId={product.productId}
           />

diff --git a/src/pages/Main/SearchPage/SearchPage.tsx b/src/pages/Main/SearchPage/SearchPage.tsx
@@ -15,6 +15,7 @@ interface ResultProps {
   duration: number;
   productState: string;
   isMarked: boolean;
+  thumbnail: string;
 }
 
 const SearchPage = () => {
@@ -59,6 +60,7 @@ const SearchPage = () => {
             productId={product.productId}
             productName={product.productName}
             duration={product.duration}
+            thumbnail={product.thumbnail}
             price={product.price}
             isMarked={product.isMarked}
           />

diff --git a/src/pages/Review/ReviewPage/ReviewPage.tsx b/src/pages/Review/ReviewPage/ReviewPage.tsx
@@ -74,9 +74,9 @@ const ReviewPage = () => {
               userName={review.reviewerName}
               score={review.rating.toFixed(1)}
               content={review.content}
-              reviewImg1={""}
-              reviewImg2={""}
-              reviewImg3={""}
+              reviewImg1={review.reviewImages[0]}
+              reviewImg2={review.reviewImages[1]}
+              reviewImg3={review.reviewImages[2]}
               writtenDate={review.reviewDate}
               onClick={() => handleReviewClick(review)}
             />
@@ -94,9 +94,9 @@ const ReviewPage = () => {
               userName={selectedReview.reviewerName}
               score={selectedReview.rating.toFixed(1)}
               content={selectedReview.content}
-              reviewImg1={""}
-              reviewImg2={""}
-              reviewImg3={""}
+              reviewImg1={selectedReview.reviewImages[0]}
+              reviewImg2={selectedReview.reviewImages[1]}
+              reviewImg3={selectedReview.reviewImages[2]}
               writtenDate={selectedReview.reviewDate}
             />
           </S.DetailWrapper>