💄 Design: RetroList 디자인 수정 (#196)

donga-it-club · Apr 20, 2024 · 8d18af4 · 8d18af4
1 parent 7a51745
commit 8d18af4
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 11 deletions.
diff --git a/src/assets/BookmarkIcon_N.png b/src/assets/BookmarkIcon_N.png
diff --git a/src/assets/BookmarkIcon_Y.png b/src/assets/BookmarkIcon_Y.png
diff --git a/src/assets/Link.png b/src/assets/Link.png
diff --git a/src/assets/TeamIcon.png b/src/assets/TeamIcon.png
diff --git a/src/assets/UserProfile2.png b/src/assets/UserProfile2.png
diff --git a/src/components/RetroList/ContentsList.tsx b/src/components/RetroList/ContentsList.tsx
@@ -1,9 +1,6 @@
 import { useEffect, useState } from 'react';
 import { CgTimelapse } from 'react-icons/cg'; // ing
-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 { RxCounterClockwiseClock } from 'react-icons/rx'; //before
@@ -73,7 +70,14 @@ const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, s
   const convertToLocalTime = (dateString: string | number | Date) => {
     const date = new Date(dateString);
     const localTime = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
-    return localTime.toLocaleString(); // 로컬 타임존으로 변환하여 문자열로 반환
+    const options: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+    };
+    return localTime.toLocaleString(undefined, options); // 로컬 타임존으로 변환하여 문자열로 반환
   };
 
   useEffect(() => {
@@ -124,10 +128,10 @@ const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, s
                   }}
                 >
                   {item.isBookmarked && (
-                    <FaStar onClick={() => handleBookmark(item.id)} style={{ color: '#fcea12' }} size="19" />
+                    <S.StyledFaStar onClick={() => handleBookmark(item.id)} style={{ color: '#fcea12' }} size="19" />
                   )}
-                  {!item.isBookmarked && <CiStar onClick={() => handleBookmark(item.id)} size={20} />}
-                  <HiOutlineDotsHorizontal
+                  {!item.isBookmarked && <S.StyledCiStar onClick={() => handleBookmark(item.id)} size={20} />}
+                  <S.StyledHiOutlineDotsHorizontal
                     style={{ color: '#33363F' }}
                     size={20}
                     // onClick={() => openModalForItem(item.id)}
@@ -190,13 +194,13 @@ const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, s
                   </S.ListTimeBox>
                   <S.ListBookmarkBox>
                     {item.isBookmarked && (
-                      <FaStar onClick={() => handleBookmark(item.id)} style={{ color: '#fcea12' }} size="19" />
+                      <S.StyledFaStar onClick={() => handleBookmark(item.id)} style={{ color: '#fcea12' }} size="19" />
                     )}
-                    {!item.isBookmarked && <CiStar onClick={() => handleBookmark(item.id)} size={20} />}
+                    {!item.isBookmarked && <S.StyledCiStar onClick={() => handleBookmark(item.id)} size={20} />}
                   </S.ListBookmarkBox>
                   <S.ListProgressBox>
                     {item.status === 'NOT_STARTED' && (
-                      <FaRegCircleCheck
+                      <RxCounterClockwiseClock
                         size={20}
                         style={{ alignItems: 'start', justifySelf: 'end', color: '#5B5B5B' }}
                       />
@@ -212,7 +216,7 @@ const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, s
                     )}
                   </S.ListProgressBox>
                   <S.ListLinkBox>
-                    <HiOutlineDotsHorizontal
+                    <S.StyledHiOutlineDotsHorizontal
                       style={{ color: '#33363F' }}
                       size={20}
                       // onClick={() => openModalForItem(item.id)}

diff --git a/src/styles/RetroList/ContentsList.styles.ts b/src/styles/RetroList/ContentsList.styles.ts
@@ -1,3 +1,6 @@
+import { CiStar } from 'react-icons/ci';
+import { FaStar } from 'react-icons/fa';
+import { HiOutlineDotsHorizontal } from 'react-icons/hi';
 import styled from 'styled-components';
 
 export const BoardContainer = styled.div`
@@ -134,3 +137,20 @@ export const Icon = styled.img`
     cursor: pointer;
   }
 `;
+export const StyledCiStar = styled(CiStar)`
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const StyledHiOutlineDotsHorizontal = styled(HiOutlineDotsHorizontal)`
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const StyledFaStar = styled(FaStar)`
+  &:hover {
+    cursor: pointer;
+  }
+`;