Merge pull request #132 from Team-Lecue/feature/StickerAttach

[ stickerAttach ] dev merge
Team-Lecue · Jan 16, 2024 · c47b423 · c47b423
2 parents dfd87f6 + b47d8a9
commit c47b423
Show file tree

Hide file tree

Showing 18 changed files with 212 additions and 163 deletions.
diff --git a/src/Detail/components/BigLecueNote/BigLecueNote.style.ts b/src/Detail/components/BigLecueNote/BigLecueNote.style.ts
@@ -1,45 +1,24 @@
 import styled from '@emotion/styled';
 
 export const BigLecueNoteWrapper = styled.div<{
-  noteBackgroundColor: number;
-  noteBackgroundImage: string;
+  noteBackground: 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})`;
+  ${({ noteBackground }) => {
+    if (noteBackground.substring(0, 1) === '#') {
+      return `background-color: ${noteBackground}`;
     } 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';
-      }
+      return `background: url(${noteBackground})`;
     }
   }};
   background-size: cover;
-  color: ${({ theme, noteTextColor }) => {
-    switch (noteTextColor) {
-      case 0:
-        return theme.colors.white;
-      case 1:
-        return theme.colors.BG;
-    }
+  color: ${({ noteTextColor }) => {
+    return noteTextColor;
   }};
 `;
 

