From 8271dda00596abc00f577b1180651a791e684bdc Mon Sep 17 00:00:00 2001 From: Yena Kim <76564438+yeneua@users.noreply.github.com> Date: Sat, 20 Apr 2024 14:29:20 +0900 Subject: [PATCH] =?UTF-8?q?:lipstick:=20Design:=20RetroList=20=EB=A6=AC?= =?UTF-8?q?=EC=95=A1=ED=8A=B8=20=EC=95=84=EC=9D=B4=EC=BD=98=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20(#184)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/components/RetroList/BookmarkButton.tsx | 3 +- src/components/RetroList/ContentsList.tsx | 106 +++++++++++------- src/styles/RetroList/BookmarkButton.styles.ts | 9 ++ src/styles/RetroList/ContentsList.styles.ts | 7 -- yarn.lock | 8 +- 6 files changed, 78 insertions(+), 57 deletions(-) diff --git a/package.json b/package.json index 91c887b..ea09032 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "react-datepicker": "^6.4.0", "react-dom": "^18.2.0", "react-fullpage": "^0.1.19", - "react-icons": "^5.0.1", + "react-icons": "^5.1.0", "react-router-dom": "^6.22.3", "react-select": "^5.8.0", "recoil": "^0.7.7", diff --git a/src/components/RetroList/BookmarkButton.tsx b/src/components/RetroList/BookmarkButton.tsx index e7c1b49..a1bca6f 100644 --- a/src/components/RetroList/BookmarkButton.tsx +++ b/src/components/RetroList/BookmarkButton.tsx @@ -1,5 +1,4 @@ import { useState } from 'react'; -import BookmarkIcon from '@/assets/BookmarkIcon_Y.png'; import * as S from '@/styles/RetroList/BookmarkButton.styles'; interface BookmarkButtonProps { @@ -17,7 +16,7 @@ const BookmarkButton: React.FC = ({ handleBookmarkButton }) return ( <> - + Bookmark diff --git a/src/components/RetroList/ContentsList.tsx b/src/components/RetroList/ContentsList.tsx index d0d2439..a9725d5 100644 --- a/src/components/RetroList/ContentsList.tsx +++ b/src/components/RetroList/ContentsList.tsx @@ -1,16 +1,16 @@ import { useState } from 'react'; +import { CiStar } from 'react-icons/ci'; +import { FaStar } from 'react-icons/fa'; +import { FaRegCircleCheck } from 'react-icons/fa6'; // done +import { HiOutlineDotsHorizontal } from 'react-icons/hi'; +import { IoMdPerson } from 'react-icons/io'; +import { MdPeople } from 'react-icons/md'; +import { RiProgress2Line } from 'react-icons/ri'; // ing +import { RxCounterClockwiseClock } from 'react-icons/rx'; //before import { useNavigate } from 'react-router-dom'; import { useRecoilState } from 'recoil'; import { PatchRetrospectiveRequest } from '@/api/@types/Retrospectives'; import { patchRetrospective } from '@/api/retrospectivesApi/patchRetrospective'; -import BookmarkIcon_N from '@/assets/BookmarkIcon_N.png'; -import BookmarkIcon_Y from '@/assets/BookmarkIcon_Y.png'; -import MoreIcon from '@/assets/MoreIcon.png'; -import PersonalIcon from '@/assets/PersonalIcon.png'; -import ProgressBefore from '@/assets/Progress_Before.png'; -import ProgressDone from '@/assets/Progress_Done.png'; -import ProgressIng from '@/assets/Progress_Ing.png'; -import TeamIcon from '@/assets/TeamIcon.png'; import Thumbnail from '@/assets/Thumbnail.png'; import Modal from '@/components/RetroList/Modal'; import UserNickname from '@/components/user/UserNickname'; @@ -83,19 +83,27 @@ const ContentList: React.FC = ({ data, viewMode, searchData, s
- - navigate(`/sections?retrospectiveId=${item.id}&teamId=${item.teamId}`)}> + {item.teamId && } {!item.teamId && } + navigate(`/section?retrospectiveId=${item.id}&teamId=${item.teamId}`)}> {item.title}
-
- handleBookmark(item.id)} - /> - openModalForItem(item.id)} +
+ {item.isBookmarked && ( + handleBookmark(item.id)} style={{ color: '#fcea12' }} size="19" /> + )} + {!item.isBookmarked && handleBookmark(item.id)} size={20} />} + openModalForItem(item.id)} onClick={() => { if (item.userId === item.id) { // 수정 권한 없을 때(생성자가 아닐 때 확인하고 고치기) @@ -116,15 +124,18 @@ const ContentList: React.FC = ({ data, viewMode, searchData, s ? `${item.updatedDate} 수정` : item.startDate} - + {item.status === 'NOT_STARTED' && ( + + )} + {item.status === 'IN_PROGRESS' && ( + + )} + {item.status === 'COMPLETED' && ( + + )} @@ -156,26 +167,35 @@ const ContentList: React.FC = ({ data, viewMode, searchData, s {item.updatedDate && item.updatedDate !== item.startDate ? `${item.updatedDate}` : item.startDate} - handleBookmark(item.id)} - /> - {/* 북마크 patch */} + {item.isBookmarked && ( + handleBookmark(item.id)} style={{ color: '#fcea12' }} size="19" /> + )} + {!item.isBookmarked && handleBookmark(item.id)} size={20} />} - + {item.status === 'NOT_STARTED' && ( + + )} + {item.status === 'IN_PROGRESS' && ( + + )} + {item.status === 'COMPLETED' && ( + + )} - openModalForItem(item.id)} onClick={() => { if (item.userId === item.id) { diff --git a/src/styles/RetroList/BookmarkButton.styles.ts b/src/styles/RetroList/BookmarkButton.styles.ts index 543461a..0be6b84 100644 --- a/src/styles/RetroList/BookmarkButton.styles.ts +++ b/src/styles/RetroList/BookmarkButton.styles.ts @@ -1,3 +1,4 @@ +import { FaStar } from 'react-icons/fa'; import styled from 'styled-components'; interface ButtonProps { @@ -27,3 +28,11 @@ export const Text = styled.text` justify-self: start; align-self: center; `; + +export const StarIcon = styled(FaStar)` + width: 15px; + height: 15px; + justify-self: center; + align-self: center; + color: #fcea12; +`; diff --git a/src/styles/RetroList/ContentsList.styles.ts b/src/styles/RetroList/ContentsList.styles.ts index 7207c27..2c59a5b 100644 --- a/src/styles/RetroList/ContentsList.styles.ts +++ b/src/styles/RetroList/ContentsList.styles.ts @@ -85,13 +85,6 @@ export const BookmarkIcon = styled.img` } `; -export const ProgressIcon = styled.img` - align-self: start; - justify-self: end; - width: 15px; - height: 15px; -`; - export const ListContainer = styled.div` padding-top: 10px; padding-bottom: 20px; diff --git a/yarn.lock b/yarn.lock index c66fe10..10c65c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9565,10 +9565,10 @@ react-hook-form@^7.43.5: resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.2.tgz" integrity sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA== -react-icons@^5.0.1: - version "5.0.1" - resolved "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz" - integrity sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw== +react-icons@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.1.0.tgz#9e7533cc256571a610c2a1ec8a7a143fb1222943" + integrity sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ== react-is@^16.13.1, react-is@^16.7.0: version "16.13.1"