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

[ Mypage ] dev 머지!

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};
+`;

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<HTMLButtonElement, MouseEvent>,
+    bookId: number,
+  ) => {
+    event.stopPropagation();
+    alert(`${bookId}를 삭제하시겠습니까?`);
+  };
+
+  useEffect(() => {
+    convertNoteCount(noteNum);
+  });
+
+  return (
+    <S.Wrapper
+      onClick={() => {
+        handleClickBook(bookId);
+      }}
+    >
+      <S.Header>
+        <S.Name>{favoriteName}</S.Name>
+        <S.TrashBtn onClick={(event) => handleClickTrashBtn(event, bookId)}>
+          <IcWaste />
+        </S.TrashBtn>
+      </S.Header>
+      <S.Title>{title}</S.Title>
+      <S.Footer>
+        <S.Date>{bookDate}</S.Date>
+        <S.Count>{noteCount}개</S.Count>
+      </S.Footer>
+    </S.Wrapper>
+  );
+}
+
+export default LecueBook;

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};
+`;

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 (
+    <S.Wrapper>
+      <S.ButtonWrapper>
+        {/* clickedBtn이 true이면 note false이면 book */}
+        <S.Button
+          type="button"
+          variant={clickedBtn === 'note'}
+          onClick={handleClickNoteBtn}
+        >
+          레큐노트 ({counter[0]}개)
+        </S.Button>
+        <S.Button
+          type="button"
+          variant={clickedBtn === 'book'}
+          onClick={handleClickBookBtn}
+        >
+          레큐북 ({counter[1]}개)
+        </S.Button>
+      </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.ListWrapper>
+    </S.Wrapper>
+  );
+}
+
+export default LecueList;

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;
+`;

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 (
+    <S.Wrapper
+      noteBackgroundColor={noteBackgroundColor}
+      noteBackgroundImage={noteBackgroundImage}
+      onClick={() => {
+        handleClickNote(noteId);
+      }}
+    >
+      <S.TextWrapper noteTextColor={noteTextColor}>
+        <S.Name>{favoriteName}</S.Name>
+        <S.Title>{title}</S.Title>
+        <S.Content>{content}</S.Content>
+      </S.TextWrapper>
+      <S.Date>{noteDate}</S.Date>
+    </S.Wrapper>
+  );
+}
+
+export default LecueNote;

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};
+`;