diff --git a/src/Mypage/components/LecueBook/LecueBook.style.ts b/src/Mypage/components/LecueBook/LecueBook.style.ts new file mode 100644 index 00000000..b263f945 --- /dev/null +++ b/src/Mypage/components/LecueBook/LecueBook.style.ts @@ -0,0 +1,62 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.li` + 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..98a1cb61 --- /dev/null +++ b/src/Mypage/components/LecueBook/index.tsx @@ -0,0 +1,53 @@ +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 { bookId, favoriteName, title, bookDate, noteNum } = props; + + const [noteCount, setNoteCount] = useState(''); + + const convertNoteCount = (noteNum: number) => { + setNoteCount(noteNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')); + }; + + const handleClickBook = (bookId: number) => { + alert(`${bookId}가 선택되었습니다.`); + }; + + const handleClickTrashBtn = ( + event: React.MouseEvent, + bookId: number, + ) => { + event.stopPropagation(); + alert(`${bookId}를 삭제하시겠습니까?`); + }; + + useEffect(() => { + convertNoteCount(noteNum); + }); + + return ( + { + handleClickBook(bookId); + }} + > + + {favoriteName} + handleClickTrashBtn(event, bookId)}> + + + + {title} + + {bookDate} + {noteCount}개 + + + ); +} + +export default LecueBook; diff --git a/src/Mypage/components/LecueList/LecueList.style.ts b/src/Mypage/components/LecueList/LecueList.style.ts new file mode 100644 index 00000000..603ef4f6 --- /dev/null +++ b/src/Mypage/components/LecueList/LecueList.style.ts @@ -0,0 +1,45 @@ +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<{ 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, 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<{ variant: string }>` + display: flex; + gap: ${({ variant }) => (variant === 'note' ? 1 : 0.8)}rem; + flex-wrap: wrap; + overflow: scroll; + + width: 100%; + height: calc(100dvh - 19.3rem); + padding: 1.2rem 1rem 1rem; + + 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 new file mode 100644 index 00000000..46a9e630 --- /dev/null +++ b/src/Mypage/components/LecueList/index.tsx @@ -0,0 +1,85 @@ +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('note'); + 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'); + }; + + const numberCount = (NOTE: LecueNoteType[], BOOK: LecueBookType[]) => { + setCounter([NOTE.length, BOOK.length]); + }; + + useEffect(() => { + numberCount(NOTE_LIST, BOOK_LIST); + }, []); + + return ( + + + {/* clickedBtn이 true이면 note false이면 book */} + + 레큐노트 ({counter[0]}개) + + + 레큐북 ({counter[1]}개) + + + + + {clickedBtn === 'note' + ? NOTE_LIST.map((note) => { + return ( + + ); + }) + : BOOK_LIST.map((book) => { + return ( + + ); + })} + + + ); +} + +export default LecueList; diff --git a/src/Mypage/components/LecueNote/LecueNote.style.ts b/src/Mypage/components/LecueNote/LecueNote.style.ts new file mode 100644 index 00000000..40207d03 --- /dev/null +++ b/src/Mypage/components/LecueNote/LecueNote.style.ts @@ -0,0 +1,92 @@ +import styled from '@emotion/styled'; + +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: ${({ 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<{ noteTextColor: number }>` + display: flex; + gap: 0.4rem; + flex-direction: column; + + width: 100%; + + color: ${({ theme, noteTextColor }) => + noteTextColor === 0 ? theme.colors.white : theme.colors.BG}; +`; + +export const Name = styled.p` + width: 100%; + + ${({ theme }) => theme.fonts.Title2_M_16}; +`; + +export const Title = styled.p` + width: 100%; + + ${({ 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: 100%; + + ${({ 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..7dc68e39 --- /dev/null +++ b/src/Mypage/components/LecueNote/index.tsx @@ -0,0 +1,38 @@ +import { LecueNoteProps } from '../../types/myPageType'; +import * as S from './LecueNote.style'; + +function LecueNote(props: LecueNoteProps) { + const { + noteId, + favoriteName, + title, + noteDate, + content, + noteTextColor, + noteBackgroundColor, + noteBackgroundImage, + } = props; + + const handleClickNote = (noteId: number) => { + alert(`${noteId}가 선택되었습니다.`); + }; + + return ( + { + handleClickNote(noteId); + }} + > + + {favoriteName} + {title} + {content} + + {noteDate} + + ); +} + +export default LecueNote; 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; diff --git a/src/Mypage/constants/DATA.ts b/src/Mypage/constants/DATA.ts new file mode 100644 index 00000000..4c5efdc4 --- /dev/null +++ b/src/Mypage/constants/DATA.ts @@ -0,0 +1,235 @@ +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: -1, + noteBackgroundImage: + 'https://lequu-server-bucket.s3.ap-northeast-2.amazonaws.com/notes/background_image/912ac7e2-672a-4f26-b115-b90cda4d7cc3.jpg', + }, + { + noteId: 13, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 0, + noteBackgroundColor: -1, + noteBackgroundImage: + 'https://lequu-server-bucket.s3.ap-northeast-2.amazonaws.com/notes/background_image/469456ec-5894-4014-8b90-332d453217ba.jpg', + }, + { + noteId: 14, + favoriteName: 'Lecue', + title: '큐비들이 짱임ㅋㅋ', + noteDate: '2024.01.12', + content: + '큐비들 사랑해 큐비들 최고 큐비들 완전 귀여움 큐비들밖에 없다 내 사랑 큐비들 알러뷰 다들 끝까지 파이팅 사랑해앸!!!!!!', + noteTextColor: 1, + noteBackgroundColor: -1, + noteBackgroundImage: + 'https://lequu-server-bucket.s3.ap-northeast-2.amazonaws.com/notes/background_image/676c2ca3-f868-423f-8000-a0bcb67dc797.jpg', + }, +]; diff --git a/src/Mypage/hooks/.gitkeep b/src/Mypage/hooks/.gitkeep new file mode 100644 index 00000000..e69de29b 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; diff --git a/src/Mypage/types/myPageType.ts b/src/Mypage/types/myPageType.ts new file mode 100644 index 00000000..9ea253c3 --- /dev/null +++ b/src/Mypage/types/myPageType.ts @@ -0,0 +1,39 @@ +export interface LecueBookProps { + key: number; + bookId: number; + favoriteName: string; + title: string; + bookDate: string; + noteNum: number; +} + +export interface LecueNoteProps { + key: number; + noteId: 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; +} diff --git a/src/Router.tsx b/src/Router.tsx index f10530a3..7673bb81 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -4,6 +4,7 @@ import DetailPage from './Detail/page/DetailPage'; import HealthTest from './HealthTest'; import LecueNotePage from './LecueNote/page/LeceuNotePage'; import Login from './Login/page'; +import Mypage from './Mypage/page'; import Register from './Register/page'; import SelectBookPage from './SelectBook/page/SelectBookPage'; import SplashPage from './Splash/page/SplashPage'; @@ -20,6 +21,8 @@ function Router() { } /> } /> } /> + } /> + } /> } /> } /> } /> 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 27350661..537b9b16 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -16,6 +16,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 IcX from './icon/ic_x.svg?react'; import ImgBook from './img/img_book.svg?react'; import ImgBookBackgray from './img/img_book_backgray.svg?react'; @@ -57,6 +58,7 @@ export { IcHome, IcNotice, IcSharing, + IcWaste, IcX, ImgBook, ImgBookBackgray,