chore: 스티커팩 모달 위치 변경

Team-Lecue · Jan 18, 2024 · 8e5d30d · 8e5d30d
1 parent e6c1749
commit 8e5d30d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git 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
@@ -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>
   );
 }