diff --git a/src/Detail/components/BigLecueNote/index.tsx b/src/Detail/components/BigLecueNote/index.tsx
@@ -5,22 +5,19 @@ interface BigLecueNoteProps {
   noteDate: string;
   noteNickname: string;
   noteTextColor: number;
-  noteBackgroundColor: number;
-  noteBackgroundImage: string;
+  noteBackground: string;
 }
 
 function BigLecueNote({
   content,
   noteDate,
   noteNickname,
   noteTextColor,
-  noteBackgroundColor,
-  noteBackgroundImage,
+  noteBackground,
 }: BigLecueNoteProps) {
   return (
     <S.BigLecueNoteWrapper
-      noteBackgroundColor={noteBackgroundColor}
-      noteBackgroundImage={noteBackgroundImage}
+      noteBackground={noteBackground}
       noteTextColor={noteTextColor}
     >
       <S.BigLecueNoteNickname>{noteNickname}</S.BigLecueNoteNickname>

diff --git a/src/Detail/components/BookInfoBox/BookInfoBox.style.ts b/src/Detail/components/BookInfoBox/BookInfoBox.style.ts
@@ -1,17 +1,18 @@
 import styled from '@emotion/styled';
 
-export const BookInfoBoxWrapper = styled.div<{ backgroundColor: number }>`
+export const BookInfoBoxWrapper = styled.div<{ backgroundColor: string }>`
   display: flex;
 
   width: 100%;
   height: 18.3em;
 
   background-color: ${({ theme, backgroundColor }) => {
+    backgroundColor;
     switch (backgroundColor) {
-      case 0:
+      case '#F5F5F5':
         return theme.colors.BG;
-      case 1:
-        return theme.colors.white;
+      case '#191919':
+        return theme.colors.background;
     }
   }};
 `;
@@ -48,44 +49,48 @@ export const BookInfoHeaderItemWrapper = styled.div`
   column-gap: 0.3rem;
 `;
 
-export const BookInfoHeaderItem = styled.p<{ backgroundColor: number }>`
+export const BookInfoHeaderItem = styled.p<{ backgroundColor: string }>`
   height: 1.8rem;
   padding-top: 0.4rem;
 
   color: ${({ theme, backgroundColor }) => {
+    backgroundColor;
     switch (backgroundColor) {
-      case 0:
+      case '#F5F5F5':
         return theme.colors.white30;
-      case 1:
+      case '#191919':
         return theme.colors.MG;
     }
   }};
+
   ${({ theme }) => theme.fonts.E_Caption_R_12};
 `;
 
-export const BookInfoTitle = styled.p<{ backgroundColor: number }>`
+export const BookInfoTitle = styled.p<{ backgroundColor: string }>`
   margin-top: 0.7rem;
 
   color: ${({ theme, backgroundColor }) => {
+    backgroundColor;
     switch (backgroundColor) {
-      case 0:
-        return theme.colors.white;
-      case 1:
+      case '#F5F5F5':
+        return theme.colors.background;
+      case '#191919':
         return theme.colors.BG;
     }
   }};
   ${({ theme }) => theme.fonts.Head2_SB_18};
 `;
 
-export const BookInfoContent = styled.p<{ backgroundColor: number }>`
+export const BookInfoContent = styled.p<{ backgroundColor: string }>`
   height: 8.5rem;
   margin-top: 1rem;
 
   color: ${({ theme, backgroundColor }) => {
+    backgroundColor;
     switch (backgroundColor) {
-      case 0:
+      case '#F5F5F5':
         return theme.colors.white80;
-      case 1:
+      case '#191919':
         return theme.colors.BG;
     }
   }};

diff --git a/src/Detail/components/BookInfoBox/index.tsx b/src/Detail/components/BookInfoBox/index.tsx
@@ -7,7 +7,7 @@ interface BookInfoBoxProps {
   bookNickname: string;
   title: string;
   description: string;
-  bookBackgroundColor: number;
+  bookBackgroundColor: string;
 }
 
 function BookInfoBox({

diff --git a/src/Detail/components/LecueNoteLIstHeader/LecueNoteListHeader.style.ts b/src/Detail/components/LecueNoteLIstHeader/LecueNoteListHeader.style.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 export const LecueNoteListHeaderWrapper = styled.div<{
-  backgroundColor: number;
+  backgroundColor: string;
 }>`
   display: flex;
   position: sticky;
@@ -14,7 +14,7 @@ export const LecueNoteListHeaderWrapper = styled.div<{
   column-gap: 1rem;
 `;
 
-export const LecueNoteCountBox = styled.div<{ backgroundColor: number }>`
+export const LecueNoteCountBox = styled.div<{ backgroundColor: string }>`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -23,18 +23,19 @@ export const LecueNoteCountBox = styled.div<{ backgroundColor: number }>`
 
   border-radius: 7rem;
   background-color: ${({ theme, backgroundColor }) => {
+    backgroundColor;
     switch (backgroundColor) {
-      case 0:
+      case '#F5F5F5':
         return theme.colors.BG;
-      case 1:
-        return theme.colors.white;
+      case '#191919':
+        return theme.colors.background;
     }
   }};
   color: ${({ theme, backgroundColor }) => {
     switch (backgroundColor) {
-      case 0:
-        return theme.colors.white;
-      case 1:
+      case '#F5F5F5':
+        return theme.colors.background;
+      case '#191919':
         return theme.colors.BG;
     }
   }};

diff --git a/src/Detail/components/LecueNoteLIstHeader/index.tsx b/src/Detail/components/LecueNoteLIstHeader/index.tsx
@@ -3,7 +3,7 @@ import * as S from './LecueNoteListHeader.style';
 
 interface LecueNoteListHeaderProps {
   noteNum: number;
-  backgroundColor: number;
+  backgroundColor: string;
   isZigZagView: boolean;
   buttonOnClick: () => void;
 }

diff --git a/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts b/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts
@@ -1,20 +1,15 @@
 import styled from '@emotion/styled';
 
 export const LecueNoteListContainerWrapper = styled.div<{
-  backgroundColor: number;
+  backgroundColor: string;
   isEditable: boolean;
 }>`
   width: 100vw;
   padding: 0 1.6rem;
   padding-bottom: ${({ isEditable }) => isEditable && '12rem'};
 
-  background-color: ${({ theme, backgroundColor }) => {
-    switch (backgroundColor) {
-      case 0:
-        return theme.colors.white;
-      case 1:
-        return theme.colors.BG;
-    }
+  background-color: ${({ backgroundColor }) => {
+    return backgroundColor;
   }};
 
   flex: 1;

diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { DraggableData, DraggableEvent } from 'react-draggable';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -10,6 +10,7 @@ import {
   IcCaution,
 } from '../../../assets';
 import Button from '../../../components/common/Button';
+import usePostStickerState from '../../../StickerAttach/hooks/usePostStickerState';
 import { NoteType, postedStickerType } from '../../type/lecueBookType';
 import LecueNoteListHeader from '../LecueNoteLIstHeader';
 import LinearView from '../LinearView';
@@ -18,27 +19,31 @@ import * as S from './LecueNoteListContainer.style';
 
 interface LecueNoteListContainerProps {
   noteNum: number;
-  backgroundColor: number;
+  backgroundColor: string;
   noteList: NoteType[];
   postedStickerList: postedStickerType[];
+  isEditable: boolean;
+  setEditableStateFalse: () => void;
 }
 
 function LecueNoteListContainer({
   noteNum,
   backgroundColor,
   noteList,
   postedStickerList,
+  isEditable,
+  setEditableStateFalse,
 }: LecueNoteListContainerProps) {
   //hooks
   const location = useLocation();
   const navigate = useNavigate();
+  const scrollRef = useRef(document.createElement('div'));
   //storage
   const storedValue = sessionStorage.getItem('scrollPosition');
   const savedScrollPosition =
     storedValue !== null ? parseInt(storedValue, 10) : 0;
   //state
   const [isZigZagView, setIsZigZagView] = useState<boolean>(true);
-  const [isEditable, setIsEditable] = useState(true);
   const [stickerState, setStickerState] = useState<postedStickerType>({
     postedStickerId: 0,
     stickerImage: '',
@@ -48,8 +53,10 @@ function LecueNoteListContainer({
 
   const { state } = location;
 
+  const postMutation = usePostStickerState();
+
   useEffect(() => {
-    // editable 상태 변경
+    // state : 라우터 타고 온 스티커 값, 즉 스티커 값을 갖고 있는 상태라면
     if (state) {
       window.scrollTo(0, savedScrollPosition);
       const { stickerId, stickerImage } = state.sticker;
@@ -60,10 +67,9 @@ function LecueNoteListContainer({
       }));
     } else {
       // editable 상태 변경
-      setIsEditable(false);
-      navigate('/lecue-book');
+      setEditableStateFalse();
     }
-  }, [state]);
+  }, [state, isEditable]);
 
   // 스티커 위치 값 저장
   const handleDrag = (_e: DraggableEvent, ui: DraggableData) => {
@@ -75,22 +81,31 @@ function LecueNoteListContainer({
     }));
   };
 
+  // 스티커 버튼 클릭시
   const handleClickStickerButton = () => {
+    // 현재 스크롤 위치 저장
     sessionStorage.setItem('scrollPosition', window.scrollY.toString());
 
-    setIsEditable(true);
-
     navigate('/sticker-pack');
   };
 
   const handleClickWriteButton = () => {
-    alert('WriteBtn');
+    navigate('/create-note');
   };
 
   const handleClickDone = () => {
-    setIsEditable(true);
-    sessionStorage.removeItem('scrollPosition');
-    navigate('/lecue-book');
+    // 다 붙였을 때 post 실행
+    const { postedStickerId, positionX, positionY } = stickerState;
+    const bookId = 1;
+
+    postMutation.mutate({
+      postedStickerId: postedStickerId,
+      bookId: bookId,
+      positionX: positionX,
+      positionY: positionY,
+    });
+
+    setEditableStateFalse();
   };
 
   return (
@@ -107,11 +122,13 @@ function LecueNoteListContainer({
       <S.LecueNoteListViewWrapper>
         {isZigZagView ? (
           <ZigZagView
+            savedScrollPosition={savedScrollPosition}
             noteList={noteList}
             isEditable={isEditable}
             handleDrag={handleDrag}
             stickerState={stickerState}
             postedStickerList={postedStickerList}
+            ref={scrollRef}
           />
         ) : (
           <LinearView noteList={noteList} />
@@ -121,14 +138,14 @@ function LecueNoteListContainer({
       {!isEditable && (
         <>
           <S.StickerButton type="button" onClick={handleClickStickerButton}>
-            {backgroundColor === 0 ? (
+            {backgroundColor === '#F5F5F5' ? (
               <BtnFloatingSticker />
             ) : (
               <BtnFloatingStickerOrange />
             )}
           </S.StickerButton>
           <S.WriteButton type="button" onClick={handleClickWriteButton}>
-            {backgroundColor === 0 ? (
+            {backgroundColor === '#F5F5F5' ? (
               <BtnFloatingWrite />
             ) : (
               <BtnFloatingWriteOrange />