Fix : QA 이슈 해결

package.json

@@ -26,6 +26,7 @@
     "next": "13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-intersection-observer": "^9.5.2",
     "react-lottie-player": "^1.5.4",
     "react-tooltip": "^5.20.0",
     "recoil": "^0.7.7",

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
@@ -19,12 +20,15 @@ export default function Tab() {
         <div key={item.path}>
           {item.path === path ? (
             <>
-              <div className="py-12">
+              <div className="relative py-12">
                 <h5 id="subtitle-1" className="text-brand">
                   {item.title}
                 </h5>
+                <motion.div
+                  layoutId="underline"
+                  className="absolute bottom-0 left-0 w-full border-b-2 border-main-violet"
+                />
               </div>
-              <div className="relative border-b-2 border-b-main-violet" />
             </>
           ) : (
             <Link className="py-12 text-tertiary" href={item.path} as={item.path}>

src/app/(Main)/feed/FeedSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useCallback } from 'react';
+import { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
 
 import EmptyCase from './components/EmptyCase';
 import FilterSheet from './components/FilterSheet';
@@ -10,19 +11,16 @@ import { usePoseFeedQuery } from '@/apis';
 import { Spacing } from '@/components/Spacing';
 import { URL } from '@/constants/url';
 import useFilterState from '@/hooks/useFilterState';
-import useIntersect from '@/hooks/useObserver';
 
 export default function FeedSection() {
   const { filterState } = useFilterState();
-  const { data, fetchNextPage, hasNextPage, isLoading } = usePoseFeedQuery(filterState);
+  const { data, fetchNextPage } = usePoseFeedQuery(filterState);
 
-  const onIntersect = useCallback(async () => {
-    if (hasNextPage && !isLoading) {
-      await fetchNextPage();
-    }
-  }, [fetchNextPage, hasNextPage, isLoading]);
+  const { ref, inView } = useInView();
 
-  const target = useIntersect(onIntersect);
+  useEffect(() => {
+    if (inView) fetchNextPage();
+  }, [inView, fetchNextPage]);
 
   return (
     <>
@@ -54,7 +52,7 @@ export default function FeedSection() {
             ))}
           </div>
         )}
-        <div ref={target} />
+        <div ref={ref} />
       </div>
       <FilterSheet />
     </>

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

@@ -16,9 +16,10 @@ import { peopleCountList } from '@/constants/filterList';
 import useLoading from '@/hooks/useLoading';
 
 export default function PickSection() {
-  const [countState, setCountState] = useState<number>(1);
+  const [countState, setCountState] = useState(1);
   const { open } = useOverlay();
   const { isLoading, startLoading } = useLoading({ loadingDelay: 1000 });
+  const [isButtonAcitve, setIsButtonActive] = useState(false);
   const [image, setImage] = useState<string>('');
   const { refetch } = usePosePickQuery(countState, {
     onSuccess: (data) => {
@@ -31,13 +32,22 @@ export default function PickSection() {
     refetch();
   };
 
+  const handleChangeState = () => {
+    setIsButtonActive(true);
+    const a = setTimeout(() => {
+      setIsButtonActive(false);
+    }, 1000);
+    return () => clearTimeout(a);
+  };
+
   return (
     <>
       <div className="py-16">
         <SelectionBasic
           data={peopleCountList.slice(1)}
           state={countState}
           setState={setCountState}
+          onChangeState={handleChangeState}
         />
       </div>
       <div className="relative flex flex-1">
@@ -62,8 +72,9 @@ export default function PickSection() {
         className="bg-main-violet text-white"
         onClick={handlePickClick}
         disabled={isLoading}
+        isActive={isButtonAcitve}
       >
-        {!!image ? '포즈 뽑기' : '인원수 선택하고 포즈 뽑기'}
+        {!!image ? `${countState}인 포즈 뽑기` : '인원수 선택하고 포즈 뽑기'}
       </BottomFixedButton>
     </>
   );

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

@@ -38,6 +38,7 @@ export default function TitleSection() {
         closeOnEsc
         openOnClick
         isOpen={isOpen}
+        className="z-tooltip"
         render={() => (
           <div
             className="flex cursor-pointer"

src/components/Button/Button.tsx

@@ -1,25 +1,43 @@
 'use client';
 import { type HTMLMotionProps, motion } from 'framer-motion';
 
+import cn from '@/utils/cn';
+
 import type { StrictPropsWithChildren } from '@/types';
 
 export interface ButtonProps extends HTMLMotionProps<'button'> {
   className?: string;
   type?: 'button' | 'submit';
+  isActive?: boolean;
 }
 
+const variants = {
+  active: {
+    scale: [1.1, 1],
+  },
+  inactive: {
+    scale: 1,
+  },
+};
+
 export default function Button({
   children,
   className,
   type = 'button',
+  isActive,
   ...props
 }: StrictPropsWithChildren<ButtonProps>) {
   return (
     <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}`}
+      className={cn(
+        'flex h-60 w-full items-center justify-center rounded-xl py-14 text-center text-16',
+        className
+      )}
       type={type}
+      animate={isActive ? 'active' : 'inactive'}
+      variants={variants}
       {...props}
     >
       <h5>{children}</h5>

src/components/Selection/SelectionBasic.tsx

@@ -2,28 +2,28 @@ interface SelectionBasic {
   data: Array<{ text: string; value: number }>;
   state: number;
   setState: React.Dispatch<React.SetStateAction<number>>;
+  onChangeState?: () => void;
 }
 
-export default function SelectionBasic({ data, state, setState }: SelectionBasic) {
+export default function SelectionBasic({ data, state, setState, onChangeState }: SelectionBasic) {
   return (
     <div className="flex justify-evenly rounded-8">
       {data.map((item) => (
-        <div
+        <span
           key={item.text}
+          id="subtitle-2"
           className={`flex h-40 grow cursor-pointer items-center justify-center first:rounded-l-8 last:rounded-r-8 ${
             state === item.value
-              ? 'border-1 border-main-violet bg-main-violet-bright'
-              : 'border-1 border-border-default bg-sub-white'
+              ? 'border-1 border-main-violet bg-main-violet-bright text-main-violet-dark'
+              : 'border-1 border-border-default bg-sub-white text-secondary'
           }`}
-          onClick={() => setState(item.value)}
+          onClick={() => {
+            setState(item.value);
+            onChangeState && onChangeState();
+          }}
         >
-          <div
-            id="subtitle-2"
-            className={state === item.value ? 'text-main-violet-dark' : 'text-secondary'}
-          >
-            {item.text}
-          </div>
-        </div>
+          {item.text}
+        </span>
       ))}
     </div>
   );

tailwind.config.js

@@ -16,6 +16,7 @@ module.exports = {
       },
       zIndex: {
         modal: 1000,
+        tooltip: 500,
       },
     },
     fontWeight: {

yarn.lock

@@ -4092,6 +4092,11 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-intersection-observer@^9.5.2:
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.5.2.tgz#f68363a1ff292323c0808201b58134307a1626d0"
+  integrity sha512-EmoV66/yvksJcGa1rdW0nDNc4I1RifDWkT50gXSFnPLYQ4xUptuDD4V7k+Rj1OgVAlww628KLGcxPXFlOkkU/Q==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"