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

[ StickerAttach ] DEV로 가거라!
Team-Lecue · Jan 18, 2024 · 9cc308c · 9cc308c
2 parents c912eca + 89f285b
commit 9cc308c
Show file tree

Hide file tree

Showing 18 changed files with 185 additions and 127 deletions.
diff --git a/src/Detail/api/getBookDetail.ts b/src/Detail/api/getBookDetail.ts
@@ -1,14 +1,11 @@
 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',
-      },
+export async function getBookDetail(bookUuid: string) {
+  const data = await api.get(`/api/books/detail/${bookUuid}`, {
+    headers: {
+      'Content-Type': 'application/json',
     },
-  );
+  });
 
   return data.data.data;
 }
diff --git a/src/Detail/components/LecueNoteListContainer/AlretBanner/AlertBanner.style.ts b/src/Detail/components/LecueNoteListContainer/AlretBanner/AlertBanner.style.ts
@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+
+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};
+`;
diff --git a/src/Detail/components/LecueNoteListContainer/AlretBanner/index.tsx b/src/Detail/components/LecueNoteListContainer/AlretBanner/index.tsx
@@ -0,0 +1,23 @@
+import { IcCaution } from '../../../../assets';
+import Button from '../../../../components/common/Button';
+import * as S from './AlertBanner.style';
+
+interface AlertBannerProps {
+  onClick: () => void;
+}
+
+function AlertBanner({ onClick }: AlertBannerProps) {
+  return (
+    <S.ButtonWrapper>
+      <S.AlertBanner>
+        <IcCaution />
+        스티커는 한 번 붙이면 수정/삭제할 수 없습니다
+      </S.AlertBanner>
+      <Button variant="choose" onClick={onClick}>
+        부착 완료
+      </Button>
+    </S.ButtonWrapper>
+  );
+}
+
+export default AlertBanner;
diff --git a/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts b/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts
@@ -40,30 +40,3 @@ export const WriteButton = styled.button`
   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};
