style: 홈페이지, 물품 상세페이지 css 수정(#1, #8)

prgrms-web-devcourse-final-project · Nov 25, 2024 · bfb10fa · bfb10fa
1 parent 1ac331d
commit bfb10fa
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 82 deletions.
diff --git a/src/assets/icons/filled-heart.png b/src/assets/icons/filled-heart.png
diff --git a/src/assets/icons/goodbuyus-logo.svg b/src/assets/icons/goodbuyus-logo.svg
diff --git a/src/assets/icons/heart.png b/src/assets/icons/heart.png
diff --git a/src/components/pages/HomePage/CategoryProduct.tsx b/src/components/pages/HomePage/CategoryProduct.tsx
@@ -2,15 +2,9 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import StarRating from '../../common/StarRating';
-
-interface Product {
-  id: string;
-  name: string;
-  stars: number;
-  originalPrice: number;
-  discountedPrice: number;
-  image: string;
-}
+import Heart from '../../../assets/icons/heart.png';
+import FilledHeart from '../../../assets/icons/filled-heart.png';
+import { Product } from './model/productSchema';
 
 interface CategoryProductsProps {
   categories: string[];
@@ -80,7 +74,7 @@ const CategoryProduct: React.FC<CategoryProductsProps> = ({
                 </PriceWrapper>
               </ProductWrapper>
             </StyledLink>
-            <LikeButton>♡</LikeButton>
+            <LikeButton likes={product.likes} />
           </Card>
         ))}
       </CardWrapper>
@@ -197,13 +191,20 @@ const DiscountedPrice = styled.div`
   color: #ff4d4f;
 `;
 
-const LikeButton = styled.div`
+const LikeButton = styled.img<{ likes: boolean }>`
   position: absolute;
   bottom: 20px;
   right: 30px;
-  font-size: 25px;
-  color: #ccc;
+  width: 25px;
+  height: 25px;
   cursor: pointer;
+  content: ${({ likes }) => `url(${likes ? FilledHeart : Heart})`};
+  color: ${({ likes }) => (likes ? 'red ' : 'transparent')};
+
+  &:hover {
+    transform: scale(1.2);
+    transition: transform 0.2s ease-in-out;
+  }
 `;
 const CategoryWrapper = styled.div`
   width: 100%;

diff --git a/src/components/pages/HomePage/HomePage.tsx b/src/components/pages/HomePage/HomePage.tsx
@@ -44,6 +44,7 @@ const HomePage: React.FC = () => {
         comment: 'asd',
       },
     ],
