feat: 좋아요 버튼 추가

CarrotAuction · Dec 18, 2023 · 51f86fd · 51f86fd
1 parent eb17450
commit 51f86fd
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 36 deletions.
diff --git a/src/components/auctionPostPage/ProductInfo/index.module.scss b/src/components/auctionPostPage/ProductInfo/index.module.scss
@@ -1,8 +1,5 @@
 @import '../../../styles/media.scss';
 
-.productInfo {
-}
-
 .productInfoImageAndName {
   font-size: 1.6rem;
   color: var(--basic-text-color);
@@ -24,32 +21,27 @@
   justify-content: center;
   font-size: 2rem;
   color: var(--basic-text-color);
-  padding: 1rem;
-
-  p {
-    margin: 0.5rem 0;
 
-    &:nth-child(2),
-    &:nth-child(3) {
-      font-size: 1.4rem;
-      color: var(--darkgray-color);
-    }
-    &:nth-child(4) {
-      font-size: 1.6rem;
-      margin-bottom: 1rem;
-      font-weight: 700;
-    }
+  & > p:nth-of-type(1) {
+    color: #868b94;
   }
 }
 
 .profileBox {
   display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  & > p > span {
+  justify-content: center;
+  flex-direction: column;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+  & > div > p > span {
     color: black;
     margin-left: 1rem;
   }
+  margin-bottom: 1rem;
 }
 .profile {
   position: relative;
@@ -59,14 +51,37 @@
   min-height: 20px;
 }
 
-.line {
-  height: 1px;
-  background-color: #e9ecef;
+.introduce {
+  min-height: 200px;
+  border-bottom: 1px solid #e9ecef;
 }
 
-.introduce {
+.like {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   min-height: 200px;
-  padding: 5rem 0;
+
+  & > div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: red;
+    background-color: var(--main-color);
+    min-width: 100px;
+    min-height: 100px;
+    padding: 2rem;
+    border-radius: 50%;
+    color: #fff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 추가 부분 */
+  }
+
+  & > p {
+    font-weight: 700;
+    margin-top: 1rem;
+    font-size: 2.5rem;
+  }
 }
 
 .auctionParticipateButton {
@@ -85,3 +100,19 @@
     cursor: pointer;
   }
 }
+
+.writeInform {
+  font-weight: 700;
+  font-size: 2.3rem;
+  color: var(--main-color);
+  margin: 2rem 0;
+}
+
+.dataName {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.catagory {
+  margin-bottom: 1rem;
+}
diff --git a/src/components/auctionPostPage/ProductInfo/index.tsx b/src/components/auctionPostPage/ProductInfo/index.tsx
@@ -6,6 +6,7 @@ import userProfile from '@/src/assets/AuctionPost/userProfile.png';
 import Modal from '@/src/components/auctionPostPage/Modal';
 import { ProductInfoType } from '@/src/types/auctionDetail';
 import ModalPortal from '@/src/common/Portal';
+import { AiOutlineLike, AiFillLike } from 'react-icons/ai';
 import { QueryObserverResult, RefetchOptions } from '@tanstack/react-query';
 import styles from './index.module.scss';
 
@@ -28,7 +29,7 @@ const ProductInfo = ({
   const router = useRouter();
 
   const [isOpen, setIsOpen] = useState(false);
-
+  const [like, setLike] = useState(false);
   const handleModal = () => {
     if (loginedId === undefined) {
       Swal.fire({
@@ -42,31 +43,47 @@ const ProductInfo = ({
     setIsOpen((pre) => !pre);
   };
 
+  const clickLike = () => {
+    setLike((pre) => !pre);
+  };
+
   return (
     <section className={styles.productInfo}>
       <article className={styles.productInfoImageAndName}>
         <Image src={productInfo?.imageUrl} fill alt="product image" />
       </article>
       <article className={styles.productInfoDetail}>
+        <span className={styles.writeInform}>사용자 정보</span>
         <div className={styles.profileBox}>
-          <div className={styles.profile}>
-            <Image src={userProfile} fill alt="user image" />
+          <div>
+            <div className={styles.profile}>
+              <Image src={userProfile} fill alt="user image" />
+            </div>
+            <p>
+              <span>{productInfo?.creator?.nickname}</span>
+            </p>
           </div>
-          <p>
-            <span>{productInfo?.creator?.nickname}</span>
-          </p>
+
+          <p>{`${productInfo?.creator?.province.name} ${productInfo?.creator?.city.name}`}</p>
         </div>
-        <p>{`${productInfo?.stuffName}`}</p>
-        <p>{`${productInfo?.creator?.province.name} ${productInfo?.creator?.city.name}`}</p>
-        <p>{productInfo?.stuffCategory}</p>
+
+        <span className={styles.writeInform}>상품 정보</span>
+        <span className={styles.dataName}>{`${productInfo?.stuffName}`}</span>
+
+        <p className={styles.catagory}>{productInfo?.stuffCategory}</p>
         <p>
           {`판매자 희망가격: ${productInfo?.stuffPrice?.toLocaleString(
             'ko-KR',
           )}원`}
         </p>
-        <div className={styles.line} />
+        <span className={styles.writeInform}>상세 내용</span>
         <div className={styles.introduce}>{productInfo?.stuffContent}</div>
-        <div className={styles.line} />
+        <div className={styles.like}>
+          <div onClick={clickLike}>
+            {like ? <AiFillLike size={64} /> : <AiOutlineLike size={64} />}
+          </div>
+          <p className={styles.likeNum}>355</p>
+        </div>
         <button
           type="button"
           className={styles.auctionParticipateButton}