-`;
diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx
@@ -7,15 +7,14 @@ import {
   BtnFloatingStickerOrange,
   BtnFloatingWrite,
   BtnFloatingWriteOrange,
-  IcCaution,
 } from '../../../assets';
-import Button from '../../../components/common/Button';
 import usePostStickerState from '../../../StickerAttach/hooks/usePostStickerState';
 import { NoteType, postedStickerType } from '../../type/lecueBookType';
 import EmptyView from '../EmptyView';
 import LecueNoteListHeader from '../LecueNoteLIstHeader';
 import LinearView from '../LinearView';
 import ZigZagView from '../ZigZagView';
+import AlertBanner from './AlretBanner';
 import * as S from './LecueNoteListContainer.style';
 
 interface LecueNoteListContainerProps {
@@ -25,53 +24,43 @@ interface LecueNoteListContainerProps {
   postedStickerList: postedStickerType[];
   isEditable: boolean;
   setEditableStateFalse: () => void;
+  bookUuid: string;
+  bookId: number;
 }
 
-function LecueNoteListContainer({
-  noteNum,
-  backgroundColor,
-  noteList,
-  postedStickerList,
-  isEditable,
-  setEditableStateFalse,
-}: LecueNoteListContainerProps) {
+function LecueNoteListContainer(props: LecueNoteListContainerProps) {
+  const {
+    noteNum,
+    backgroundColor,
+    noteList,
+    postedStickerList,
+    isEditable,
+    setEditableStateFalse,
+    bookUuid,
+    bookId,
+  } = props;
   //hooks
   const location = useLocation();
   const navigate = useNavigate();
-  const scrollRef = useRef(document.createElement('div'));
+  const scrollRef = useRef<HTMLDivElement>(null);
+
   //storage
   const storedValue = sessionStorage.getItem('scrollPosition');
   const savedScrollPosition =
     storedValue !== null ? parseInt(storedValue, 10) : 0;
+
   //state
+  const [fullHeight, setFullHeight] = useState<number | null>(null);
+  const [heightFromBottom, setHeightFromBottom] = useState<number | null>(null);
   const [isZigZagView, setIsZigZagView] = useState<boolean>(true);
   const [stickerState, setStickerState] = useState<postedStickerType>({
     postedStickerId: 0,
     stickerImage: '',
     positionX: 0,
     positionY: savedScrollPosition,
   });
-
   const { state } = location;
 
-  const postMutation = usePostStickerState();
-
-  useEffect(() => {
-    // state : 라우터 타고 온 스티커 값, 즉 스티커 값을 갖고 있는 상태라면
-    if (state) {
-      window.scrollTo(0, savedScrollPosition);
-      const { stickerId, stickerImage } = state.sticker;
-      setStickerState((prev) => ({
-        ...prev,
-        postedStickerId: stickerId,
-        stickerImage: stickerImage,
-      }));
-    } else {
-      // editable 상태 변경
-      setEditableStateFalse();
-    }
-  }, [state, isEditable]);
-
   // 스티커 위치 값 저장
   const handleDrag = (_e: DraggableEvent, ui: DraggableData) => {
     const { positionX, positionY } = stickerState;
@@ -82,9 +71,7 @@ function LecueNoteListContainer({
     }));
   };
 
-  // 스티커 버튼 클릭시
   const handleClickStickerButton = () => {
-    // 현재 스크롤 위치 저장
     sessionStorage.setItem('scrollPosition', window.scrollY.toString());
 
     navigate('/sticker-pack');
@@ -94,17 +81,48 @@ function LecueNoteListContainer({
     navigate('/create-note');
   };
 
+  useEffect(() => {
+    if (scrollRef.current) {
+      if (scrollRef.current.offsetHeight) {
+        setFullHeight(scrollRef.current.offsetHeight);
+      }
+
+      if (fullHeight !== null) {
+        setHeightFromBottom(fullHeight - stickerState.positionY);
+      }
+    }
+  }, [fullHeight, stickerState.positionY]);
+
+  useEffect(() => {
+    // state : 라우터 타고 온 스티커 값
+    if (state) {
+      window.scrollTo(0, savedScrollPosition);
+      const { stickerId, stickerImage } = state.sticker;
+      setStickerState((prev) => ({
+        ...prev,
+        postedStickerId: stickerId,
+        stickerImage: stickerImage,
+      }));
+    } else {
+      // editable 상태 변경
+      setEditableStateFalse();
+    }
+  }, [state, isEditable]);
+
+  const postMutation = usePostStickerState(bookUuid);
+
   const handleClickDone = () => {
     // 다 붙였을 때 post 실행
-    const { postedStickerId, positionX, positionY } = stickerState;
-    const bookId = 1;
-
-    postMutation.mutate({
-      postedStickerId: postedStickerId,
-      bookId: bookId,
-      positionX: positionX,
-      positionY: positionY,
-    });
+    const { postedStickerId, positionX } = stickerState;
+
+    if (heightFromBottom !== null) {
+      postMutation.mutate({
+        postedStickerId: postedStickerId,
+        bookId: bookId,
+        positionX: positionX,
+        positionY: heightFromBottom,
+      });
+    }
 
     setEditableStateFalse();
   };
@@ -125,6 +143,7 @@ function LecueNoteListContainer({
           <EmptyView />
         ) : isZigZagView ? (
           <ZigZagView
+            fullHeight={fullHeight}
             savedScrollPosition={savedScrollPosition}
             noteList={noteList}
             isEditable={isEditable}
@@ -155,19 +174,7 @@ function LecueNoteListContainer({
         </>
       )}
 
-      {isEditable && (
-        <>
-          <S.ButtonWrapper>
-            <S.AlertBanner>
-              <IcCaution />
-              스티커는 한 번 붙이면 수정/삭제할 수 없습니다
-            </S.AlertBanner>
-            <Button variant="choose" onClick={handleClickDone}>
-              부착 완료
-            </Button>
-          </S.ButtonWrapper>
-        </>
-      )}
+      {isEditable && <AlertBanner onClick={handleClickDone} />}
     </S.LecueNoteListContainerWrapper>
   );
 }

diff --git a/src/Detail/components/LecueNoteModal/LecueNoteModal.style.ts b/src/Detail/components/LecueNoteModal/LecueNoteModal.style.ts
@@ -6,8 +6,7 @@ export const BlurryContainer = styled.div`
   align-items: center;
   position: fixed;
   top: 0;
