[#46] feat - 링크 연결, 찜페이지에서 찜 되도록 설정

siliconValleyTeamA · Jan 16, 2021 · 913a4ed · 913a4ed
1 parent b330610
commit 913a4ed
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 47 deletions.
diff --git a/src/api/jjimAPI.js b/src/api/jjimAPI.js
@@ -8,6 +8,6 @@ export const createJjimAPI = ({ projectId }) => {
   return axios.post(`/api/user/jjim`, { projectId });
 };
 
-export const removeJjimAPI = ({ projectId }) => {
-  return axios.delete(`/api/user/jjim`, { data: { projectId } });
+export const removeJjimAPI = ({ jjimId }) => {
+  return axios.delete(`/api/user/jjim`, { data: { jjimId } });
 };
diff --git a/src/components/HomePage/Container/Container.module.scss b/src/components/HomePage/Container/Container.module.scss
@@ -10,6 +10,7 @@
   .title {
     font-size: 20px;
     text-align: center;
+    font-weight: 700;
   }
 
   .scroll-container {

diff --git a/src/components/MyDetailPage/CartPage/CartGoods/CartGoods.jsx b/src/components/MyDetailPage/CartPage/CartGoods/CartGoods.jsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames/bind';
 import { MdRemoveShoppingCart } from 'react-icons/md';
+import { FaCoins } from 'react-icons/fa';
 
 /* Internal dependencies */
 import styles from './CartGoods.module.scss';
@@ -40,7 +41,7 @@ function CartGoods({ data }) {
           <input
             type="text"
             className={cx('cart-item-input')}
-            placeholder="금액입력"
+            placeholder="수정 금액 입력"
             value={point}
             onChange={e => {
               setPoint(
@@ -50,22 +51,24 @@ function CartGoods({ data }) {
               );
             }}
           />
-          <div className={cx('price')}>{data.money}</div>
-          <div className={cx('modify')}>
-            <div className={cx('modify-icon')}>
-              <MdRemoveShoppingCart className={cx('MdRemoveShoppingCart')} />
+          <div className={cx('price')}>{data.money.toLocaleString()}원</div>
+          <div className={cx('wrap')}>
+            <div className={cx('modify')}>
+              <div className={cx('modify-icon')}>
+                <FaCoins className={cx('FaCoins')} />
+              </div>
+              <span className={cx('modify-description')} onClick={modifyCart}>
+                수정
+              </span>
             </div>
-            <span className={cx('modify-description')} onClick={modifyCart}>
-              수정
-            </span>
-          </div>
-          <div className={cx('delete')}>
-            <div className={cx('delete-icon')}>
-              <MdRemoveShoppingCart className={cx('MdRemoveShoppingCart')} />
+            <div className={cx('delete')}>
+              <div className={cx('delete-icon')}>
+                <MdRemoveShoppingCart className={cx('MdRemoveShoppingCart')} />
+              </div>
+              <span className={cx('delete-description')} onClick={removeCart}>
+                삭제
+              </span>
             </div>
-            <span className={cx('delete-description')} onClick={removeCart}>
-              삭제
-            </span>
           </div>
         </div>
       </div>

diff --git a/src/components/MyDetailPage/CartPage/CartGoods/CartGoods.module.scss b/src/components/MyDetailPage/CartPage/CartGoods/CartGoods.module.scss
@@ -45,20 +45,42 @@
       .price {
         font-size: 20px;
         font-weight: 700;
+        margin-right: 4px;
       }
 
-      .delete {
+      .wrap {
         display: flex;
-        span {
-          color: #f54243;
-          font-weight: 600;
-          font-size: 15px;
-          margin-top: 2px;
+        justify-content: space-around;
+        margin-right: 4px;
+        .modify {
+          display: flex;
+          span {
+            color: $gray;
+            font-weight: 600;
+            font-size: 15px;
+            margin-top: 2px;
+          }
+
+          .FaCoins {
+            color: $gray;
+            margin-right: 3px;
+            font-size: 15px;
+          }
         }
 
-        .MdRemoveShoppingCart {
-          color: #f54243;
-          margin-right: 2px;
+        .delete {
+          display: flex;
+          span {
+            color: #f54243;
+            font-weight: 600;
+            font-size: 15px;
+            margin-top: 2px;
+          }
+
+          .MdRemoveShoppingCart {
+            color: #f54243;
+            margin-right: 3px;
+          }
         }
       }
     }

diff --git a/src/components/MyDetailPage/JjimList/JjimList.jsx b/src/components/MyDetailPage/JjimList/JjimList.jsx
@@ -11,7 +11,7 @@ function JjimList({ jjimList }) {
   return (
     <div className={cx('jjim-list')}>
       {jjimList.map(jjim => (
-        <Project key={jjim.id} data={jjim} jjim={true} />
+        <Project key={jjim.id} data={jjim} jjimType={true} />
       ))}
     </div>
   );

diff --git a/src/components/Mypage/Profile/Profile.js b/src/components/Mypage/Profile/Profile.js
@@ -25,10 +25,9 @@ function Profile() {
           alt="profile"
         />
       </div>
-      <div className={cx('opening-ment')}>좋은 하루 되세요,</div>
       <div className={cx('user-name')}>Noh Gi Jin님</div>
       <div className={cx('user-point')}>
-        잔여 포인트: {point.toLocaleString()} P
+        잔여 포인트: {point.toLocaleString()} 원
       </div>
     </div>
   );

diff --git a/src/components/Mypage/Profile/Profile.module.scss b/src/components/Mypage/Profile/Profile.module.scss
@@ -36,5 +36,6 @@
     font-size: 1.2rem;
     margin-top: 0.5rem;
     margin-bottom: 1.5rem;
+    font-weight: 700;
   }
 }
diff --git a/src/components/global/Project/Project.jsx b/src/components/global/Project/Project.jsx
@@ -1,32 +1,84 @@
 /* External dependencies */
-import React from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames/bind';
 import { Link } from 'react-router-dom';
+import { AiFillHeart, AiOutlineHeart } from 'react-icons/ai';
 
 /* Internal dependencies */
+import { createJjimAPI, removeJjimAPI } from 'api/jjimAPI';
+
 import styles from './Project.module.scss';
 const cx = classNames.bind(styles);
 
-function Project({ data, type, jjim }) {
-  let id = jjim ? data.project_id : data.id;
+function Project({ data, type, jjimType }) {
+  const [jjim, setJjim] = useState(true);
+  const projectId = jjimType ? data.project_id : data.id;
+  const jjimId = jjimType ? data.jjim_id : '';
+
+  const createJjim = () => {
+    setJjim(true);
+    createJjimAPI({ projectId });
+  };
+
+  const removeJim = () => {
+    setJjim(false);
+    removeJjimAPI({ jjimId });
+  };
+
+  if (!jjimType) {
+    return (
+      <Link to={`/project/${projectId}`}>
+        <div
+          className={cx('project')}
+          style={{
+            backgroundImage: `url("${data.image}")`,
+          }}
+        >
+          <div className={cx('project-info')}>
+            <div className={cx('project-info-name')}>{data.title}</div>
+            <div className={cx('project-info-price')}>
+              <span className={cx('project-info-price-current')}>
+                {type === 'open'
+                  ? data.open_left_days + '일 뒤 공개'
+                  : data.percent + '% 달성'}
+              </span>
+            </div>
+          </div>
+        </div>
+      </Link>
+    );
+  }
   return (
-    <Link to={`/project/${id}`}>
-      <div
-        className={cx('project')}
-        style={{
-          backgroundImage: `url("${data.image}")`,
-        }}
-      >
+    <div
+      className={cx('project')}
+      style={{
+        backgroundImage: `url("${data.image}")`,
+      }}
+    >
+      {jjim ? (
+        <div className={cx('heart-wrapper')}>
+          <AiFillHeart className={cx('AiFillHeart')} onClick={removeJim} />
+        </div>
+      ) : (
+        <div className={cx('heart-wrapper')}>
+          <AiOutlineHeart
+            className={cx('AiOutlineHeart')}
+            onClick={createJjim}
+          />
+        </div>
+      )}
+
+      <Link to={`/project/${projectId}`}>
         <div className={cx('project-info')}>
           <div className={cx('project-info-name')}>{data.title}</div>
           <div className={cx('project-info-price')}>
             <span className={cx('project-info-price-current')}>
-              {type === 'open' ? data.open_left_days : data.percent}
+              {data.percent + '% 달성'}
             </span>
           </div>
         </div>
-      </div>
-    </Link>
+      </Link>
+    </div>
   );
 }
 

diff --git a/src/components/global/Project/Project.module.scss b/src/components/global/Project/Project.module.scss
@@ -16,6 +16,25 @@
   min-width: 100px;
   max-width: 150px;
 
+  .heart-wrapper {
+    position: relative;
+    top: 0.3rem;
+    left: 0.3rem;
+    background-color: $white;
+    border-radius: 10px;
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+
+  .AiFillHeart,
+  .AiOutlineHeart {
+    position: relative;
+    left: 0.1rem;
+    top: 0.1rem;
+    font-size: 1.2rem;
+    color: $pink;
+  }
+
   &-info {
     position: absolute;
     bottom: 0;

diff --git a/src/pages/DetailPage/DetailPage.js b/src/pages/DetailPage/DetailPage.js
@@ -28,7 +28,7 @@ function DetailPage() {
       setProject(result.data[0]);
     });
     getProjectUserJjimAPI({ projectId }).then(result => {
-      setJjim(result.data.success);
+      setJjim(result.data.jjim_id);
     });
   }, []);
 
@@ -39,11 +39,9 @@ function DetailPage() {
 
   const removeJim = () => {
     setJjim(false);
-    removeJjimAPI({ projectId });
+    removeJjimAPI({ jjimId: jjim });
   };
 
-
-
   return (
     <div className={cx('detail')}>
       <BackButton />

diff --git a/src/pages/MyProfilePage/MyProfilePage.js b/src/pages/MyProfilePage/MyProfilePage.js
@@ -57,7 +57,7 @@ function MyProfilePage() {
             포인트 충전
           </span>
         </div>
-        <div className={cx('content')}>{point.toLocaleString()} 포인트</div>
+        <div className={cx('content')}>{point.toLocaleString()} 원</div>
       </div>
       <ShoppingCart />
     </div>