From 913a4ed319ffe809629b98cacc3da7456b0a9f51 Mon Sep 17 00:00:00 2001 From: nohgijin Date: Sun, 17 Jan 2021 02:46:26 +0900 Subject: [PATCH] =?UTF-8?q?[#46]=20feat=20-=20=EB=A7=81=ED=81=AC=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0,=20=EC=B0=9C=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=B0=9C=20=EB=90=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/jjimAPI.js | 4 +- .../HomePage/Container/Container.module.scss | 1 + .../CartPage/CartGoods/CartGoods.jsx | 33 ++++---- .../CartPage/CartGoods/CartGoods.module.scss | 40 +++++++--- .../MyDetailPage/JjimList/JjimList.jsx | 2 +- src/components/Mypage/Profile/Profile.js | 3 +- .../Mypage/Profile/Profile.module.scss | 1 + src/components/global/Project/Project.jsx | 78 +++++++++++++++---- .../global/Project/Project.module.scss | 19 +++++ src/pages/DetailPage/DetailPage.js | 6 +- src/pages/MyProfilePage/MyProfilePage.js | 2 +- 11 files changed, 142 insertions(+), 47 deletions(-) diff --git a/src/api/jjimAPI.js b/src/api/jjimAPI.js index 1edf655..6c19a09 100644 --- 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 index 5287a3d..dc8ca96 100644 --- 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 index 801d209..4693002 100644 --- 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 }) { { setPoint( @@ -50,22 +51,24 @@ function CartGoods({ data }) { ); }} /> -
{data.money}
-
-
- +
{data.money.toLocaleString()}원
+
+
+
+ +
+ + 수정 +
- - 수정 - -
-
-
- +
+
+ +
+ + 삭제 +
- - 삭제 -
diff --git a/src/components/MyDetailPage/CartPage/CartGoods/CartGoods.module.scss b/src/components/MyDetailPage/CartPage/CartGoods/CartGoods.module.scss index fbcd837..88173d8 100644 --- 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 index 940cbc0..5d0903a 100644 --- a/src/components/MyDetailPage/JjimList/JjimList.jsx +++ b/src/components/MyDetailPage/JjimList/JjimList.jsx @@ -11,7 +11,7 @@ function JjimList({ jjimList }) { return (
{jjimList.map(jjim => ( - + ))}
); diff --git a/src/components/Mypage/Profile/Profile.js b/src/components/Mypage/Profile/Profile.js index c0e4584..7aaa67c 100644 --- a/src/components/Mypage/Profile/Profile.js +++ b/src/components/Mypage/Profile/Profile.js @@ -25,10 +25,9 @@ function Profile() { alt="profile" />
-
좋은 하루 되세요,
Noh Gi Jin님
- 잔여 포인트: {point.toLocaleString()} P + 잔여 포인트: {point.toLocaleString()} 원
); diff --git a/src/components/Mypage/Profile/Profile.module.scss b/src/components/Mypage/Profile/Profile.module.scss index e7582c6..07b472d 100644 --- 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 index 9cdd8e7..3ff6d39 100644 --- 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 ( + +
+
+
{data.title}
+
+ + {type === 'open' + ? data.open_left_days + '일 뒤 공개' + : data.percent + '% 달성'} + +
+
+
+ + ); + } return ( - -
+
+ {jjim ? ( +
+ +
+ ) : ( +
+ +
+ )} + +
{data.title}
- {type === 'open' ? data.open_left_days : data.percent} + {data.percent + '% 달성'}
-
- + +
); } diff --git a/src/components/global/Project/Project.module.scss b/src/components/global/Project/Project.module.scss index da84dca..cc74666 100644 --- 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 index 288a2e7..af5310f 100644 --- 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 (
diff --git a/src/pages/MyProfilePage/MyProfilePage.js b/src/pages/MyProfilePage/MyProfilePage.js index d761ed5..43e4cf5 100644 --- a/src/pages/MyProfilePage/MyProfilePage.js +++ b/src/pages/MyProfilePage/MyProfilePage.js @@ -57,7 +57,7 @@ function MyProfilePage() { 포인트 충전
-
{point.toLocaleString()} 포인트
+
{point.toLocaleString()} 원