Merge pull request #71 from Team-Lecue/feature/DetailPage

[ DetailPage ] dev 머지 PR입니다!
Team-Lecue · Jan 12, 2024 · b905d48 · b905d48
2 parents 3011691 + 243c52d
commit b905d48
Show file tree

Hide file tree

Showing 23 changed files with 530 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="lecuenote-modal"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/Detail/components/BigLecueNote/BigLecueNote.style.ts b/src/Detail/components/BigLecueNote/BigLecueNote.style.ts
@@ -0,0 +1,77 @@
+import styled from '@emotion/styled';
+
+export const BigLecueNoteWrapper = styled.div<{
+  noteBackgroundColor: number;
+  noteBackgroundImage: string;
+  noteTextColor: number;
+}>`
+  width: 100%;
+  height: 34.2rem;
+  padding: 2rem 1.1rem 1.7rem 1.9rem;
+
+  border-radius: 0.6rem;
+  background: ${({ theme, noteBackgroundColor, noteBackgroundImage }) => {
+    if (noteBackgroundColor === -1) {
+      return `url(${noteBackgroundImage})`;
+    } else {
+      switch (noteBackgroundColor) {
+        case 1:
+          return theme.colors.sub_pink;
+        case 2:
+          return theme.colors.sub_blue;
+        case 3:
+          return theme.colors.sub_green;
+        case 4:
+          return theme.colors.sub_purple;
+        case 5:
+          return theme.colors.sub_yellow;
+        case 6:
+          return theme.colors.sub_ivory;
+        default:
+          return 'transparent';
+      }
+    }
+  }};
+  background-size: cover;
+  color: ${({ theme, noteTextColor }) => {
+    switch (noteTextColor) {
+      case 0:
+        return theme.colors.white;
+      case 1:
+        return theme.colors.BG;
+    }
+  }};
+`;
+
+export const BigLecueNoteNickname = styled.p`
+  ${({ theme }) => theme.fonts.Head1_B_20};
+`;
+
+export const BigLecueNoteContentWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: scroll;
+
+  width: 100%;
+  height: 22.4rem;
+  padding-right: 0.8rem;
+  margin-top: 1.5rem;
+`;
+
+export const BigLecueNoteContent = styled.div`
+  width: 100%;
+  max-height: 100%;
+
+  ${({ theme }) => theme.fonts.Body1_R_16};
+`;
+
+export const BigLecueNoteDate = styled.p`
+  width: 100%;
+  padding-right: 0.8rem;
+  margin-top: 2.1rem;
+
+  ${({ theme }) => theme.fonts.E_Body2_R_14};
+
+  text-align: end;
+`;
diff --git a/src/Detail/components/BigLecueNote/index.tsx b/src/Detail/components/BigLecueNote/index.tsx
@@ -0,0 +1,35 @@
+import * as S from './BigLecueNote.style';
+
+interface BigLecueNoteProps {
+  content: string;
+  noteDate: string;
+  noteNickname: string;
+  noteTextColor: number;
+  noteBackgroundColor: number;
+  noteBackgroundImage: string;
+}
+
+function BigLecueNote({
+  content,
+  noteDate,
+  noteNickname,
+  noteTextColor,
+  noteBackgroundColor,
+  noteBackgroundImage,
+}: BigLecueNoteProps) {
+  return (
+    <S.BigLecueNoteWrapper
+      noteBackgroundColor={noteBackgroundColor}
+      noteBackgroundImage={noteBackgroundImage}
+      noteTextColor={noteTextColor}
+    >
+      <S.BigLecueNoteNickname>{noteNickname}</S.BigLecueNoteNickname>
+      <S.BigLecueNoteContentWrapper>
+        <S.BigLecueNoteContent>{content}</S.BigLecueNoteContent>
+      </S.BigLecueNoteContentWrapper>
+      <S.BigLecueNoteDate>{noteDate}</S.BigLecueNoteDate>
+    </S.BigLecueNoteWrapper>
+  );
+}
+
+export default BigLecueNote;
diff --git a/src/Detail/components/BookInfoBox/BookInfoBox.style.ts b/src/Detail/components/BookInfoBox/BookInfoBox.style.ts
@@ -55,7 +55,7 @@ export const BookInfoHeaderItem = styled.p<{ backgroundColor: number }>`
   color: ${({ theme, backgroundColor }) => {
     switch (backgroundColor) {
       case 0:
-        return 'rgba(255, 255, 255, 0.3)';
+        return theme.colors.white30;
       case 1:
         return theme.colors.MG;
     }
@@ -84,7 +84,7 @@ export const BookInfoContent = styled.p<{ backgroundColor: number }>`
   color: ${({ theme, backgroundColor }) => {
     switch (backgroundColor) {
       case 0:
-        return 'rgba(255, 255, 255, 0.8)';
+        return theme.colors.white80;
       case 1:
         return theme.colors.BG;
     }

diff --git a/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts b/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts
@@ -15,3 +15,10 @@ export const LecueNoteListContainerWrapper = styled.div<{
   }};
   flex: 1;
 `;
+
+export const LecueNoteListViewWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+
+  width: 100%;
+`;
diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import LecueNoteListHeader from '../LecueNoteLIstHeader';
+import LinearView from '../LinearView';
 import ZigZagView from '../ZigZagView';
 import * as S from './LecueNoteListContainer.style';
 
@@ -10,7 +11,9 @@ interface Note {
   content: string;
   noteDate: string;
   noteNickname: string;
+  noteTextColor: number;
   noteBackgroundColor: number;
+  noteBackgroundImage: string;
 }
 
 interface LecueNoteListContainerProps {
@@ -33,11 +36,13 @@ function LecueNoteListContainer({
         isZigZagView={isZigZagView}
         buttonOnClick={() => setIsZigZagView(!isZigZagView)}
       />
-      {isZigZagView ? (
-        <ZigZagView noteList={noteList} />
-      ) : (
-        <ZigZagView noteList={noteList} />
-      )}
+      <S.LecueNoteListViewWrapper>
+        {isZigZagView ? (
+          <ZigZagView noteList={noteList} />
+        ) : (
+          <LinearView noteList={noteList} />
+        )}
+      </S.LecueNoteListViewWrapper>
     </S.LecueNoteListContainerWrapper>
   );
 }

diff --git a/src/Detail/components/LecueNoteModal/LecueNoteModal.style.ts b/src/Detail/components/LecueNoteModal/LecueNoteModal.style.ts
@@ -0,0 +1,105 @@
+import styled from '@emotion/styled';
+
+export const BlurryContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+
+  width: 100vw;
+  height: 100vh;
+
+  background-color: ${({ theme }) => theme.colors.Modal};
+`;
+
+export const LecueNoteModalWrapper = styled.div<{
+  noteBackgroundColor: number;
+  noteBackgroundImage: string;
+  noteTextColor: number;
+}>`
+  position: relative;
+
+  width: 31.1rem;
+  height: 35.8rem;
+  padding: 2rem 1.5rem;
+
+  border-radius: 0.4rem;
+  background: ${({ theme, noteBackgroundColor, noteBackgroundImage }) => {
+    if (noteBackgroundColor === -1) {
+      return `url(${noteBackgroundImage})`;
+    } else {
+      switch (noteBackgroundColor) {
+        case 1:
+          return theme.colors.sub_pink;
+        case 2:
+          return theme.colors.sub_blue;
+        case 3:
+          return theme.colors.sub_green;
+        case 4:
+          return theme.colors.sub_purple;
+        case 5:
+          return theme.colors.sub_yellow;
+        case 6:
+          return theme.colors.sub_ivory;
+        default:
+          return 'transparent';
+      }
+    }
+  }};
+  background-size: cover;
+  color: ${({ theme, noteTextColor }) => {
+    switch (noteTextColor) {
+      case 0:
+        return theme.colors.white;
+      case 1:
+        return theme.colors.BG;
+    }
+  }};
+`;
+
+export const CloseButton = styled.button`
+  position: absolute;
+  top: 0.6rem;
+  right: 0.6rem;
+
+  width: 3.2rem;
+  height: 3.2rem;
+`;
+
+export const LecueNoteModalNickname = styled.p`
+  ${({ theme }) => theme.fonts.Head2_SB_18};
+`;
+
+export const LecueNoteModalContentWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: scroll;
+
+  width: 100%;
+  height: 23.4rem;
+  padding: 1.3rem 0.6rem;
+  margin-top: 3rem;
+`;
+
+export const LecueNoteModalContent = styled.p`
+  width: 100%;
+  max-height: 100%;
+
+  ${({ theme }) => theme.fonts.Title2_M_16};
+`;
+
+export const LecueNoteModalDate = styled.p`
+  width: 100%;
+  max-height: 100%;
+
+  padding-right: 0.6rem;
+  margin-top: 1.3rem;
+
+  ${({ theme }) => theme.fonts.E_Body2_R_14};
+
+  text-align: end;
+`;
diff --git a/src/Detail/components/LecueNoteModal/index.tsx b/src/Detail/components/LecueNoteModal/index.tsx
@@ -0,0 +1,50 @@
+import { createPortal } from 'react-dom';
+
+import { IcX } from '../../../assets';
+import * as S from './LecueNoteModal.style';
+const modalContainer = document.getElementById(
+  'lecuenote-modal',
+) as HTMLElement;
+
+interface Note {
+  noteId: number;
+  renderType: number;
+  content: string;
+  noteDate: string;
+  noteNickname: string;
+  noteTextColor: number;
+  noteBackgroundColor: number;
+  noteBackgroundImage: string;
+}
+
+interface LecueNoteModalProps {
+  selectedNote: Note | null;
+}
+
+function LecueNoteModal({ selectedNote }: LecueNoteModalProps) {
+  return createPortal(
+    <S.BlurryContainer>
+      <S.LecueNoteModalWrapper
+        noteBackgroundColor={selectedNote?.noteBackgroundColor || 0}
+        noteBackgroundImage={selectedNote?.noteBackgroundImage || ''}
+        noteTextColor={selectedNote?.noteTextColor || 0}
+      >
+        <S.CloseButton type="button">
+          <IcX />
+        </S.CloseButton>
+        <S.LecueNoteModalNickname>
+          {selectedNote?.noteNickname}
+        </S.LecueNoteModalNickname>
+        <S.LecueNoteModalContentWrapper>
+          <S.LecueNoteModalContent>
+            {selectedNote?.content}
+          </S.LecueNoteModalContent>
+        </S.LecueNoteModalContentWrapper>
+        <S.LecueNoteModalDate>{selectedNote?.noteDate}</S.LecueNoteModalDate>
+      </S.LecueNoteModalWrapper>
+    </S.BlurryContainer>,
+    modalContainer,
+  );
+}
+
+export default LecueNoteModal;
diff --git a/src/Detail/components/LinearView/LinearView.style.ts b/src/Detail/components/LinearView/LinearView.style.ts
@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const LinearViewWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100%;
+  padding: 1.8rem 0 2.5rem;
+  row-gap: 1.8rem;
+`;
diff --git a/src/Detail/components/LinearView/index.tsx b/src/Detail/components/LinearView/index.tsx
@@ -0,0 +1,29 @@
+import BigLecueNote from '../BigLecueNote';
+import * as S from './LinearView.style';
+
+interface Note {
+  noteId: number;
+  renderType: number;
+  content: string;
+  noteDate: string;
+  noteNickname: string;
+  noteTextColor: number;
+  noteBackgroundColor: number;
+  noteBackgroundImage: string;
+}
+
+interface LinearViewProps {
+  noteList: Note[];
+}
+
+function LinearView({ noteList }: LinearViewProps) {
+  return (
+    <S.LinearViewWrapper>
+      {noteList.map((note) => (
+        <BigLecueNote key={note.noteId} {...note} />
+      ))}
+    </S.LinearViewWrapper>
+  );
+}
+
+export default LinearView;