+    likes: false,
   };
   const products = [
     {
@@ -54,7 +55,8 @@ const HomePage: React.FC = () => {
       discountedPrice: 79.98,
       image: 'https://via.placeholder.com/200',
       category: '전자제품',
-      comments: [], // 0개
+      comments: [],
+      likes: false,
     },
     {
       id: '2',
@@ -64,7 +66,8 @@ const HomePage: React.FC = () => {
       discountedPrice: 199.99,
       image: 'https://via.placeholder.com/200',
       category: '전자제품',
-      comments: [{ comment: '좋아요!' }], // 1개
+      comments: [{ comment: '좋아요!' }],
+      likes: false,
     },
     {
       id: '3',
@@ -74,7 +77,8 @@ const HomePage: React.FC = () => {
       discountedPrice: 39.99,
       image: 'https://via.placeholder.com/200',
       category: '전자제품',
-      comments: [{ comment: '좋은 제품이에요!' }, { comment: '가성비 최고!' }], // 2개
+      comments: [{ comment: '좋은 제품이에요!' }, { comment: '가성비 최고!' }],
+      likes: false,
     },
     {
       id: '4',
@@ -88,7 +92,8 @@ const HomePage: React.FC = () => {
         { comment: '화질 좋아요!' },
         { comment: '디자인이 예뻐요!' },
         { comment: '조금 무겁지만 괜찮아요.' },
-      ], // 3개
+      ],
+      likes: false,
     },
     {
       id: '5',
@@ -98,7 +103,8 @@ const HomePage: React.FC = () => {
       discountedPrice: 999.99,
       image: 'https://via.placeholder.com/200',
       category: '전자제품',
-      comments: [], // 0개
+      comments: [],
+      likes: false,
     },
     {
       id: '6',
@@ -108,7 +114,8 @@ const HomePage: React.FC = () => {
       discountedPrice: 299.99,
       image: 'https://via.placeholder.com/200',
       category: '전자제품',
-      comments: [{ comment: '아이들이 너무 좋아해요!' }], // 1개
+      comments: [{ comment: '아이들이 너무 좋아해요!' }],
+      likes: true,
     },
     {
       id: '7',
@@ -118,7 +125,8 @@ const HomePage: React.FC = () => {
       discountedPrice: 4.5,
       image: 'https://via.placeholder.com/200',
       category: '식료품',
-      comments: [], // 0개
+      comments: [],
+      likes: false,
     },
     {
       id: '8',
@@ -128,7 +136,8 @@ const HomePage: React.FC = () => {
       discountedPrice: 12.99,
       image: 'https://via.placeholder.com/200',
       category: '식료품',
-      comments: [{ comment: '맛있어요!' }], // 1개
+      comments: [{ comment: '맛있어요!' }],
+      likes: false,
     },
     {
       id: '9',
@@ -142,7 +151,8 @@ const HomePage: React.FC = () => {
         { comment: '항상 먹는 맛!' },
         { comment: '간편해서 좋아요.' },
         { comment: '가격 대비 최고!' },
-      ], // 3개
+      ],
+      likes: true,
     },
     {
       id: '10',
@@ -152,7 +162,8 @@ const HomePage: React.FC = () => {
       discountedPrice: 99.99,
       image: 'https://via.placeholder.com/200',
       category: '생활용품',
-      comments: [], // 0개
+      comments: [],
+      likes: true,
     },
     {
       id: '11',
@@ -162,7 +173,8 @@ const HomePage: React.FC = () => {
       discountedPrice: 15.99,
       image: 'https://via.placeholder.com/200',
       category: '생활용품',
-      comments: [{ comment: '실용적이에요.' }], // 1개
+      comments: [{ comment: '실용적이에요.' }],
+      likes: false,
     },
     {
       id: '12',
@@ -175,7 +187,8 @@ const HomePage: React.FC = () => {
       comments: [
         { comment: '조명이 예뻐요.' },
         { comment: '편안한 분위기를 만들어줘요.' },
-      ], // 2개
+      ],
+      likes: false,
     },
     {
       id: '13',
@@ -189,7 +202,8 @@ const HomePage: React.FC = () => {
         { comment: '편안해요.' },
         { comment: '디자인이 마음에 들어요.' },
         { comment: '색상이 예뻐요.' },
-      ], // 3개
+      ],
+      likes: false,
     },
     {
       id: '14',
@@ -199,7 +213,8 @@ const HomePage: React.FC = () => {
       discountedPrice: 35.99,
       image: 'https://via.placeholder.com/200',
       category: '패션/의류',
-      comments: [], // 0개
+      comments: [],
+      likes: false,
     },
     {
       id: '15',
@@ -212,7 +227,8 @@ const HomePage: React.FC = () => {
       comments: [
         { comment: '디자인 최고!' },
         { comment: '가죽이 고급스러워요.' },
-      ], // 2개
+      ],
+      likes: true,
     },
     {
       id: '16',
@@ -226,7 +242,8 @@ const HomePage: React.FC = () => {
         { comment: '튼튼해요.' },
         { comment: '디자인이 멋져요.' },
         { comment: '조립이 쉬워요.' },
-      ], // 3개
+      ],
+      likes: true,
     },
     {
       id: '17',
@@ -236,7 +253,8 @@ const HomePage: React.FC = () => {
       discountedPrice: 129.99,
       image: 'https://via.placeholder.com/200',
       category: '가구/인테리어',
-      comments: [], // 0개
+      comments: [],
+      likes: false,
     },
     {
       id: '18',
@@ -249,7 +267,8 @@ const HomePage: React.FC = () => {
       comments: [
         { comment: '스타일리시해요.' },
         { comment: '높이가 딱 좋아요.' },
-      ], // 2개
+      ],
+      likes: true,
     },
     {
       id: '19',
@@ -263,7 +282,8 @@ const HomePage: React.FC = () => {
         { comment: '아기가 잘 사용해요.' },
         { comment: '흡수력이 좋아요.' },
         { comment: '가격이 저렴해요.' },
-      ], // 3개
+      ],
+      likes: true,
     },
     {
       id: '20',
@@ -273,7 +293,8 @@ const HomePage: React.FC = () => {
       discountedPrice: 39.99,
       image: 'https://via.placeholder.com/200',
       category: '유아/아동용품',
-      comments: [], // 0개
+      comments: [],
+      likes: true,
     },
   ];
 

diff --git a/src/components/pages/HomePage/PopularProduct.tsx b/src/components/pages/HomePage/PopularProduct.tsx
@@ -2,13 +2,10 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import StarRating from '../../common/StarRating';
+import { Product } from './model/productSchema';
 
 interface PopularProductProps {
-  product: {
-    id: string;
-    image: string;
-    stars: number;
-  };
+  product: Product;
 }
 
 const PopularProduct: React.FC<PopularProductProps> = ({ product }) => {

diff --git a/src/components/pages/HomePage/RecommendProduct.tsx b/src/components/pages/HomePage/RecommendProduct.tsx
@@ -2,19 +2,9 @@ import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import StarRating from '../../common/StarRating';
-interface Comment {
-  comment: string;
-}
-
-interface Product {
-  id: string;
-  name: string;
-  stars: number;
-  originalPrice: number;
-  discountedPrice: number;
-  image: string;
-  comments: Comment[]; // Comment 타입의 배열
-}
+import { Product } from './model/productSchema';
+import Heart from '../../../assets/icons/heart.png';
+import FilledHeart from '../../../assets/icons/filled-heart.png';
 
 interface PopularProductsListProps {
   products: Product[];
@@ -56,7 +46,7 @@ const RecommendProduct: React.FC<PopularProductsListProps> = ({ products }) => {
                 </PriceWrapper>
               </ProductWrapper>
             </StyledLink>
-            <LikeButton>♡</LikeButton>
+            <LikeButton likes={product.likes} />
           </Card>
         ))}
       </CardWrapper>
@@ -167,13 +157,20 @@ const DiscountedPrice = styled.div`
   color: #ff4d4f;
 `;
 
-const LikeButton = styled.div`
+const LikeButton = styled.img<{ likes: boolean }>`
   position: absolute;
   bottom: 20px;
   right: 30px;
-  font-size: 25px;
-  color: #ccc;
+  width: 25px;
+  height: 25px;
   cursor: pointer;
+  content: ${({ likes }) => `url(${likes ? FilledHeart : Heart})`};
+  color: ${({ likes }) => (likes ? 'red ' : 'transparent')};
+
+  &:hover {
+    transform: scale(1.2);
+    transition: transform 0.2s ease-in-out;
+  }
 `;
 const MoreButtonWrapper = styled.div`
   position: relative;

diff --git a/src/components/pages/HomePage/api/productApi.ts b/src/components/pages/HomePage/api/productApi.ts
@@ -1,14 +1,6 @@
 import axiosInstance from '../../../../api/axiosInstance';
-export type Product = {
-  id: string;
-  name: string;
-  stars: number;
-  originalPrice: number;
-  discountedPrice: number;
-  image: string;
-  category: string;
-  comments?: [];
-};
+import { Product } from '../model/productSchema';
+
 export const getProducts = async (): Promise<Product[]> => {
   try {
     const URL = `/products`;

diff --git a/src/components/pages/HomePage/model/productSchema.ts b/src/components/pages/HomePage/model/productSchema.ts
@@ -0,0 +1,14 @@
+interface Comment {
+  comment: string;
+}
+
+export interface Product {
+  id: string;
+  name: string;
+  stars: number;
+  originalPrice: number;
+  discountedPrice: number;
+  image: string;
+  comments: Comment[];
+  likes: boolean;
+}