💄 Design: RetroList 리액트 아이콘으로 변경 (#184)

donga-it-club · Apr 20, 2024 · 8271dda · 8271dda
1 parent b33e330
commit 8271dda
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 57 deletions.
diff --git 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
@@ -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<BookmarkButtonProps> = ({ handleBookmarkButton })
   return (
     <>
       <S.Button onClick={handleBookmark} isBookmarked={isBookmarked}>
-        <S.Icon src={BookmarkIcon} />
+        <S.StarIcon />
         <S.Text>Bookmark</S.Text>
       </S.Button>
     </>

diff --git 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<ContentListProps> = ({ data, viewMode, searchData, s
               <hr />
               <S.InfoBox>
                 <div style={{ display: 'flex', alignItems: 'center' }}>
-                  <S.TeamIcon src={item.teamId ? TeamIcon : PersonalIcon} />
-                  <S.RetroTitle onClick={() => navigate(`/sections?retrospectiveId=${item.id}&teamId=${item.teamId}`)}>
+                  {item.teamId && <MdPeople size={20} />} {!item.teamId && <IoMdPerson size={20} />}
+                  <S.RetroTitle onClick={() => navigate(`/section?retrospectiveId=${item.id}&teamId=${item.teamId}`)}>
                     {item.title}
                   </S.RetroTitle>
                 </div>
-                <div style={{ display: 'flex', alignItems: 'center' }}>
-                  <S.BookmarkIcon
-                    src={item.isBookmarked ? BookmarkIcon_Y : BookmarkIcon_N}
-                    onClick={() => handleBookmark(item.id)}
-                  />
-                  <S.MoreIcon
-                    src={MoreIcon}
-                    // onClick={() => openModalForItem(item.id)}
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                    justifyContent: 'center',
+                    justifyItems: 'center',
+                  }}
+                >
+                  {item.isBookmarked && (
+                    <FaStar onClick={() => handleBookmark(item.id)} style={{ color: '#fcea12' }} size="19" />
+                  )}
+                  {!item.isBookmarked && <CiStar onClick={() => handleBookmark(item.id)} size={20} />}
+                  <HiOutlineDotsHorizontal
+                    style={{ color: '#33363F' }}
+                    size={20}
+                     // onClick={() => openModalForItem(item.id)}
                     onClick={() => {
                       if (item.userId === item.id) {
                         // 수정 권한 없을 때(생성자가 아닐 때 확인하고 고치기)
@@ -116,15 +124,18 @@ const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, s
                     ? `${item.updatedDate} 수정`
                     : item.startDate}
                 </S.RetroDate>
-                <S.ProgressIcon
-                  src={
-                    item.status === 'NOT_STARTED'
-                      ? ProgressBefore
-                      : item.status === 'IN_PROGRESS'
-                        ? ProgressIng
-                        : ProgressDone
-                  }
-                />
+                {item.status === 'NOT_STARTED' && (
+                  <RxCounterClockwiseClock
+                    size={15}
+                    style={{ alignItems: 'start', justifySelf: 'end', color: '#5B5B5B' }}
+                  />
+                )}
+                {item.status === 'IN_PROGRESS' && (
+                  <RiProgress2Line size={15} style={{ alignItems: 'start', justifySelf: 'end', color: '#57AD5A' }} />
+                )}
+                {item.status === 'COMPLETED' && (
+                  <FaRegCircleCheck size={15} style={{ alignItems: 'start', justifySelf: 'end', color: '#FF1818' }} />
+                )}
                 <Modal onClose={closeModalForItem} isOpen={openModalId === item.id} />
               </S.InfoBox>
             </S.Box>
@@ -156,26 +167,35 @@ const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, s
                     {item.updatedDate && item.updatedDate !== item.startDate ? `${item.updatedDate}` : item.startDate}
                   </S.ListTimeBox>
                   <S.ListBookmarkBox>
-                    <S.Icon
-                      src={item.isBookmarked ? BookmarkIcon_Y : BookmarkIcon_N}
-                      onClick={() => handleBookmark(item.id)}
-                    />
-                    {/* 북마크 patch */}
+                    {item.isBookmarked && (
+                      <FaStar onClick={() => handleBookmark(item.id)} style={{ color: '#fcea12' }} size="19" />
+                    )}
+                    {!item.isBookmarked && <CiStar onClick={() => handleBookmark(item.id)} size={20} />}
                   </S.ListBookmarkBox>
                   <S.ListProgressBox>
-                    <S.Icon
-                      src={
-                        item.status === 'NOT_STARTED'
-                          ? ProgressBefore
-                          : item.status === 'IN_PROGRESS'
-                            ? ProgressIng
-                            : ProgressDone
-                      }
-                    />
+                    {item.status === 'NOT_STARTED' && (
+                      <FaRegCircleCheck
+                        size={20}
+                        style={{ alignItems: 'start', justifySelf: 'end', color: '#5B5B5B' }}
+                      />
+                    )}
+                    {item.status === 'IN_PROGRESS' && (
+                      <RiProgress2Line
+                        size={20}
+                        style={{ alignItems: 'start', justifySelf: 'end', color: '#57AD5A' }}
+                      />
+                    )}
+                    {item.status === 'COMPLETED' && (
+                      <FaRegCircleCheck
+                        size={20}
+                        style={{ alignItems: 'start', justifySelf: 'end', color: '#FF1818' }}
+                      />
+                    )}
                   </S.ListProgressBox>
                   <S.ListLinkBox>
-                    <S.MoreIconListView
-                      src={MoreIcon}
+                    <HiOutlineDotsHorizontal
+                      style={{ color: '#33363F' }}
+                      size={20}
                       // onClick={() => 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
@@ -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
@@ -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
@@ -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"