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

[ Merge ] dev 머지용 피알입니다

package.json

@@ -20,6 +20,7 @@
     "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.21.1",
     "vite-plugin-svgr": "^4.2.0"

src/Detail/api/getBookDetail.ts

@@ -0,0 +1,14 @@
+import { api } from '../../libs/api';
+
+export async function getBookDetail() {
+  const data = await api.get(
+    `/api/books/detail/ee4f66f9-9cf4-4b28-90f4-f71d0ecba021`,
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    },
+  );
+
+  return data.data.data;
+}

src/Detail/components/BookInfoBox/index.tsx

@@ -2,47 +2,47 @@ import { IcCrown, IcDate } from '../../../assets';
 import * as S from './BookInfoBox.style';
 
 interface BookInfoBoxProps {
-  profileImg: string;
-  date: string;
-  nickname: string;
+  favoriteImage: string;
+  bookDate: string;
+  bookNickname: string;
   title: string;
-  content: string;
-  backgroundColor: number;
+  description: string;
+  bookBackgroundColor: number;
 }
 
 function BookInfoBox({
-  profileImg,
-  date,
-  nickname,
+  favoriteImage,
+  bookDate,
+  bookNickname,
   title,
-  content,
-  backgroundColor,
+  description,
+  bookBackgroundColor,
 }: BookInfoBoxProps) {
   return (
-    <S.BookInfoBoxWrapper backgroundColor={backgroundColor}>
+    <S.BookInfoBoxWrapper backgroundColor={bookBackgroundColor}>
       <S.ProfileImageWrapper>
-        <S.ProfileImg src={profileImg} />
+        <S.ProfileImg src={favoriteImage} />
       </S.ProfileImageWrapper>
       <S.BookInfoWrapper>
         <S.BookInfoHeader>
           <S.BookInfoHeaderItemWrapper>
             <IcDate />
-            <S.BookInfoHeaderItem backgroundColor={backgroundColor}>
-              {date}
+            <S.BookInfoHeaderItem backgroundColor={bookBackgroundColor}>
+              {bookDate}
             </S.BookInfoHeaderItem>
           </S.BookInfoHeaderItemWrapper>
           <S.BookInfoHeaderItemWrapper>
             <IcCrown />
-            <S.BookInfoHeaderItem backgroundColor={backgroundColor}>
-              {nickname}
+            <S.BookInfoHeaderItem backgroundColor={bookBackgroundColor}>
+              {bookNickname}
             </S.BookInfoHeaderItem>
           </S.BookInfoHeaderItemWrapper>
         </S.BookInfoHeader>
-        <S.BookInfoTitle backgroundColor={backgroundColor}>
+        <S.BookInfoTitle backgroundColor={bookBackgroundColor}>
           {title}
         </S.BookInfoTitle>
-        <S.BookInfoContent backgroundColor={backgroundColor}>
-          {content}
+        <S.BookInfoContent backgroundColor={bookBackgroundColor}>
+          {description}
         </S.BookInfoContent>
       </S.BookInfoWrapper>
     </S.BookInfoBoxWrapper>

src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts

@@ -13,12 +13,59 @@ export const LecueNoteListContainerWrapper = styled.div<{
         return theme.colors.BG;
     }
   }};
+
   flex: 1;
 `;
 
 export const LecueNoteListViewWrapper = styled.div`
   display: flex;
   justify-content: center;
