From f10d19a02987da74b3bf348f3d924294deeb22c0 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Thu, 11 Jan 2024 17:56:17 +0900 Subject: [PATCH 01/26] =?UTF-8?q?feat:=20Mypage=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/constants/.gitkeep | 0 src/Mypage/hooks/.gitkeep | 0 src/Router.tsx | 2 ++ 3 files changed, 2 insertions(+) create mode 100644 src/Mypage/constants/.gitkeep create mode 100644 src/Mypage/hooks/.gitkeep diff --git a/src/Mypage/constants/.gitkeep b/src/Mypage/constants/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/src/Mypage/hooks/.gitkeep b/src/Mypage/hooks/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/src/Router.tsx b/src/Router.tsx index 28976413..1bf09be1 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -3,6 +3,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; import DetailPage from './Detail/page/DetailPage'; import HomePage from './Home/page/HomePage'; import Login from './Login/page'; +import Mypage from './Mypage/page'; import StickerPack from './StickerPack/page/StickerPack'; function Router() { @@ -13,6 +14,7 @@ function Router() { }> } /> } /> + } /> ); From 7f7fcb7170f66224a38a7a74e09b5f3ec50ffdd6 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Fri, 12 Jan 2024 17:26:53 +0900 Subject: [PATCH 02/26] =?UTF-8?q?feat:=20mypage=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20import?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/page/Mypage.style.ts | 24 ++++++++++++++++++++++++ src/Mypage/page/index.tsx | 20 ++++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 src/Mypage/page/Mypage.style.ts create mode 100644 src/Mypage/page/index.tsx diff --git a/src/Mypage/page/Mypage.style.ts b/src/Mypage/page/Mypage.style.ts new file mode 100644 index 00000000..49423177 --- /dev/null +++ b/src/Mypage/page/Mypage.style.ts @@ -0,0 +1,24 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.article` + display: flex; + align-items: center; + flex-direction: column; + + width: 100vw; + height: 100dvh; + + background-color: ${({ theme }) => theme.colors.background}; +`; + +export const InfoWrapper = styled.div` + width: 100%; + padding: 0 0.95rem 1rem; + margin-top: 5.4rem; +`; + +export const ListWrapper = styled.div` + width: 100%; + height: calc(100dvh - 14.6rem); + padding: 0 1rem 1rem; +`; diff --git a/src/Mypage/page/index.tsx b/src/Mypage/page/index.tsx new file mode 100644 index 00000000..a5808998 --- /dev/null +++ b/src/Mypage/page/index.tsx @@ -0,0 +1,20 @@ +import Header from '../../components/common/Header'; +import LecueList from '../components/LecueList'; +import Nickname from '../components/Nickname'; +import * as S from './Mypage.style'; + +function Mypage() { + return ( + +
+ + + + + + + + ); +} + +export default Mypage; From 03b491645cb097770d252f46f6b6e8159d97a281 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Fri, 12 Jan 2024 17:27:44 +0900 Subject: [PATCH 03/26] =?UTF-8?q?feat:=20LecueList=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/LecueList/LecueList.style.ts | 40 +++++++++++++++++++ src/Mypage/components/LecueList/index.tsx | 36 +++++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 src/Mypage/components/LecueList/LecueList.style.ts create mode 100644 src/Mypage/components/LecueList/index.tsx diff --git a/src/Mypage/components/LecueList/LecueList.style.ts b/src/Mypage/components/LecueList/LecueList.style.ts new file mode 100644 index 00000000..c77fa1f9 --- /dev/null +++ b/src/Mypage/components/LecueList/LecueList.style.ts @@ -0,0 +1,40 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.article` + display: flex; + flex-direction: column; + + width: 100%; +`; + +export const ButtonWrapper = styled.section` + display: flex; + + width: 100%; +`; + +export const Button = styled.button<{ clickedBtn?: boolean }>` + width: calc(100vw - 4rem); + height: 3.7rem; + padding: 0.7rem 1.15rem; + + border-radius: 0.4rem 0.4rem 0 0; + background-color: ${({ theme, clickedBtn }) => + clickedBtn ? theme.colors.black : 'transparent'}; + color: ${({ theme, clickedBtn }) => + clickedBtn ? theme.colors.background : theme.colors.MG}; + ${({ theme }) => theme.fonts.Title2_M_16} + + text-align: center; + vertical-align: center; +`; + +export const ListWrapper = styled.section<{ clickedBtn: boolean }>` + width: 100%; + height: calc(100dvh - 19.3rem); + padding: 1rem; + + border-radius: ${({ clickedBtn }) => (clickedBtn ? 0 : 0.4)}rem + ${({ clickedBtn }) => (clickedBtn ? 0.4 : 0)}rem 0.4rem 0.4rem; + background-color: ${({ theme }) => theme.colors.black}; +`; diff --git a/src/Mypage/components/LecueList/index.tsx b/src/Mypage/components/LecueList/index.tsx new file mode 100644 index 00000000..6a13760b --- /dev/null +++ b/src/Mypage/components/LecueList/index.tsx @@ -0,0 +1,36 @@ +import { useState } from 'react'; + +import * as S from './LecueList.style'; + +function LecueList() { + const [clickedBtn, setClickedBtn] = useState(true); + + const handleClickBtn = (prev: boolean) => { + setClickedBtn(!prev); + }; + + return ( + + + handleClickBtn(clickedBtn)} + > + 레큐노트 (+999개) + + handleClickBtn(clickedBtn)} + > + 레큐북 (0개) + + + + + + ); +} + +export default LecueList; From b1b87cb4ba68a839e5845cd3f2c65261073368d9 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Fri, 12 Jan 2024 17:28:10 +0900 Subject: [PATCH 04/26] =?UTF-8?q?feat:=20Nickname=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/Nickname/Nickname.style.ts | 14 ++++++++++++++ src/Mypage/components/Nickname/index.tsx | 13 +++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 src/Mypage/components/Nickname/Nickname.style.ts create mode 100644 src/Mypage/components/Nickname/index.tsx diff --git a/src/Mypage/components/Nickname/Nickname.style.ts b/src/Mypage/components/Nickname/Nickname.style.ts new file mode 100644 index 00000000..7d7d7823 --- /dev/null +++ b/src/Mypage/components/Nickname/Nickname.style.ts @@ -0,0 +1,14 @@ +import styled from '@emotion/styled'; + +export const NicknameWrapper = styled.section` + display: flex; + gap: 0.5rem; + align-items: center; + + width: 100%; + padding: 2.7rem 0.6rem; +`; + +export const Nickname = styled.p` + ${({ theme }) => theme.fonts.Head1_B_20}; +`; diff --git a/src/Mypage/components/Nickname/index.tsx b/src/Mypage/components/Nickname/index.tsx new file mode 100644 index 00000000..e151eee8 --- /dev/null +++ b/src/Mypage/components/Nickname/index.tsx @@ -0,0 +1,13 @@ +import { ImgStarPosit } from '../../../assets'; +import * as S from './Nickname.style'; + +function Nickname() { + return ( + + + 도리를 찾아서 님 + + ); +} + +export default Nickname; From 86c4c22d3d4f733ed2420aa0f609733efd4500c5 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Sat, 13 Jan 2024 04:42:38 +0900 Subject: [PATCH 05/26] =?UTF-8?q?chore:=20=EC=9E=84=EC=8B=9C=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/constants/DATA.ts | 232 +++++++++++++++++++++++++++++++++++ 1 file changed, 232 insertions(+) create mode 100644 src/Mypage/constants/DATA.ts diff --git a/src/Mypage/constants/DATA.ts b/src/Mypage/constants/DATA.ts new file mode 100644 index 00000000..29aa3002 --- /dev/null +++ b/src/Mypage/constants/DATA.ts @@ -0,0 +1,232 @@ +export const BOOK_LIST = [ + { + bookId: 1, + bookUuid: 'ee4f66f9-9cf4-4b28-90f4-f71d0ecba021', + favoriteName: 'Lecue', + title: '레큐의 탄생을 축하해!', + bookDate: '2024.01.12', + bookBackgroundColor: 1, + noteNum: 28760, + }, + { + bookId: 2, + bookUuid: 'ee4f66f9-9cf4-4b28-90f4-f71d0ecba022', + favoriteName: '비니', + title: '비니 귀여운거 축하해', + bookDate: '2024.01.12', + bookBackgroundColor: 1, + noteNum: 29983, + }, + { + bookId: 3, + bookUuid: 'ee4f66f9-9cf4-4b28-90f4-f71d0ecba023', + favoriteName: '쩡우', + title: '큐비 천재 쩡우 그냥 축하해', + bookDate: '2024.01.12', + bookBackgroundColor: 1, + noteNum: 18293, + }, + { + bookId: 4, + bookUuid: 'ee4f66f9-9cf4-4b28-90f4-f71d0ecba024', + favoriteName: '아루밍', + title: '세계 최고 리드 아루밍 사랑해', + bookDate: '2024.01.12', + bookBackgroundColor: 1, + noteNum: 9987, + }, + { + bookId: 5, + bookUuid: 'ee4f66f9-9cf4-4b28-90f4-f71d0ecba025', + favoriteName: '도리', + title: '내일 집 가는거 축하해', + bookDate: '2024.01.12', + bookBackgroundColor: 1, + noteNum: 1022, + }, + { + bookId: 6, + bookUuid: 'ee4f66f9-9cf4-4b28-90f4-f71d0ecba026', + favoriteName: '큐비', + title: '세계최고 큐비 짱짱ㅋ', + bookDate: '2024.01.12', + bookBackgroundColor: 1, + noteNum: 999999, + }, + { + bookId: 7, + bookUuid: 'ee4f66f9-9cf4-4b28-90f4-f71d0ecba027', + favoriteName: '레큐', + title: '역시 레큐가 최고지ㅋ', + bookDate: '2024.01.12', + bookBackgroundColor: 1, + noteNum: 100, + }, +]; +export const NOTE_LIST = [ + { + noteId: 0, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 0, + noteBackgroundColor: 0, + noteBackgroundImage: '', + }, + { + noteId: 1, + favoriteName: 'Lecue', + title: '어쩌면 큐기도 짱 ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐기들 사랑해 큐기들 최고 큐기들 완전 귀여움 큐기들밖에 없다 내 사랑 큐기들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 0, + noteBackgroundColor: 1, + noteBackgroundImage: '', + }, + { + noteId: 2, + favoriteName: 'Lecue', + title: '어쩌면 큐디도 짱 ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐디들 사랑해 큐디들 최고 큐디들 완전 귀여움 큐디들밖에 없다 내 사랑 큐디들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 0, + noteBackgroundColor: 2, + noteBackgroundImage: '', + }, + { + noteId: 3, + favoriteName: 'Lecue', + title: '큐버도 짱 해드려요ㅎ', + noteDate: '2024.01.12', + content: + '큐버들 사랑해 큐버들 최고 큐버들 완전 귀여움 큐버들밖에 없다 내 사랑 큐버들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 1, + noteBackgroundColor: 3, + noteBackgroundImage: '', + }, + { + noteId: 4, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 0, + noteBackgroundColor: 4, + noteBackgroundImage: '', + }, + { + noteId: 5, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 0, + noteBackgroundColor: 5, + noteBackgroundImage: '', + }, + { + noteId: 6, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 1, + noteBackgroundColor: 6, + noteBackgroundImage: '', + }, + { + noteId: 7, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 0, + noteBackgroundColor: 7, + noteBackgroundImage: '', + }, + { + noteId: 8, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 0, + noteBackgroundColor: 8, + noteBackgroundImage: '', + }, + { + noteId: 9, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 1, + noteBackgroundColor: 9, + noteBackgroundImage: '', + }, + { + noteId: 10, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 0, + noteBackgroundColor: 10, + noteBackgroundImage: '', + }, + { + noteId: 11, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 0, + noteBackgroundColor: 11, + noteBackgroundImage: '', + }, + { + noteId: 12, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 1, + noteBackgroundColor: 0, + noteBackgroundImage: '', + }, + { + noteId: 13, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 0, + noteBackgroundColor: 1, + noteBackgroundImage: '', + }, + { + noteId: 14, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 1, + noteBackgroundColor: 2, + noteBackgroundImage: '', + }, +]; From 24b3149e5ac2991fc5a86c51ee31a782316cef8b Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Sat, 13 Jan 2024 04:43:13 +0900 Subject: [PATCH 06/26] =?UTF-8?q?feat:=20LecueBook=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/LecueBook/LecueBook.style.ts | 62 +++++++++++++++++++ src/Mypage/components/LecueBook/index.tsx | 35 +++++++++++ src/Mypage/constants/.gitkeep | 0 src/assets/icon/ic_waste.svg | 7 +++ src/assets/index.ts | 2 + 5 files changed, 106 insertions(+) create mode 100644 src/Mypage/components/LecueBook/LecueBook.style.ts create mode 100644 src/Mypage/components/LecueBook/index.tsx delete mode 100644 src/Mypage/constants/.gitkeep create mode 100644 src/assets/icon/ic_waste.svg diff --git a/src/Mypage/components/LecueBook/LecueBook.style.ts b/src/Mypage/components/LecueBook/LecueBook.style.ts new file mode 100644 index 00000000..9b95df66 --- /dev/null +++ b/src/Mypage/components/LecueBook/LecueBook.style.ts @@ -0,0 +1,62 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.article` + display: flex; + gap: 0.8rem; + flex-direction: column; + + width: 100%; + height: 11.4rem; + padding: 1.2rem 1.1rem 0.9rem 1.9rem; + + border-radius: 0.4rem; + background-color: ${({ theme }) => theme.colors.background}; +`; + +export const Header = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + + width: 100%; +`; + +export const Name = styled.p` + ${({ theme }) => theme.fonts.Head2_SB_18}; +`; + +export const TrashBtn = styled.button` + width: 3.2rem; + height: 3.2rem; +`; + +export const Title = styled.p` + ${({ theme }) => theme.fonts.Title1_SB_16}; +`; + +export const Footer = styled.div` + display: flex; + justify-content: space-between; + align-items: baseline; + + width: 100%; +`; + +export const Date = styled.p` + ${({ theme }) => theme.fonts.E_Caption_R_12}; + color: ${({ theme }) => theme.colors.DG}; +`; + +export const Count = styled.p` + display: flex; + justify-content: center; + align-items: center; + + height: 3.1rem; + padding: 0.6516rem 1.4661rem; + + border-radius: 5.7rem; + ${({ theme }) => theme.fonts.E_Caption_R_12}; + background-color: ${({ theme }) => theme.colors.BG}; + color: ${({ theme }) => theme.colors.white}; +`; diff --git a/src/Mypage/components/LecueBook/index.tsx b/src/Mypage/components/LecueBook/index.tsx new file mode 100644 index 00000000..4e3aa2d5 --- /dev/null +++ b/src/Mypage/components/LecueBook/index.tsx @@ -0,0 +1,35 @@ +import { IcWaste } from '../../../assets'; +import * as S from './LecueBook.style'; +function LecueBook() { + return ( + + + {/*

{favoriteName}

*/} + Lecue + + + + + {/*

{title}

*/} + 레큐의 탄생을 축하해! + + {/*

{bookDate}

*/} + 2024.01.12 + {/*

{noteNum}

*/} + 28760개 + + + ); +} + +export default LecueBook; + +// { +// bookId: 1, +// bookUuid: 'ee4f66f9-9cf4-4b28-90f4-f71d0ecba021', +// favoriteName: 'Lecue', +// title: '레큐의 탄생을 축하해!', +// bookDate: '2024.01.12', +// bookBackgroundColor: 1, +// noteNum: 28760, +// }, diff --git a/src/Mypage/constants/.gitkeep b/src/Mypage/constants/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/assets/icon/ic_waste.svg b/src/assets/icon/ic_waste.svg new file mode 100644 index 00000000..4db6e24d --- /dev/null +++ b/src/assets/icon/ic_waste.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/index.ts b/src/assets/index.ts index 62bd6c4f..25367fdf 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -13,6 +13,7 @@ import IcDate from './icon/ic_date.svg?react'; import IcHome from './icon/ic_home.svg?react'; import IcNotice from './icon/ic_notice.svg?react'; import IcSharing from './icon/ic_sharing.svg?react'; +import IcWaste from './icon/ic_waste.svg?react'; import ImgBook from './img/img_book.svg?react'; import ImgKakao01 from './img/img_kakao_01.svg?react'; import ImgKakao02 from './img/img_kakao_02.svg?react'; @@ -42,6 +43,7 @@ export { IcHome, IcNotice, IcSharing, + IcWaste, ImgBook, ImgKakao01, ImgKakao02, From caea7c6321ecb7ab601f1676778742a0f5baaaf4 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Sat, 13 Jan 2024 23:59:27 +0900 Subject: [PATCH 07/26] =?UTF-8?q?feat:=20Mypage=20type=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/types/myPageType.ts | 37 ++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/Mypage/types/myPageType.ts diff --git a/src/Mypage/types/myPageType.ts b/src/Mypage/types/myPageType.ts new file mode 100644 index 00000000..344e1434 --- /dev/null +++ b/src/Mypage/types/myPageType.ts @@ -0,0 +1,37 @@ +export interface LecueBookProps { + key: number; + favoriteName: string; + title: string; + bookDate: string; + noteNum: number; +} + +export interface LecueNoteProps { + key: number; + favoriteName: string; + title: string; + noteDate: string; + content: string; + noteTextColor?: number; + noteBackgroundColor?: number; + noteBackgroundImage?: string; +} + +export interface LecueBookType { + bookId: number; + favoriteName: string; + title: string; + bookDate: string; + noteNum: number; +} + +export interface LecueNoteType { + noteId: number; + favoriteName: string; + title: string; + noteDate: string; + content: string; + noteTextColor?: number; + noteBackgroundColor?: number; + noteBackgroundImage?: string; +} From 70762a2561091ce7c0389a416366727ee577c51d Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Sat, 13 Jan 2024 23:59:44 +0900 Subject: [PATCH 08/26] =?UTF-8?q?feat:=20LecueNote=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/LecueNote/LecueNote.style.ts | 46 +++++++++++++++++++ src/Mypage/components/LecueNote/index.tsx | 27 +++++++++++ 2 files changed, 73 insertions(+) create mode 100644 src/Mypage/components/LecueNote/LecueNote.style.ts create mode 100644 src/Mypage/components/LecueNote/index.tsx diff --git a/src/Mypage/components/LecueNote/LecueNote.style.ts b/src/Mypage/components/LecueNote/LecueNote.style.ts new file mode 100644 index 00000000..e06d97da --- /dev/null +++ b/src/Mypage/components/LecueNote/LecueNote.style.ts @@ -0,0 +1,46 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.section` + width: 16.3rem; + height: 16.3rem; + padding: 1.5rem 0.95rem 0.6rem; + + border-radius: 0.4rem; + background-color: ${({ theme }) => theme.colors.white}; +`; + +export const TextWrapper = styled.div` + display: flex; + gap: 0.4rem; + flex-direction: column; +`; +export const Name = styled.p` + ${({ theme }) => theme.fonts.Title2_M_16}; + color: ${({ theme }) => theme.colors.BG}; +`; + +export const Title = styled.p` + ${({ theme }) => theme.fonts.Body4_SB_14}; +`; + +export const Content = styled.p` + display: -webkit-box; + word-wrap: break-word; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + + overflow: hidden; + + width: 14.4rem; + + ${({ theme }) => theme.fonts.Caption1_R_12}; + + text-overflow: ellipsis; +`; + +export const Date = styled.p` + width: 100%; + padding-top: calc(100% - 11rem); + + text-align: right; +`; diff --git a/src/Mypage/components/LecueNote/index.tsx b/src/Mypage/components/LecueNote/index.tsx new file mode 100644 index 00000000..de0e248a --- /dev/null +++ b/src/Mypage/components/LecueNote/index.tsx @@ -0,0 +1,27 @@ +import { LecueNoteProps } from '../../types/myPageType'; +import * as S from './LecueNote.style'; + +function LecueNote(props: LecueNoteProps) { + const { + favoriteName, + title, + noteDate, + content, + noteTextColor, + noteBackgroundColor, + noteBackgroundImage, + } = props; + + return ( + + + {favoriteName} + {title} + {content} + + {noteDate} + + ); +} + +export default LecueNote; From c05373872659bab342c960a5ebd2ff7d3c22723a Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Sun, 14 Jan 2024 00:00:00 +0900 Subject: [PATCH 09/26] =?UTF-8?q?feat:=20LecueList=20flex=EC=86=8D?= =?UTF-8?q?=EC=84=B1=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueList/LecueList.style.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Mypage/components/LecueList/LecueList.style.ts b/src/Mypage/components/LecueList/LecueList.style.ts index c77fa1f9..3f4c5662 100644 --- a/src/Mypage/components/LecueList/LecueList.style.ts +++ b/src/Mypage/components/LecueList/LecueList.style.ts @@ -30,9 +30,14 @@ export const Button = styled.button<{ clickedBtn?: boolean }>` `; export const ListWrapper = styled.section<{ clickedBtn: boolean }>` + display: flex; + gap: 0.8rem; + flex-wrap: wrap; + overflow: scroll; + width: 100%; height: calc(100dvh - 19.3rem); - padding: 1rem; + padding: 1.2rem 1rem 1rem; border-radius: ${({ clickedBtn }) => (clickedBtn ? 0 : 0.4)}rem ${({ clickedBtn }) => (clickedBtn ? 0.4 : 0)}rem 0.4rem 0.4rem; From f645e54bcd2556d7f5046063f893cf8834191db0 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Sun, 14 Jan 2024 00:00:48 +0900 Subject: [PATCH 10/26] =?UTF-8?q?feat:=20DATA=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueBook/index.tsx | 28 ++++------- src/Mypage/components/LecueList/index.tsx | 60 ++++++++++++++++++++--- 2 files changed, 61 insertions(+), 27 deletions(-) diff --git a/src/Mypage/components/LecueBook/index.tsx b/src/Mypage/components/LecueBook/index.tsx index 4e3aa2d5..b0235ee8 100644 --- a/src/Mypage/components/LecueBook/index.tsx +++ b/src/Mypage/components/LecueBook/index.tsx @@ -1,35 +1,25 @@ import { IcWaste } from '../../../assets'; +import { LecueBookProps } from '../../types/myPageType'; import * as S from './LecueBook.style'; -function LecueBook() { + +function LecueBook(props: LecueBookProps) { + const { favoriteName, title, bookDate, noteNum } = props; + return ( - {/*