-  left: 0;
-  z-index: 9999;
+  z-index: 10;
 
   width: 100vw;
   height: 100vh;
@@ -27,7 +26,7 @@ export const LecueNoteModalWrapper = styled.div<{
 
   border-radius: 0.4rem;
   ${({ noteBackground }) => {
-    if (noteBackground.substring(0, 1) === '#') {
+    if (noteBackground?.substring(0, 1) === '#') {
       return `background-color: ${noteBackground}`;
     } else {
       return `background: url(${noteBackground})`;

diff --git a/src/Detail/components/ZigZagView/ZigZagView.style.ts b/src/Detail/components/ZigZagView/ZigZagView.style.ts
@@ -14,16 +14,6 @@ export const LecueNoteContainer = styled.div`
   height: 20.6rem;
 `;
 
-export const StickerContainer = styled.div`
-  position: absolute;
-
-  width: 34.2rem;
-  height: 100%;
-  padding: 0.4rem 0 2rem;
-
-  background: none;
-`;
-
 export const Sticker = styled.div<{
   stickerImage: string;
   isEditable?: boolean;

diff --git a/src/Detail/components/ZigZagView/index.tsx b/src/Detail/components/ZigZagView/index.tsx
@@ -12,6 +12,7 @@ interface ZigZagViewProps {
   isEditable: boolean;
   postedStickerList: postedStickerType[];
   savedScrollPosition: number;
+  fullHeight: number | null;
 }
 
 const ZigZagView = forwardRef(function ZigZagView(
@@ -22,6 +23,7 @@ const ZigZagView = forwardRef(function ZigZagView(
     isEditable,
     postedStickerList,
     savedScrollPosition,
+    fullHeight,
   }: ZigZagViewProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
@@ -34,7 +36,6 @@ const ZigZagView = forwardRef(function ZigZagView(
           <SmallLecueNote {...note} noteList={noteList} />
         </S.LecueNoteContainer>
       ))}
-      {/* <S.StickerContainer ref={ref}> */}
       {isEditable && (
         <Draggable
           defaultPosition={{
@@ -52,17 +53,22 @@ const ZigZagView = forwardRef(function ZigZagView(
           />
         </Draggable>
       )}
-      {postedStickerList.map((data) => (
-        <Draggable
-          onStart={() => false}
-          nodeRef={nodeRef}
-          key={data.postedStickerId}
-          defaultPosition={{ x: data.positionX, y: data.positionY }}
-        >
-          <S.Sticker ref={nodeRef} stickerImage={data.stickerImage} />
-        </Draggable>
-      ))}
-      {/* </S.StickerContainer> */}
+      {postedStickerList.map(
+        (data) =>
+          fullHeight !== null && (
+            <Draggable
+              onStart={() => false}
+              nodeRef={nodeRef}
+              key={data.postedStickerId}
+              defaultPosition={{
+                x: data.positionX,
+                y: fullHeight - data.positionY,
+              }}
+            >
+              <S.Sticker ref={nodeRef} stickerImage={data.stickerImage} />
+            </Draggable>
+          ),
+      )}
     </S.ZigZagViewWrapper>
   );
 });

diff --git a/src/Detail/hooks/useGetBookDetail.ts b/src/Detail/hooks/useGetBookDetail.ts
@@ -2,10 +2,10 @@ import { useQuery } from 'react-query';
 
 import { getBookDetail } from '../api/getBookDetail';
 
-export default function useGetBookDetail() {
+export default function useGetBookDetail(bookUuid: string) {
   const { data: bookDetail } = useQuery(
-    ['useGetBookDetail'],
-    () => getBookDetail(),
+    ['useGetBookDetail', bookUuid],
+    () => getBookDetail(bookUuid),
     {
       onError: () => {
         console.error;