feat : heartIcon, trashIcon 추가

Ureca-miniproject2 · Sep 26, 2024 · 3ee9d8d · 3ee9d8d
1 parent 9362aae
commit 3ee9d8d
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 10 deletions.
diff --git a/frontend/src/apis/index.js b/frontend/src/apis/index.js
@@ -4,4 +4,4 @@ export const axiosInstance = axios.create({
   baseURL: import.meta.env.VITE_BASE_URL,
   withCredentials: true,
   timeout: 5000,
-});
+});
diff --git a/frontend/src/components/comments/Comments.jsx b/frontend/src/components/comments/Comments.jsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import Comment from '../comments/comment/Comment';
 
 export default function Comments() {
+  const [isHeart, setIsHeart] = useState(false);
   const [comment, SetComment] = useState([]);
   const [comment2, setComment2] = useState([]);
   useEffect(() => {
@@ -23,16 +24,18 @@ export default function Comments() {
     b();
     a();
   }, []);
-
   return (
     <>
       <Comment
         isBest={true}
+        isTrash={true}
+        isHeart={isHeart}
+        setIsHeart={setIsHeart}
         id="1"
         nickname="이지영"
         time="2분 전"
         like="13"
-        comment="인싸를 만나서 나만 만나는 아싸로 만들겠어"
+        comment="인싸를 만나서 나만 만나는 아싸로 만들래"
       />
     </>
   );

diff --git a/frontend/src/components/comments/comment/Comment.jsx b/frontend/src/components/comments/comment/Comment.jsx
@@ -1,18 +1,27 @@
 import React from 'react';
+import { useState } from 'react';
 import * as S from './Comment.styled';
+import TrashIconImg from '../../common/icon/TrashIcon';
 // import timeAgo from '../../utils/timeAgo';
-import HeartIcon2 from '../../common/icon/HeartIcon';
+import HeartIconImg from '../../common/icon/HeartIcon';
 
 export default function Comment(props) {
+  const handleClick = () => {
+    props.setIsHeart(!props.isHeart); //하트 컬러 변경 함수 호출
+  };
+
   return (
     <S.CommentContainer isBest={props.isBest}>
       <S.TopContainer key={props.id}>
         <S.BestButton isBest={props.isBest}>BEST</S.BestButton>
         <S.NickNameStyle>{props.nickname}</S.NickNameStyle>
         <S.TimeStyle>{props.time}</S.TimeStyle>
+        <S.TrashIcon isTrash={props.isTrash}>
+          <TrashIconImg />
+        </S.TrashIcon>
         <S.LikeContainer>
-          <S.HeartIcon>
-            <HeartIcon2 fill="#C8C8C8" />
+          <S.HeartIcon onClick={handleClick} isHeart={props.isHeart}>
+            <HeartIconImg />
           </S.HeartIcon>
           <S.LikeStyle>{props.like}</S.LikeStyle>
         </S.LikeContainer>

diff --git a/frontend/src/components/comments/comment/Comment.styled.js b/frontend/src/components/comments/comment/Comment.styled.js
@@ -32,6 +32,7 @@ export const BestButton = styled.div`
   margin-right: 0.8rem;
   font-size: 1.2rem;
 `;
+
 export const BestButton2 = styled.div`
   font-family: 'Pretendard-semibold';
   display: ${(props) => (props.isBest ? 'flex' : 'none')};
@@ -52,10 +53,25 @@ export const LikeContainer = styled.div`
 
 export const HeartIcon = styled.div`
   display: flex;
-  width: 1.9rem;
-  height: 1.9rem;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
+
+  svg {
+    fill: ${(props) =>
+      props.isHeart
+        ? props.theme.colors.primaryRed
+        : props.theme.colors.gray350}; /* 호버 시 색상 변경 */
+
+    &:hover {
+      fill: ${(props) => props.theme.colors.primaryRed};
+    }
+  }
+
+  &:hover {
+    transform: scale(1.1);
+    transition: transform 0.5s ease, fill 0.5s ease;
+  }
 `;
 
 export const TopContainer = styled.div`
@@ -86,6 +102,20 @@ export const TimeStyle = styled.div`
   color: ${(props) => props.theme.colors.gray300};
 `;
 
+export const TrashIcon = styled.div`
+  margin-left: 1.4rem;
+  display: ${(props) => (props.isTrash ? 'flex' : 'none')};
+  cursor: pointer;
+  svg {
+    stroke: ${(props) => props.theme.colors.gray300};
+    &:hover {
+      fill: ${(props) => props.theme.colors.gray350};
+      stroke: ${(props) => props.theme.colors.gray400};
+      transition: transform 0.5s ease, fill 0.5s ease;
+    }
+  }
+`;
+
 export const LikeStyle = styled.div`
   /* position: absolute; */
   display: flex;

diff --git a/frontend/src/components/common/icon/HeartIcon.jsx b/frontend/src/components/common/icon/HeartIcon.jsx
@@ -1,8 +1,8 @@
 export default function HeartIcon(props) {
   return (
     <svg
-      width="23"
-      height="23"
+      width="24"
+      height="24"
       viewBox="0 0 23 26"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/src/components/common/icon/TrashIcon.jsx b/frontend/src/components/common/icon/TrashIcon.jsx
@@ -0,0 +1,20 @@
+export default function TrashIcon(props) {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M2.25 4.5H3.75M3.75 4.5H15.75M3.75 4.5V15C3.75 15.3978 3.90804 15.7794 4.18934 16.0607C4.47064 16.342 4.85218 16.5 5.25 16.5H12.75C13.1478 16.5 13.5294 16.342 13.8107 16.0607C14.092 15.7794 14.25 15.3978 14.25 15V4.5M6 4.5V3C6 2.60218 6.15804 2.22064 6.43934 1.93934C6.72064 1.65804 7.10218 1.5 7.5 1.5H10.5C10.8978 1.5 11.2794 1.65804 11.5607 1.93934C11.842 2.22064 12 2.60218 12 3V4.5M7.5 8.25V12.75M10.5 8.25V12.75"
+        stroke="current"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}