온보딩 페이지 QA에 대응한다. (SWYP-team-2th#197)

* 온보딩 QA

* pagenation dot color 변경

* Loading 동적 클래스 적용

* Loading 지역 상태 -> mutation isPending 값으로 변경

src/components/common/Loading/Loading.tsx

@@ -13,7 +13,7 @@ export default function Loading({
       )}
       {...props}
     >
-      <img src={Spinner} alt="loading" className="w-10 h-10" />
+      <img src={Spinner} alt="loading" className={cn('w-10 h-10', className)} />
     </div>
   );
 }

src/index.css

@@ -12,6 +12,10 @@
   display: none;
 }
 
+.swiper-pagination-bullet-active {
+  background-color: #000;
+}
+
 @theme {
   --color-primary-900: #b36700;
   --color-primary-800: #c97800;

src/pages/Login/OAuthPage.tsx

@@ -1,12 +1,14 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import usePostKakaoLogin from '@/api/usePostKaKaoLogin';
+import Loading from '@/components/common/Loading';
 import { setAccessToken, setRole } from '@/components/login/Auth/token';
 
 export default function OAuthPage() {
   const state = new URL(window.location.href).searchParams.get('state');
   const navigate = useNavigate();
-  const { mutate } = usePostKakaoLogin({
+
+  const { mutate, isPending } = usePostKakaoLogin({
     onSuccess: (data) => {
       setRole(data.role);
       setAccessToken(data.accessToken);
@@ -25,5 +27,13 @@ export default function OAuthPage() {
     }
   }, []);
 
-  return <div>로그인 진행중임다.</div>;
+  if (isPending) {
+    return (
+      <div className="flex items-center justify-center fixed inset-0">
+        <Loading className="w-30 h-30" />
+      </div>
+    );
+  }
+
+  return null;
 }

src/pages/OnBoarding/OnBoardingPage.tsx

@@ -18,14 +18,14 @@ export default function OnBoardingPage() {
           {onBoardingSlides.map((slide) => (
             <SwiperSlide key={slide.id}>
               <div className="h-full flex flex-col items-center text-center">
-                <span className="text-h1 whitespace-pre-line mt-[80px] mb-[8px]">
+                <span className="text-h1 whitespace-pre-line mt-[120px] mb-[12px]">
                   {slide.title}
                 </span>
 
-                <span className="text-title-small whitespace-pre-line mb-[32px]">
+                <span className="text-title-small whitespace-pre-line mb-[18px]">
                   {slide.subtitle}
                 </span>
-                <img src={slide.image} className="w-[310px] mb-10" />
+                <img src={slide.image} />
               </div>
             </SwiperSlide>
           ))}

src/pages/my/MyPage.tsx

@@ -32,7 +32,7 @@ export default function MyPage() {
         }
       />
       <div className="pt-[105px] px-6 w-full h-full flex flex-col gap-[30px] flex-1 min-h-0">
-        <Suspense fallback={<Loading className="h-[100px]" />}>
+        <Suspense fallback={<Loading />}>
           <Profile />
         </Suspense>
         <Button