Fix : QA 내용 반영하여 수정

.github/auto_assign.yml

@@ -1,8 +1,2 @@
-addReviewers: true
-addAssignees: true
-reviewers:
-  - guesung
-  - seondal
-skipKeywords:
-  - wip
-numberOfReviewers: 0
+addReviewers: false
+addAssignees: author

src/apis/apis.ts

@@ -1,4 +1,10 @@
-import { FilterTagsResponse, PoseFeedResponse, PosePickResponse, PoseTalkResponse } from '.';
+import {
+  FilterTagsResponse,
+  PoseDetailResponse,
+  PoseFeedResponse,
+  PosePickResponse,
+  PoseTalkResponse,
+} from '.';
 import publicApi from './config/publicApi';
 
 export const getPosePick = (peopleCount: number) =>

src/apis/queries.ts

@@ -1,6 +1,5 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query';
 
-import { FilterState } from '@/hooks/useFilterState';
 import {
   FilterTagsResponse,
   PoseFeedResponse,
@@ -12,6 +11,7 @@ import {
   getPosePick,
   getPoseTalk,
 } from '.';
+import { FilterState } from '@/hooks/useFilterState';
 
 export const usePoseDetailQuery = (poseId: number) =>
   useQuery(['poseId', poseId], () => getPoseDetail(poseId));

src/app/(Main)/components/Tab.tsx

@@ -27,7 +27,7 @@ export default function Tab() {
               <div className="relative border-b-2 border-b-main-violet" />
             </>
           ) : (
-            <Link className="py-12" href={item.path} as={item.path}>
+            <Link className="py-12 text-tertiary" href={item.path} as={item.path}>
               <h5>{item.title}</h5>
             </Link>
           )}

src/app/(Main)/layout.tsx