+  position: relative;
 
   width: 100%;
 `;
+
+export const StickerButton = styled.button`
+  position: fixed;
+  right: 2.057rem;
+  bottom: 9.8rem;
+
+  width: 6.8rem;
+  height: 6.8rem;
+`;
+
+export const WriteButton = styled.button`
+  position: fixed;
+  right: 2.057rem;
+  bottom: 2rem;
+
+  width: 6.8rem;
+  height: 6.8rem;
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: fixed;
+  bottom: 2rem;
+
+  width: 92%;
+`;
+
+export const AlertBanner = styled.div`
+  display: flex;
+  gap: 0.4rem;
+  justify-content: center;
+
+  width: 90%;
+  padding: 1.1rem 2.35rem;
+  margin-bottom: 1rem;
+
+  border-radius: 0.6rem;
+  background: ${({ theme }) => theme.colors.white};
+  color: ${({ theme }) => theme.colors.key};
+
+  text-align: center;
+  ${({ theme }) => theme.fonts.Caption2_SB_12};
+`;

src/Detail/components/LecueNoteListContainer/index.tsx

@@ -1,33 +1,98 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { DraggableData, DraggableEvent } from 'react-draggable';
+import { useLocation, useNavigate } from 'react-router-dom';
 
+import {
+  BtnFloatingSticker,
+  BtnFloatingStickerOrange,
+  BtnFloatingWrite,
+  BtnFloatingWriteOrange,
+  IcCaution,
+} from '../../../assets';
+import Button from '../../../components/common/Button';
+import { NoteType, postedStickerType } from '../../type/lecueBookType';
 import LecueNoteListHeader from '../LecueNoteLIstHeader';
 import LinearView from '../LinearView';
 import ZigZagView from '../ZigZagView';
 import * as S from './LecueNoteListContainer.style';
 
-interface Note {
-  noteId: number;
-  renderType: number;
-  content: string;
-  noteDate: string;
-  noteNickname: string;
-  noteTextColor: number;
-  noteBackgroundColor: number;
-  noteBackgroundImage: string;
-}
-
 interface LecueNoteListContainerProps {
   noteNum: number;
   backgroundColor: number;
-  noteList: Note[];
+  noteList: NoteType[];
+  postedStickerList: postedStickerType[];
 }
 
 function LecueNoteListContainer({
   noteNum,
   backgroundColor,
   noteList,
+  postedStickerList,
 }: LecueNoteListContainerProps) {
+  //hooks
+  const location = useLocation();
+  const navigate = useNavigate();
+  //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: '',
+    positionX: 0,
+    positionY: savedScrollPosition,
+  });
+
+  const { state } = location;
+
+  useEffect(() => {
+    // editable 상태 변경
+    if (state) {
+      window.scrollTo(0, savedScrollPosition);
+      const { stickerId, stickerImage } = state.sticker;
+      setStickerState((prev) => ({
+        ...prev,
+        postedStickerId: stickerId,
+        stickerImage: stickerImage,
+      }));
+    } else {
+      // editable 상태 변경
+      setIsEditable(false);
+      navigate('/lecue-book');
+    }
+  }, [state]);
+
+  // 스티커 위치 값 저장
+  const handleDrag = (_e: DraggableEvent, ui: DraggableData) => {
+    const { positionX, positionY } = stickerState;
+    setStickerState((prev) => ({
+      ...prev,
+      positionX: positionX + ui.deltaX,
+      positionY: positionY + ui.deltaY,
+    }));
+  };
+
+  const handleClickStickerButton = () => {
+    sessionStorage.setItem('scrollPosition', window.scrollY.toString());
+
+    setIsEditable(true);
+
+    navigate('/sticker-pack');
+  };
+
+  const handleClickWriteButton = () => {
+    alert('WriteBtn');
+  };
+
+  const handleClickDone = () => {
+    setIsEditable(true);
+    sessionStorage.removeItem('scrollPosition');
+    navigate('/lecue-book');
+  };
+
   return (
     <S.LecueNoteListContainerWrapper backgroundColor={backgroundColor}>
       <LecueNoteListHeader
@@ -38,11 +103,50 @@ function LecueNoteListContainer({
       />
       <S.LecueNoteListViewWrapper>
         {isZigZagView ? (
-          <ZigZagView noteList={noteList} />
+          <ZigZagView
+            noteList={noteList}
+            isEditable={isEditable}
+            handleDrag={handleDrag}
+            stickerState={stickerState}
+            postedStickerList={postedStickerList}
+          />
         ) : (
           <LinearView noteList={noteList} />
         )}
       </S.LecueNoteListViewWrapper>
+
+      {!isEditable && (
+        <>
+          <S.StickerButton type="button" onClick={handleClickStickerButton}>
+            {backgroundColor === 0 ? (
+              <BtnFloatingSticker />
+            ) : (
+              <BtnFloatingStickerOrange />
+            )}
+          </S.StickerButton>
+          <S.WriteButton type="button" onClick={handleClickWriteButton}>
+            {backgroundColor === 0 ? (
+              <BtnFloatingWrite />
+            ) : (
+              <BtnFloatingWriteOrange />
+            )}
+          </S.WriteButton>
+        </>
+      )}
+
+      {isEditable && (
+        <>
+          <S.ButtonWrapper>
+            <S.AlertBanner>
+              <IcCaution />
+              스티커는 한 번 붙이면 수정/삭제할 수 없습니다
+            </S.AlertBanner>
+            <Button variant="choose" onClick={handleClickDone}>
+              부착 완료
+            </Button>
+          </S.ButtonWrapper>
+        </>
+      )}
     </S.LecueNoteListContainerWrapper>
   );
 }

src/Detail/components/LinearView/index.tsx

@@ -1,19 +1,9 @@
+import { NoteType } from '../../type/lecueBookType';
 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[];
+  noteList: NoteType[];
 }
 
 function LinearView({ noteList }: LinearViewProps) {

src/Detail/components/ZigZagView/ZigZagView.style.ts

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 export const ZigZagViewWrapper = styled.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
+  position: relative;
 
   width: 34.2rem;
   padding: 0.4rem 0 2rem;
@@ -12,3 +13,21 @@ export const LecueNoteContainer = styled.div`
   width: 100%;
   height: 20.6rem;
 `;
+
+export const StickerContainer = styled.div`
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+`;
+
+export const Sticker = styled.div<{ stickerImage: string }>`
+  background-image: ${({ stickerImage }) => `url(${stickerImage})`};
+
+  width: 10rem;
+  height: 10rem;
+  background-repeat: no-repeat;
+
+  background-position: center;
+  object-fit: cover;
+`;