From 8e5d30d6c6551e2784c075673132da09091761a7 Mon Sep 17 00:00:00 2001
From: eunbenn <ds5bean23@gmail.com>
Date: Thu, 18 Jan 2024 19:07:56 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20=EC=8A=A4=ED=8B=B0=EC=BB=A4=ED=8C=A9?=
 =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LecueNoteListContainer/index.tsx          | 25 +++++++++++++++++--
 src/StickerPack/page/StickerPack/index.tsx    | 21 +---------------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx
index 09705390..41dff5ed 100644
--- a/src/Detail/components/LecueNoteListContainer/index.tsx
+++ b/src/Detail/components/LecueNoteListContainer/index.tsx
@@ -8,6 +8,7 @@ import {
   BtnFloatingWrite,
   BtnFloatingWriteOrange,
 } from '../../../assets';
+import CommonModal from '../../../components/common/Modal/CommonModal';
 import usePostStickerState from '../../../StickerAttach/hooks/usePostStickerState';
 import { NoteType, postedStickerType } from '../../type/lecueBookType';
 import AlertBanner from '../AlretBanner';
@@ -52,6 +53,7 @@ function LecueNoteListContainer(props: LecueNoteListContainerProps) {
   //state
   const [fullHeight, setFullHeight] = useState<number | null>(null);
   const [heightFromBottom, setHeightFromBottom] = useState<number | null>(null);
+  const [modalOn, setModalOn] = useState<boolean>(false);
   const [isZigZagView, setIsZigZagView] = useState<boolean>(true);
   const [stickerState, setStickerState] = useState<postedStickerType>({
     postedStickerId: 0,
@@ -72,9 +74,20 @@ function LecueNoteListContainer(props: LecueNoteListContainerProps) {
   };
 
   const handleClickStickerButton = () => {
-    sessionStorage.setItem('scrollPosition', window.scrollY.toString());
+    if (
+      localStorage.getItem('token') &&
+      localStorage.getItem('token') !== null
+    ) {
+      sessionStorage.setItem('scrollPosition', window.scrollY.toString());
 
-    navigate('/sticker-pack', { state: { bookId: bookId } });
+      navigate('/sticker-pack', { state: { bookId: bookId } });
+    } else {
+      setModalOn(true);
+    }
+  };
+
+  const handleClickModalBtn = () => {
+    navigate(`/login`);
   };
 
   const handleClickWriteButton = () => {
@@ -177,6 +190,14 @@ function LecueNoteListContainer(props: LecueNoteListContainerProps) {
       )}
 
       {isEditable && <AlertBanner onClick={handleClickDone} />}
+
+      {modalOn && (
+        <CommonModal
+          category="login"
+          setModalOn={setModalOn}
+          handleFn={handleClickModalBtn}
+        />
+      )}
     </S.LecueNoteListContainerWrapper>
   );
 }
diff --git a/src/StickerPack/page/StickerPack/index.tsx b/src/StickerPack/page/StickerPack/index.tsx
index aeebcc35..a0b4c859 100644
--- a/src/StickerPack/page/StickerPack/index.tsx
+++ b/src/StickerPack/page/StickerPack/index.tsx
@@ -1,11 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 // component
 import Button from '../../../components/common/Button/index.tsx';
 import Header from '../../../components/common/Header/index.tsx';
 import LoadingPage from '../../../components/common/LoadingPage/index.tsx';
-import CommonModal from '../../../components/common/Modal/CommonModal.tsx';
 import StickerList from '../../components/StickerList/index.tsx';
 import useGetBookUuid from '../../hooks/useGetBookUuid.ts';
 import useGetStickerPack from '../../hooks/useGetStickerPack.ts';
@@ -17,16 +16,9 @@ import * as S from './StickerPack.style.ts';
 function StickerPack() {
   const navigate = useNavigate();
   const location = useLocation();
-  const [modalOn, setModalOn] = useState(false);
 
   const { bookId } = location.state;
 
-  useEffect(() => {
-    if (!localStorage.getItem('token')) {
-      setModalOn(true);
-    }
-  }, []);
-
   const [selectedStickerData, setSelectedStickerData] = useState<stickerType>({
     stickerId: 0,
     stickerImage: '',
@@ -49,10 +41,6 @@ function StickerPack() {
     });
   };
 
-  const handleClickModalBtn = () => {
-    navigate(`/login`);
-  };
-
   return isLoading ? (
     <LoadingPage />
   ) : (
@@ -74,13 +62,6 @@ function StickerPack() {
           선택 완료
         </Button>
       </S.ButtonWrapper>
-      {modalOn && (
-        <CommonModal
-          category="login"
-          setModalOn={setModalOn}
-          handleFn={handleClickModalBtn}
-        />
-      )}
     </S.Wrapper>
   );
 }