{favoriteName}

*/} - Lecue + {favoriteName} - {/*

{title}

*/} - 레큐의 탄생을 축하해! + {title} - {/*

{bookDate}

*/} - 2024.01.12 - {/*

{noteNum}

*/} - 28760개 + {bookDate} + {noteNum}개 ); } export default LecueBook; - -// { -// bookId: 1, -// bookUuid: 'ee4f66f9-9cf4-4b28-90f4-f71d0ecba021', -// favoriteName: 'Lecue', -// title: '레큐의 탄생을 축하해!', -// bookDate: '2024.01.12', -// bookBackgroundColor: 1, -// noteNum: 28760, -// }, diff --git a/src/Mypage/components/LecueList/index.tsx b/src/Mypage/components/LecueList/index.tsx index 6a13760b..c5f23348 100644 --- a/src/Mypage/components/LecueList/index.tsx +++ b/src/Mypage/components/LecueList/index.tsx @@ -1,34 +1,78 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; +import { BOOK_LIST, NOTE_LIST } from '../../constants/DATA'; +import { LecueBookType, LecueNoteType } from '../../types/myPageType'; +import LecueBook from '../LecueBook'; +import LecueNote from '../LecueNote'; import * as S from './LecueList.style'; function LecueList() { const [clickedBtn, setClickedBtn] = useState(true); + const [noteCount, setNoteCount] = useState(0); + const [bookCount, setBookCount] = useState(0); - const handleClickBtn = (prev: boolean) => { - setClickedBtn(!prev); + const handleClickNoteBtn = () => { + setClickedBtn(true); }; + const handleClickBookBtn = () => { + setClickedBtn(false); + }; + + const numberCount = (NOTE: LecueNoteType[], BOOK: LecueBookType[]) => { + setNoteCount(NOTE.length); + setBookCount(BOOK.length); + }; + + useEffect(() => { + numberCount(NOTE_LIST, BOOK_LIST); + }, []); + return ( + {/* clickedBtn이 true이면 note false이면 book */} handleClickBtn(clickedBtn)} + onClick={handleClickNoteBtn} > - 레큐노트 (+999개) + 레큐노트 ({noteCount}개) handleClickBtn(clickedBtn)} + onClick={handleClickBookBtn} > - 레큐북 (0개) + 레큐북 ({bookCount}개) - + + {clickedBtn + ? NOTE_LIST.map((note) => { + return ( + + ); + }) + : BOOK_LIST.map((book) => { + return ( + + ); + })} + ); } From b395253174508c08977e5150ce4f19b76b865a54 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Sun, 14 Jan 2024 00:09:56 +0900 Subject: [PATCH 11/26] =?UTF-8?q?style:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EB=B3=80=EA=B2=BD(article/section=20->=20?= =?UTF-8?q?li)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueBook/LecueBook.style.ts | 2 +- src/Mypage/components/LecueNote/LecueNote.style.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Mypage/components/LecueBook/LecueBook.style.ts b/src/Mypage/components/LecueBook/LecueBook.style.ts index 9b95df66..b263f945 100644 --- a/src/Mypage/components/LecueBook/LecueBook.style.ts +++ b/src/Mypage/components/LecueBook/LecueBook.style.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -export const Wrapper = styled.article` +export const Wrapper = styled.li` display: flex; gap: 0.8rem; flex-direction: column; diff --git a/src/Mypage/components/LecueNote/LecueNote.style.ts b/src/Mypage/components/LecueNote/LecueNote.style.ts index e06d97da..be10676e 100644 --- a/src/Mypage/components/LecueNote/LecueNote.style.ts +++ b/src/Mypage/components/LecueNote/LecueNote.style.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -export const Wrapper = styled.section` +export const Wrapper = styled.li` width: 16.3rem; height: 16.3rem; padding: 1.5rem 0.95rem 0.6rem; From 7a37a8235fbf0aa4ff17b5959abf992e41c07803 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Sun, 14 Jan 2024 00:19:16 +0900 Subject: [PATCH 12/26] =?UTF-8?q?feat:=20=EB=A0=88=ED=81=90=EB=85=B8?= =?UTF-8?q?=ED=8A=B8=20=EA=B0=9C=EC=88=98=20=EC=9E=90=EB=A6=BF=EC=88=98=20?= =?UTF-8?q?=EA=B3=84=EC=82=B0=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueBook/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/Mypage/components/LecueBook/index.tsx b/src/Mypage/components/LecueBook/index.tsx index b0235ee8..5aeaf359 100644 --- a/src/Mypage/components/LecueBook/index.tsx +++ b/src/Mypage/components/LecueBook/index.tsx @@ -1,10 +1,21 @@ +import { useEffect, useState } from 'react'; + import { IcWaste } from '../../../assets'; import { LecueBookProps } from '../../types/myPageType'; import * as S from './LecueBook.style'; function LecueBook(props: LecueBookProps) { + const [noteCount, setNoteCount] = useState(''); const { favoriteName, title, bookDate, noteNum } = props; + const convertNoteCount = (noteNum: number) => { + setNoteCount(noteNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')); + }; + + useEffect(() => { + convertNoteCount(noteNum); + }); + return ( @@ -16,7 +27,7 @@ function LecueBook(props: LecueBookProps) { {title} {bookDate} - {noteNum}개 + {noteCount}개 ); From 355627803c52a3b9051ff0464daa92866a12a904 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Sun, 14 Jan 2024 02:26:17 +0900 Subject: [PATCH 13/26] =?UTF-8?q?style:=20ListWrapper=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueList/LecueList.style.ts | 3 ++- src/Mypage/components/LecueNote/LecueNote.style.ts | 13 +++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/Mypage/components/LecueList/LecueList.style.ts b/src/Mypage/components/LecueList/LecueList.style.ts index 3f4c5662..a10f80ab 100644 --- a/src/Mypage/components/LecueList/LecueList.style.ts +++ b/src/Mypage/components/LecueList/LecueList.style.ts @@ -31,7 +31,8 @@ export const Button = styled.button<{ clickedBtn?: boolean }>` export const ListWrapper = styled.section<{ clickedBtn: boolean }>` display: flex; - gap: 0.8rem; + gap: ${({ clickedBtn }) => (clickedBtn ? 1 : 0.8)}rem; + justify-content: center; flex-wrap: wrap; overflow: scroll; diff --git a/src/Mypage/components/LecueNote/LecueNote.style.ts b/src/Mypage/components/LecueNote/LecueNote.style.ts index be10676e..1574e1f6 100644 --- a/src/Mypage/components/LecueNote/LecueNote.style.ts +++ b/src/Mypage/components/LecueNote/LecueNote.style.ts @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; export const Wrapper = styled.li` - width: 16.3rem; - height: 16.3rem; + width: 48%; + height: auto; padding: 1.5rem 0.95rem 0.6rem; border-radius: 0.4rem; @@ -13,13 +13,18 @@ export const TextWrapper = styled.div` display: flex; gap: 0.4rem; flex-direction: column; + + width: 100%; `; export const Name = styled.p` + width: 100%; + ${({ theme }) => theme.fonts.Title2_M_16}; - color: ${({ theme }) => theme.colors.BG}; `; export const Title = styled.p` + width: 100%; + ${({ theme }) => theme.fonts.Body4_SB_14}; `; @@ -31,7 +36,7 @@ export const Content = styled.p` overflow: hidden; - width: 14.4rem; + width: 100%; ${({ theme }) => theme.fonts.Caption1_R_12}; From 31209189ae8bc7cca3d3676679a542ea4c2660a7 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Sun, 14 Jan 2024 02:36:17 +0900 Subject: [PATCH 14/26] =?UTF-8?q?style:=20flex=20=EC=A0=95=EB=A0=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueList/LecueList.style.ts | 1 - src/Mypage/components/LecueNote/LecueNote.style.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Mypage/components/LecueList/LecueList.style.ts b/src/Mypage/components/LecueList/LecueList.style.ts index a10f80ab..07a3823b 100644 --- a/src/Mypage/components/LecueList/LecueList.style.ts +++ b/src/Mypage/components/LecueList/LecueList.style.ts @@ -32,7 +32,6 @@ export const Button = styled.button<{ clickedBtn?: boolean }>` export const ListWrapper = styled.section<{ clickedBtn: boolean }>` display: flex; gap: ${({ clickedBtn }) => (clickedBtn ? 1 : 0.8)}rem; - justify-content: center; flex-wrap: wrap; overflow: scroll; diff --git a/src/Mypage/components/LecueNote/LecueNote.style.ts b/src/Mypage/components/LecueNote/LecueNote.style.ts index 1574e1f6..9fadd279 100644 --- a/src/Mypage/components/LecueNote/LecueNote.style.ts +++ b/src/Mypage/components/LecueNote/LecueNote.style.ts @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; export const Wrapper = styled.li` - width: 48%; + width: 48.5%; height: auto; padding: 1.5rem 0.95rem 0.6rem; From f1b17c3c372f8798d1f0eb0dce77abaf7707f27f Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Sun, 14 Jan 2024 14:57:48 +0900 Subject: [PATCH 15/26] =?UTF-8?q?chore:=20props=20line=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueBook/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Mypage/components/LecueBook/index.tsx b/src/Mypage/components/LecueBook/index.tsx index 5aeaf359..91867104 100644 --- a/src/Mypage/components/LecueBook/index.tsx +++ b/src/Mypage/components/LecueBook/index.tsx @@ -5,9 +5,10 @@ import { LecueBookProps } from '../../types/myPageType'; import * as S from './LecueBook.style'; function LecueBook(props: LecueBookProps) { - const [noteCount, setNoteCount] = useState(''); const { favoriteName, title, bookDate, noteNum } = props; + const [noteCount, setNoteCount] = useState(''); + const convertNoteCount = (noteNum: number) => { setNoteCount(noteNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')); }; From 4ee2d0fcaa2c89adf170863494864376fd87eabc Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Sun, 14 Jan 2024 23:26:00 +0900 Subject: [PATCH 16/26] =?UTF-8?q?refactor:=20countState=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueList/index.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Mypage/components/LecueList/index.tsx b/src/Mypage/components/LecueList/index.tsx index c5f23348..b36e6ddf 100644 --- a/src/Mypage/components/LecueList/index.tsx +++ b/src/Mypage/components/LecueList/index.tsx @@ -8,20 +8,20 @@ import * as S from './LecueList.style'; function LecueList() { const [clickedBtn, setClickedBtn] = useState(true); - const [noteCount, setNoteCount] = useState(0); - const [bookCount, setBookCount] = useState(0); + const [counter, setCounter] = useState([0, 0]); const handleClickNoteBtn = () => { + window.scrollTo(0, 0); setClickedBtn(true); }; const handleClickBookBtn = () => { + window.scrollTo(0, 0); setClickedBtn(false); }; const numberCount = (NOTE: LecueNoteType[], BOOK: LecueBookType[]) => { - setNoteCount(NOTE.length); - setBookCount(BOOK.length); + setCounter([NOTE.length, BOOK.length]); }; useEffect(() => { @@ -37,14 +37,14 @@ function LecueList() { clickedBtn={clickedBtn} onClick={handleClickNoteBtn} > - 레큐노트 ({noteCount}개) + 레큐노트 ({counter[0]}개) - 레큐북 ({bookCount}개) + 레큐북 ({counter[1]}개) From f770c2ccc8b76acacc5ad25e552d326f31c51213 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Mon, 15 Jan 2024 00:14:26 +0900 Subject: [PATCH 17/26] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81=20-=20clicked=20State=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/LecueList/LecueList.style.ts | 20 ++++++++++--------- src/Mypage/components/LecueList/index.tsx | 18 ++++++++--------- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/src/Mypage/components/LecueList/LecueList.style.ts b/src/Mypage/components/LecueList/LecueList.style.ts index 07a3823b..e261e19c 100644 --- a/src/Mypage/components/LecueList/LecueList.style.ts +++ b/src/Mypage/components/LecueList/LecueList.style.ts @@ -1,5 +1,7 @@ import styled from '@emotion/styled'; +type ButtonStyle = 'note' | 'book'; + export const Wrapper = styled.article` display: flex; flex-direction: column; @@ -13,25 +15,25 @@ export const ButtonWrapper = styled.section` width: 100%; `; -export const Button = styled.button<{ clickedBtn?: boolean }>` +export const Button = styled.button<{ variant: boolean }>` width: calc(100vw - 4rem); height: 3.7rem; padding: 0.7rem 1.15rem; border-radius: 0.4rem 0.4rem 0 0; - background-color: ${({ theme, clickedBtn }) => - clickedBtn ? theme.colors.black : 'transparent'}; - color: ${({ theme, clickedBtn }) => - clickedBtn ? theme.colors.background : theme.colors.MG}; + background-color: ${({ theme, variant }) => + variant ? theme.colors.black : 'transparent'}; + color: ${({ theme, variant }) => + variant ? theme.colors.background : theme.colors.MG}; ${({ theme }) => theme.fonts.Title2_M_16} text-align: center; vertical-align: center; `; -export const ListWrapper = styled.section<{ clickedBtn: boolean }>` +export const ListWrapper = styled.section<{ variant: string }>` display: flex; - gap: ${({ clickedBtn }) => (clickedBtn ? 1 : 0.8)}rem; + gap: ${({ variant }) => (variant === 'note' ? 1 : 0.8)}rem; flex-wrap: wrap; overflow: scroll; @@ -39,7 +41,7 @@ export const ListWrapper = styled.section<{ clickedBtn: boolean }>` height: calc(100dvh - 19.3rem); padding: 1.2rem 1rem 1rem; - border-radius: ${({ clickedBtn }) => (clickedBtn ? 0 : 0.4)}rem - ${({ clickedBtn }) => (clickedBtn ? 0.4 : 0)}rem 0.4rem 0.4rem; + border-radius: ${({ variant }) => (variant === 'note' ? 0 : 0.4)}rem + ${({ variant }) => (variant === 'note' ? 0.4 : 0)}rem 0.4rem 0.4rem; background-color: ${({ theme }) => theme.colors.black}; `; diff --git a/src/Mypage/components/LecueList/index.tsx b/src/Mypage/components/LecueList/index.tsx index b36e6ddf..2e45255c 100644 --- a/src/Mypage/components/LecueList/index.tsx +++ b/src/Mypage/components/LecueList/index.tsx @@ -7,19 +7,19 @@ import LecueNote from '../LecueNote'; import * as S from './LecueList.style'; function LecueList() { - const [clickedBtn, setClickedBtn] = useState(true); + const [clickedBtn, setClickedBtn] = useState('note'); const [counter, setCounter] = useState([0, 0]); const handleClickNoteBtn = () => { - window.scrollTo(0, 0); - setClickedBtn(true); + setClickedBtn('note'); }; const handleClickBookBtn = () => { - window.scrollTo(0, 0); - setClickedBtn(false); + setClickedBtn('book'); }; + console.log(clickedBtn); + const numberCount = (NOTE: LecueNoteType[], BOOK: LecueBookType[]) => { setCounter([NOTE.length, BOOK.length]); }; @@ -34,22 +34,22 @@ function LecueList() { {/* clickedBtn이 true이면 note false이면 book */} 레큐노트 ({counter[0]}개) 레큐북 ({counter[1]}개) - - {clickedBtn + + {clickedBtn === 'note' ? NOTE_LIST.map((note) => { return ( Date: Mon, 15 Jan 2024 01:20:03 +0900 Subject: [PATCH 18/26] =?UTF-8?q?feat:=20type=20optional=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueList/index.tsx | 5 +++-- src/Mypage/types/myPageType.ts | 12 ++++++------ 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/Mypage/components/LecueList/index.tsx b/src/Mypage/components/LecueList/index.tsx index 2e45255c..904023b3 100644 --- a/src/Mypage/components/LecueList/index.tsx +++ b/src/Mypage/components/LecueList/index.tsx @@ -18,8 +18,6 @@ function LecueList() { setClickedBtn('book'); }; - console.log(clickedBtn); - const numberCount = (NOTE: LecueNoteType[], BOOK: LecueBookType[]) => { setCounter([NOTE.length, BOOK.length]); }; @@ -58,6 +56,9 @@ function LecueList() { title={note.title} noteDate={note.noteDate} content={note.content} + noteTextColor={note.noteTextColor} + noteBackgroundColor={note.noteBackgroundColor} + noteBackgroundImage={note.noteBackgroundImage} /> ); }) diff --git a/src/Mypage/types/myPageType.ts b/src/Mypage/types/myPageType.ts index 344e1434..4368e02b 100644 --- a/src/Mypage/types/myPageType.ts +++ b/src/Mypage/types/myPageType.ts @@ -12,9 +12,9 @@ export interface LecueNoteProps { title: string; noteDate: string; content: string; - noteTextColor?: number; - noteBackgroundColor?: number; - noteBackgroundImage?: string; + noteTextColor: number; + noteBackgroundColor: number; + noteBackgroundImage: string; } export interface LecueBookType { @@ -31,7 +31,7 @@ export interface LecueNoteType { title: string; noteDate: string; content: string; - noteTextColor?: number; - noteBackgroundColor?: number; - noteBackgroundImage?: string; + noteTextColor: number; + noteBackgroundColor: number; + noteBackgroundImage: string; } From a02f11643ed94a5a8fa549b5eb51c94e3cbe78af Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Mon, 15 Jan 2024 01:21:20 +0900 Subject: [PATCH 19/26] =?UTF-8?q?chore:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueList/LecueList.style.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Mypage/components/LecueList/LecueList.style.ts b/src/Mypage/components/LecueList/LecueList.style.ts index e261e19c..603ef4f6 100644 --- a/src/Mypage/components/LecueList/LecueList.style.ts +++ b/src/Mypage/components/LecueList/LecueList.style.ts @@ -1,7 +1,5 @@ import styled from '@emotion/styled'; -type ButtonStyle = 'note' | 'book'; - export const Wrapper = styled.article` display: flex; flex-direction: column; From 9cce65ebf45f92d5c8434db7d8542429d6ccc423 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Mon, 15 Jan 2024 01:28:49 +0900 Subject: [PATCH 20/26] =?UTF-8?q?feat:=20=EB=A0=88=ED=81=90=EB=85=B8?= =?UTF-8?q?=ED=8A=B8=20=EB=B0=B0=EA=B2=BD=EC=83=89,=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=EC=83=89=EC=83=81=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/LecueNote/LecueNote.style.ts | 53 +++++++++++++++++-- src/Mypage/components/LecueNote/index.tsx | 7 ++- src/Mypage/constants/DATA.ts | 15 +++--- 3 files changed, 64 insertions(+), 11 deletions(-) diff --git a/src/Mypage/components/LecueNote/LecueNote.style.ts b/src/Mypage/components/LecueNote/LecueNote.style.ts index 9fadd279..ec079517 100644 --- a/src/Mypage/components/LecueNote/LecueNote.style.ts +++ b/src/Mypage/components/LecueNote/LecueNote.style.ts @@ -1,21 +1,68 @@ import styled from '@emotion/styled'; -export const Wrapper = styled.li` +export const Wrapper = styled.li<{ + noteBackgroundColor: number; + noteBackgroundImage: string; +}>` width: 48.5%; height: auto; padding: 1.5rem 0.95rem 0.6rem; border-radius: 0.4rem; - background-color: ${({ theme }) => theme.colors.white}; + background: ${({ theme, noteBackgroundColor, noteBackgroundImage }) => { + if (noteBackgroundColor === -1) { + return `url(${noteBackgroundImage})`; + } else { + switch (noteBackgroundColor) { + case 0: + return theme.colors.sub_pink; + case 1: + return theme.colors.sub_ivory; + case 2: + return theme.colors.sub_yellow; + case 3: + return theme.colors.sub_green; + case 4: + return theme.colors.sub_blue; + case 5: + return theme.colors.sub_purple; + case 6: + return '#FE394C'; + case 7: + return '#9852F9'; + case 8: + return '#FFD600'; + case 9: + return '#98ED4D'; + case 10: + return '#FF71B3'; + case 11: + return '#CCCCCC'; + default: + return 'transparent'; + } + } + }}; + background-size: cover; `; -export const TextWrapper = styled.div` +export const TextWrapper = styled.div<{ noteTextColor: number }>` display: flex; gap: 0.4rem; flex-direction: column; width: 100%; + + color: ${({ theme, noteTextColor }) => { + switch (noteTextColor) { + case 0: + return theme.colors.white; + case 1: + return theme.colors.BG; + } + }}; `; + export const Name = styled.p` width: 100%; diff --git a/src/Mypage/components/LecueNote/index.tsx b/src/Mypage/components/LecueNote/index.tsx index de0e248a..02f9a36f 100644 --- a/src/Mypage/components/LecueNote/index.tsx +++ b/src/Mypage/components/LecueNote/index.tsx @@ -13,8 +13,11 @@ function LecueNote(props: LecueNoteProps) { } = props; return ( - - + + {favoriteName} {title} {content} diff --git a/src/Mypage/constants/DATA.ts b/src/Mypage/constants/DATA.ts index 29aa3002..4c5efdc4 100644 --- a/src/Mypage/constants/DATA.ts +++ b/src/Mypage/constants/DATA.ts @@ -204,8 +204,9 @@ export const NOTE_LIST = [ content: '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', noteTextColor: 1, - noteBackgroundColor: 0, - noteBackgroundImage: '', + noteBackgroundColor: -1, + noteBackgroundImage: + 'https://lequu-server-bucket.s3.ap-northeast-2.amazonaws.com/notes/background_image/912ac7e2-672a-4f26-b115-b90cda4d7cc3.jpg', }, { noteId: 13, @@ -215,8 +216,9 @@ export const NOTE_LIST = [ content: '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', noteTextColor: 0, - noteBackgroundColor: 1, - noteBackgroundImage: '', + noteBackgroundColor: -1, + noteBackgroundImage: + 'https://lequu-server-bucket.s3.ap-northeast-2.amazonaws.com/notes/background_image/469456ec-5894-4014-8b90-332d453217ba.jpg', }, { noteId: 14, @@ -226,7 +228,8 @@ export const NOTE_LIST = [ content: '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', noteTextColor: 1, - noteBackgroundColor: 2, - noteBackgroundImage: '', + noteBackgroundColor: -1, + noteBackgroundImage: + 'https://lequu-server-bucket.s3.ap-northeast-2.amazonaws.com/notes/background_image/676c2ca3-f868-423f-8000-a0bcb67dc797.jpg', }, ]; From 7c7ab96d15698e406eecf70c512e3f4658a1d12c Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Mon, 15 Jan 2024 02:03:56 +0900 Subject: [PATCH 21/26] =?UTF-8?q?feat:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=84=ED=99=98=20=EC=8B=9C=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=20=EC=83=81=EB=8B=A8=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueList/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Mypage/components/LecueList/index.tsx b/src/Mypage/components/LecueList/index.tsx index 904023b3..3efb35fc 100644 --- a/src/Mypage/components/LecueList/index.tsx +++ b/src/Mypage/components/LecueList/index.tsx @@ -11,10 +11,12 @@ function LecueList() { const [counter, setCounter] = useState([0, 0]); const handleClickNoteBtn = () => { + document.getElementById('list-wrapper')!.scrollTo(0, 0); setClickedBtn('note'); }; const handleClickBookBtn = () => { + document.getElementById('list-wrapper')!.scrollTo(0, 0); setClickedBtn('book'); }; @@ -46,7 +48,7 @@ function LecueList() { - + {clickedBtn === 'note' ? NOTE_LIST.map((note) => { return ( From 1e0f3794af49b620a1d745d2e887cda1985de950 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Mon, 15 Jan 2024 02:35:28 +0900 Subject: [PATCH 22/26] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81=20(=EC=9D=B4=ED=95=AD=EC=97=B0?= =?UTF-8?q?=EC=82=B0=EC=9E=90)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueNote/LecueNote.style.ts | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/Mypage/components/LecueNote/LecueNote.style.ts b/src/Mypage/components/LecueNote/LecueNote.style.ts index ec079517..40207d03 100644 --- a/src/Mypage/components/LecueNote/LecueNote.style.ts +++ b/src/Mypage/components/LecueNote/LecueNote.style.ts @@ -53,14 +53,8 @@ export const TextWrapper = styled.div<{ noteTextColor: number }>` width: 100%; - color: ${({ theme, noteTextColor }) => { - switch (noteTextColor) { - case 0: - return theme.colors.white; - case 1: - return theme.colors.BG; - } - }}; + color: ${({ theme, noteTextColor }) => + noteTextColor === 0 ? theme.colors.white : theme.colors.BG}; `; export const Name = styled.p` From 7016457dbc98f8c7f92214c5dcc07ed62f9f604d Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Mon, 15 Jan 2024 04:25:33 +0900 Subject: [PATCH 23/26] =?UTF-8?q?feat:=20LecueBook=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueBook/index.tsx | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/Mypage/components/LecueBook/index.tsx b/src/Mypage/components/LecueBook/index.tsx index 91867104..4e2a6007 100644 --- a/src/Mypage/components/LecueBook/index.tsx +++ b/src/Mypage/components/LecueBook/index.tsx @@ -5,7 +5,7 @@ import { LecueBookProps } from '../../types/myPageType'; import * as S from './LecueBook.style'; function LecueBook(props: LecueBookProps) { - const { favoriteName, title, bookDate, noteNum } = props; + const { bookId, favoriteName, title, bookDate, noteNum } = props; const [noteCount, setNoteCount] = useState(''); @@ -13,15 +13,31 @@ function LecueBook(props: LecueBookProps) { setNoteCount(noteNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')); }; + const handleClickBook = (bookId: number) => { + alert(`${bookId}가 선택되었습니다.`); + }; + + const handleClickDelete = ( + event: React.MouseEvent, + bookId: number, + ) => { + event.stopPropagation(); + alert(`${bookId}를 삭제하시겠습니까?`); + }; + useEffect(() => { convertNoteCount(noteNum); }); return ( - + { + handleClickBook(bookId); + }} + > {favoriteName} - + handleClickDelete(event, bookId)}> From 9eccc8601450f25431d6f247f7a5b621621bec9a Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Mon, 15 Jan 2024 04:26:59 +0900 Subject: [PATCH 24/26] =?UTF-8?q?feat:=20type=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueList/index.tsx | 2 ++ src/Mypage/types/myPageType.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/Mypage/components/LecueList/index.tsx b/src/Mypage/components/LecueList/index.tsx index 3efb35fc..46a9e630 100644 --- a/src/Mypage/components/LecueList/index.tsx +++ b/src/Mypage/components/LecueList/index.tsx @@ -54,6 +54,7 @@ function LecueList() { return ( Date: Mon, 15 Jan 2024 04:27:55 +0900 Subject: [PATCH 25/26] =?UTF-8?q?feat:=20=EB=A0=88=ED=81=90=EB=85=B8?= =?UTF-8?q?=ED=8A=B8=20=ED=81=B4=EB=A6=AD=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueNote/index.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/Mypage/components/LecueNote/index.tsx b/src/Mypage/components/LecueNote/index.tsx index 02f9a36f..7dc68e39 100644 --- a/src/Mypage/components/LecueNote/index.tsx +++ b/src/Mypage/components/LecueNote/index.tsx @@ -3,6 +3,7 @@ import * as S from './LecueNote.style'; function LecueNote(props: LecueNoteProps) { const { + noteId, favoriteName, title, noteDate, @@ -12,10 +13,17 @@ function LecueNote(props: LecueNoteProps) { noteBackgroundImage, } = props; + const handleClickNote = (noteId: number) => { + alert(`${noteId}가 선택되었습니다.`); + }; + return ( { + handleClickNote(noteId); + }} > {favoriteName} From ce837190d9433934ab800cf43a6226e49a96ecf9 Mon Sep 17 00:00:00 2001 From: Doyun Lee Date: Mon, 15 Jan 2024 04:58:50 +0900 Subject: [PATCH 26/26] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81(=ED=95=A8=EC=88=98=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EB=B3=80=EA=B2=BD)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mypage/components/LecueBook/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Mypage/components/LecueBook/index.tsx b/src/Mypage/components/LecueBook/index.tsx index 4e2a6007..98a1cb61 100644 --- a/src/Mypage/components/LecueBook/index.tsx +++ b/src/Mypage/components/LecueBook/index.tsx @@ -17,7 +17,7 @@ function LecueBook(props: LecueBookProps) { alert(`${bookId}가 선택되었습니다.`); }; - const handleClickDelete = ( + const handleClickTrashBtn = ( event: React.MouseEvent, bookId: number, ) => { @@ -37,7 +37,7 @@ function LecueBook(props: LecueBookProps) { > {favoriteName} - handleClickDelete(event, bookId)}> + handleClickTrashBtn(event, bookId)}>