Merge pull request #165 from Team-Lecue/feature/Mypage

[ MyPage ] DEV로 가거라!
Team-Lecue · Jan 18, 2024 · 1439e1d · 1439e1d
2 parents 9cc308c + 9123c15
commit 1439e1d
Show file tree

Hide file tree

Showing 19 changed files with 464 additions and 144 deletions.
diff --git a/src/Mypage/api/deleteMyBook.ts b/src/Mypage/api/deleteMyBook.ts
@@ -0,0 +1,12 @@
+import { api } from '../../libs/api';
+
+export async function deleteMyBook(bookId: number) {
+  const data = await api.delete(`/api/books/${bookId}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${import.meta.env.VITE_APP_TOKEN}`,
+    },
+  });
+
+  return data;
+}
diff --git a/src/Mypage/api/getMyBookList.ts b/src/Mypage/api/getMyBookList.ts
@@ -0,0 +1,11 @@
+import { api } from '../../libs/api';
+
+export async function getMyBookList() {
+  const data = await api.get(`/api/mypage/book`, {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${import.meta.env.VITE_APP_TOKEN}`,
+    },
+  });
+  return data.data.data.bookList;
+}
diff --git a/src/Mypage/api/getMyNickName.ts b/src/Mypage/api/getMyNickName.ts
@@ -0,0 +1,11 @@
+import { api } from '../../libs/api';
+
+export async function getMyNickName() {
+  const data = await api.get(`/api/mypage/note`, {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${import.meta.env.VITE_APP_TOKEN}`,
+    },
+  });
+  return data.data.data.memberNickname;
+}
diff --git a/src/Mypage/api/getMyNoteList.ts b/src/Mypage/api/getMyNoteList.ts
@@ -0,0 +1,11 @@
+import { api } from '../../libs/api';
+
+export async function getMyNoteList() {
+  const data = await api.get(`/api/mypage/note`, {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${import.meta.env.VITE_APP_TOKEN}`,
+    },
+  });
+  return data.data.data.noteList;
+}
diff --git a/src/Mypage/components/LecueBook/index.tsx b/src/Mypage/components/LecueBook/index.tsx
@@ -1,28 +1,35 @@
 import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { IcWaste } from '../../../assets';
+import CommonModal from '../../../components/common/Modal/CommonModal';
 import { LecueBookProps } from '../../types/myPageType';
 import * as S from './LecueBook.style';
 
 function LecueBook(props: LecueBookProps) {
-  const { bookId, favoriteName, title, bookDate, noteNum } = props;
+  const { bookId, favoriteName, title, bookDate, noteNum, bookUuid } = props;
 
   const [noteCount, setNoteCount] = useState('');
+  const [modalOn, setModalOn] = useState(false);
+  const navigate = useNavigate();
+  // const deleteMutation = useDeleteMyBook();
 
   const convertNoteCount = (noteNum: number) => {
     setNoteCount(noteNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));
   };
 
-  const handleClickBook = (bookId: number) => {
-    alert(`${bookId}가 선택되었습니다.`);
+  const handleClickBook = (bookUuid: string) => {
+    navigate(`/lecue-book/${bookUuid}`);
   };
 
   const handleClickTrashBtn = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-    bookId: number,
+    // bookId: number,
   ) => {
     event.stopPropagation();
-    alert(`${bookId}를 삭제하시겠습니까?`);
+    // 주석은 전부 삭제 함수 모달 props 이후 수정
+    // deleteMutation.mutate(bookId);
+    setModalOn(true);
   };
 
   useEffect(() => {
@@ -32,7 +39,7 @@ function LecueBook(props: LecueBookProps) {
   return (
     <S.Wrapper
       onClick={() => {
-        handleClickBook(bookId);
+        handleClickBook(bookUuid);
       }}
     >
       <S.Header>
@@ -46,6 +53,10 @@ function LecueBook(props: LecueBookProps) {
         <S.Date>{bookDate}</S.Date>
         <S.Count>{noteCount}개</S.Count>
       </S.Footer>
+
+      {modalOn && (
+        <CommonModal category="book_delete" setModalOn={setModalOn} />
+      )}
     </S.Wrapper>
   );
 }

diff --git a/src/Mypage/components/LecueList/LecueList.style.ts b/src/Mypage/components/LecueList/LecueList.style.ts
@@ -31,15 +31,23 @@ export const Button = styled.button<{ variant: boolean }>`
 
 export const ListWrapper = styled.section<{ variant: string }>`
   display: flex;
-  gap: ${({ variant }) => (variant === 'note' ? 1 : 0.8)}rem;
-  flex-wrap: wrap;
-  overflow: scroll;
+  justify-content: center;
 
   width: 100%;
   height: calc(100dvh - 19.3rem);
-  padding: 1.2rem 1rem 1rem;
+  padding: 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};
 `;
+
+export const ListContainer = styled.div<{ variant: string }>`
+  display: flex;
+  gap: ${({ variant }) => (variant === 'note' ? 1 : 0.8)}rem;
+  flex-wrap: wrap;
+  overflow: scroll;
+
+  width: 100%;
+  height: 100%;
+`;
diff --git a/src/Mypage/components/LecueList/index.tsx b/src/Mypage/components/LecueList/index.tsx
@@ -1,7 +1,12 @@
 import { useEffect, useState } from 'react';
 
-import { BOOK_LIST, NOTE_LIST } from '../../constants/DATA';
-import { LecueBookType, LecueNoteType } from '../../types/myPageType';
+import useGetMyBookList from '../../hooks/useGetMyBookList';
+import useGetNoteList from '../../hooks/useGetMyNoteList';
+import {
+  LecueBookProps,
+  LecueBookType,
+  LecueNoteType,
+} from '../../types/myPageType';
 import LecueBook from '../LecueBook';
 import LecueNote from '../LecueNote';
 import * as S from './LecueList.style';
@@ -10,6 +15,9 @@ function LecueList() {
   const [clickedBtn, setClickedBtn] = useState('note');
   const [counter, setCounter] = useState([0, 0]);
 
+  const { myBookList } = useGetMyBookList();
+  const { myNoteList } = useGetNoteList();
+
   const handleClickNoteBtn = () => {
     document.getElementById('list-wrapper')!.scrollTo(0, 0);
     setClickedBtn('note');
@@ -25,8 +33,10 @@ function LecueList() {
   };
 
   useEffect(() => {
-    numberCount(NOTE_LIST, BOOK_LIST);
-  }, []);
+    if (myNoteList && myBookList) {
+      numberCount(myNoteList, myBookList);
+    }
+  }, [myNoteList, myBookList]);
 
   return (
     <S.Wrapper>
@@ -49,34 +59,40 @@ function LecueList() {
       </S.ButtonWrapper>
 
       <S.ListWrapper variant={clickedBtn} id="list-wrapper">
-        {clickedBtn === 'note'
-          ? NOTE_LIST.map((note) => {
-              return (
-                <LecueNote
-                  key={note.noteId}
-                  noteId={note.noteId}
-                  favoriteName={note.favoriteName}
-                  title={note.title}
-                  noteDate={note.noteDate}
-                  content={note.content}
-                  noteTextColor={note.noteTextColor}
-                  noteBackgroundColor={note.noteBackgroundColor}
-                  noteBackgroundImage={note.noteBackgroundImage}
-                />
-              );
-            })
-          : BOOK_LIST.map((book) => {
-              return (
-                <LecueBook
-                  key={book.bookId}
-                  bookId={book.bookId}
-                  favoriteName={book.favoriteName}
-                  title={book.title}
-                  bookDate={book.bookDate}
-                  noteNum={book.noteNum}
-                />
-              );
-            })}
+        <S.ListContainer variant={clickedBtn}>
+          {clickedBtn === 'note'
+            ? myNoteList &&
+              myNoteList.map((note: LecueNoteType) => {
+                return (
+                  <LecueNote
+                    bookUuid={note.bookUuid}
+                    key={note.noteId}
+                    noteId={note.noteId}
+                    favoriteName={note.favoriteName}
+                    title={note.title}
+                    noteDate={note.noteDate}
+                    content={note.content}
+                    noteTextColor={note.noteTextColor}
+                    noteBackground={note.noteBackground}
+                    noteList={myNoteList}
+                  />
+                );
+              })
+            : myBookList &&
+              myBookList.map((book: LecueBookProps) => {
+                return (
+                  <LecueBook
+                    key={book.bookId}
+                    bookUuid={book.bookUuid}
+                    bookId={book.bookId}
+                    favoriteName={book.favoriteName}
+                    title={book.title}
+                    bookDate={book.bookDate}
+                    noteNum={book.noteNum}
+                  />
+                );
+              })}
+        </S.ListContainer>
       </S.ListWrapper>
     </S.Wrapper>
   );

diff --git a/src/Mypage/components/LecueNote/LecueNote.style.ts b/src/Mypage/components/LecueNote/LecueNote.style.ts
@@ -1,70 +1,50 @@
 import styled from '@emotion/styled';
 
 export const Wrapper = styled.li<{
-  noteBackgroundColor: number;
-  noteBackgroundImage: string;
+  noteBackground: string;
 }>`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+
   width: 48.5%;
-  height: auto;
-  padding: 1.5rem 0.95rem 0.6rem;
+  height: 16.3rem;
+  padding: 1.5rem 0.95rem 1rem;
 
   border-radius: 0.4rem;
-  background: ${({ theme, noteBackgroundColor, noteBackgroundImage }) => {
-    if (noteBackgroundColor === -1) {
-      return `url(${noteBackgroundImage})`;
+
+  ${({ noteBackground }) => {
+    if (noteBackground.substring(0, 1) === '#') {
+      return `background-color: ${noteBackground}`;
     } 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';
-      }
+      return `background: url(${noteBackground});
+      background-size: cover;`;
     }
-  }};
-  background-size: cover;
+  }}
 `;
 
-export const TextWrapper = styled.div<{ noteTextColor: number }>`
+export const TextWrapper = styled.div<{ noteTextColor: string }>`
   display: flex;
   gap: 0.4rem;
   flex-direction: column;
 
   width: 100%;
+  margin-bottom: 1.8rem;
 
-  color: ${({ theme, noteTextColor }) =>
-    noteTextColor === 0 ? theme.colors.white : theme.colors.BG};
+  color: ${({ noteTextColor }) => {
+    return noteTextColor;
+  }};
 `;
 
 export const Name = styled.p`
   width: 100%;
 
-  ${({ theme }) => theme.fonts.Title2_M_16};
+  ${({ theme }) => theme.fonts.Title1_SB_16};
 `;
 
 export const Title = styled.p`
   width: 100%;
+  margin-bottom: 0.5rem;
 
   ${({ theme }) => theme.fonts.Body4_SB_14};
 `;
@@ -79,14 +59,16 @@ export const Content = styled.p`
 
   width: 100%;
 
-  ${({ theme }) => theme.fonts.Caption1_R_12};
+  ${({ theme }) => theme.fonts.Body3_R_14};
 
   text-overflow: ellipsis;
 `;
 
 export const Date = styled.p`
   width: 100%;
-  padding-top: calc(100% - 11rem);
+
+  ${({ theme }) => theme.fonts.E_Caption_R_12};
+  color: ${({ theme }) => theme.colors.Modal};
 
   text-align: right;
 `;