@@ -5,7 +5,7 @@ import { StrictPropsWithChildren } from '@/types';
 export default function MainLayout({ children }: StrictPropsWithChildren) {
   return (
     <>
-      <Spacing size={104} />
+      <Spacing size={80} />
       <MainHeader />
       <div className="px-20 py-16">{children}</div>
     </>

src/app/(Main)/pick/components/PickSection.tsx

@@ -29,7 +29,7 @@ export default function PickSection() {
   };
 
   return (
-    <section className="flex flex-col px-20">
+    <section className="flex flex-col">
       <div className="flex justify-evenly rounded-8 py-16">
         {countList.map((count) => (
           <CountItem
@@ -48,7 +48,7 @@ export default function PickSection() {
           <Lottie loop animationData={lottiePick} play style={{ width: '100%', height: '100%' }} />
         )}
         <Image
-          src={image || '/images/sample.png'}
+          src={image || '/images/image-frame.png'}
           fill
           alt="sample"
           priority
@@ -57,7 +57,11 @@ export default function PickSection() {
         />
       </div>
 
-      <BottomFixedButton className="bg-main-violet text-white" onClick={handlePickClick}>
+      <BottomFixedButton
+        className="bg-main-violet text-white"
+        onClick={handlePickClick}
+        disabled={isLoading}
+      >
         {!!image ? '포즈 pick!' : '인원수 선택하고 포즈 pick!'}
       </BottomFixedButton>
     </section>

src/app/(Main)/talk/components/TalkSection.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import Image from 'next/image';
 import { useRef, useState } from 'react';
 import Lottie from 'react-lottie-player';
 
@@ -13,6 +12,7 @@ import useLoading from '@/hooks/useLoading';
 export default function TalkSection() {
   const { isLoading: isFirstLoading, stopLoading: stopFirstLoading } = useLoading({
     loadingDelay: 3000,
+    isFirstLoadingInfinite: true,
   });
   const ref = useRef(null);
 
@@ -21,13 +21,14 @@ export default function TalkSection() {
   const { isLoading, startLoading } = useLoading({
     loadingDelay: 3000,
     onStopLoading: () => data && setTalkWord(data.poseWord.content),
+    initialState: false,
   });
   const [talkWord, setTalkWord] = useState<string>('포즈로 말해요');
 
   const handleTalkClick = () => {
-    refetch();
-    stopFirstLoading();
+    if (isFirstLoading) stopFirstLoading();
     startLoading();
+    refetch();
   };
 
   return (
@@ -41,7 +42,6 @@ export default function TalkSection() {
           play
           style={{ width: '100%', height: '100%' }}
           ref={ref}
-          onComplete={() => console.log('complete')}
         />
       )}
       {isLoading && !isFirstLoading && (
@@ -61,7 +61,11 @@ export default function TalkSection() {
           speed={0}
         />
       )}
-      <BottomFixedButton className="bg-main-violet text-white" onClick={handleTalkClick}>
+      <BottomFixedButton
+        className="bg-main-violet text-white"
+        onClick={handleTalkClick}
+        disabled={isLoading}
+      >
         제시어 뽑기
       </BottomFixedButton>
     </section>

src/app/(Main)/talk/components/TitleSection.tsx

@@ -1,29 +1,67 @@
 'use client';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Tooltip } from 'react-tooltip';
 
 import { Spacing } from '@/components/Spacing';
 
 export default function TitleSection() {
-  const [tooltipOpened, setTooltipOpened] = useState<boolean>(false);
-  console.log(tooltipOpened);
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+  useEffect(() => {
+    if (localStorage.getItem('tooltipIsOpen') === 'false') setIsOpen(false);
+  }, []);
 
   return (
     <section className="flex flex-col items-center">
       <div className="flex items-center">
         <h3 className="text-main-violet">뽑은 제시어</h3>
         <a
           data-tooltip-id="my-tooltip"
-          data-tooltip-content={`제시어에 맞춰 포즈를 취해 보세요!\n독특한 나만의 포즈가 완성된답니다.`}
           data-tooltip-place="top"
-          onMouseEnter={() => setTooltipOpened(true)}
           style={{ cursor: 'pointer' }}
+          onClick={() => {
+            if (isOpen) {
+              localStorage.setItem('tooltipIsOpen', 'false');
+              setIsOpen(false);
+            } else {
+              localStorage.setItem('tooltipIsOpen', 'true');
+              setIsOpen(true);
+            }
+          }}
         >
           <Image src="/icons/info.svg" width={24} height={24} alt="info" />
         </a>
       </div>
-      <Tooltip id="my-tooltip" style={{ fontSize: '1rem', fontWeight: 400 }} />
+      <Tooltip
+        id="my-tooltip"
+        style={{ fontSize: '1rem', fontWeight: 400 }}
+        closeOnEsc
+        openOnClick
+        isOpen={isOpen}
+        render={() => (
+          <div
+            className="flex cursor-pointer"
+            onClick={() => {
+              localStorage.setItem('tooltipIsOpen', 'false');
+              setIsOpen(false);
+            }}
+          >
+            <div>
+              <p>제시어에 맞춰 포즈를 취해 보세요!</p>
+              <p>독특한 나만의 포즈가 완성된답니다.</p>
+            </div>
+            <Spacing size={8} direction="horizontal" />
+            <Image
+              src="/icons/close_white.svg"
+              width={20}
+              height={20}
+              alt="close"
+              className="mb-auto"
+            />
+          </div>
+        )}
+        clickable
+      />
       <Spacing size={8} />
     </section>
   );

src/app/(Main)/talk/page.tsx

@@ -5,7 +5,7 @@ import { Spacing } from '@/components/Spacing';
 export default function Talk() {
   return (
     <div>
-      <Spacing size={30} />
+      <Spacing size={64} />
       <TitleSection />
       <TalkSection />
     </div>

src/app/(Sub)/bookmark/components/BookmarkHeader.tsx

@@ -0,0 +1,17 @@
+import Image from 'next/image';
+
+import { Header } from '@/components/Header';
+import { Spacing } from '@/components/Spacing';
+
+export default function BookmarkHeader() {
+  const LeftNode = (
+    <div className="flex">
+      <Image src="/icons/arrow_back.svg" width={24} height={24} alt="back" />
+      <Spacing size={12} direction="horizontal" />
+      <h4>북마크</h4>
+    </div>
+  );
+  const RightNode = <Image src="/icons/menu.svg" width={24} height={24} alt="back" />;
+
+  return <Header leftNode={LeftNode} rightNode={RightNode} />;
+}

src/app/layout.tsx

@@ -51,7 +51,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="ko">
       <body className="flex min-h-[100vh] w-screen touch-none justify-center bg-slate-100 py-px">
         <RecoilContextProvider>
-          <div className="w-full max-w-440 bg-white text-primary drop-shadow-2xl">
+          <div className="w-full max-w-440 bg-white text-primary">
             <QueryProvider>
               <OverlayProvider>{children}</OverlayProvider>
             </QueryProvider>

src/components/Button/BottomFixedButton.tsx

@@ -1,7 +1,12 @@
 import Button, { type ButtonProps } from './Button';
 import BottomFixedDiv from '../BottomFixedDiv';
 
-export default function BottomFixedButton({ children, ...props }: ButtonProps) {
+import type { StrictPropsWithChildren } from '@/types';
+
+export default function BottomFixedButton({
+  children,
+  ...props
+}: StrictPropsWithChildren<ButtonProps>) {
   return (
     <BottomFixedDiv>
       <Button {...props}>{children}</Button>

src/components/Button/Button.tsx

@@ -1,8 +1,9 @@
-import { StrictPropsWithChildren } from '@/types';
+'use client';
+import { type HTMLMotionProps, motion } from 'framer-motion';
 
-import type { ButtonHTMLAttributes } from 'react';
+import type { StrictPropsWithChildren } from '@/types';
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends HTMLMotionProps<'button'> {
   className?: string;
   type?: 'button' | 'submit';
 }
@@ -14,12 +15,14 @@ export default function Button({
   ...props
 }: StrictPropsWithChildren<ButtonProps>) {
   return (
-    <button
+    <motion.button
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.9 }}
       className={`flex h-60 w-full items-center justify-center rounded-xl py-14 text-center text-16 ${className}`}
       type={type}
       {...props}
     >
       <h5>{children}</h5>
-    </button>
+    </motion.button>
   );
 }

src/components/Header/Header.tsx

@@ -16,7 +16,7 @@ export default function Header({
   ...props
 }: HeaderProps) {
   return (
-    <div className="fixed inset-x-0 top-0 z-10 bg-white pt-8">
+    <div className="fixed inset-x-0 top-0 z-10 mx-auto max-w-440 bg-white pt-8">
       <header
         className={`flex h-48 items-center justify-between ${className ? className : ''}`}
         {...props}

src/components/Modal/PortalWrapper.tsx

@@ -1,7 +1,6 @@
 'use client';
 import clsx from 'clsx';
 import { useRef } from 'react';
-import { twMerge } from 'tailwind-merge';
 
 import { AnimatedPortal } from '../Portal';
 import { useOnClickOutside } from '@/hooks/useOnClickOutside';
@@ -30,7 +29,7 @@ export default function PortalWrapper({
     >
       <div
         className={clsx(
-          'fixed left-1/2 top-0 z-10 h-full w-full max-w-440 -translate-x-1/2',
+          'fixed left-1/2 top-0 z-10 flex h-full w-full max-w-440 -translate-x-1/2 items-center justify-center',
           {
             'bg-neutral-900 bg-opacity-90': isBackGroundBlur,
           },

src/components/Spacing/Spacing.tsx

@@ -14,7 +14,7 @@ export default memo(function Spacing({
 }: SpacingProps) {
   return (
     <div
-      className={`flex-none bg-white ${className}`}
+      className={`flex-none ${className}`}
       style={{
         [direction === 'vertical' ? 'height' : 'width']: size + 'px',
       }}

src/hooks/useLoading.ts

@@ -1,39 +1,42 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import useIsMounted from './useIsMounted';
 
 interface UseLoadingProps {
   initialState?: boolean;
   loadingDelay?: number;
   onStopLoading?: () => void;
+  isFirstLoadingInfinite?: boolean;
 }
 export default function useLoading({
   initialState = true,
   loadingDelay,
   onStopLoading,
+  isFirstLoadingInfinite = false,
 }: UseLoadingProps = {}) {
-  const [isLoading, setIsLoading] = useState(initialState ?? false);
+  const [isLoading, setIsLoading] = useState(initialState);
   const isMounted = useIsMounted();
 
   const stopLoading = useCallback(() => {
     setIsLoading(false);
-  }, []);
+    if (onStopLoading) {
+      onStopLoading();
+    }
+  }, [onStopLoading]);
 
   const startLoading = useCallback(() => {
     setIsLoading(true);
-    setTimeout(() => {
-      stopLoading();
-    }, loadingDelay);
+    if (loadingDelay) {
+      setTimeout(stopLoading, loadingDelay);
+    }
   }, [loadingDelay, stopLoading]);
 
-  if (isMounted) {
-    if (loadingDelay) {
-      setTimeout(() => {
-        stopLoading();
-        onStopLoading && onStopLoading();
-      }, loadingDelay);
+  useEffect(() => {
+    if (isMounted && !isFirstLoadingInfinite && loadingDelay) {
+      const timer = setTimeout(stopLoading, loadingDelay);
+      return () => clearTimeout(timer);
     }
-  }
+  }, [isMounted, isFirstLoadingInfinite, loadingDelay, stopLoading]);
 
   return { isLoading, stopLoading, startLoading };
 }