Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE][Design] RetroList 리액트 아이콘으로 변경 #184

Merged
merged 2 commits into from
Apr 20, 2024
Merged

[FE][Design] RetroList 리액트 아이콘으로 변경 #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cdada76
:lipstick: Design: RetroList 리액트 아이콘으로 변경
yeneua Apr 19, 2024
8c3b00d
Merge branch 'develop' into feature/#179
yeneua Apr 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 1 addition & 2 deletions src/components/RetroList/BookmarkButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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>
</>
Expand Down
106 changes: 63 additions & 43 deletions src/components/RetroList/ContentsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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) {
// 수정 권한 없을 때(생성자가 아닐 때 확인하고 고치기)
Expand All @@ -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>
Expand Down Expand Up @@ -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) {
Expand Down
9 changes: 9 additions & 0 deletions src/styles/RetroList/BookmarkButton.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { FaStar } from 'react-icons/fa';
import styled from 'styled-components';

interface ButtonProps {
Expand Down Expand Up @@ -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;
`;
7 changes: 0 additions & 7 deletions src/styles/RetroList/ContentsList.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading