feat : kakao login feature 추가 & video-check page & logout button 추가

package.json

@@ -17,8 +17,10 @@
     "@tanstack/react-query": "^5.84.1",
     "@tanstack/react-query-devtools": "^5.84.1",
     "@vercel/analytics": "^1.5.0",
+    "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lottie-react": "^2.4.1",
     "lucide-react": "^0.536.0",
     "next": "15.4.5",
     "next-pwa": "^5.6.0",

public/lottie/loading.json

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.5.7","a":"","k":"","d":"","tc":""},"fr":30,"ip":0,"op":60,"w":1080,"h":1080,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"로고 흰색 Outlines 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,540,0],"ix":2},"a":{"a":0,"k":[540,540,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":20,"s":[{"i":[[321.988,0],[0,0],[0,0],[0,0],[346.287,0],[261.236,0]],"o":[[-218.709,0],[0,0],[0,0],[0,0],[-297.688,0],[-261.236,0]],"v":[[244.864,1481.971],[-4.221,1390.842],[1654.321,1415.142],[1654.321,-134.045],[1235.13,1573.099],[749.11,1226.811]],"c":true}]},{"t":40,"s":[{"i":[[321.988,0],[0,0],[0,0],[0,0],[346.288,0],[261.236,0]],"o":[[-218.709,0],[0,0],[0,0],[0,0],[-297.688,0],[-261.236,0]],"v":[[-36.452,-315.913],[-243.01,1385.156],[1415.532,1409.457],[1415.532,-139.731],[1032.792,-407.041],[516.396,-139.731]],"c":true}]}],"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-32.17,-16.699],[0,0],[34.747,-18.043],[0,0],[0,0],[-0.007,-26.685],[0,0],[26.69,-0.005],[0,0],[0,0],[24.558,-10.45],[0,0],[10.448,24.562],[0,0],[0,0],[2.04,-4.802],[0,0],[24.564,10.447],[0,0],[-10.441,24.558],[0,0],[0,0],[0,26.695],[0,0],[-26.69,0],[0,0],[0,2.409]],"o":[[0.007,-36.244],[0,0],[34.747,18.041],[0,0],[0,0],[26.685,0.005],[0,0],[0,26.69],[0,0],[0,0],[10.445,24.558],[0,0],[-24.563,10.447],[0,0],[0,0],[-0.435,4.93],[0,0],[-10.448,24.562],[0,0],[-24.554,-10.45],[0,0],[0,0],[-26.694,0],[0,0],[0.006,-26.69],[0,0],[-0.326,-2.286],[0,0]],"v":[[-241.665,-460.664],[-171.077,-503.545],[304.041,-256.853],[304.041,-171.066],[-102.024,39.777],[434.997,39.777],[483.33,88.11],[483.33,160.61],[434.997,208.943],[315.487,208.943],[412.694,437.44],[387.136,500.828],[366.014,509.797],[302.625,484.238],[185.522,208.943],[-170.205,208.943],[-173.861,223.621],[-284.712,484.238],[-348.102,509.797],[-369.224,500.828],[-394.783,437.44],[-297.574,208.943],[-434.997,208.943],[-483.33,160.61],[-483.33,88.11],[-434.997,39.777],[-241.17,39.777],[-241.665,32.72]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.980392156863,0.313725490196,0.180392156863,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[540,537.69],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":20,"op":90,"st":21,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"로고 흰색 Outlines 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,540,0],"ix":2},"a":{"a":0,"k":[540,540,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":10,"s":[{"i":[[321.988,0],[0,0],[0,0],[0,0],[346.287,0],[261.236,0]],"o":[[-218.709,0],[0,0],[0,0],[0,0],[-297.687,0],[-261.236,0]],"v":[[-166.545,1476.286],[-415.63,1385.156],[1242.912,1409.457],[1242.912,-139.731],[823.721,1567.414],[337.701,1221.125]],"c":true}]},{"t":40,"s":[{"i":[[321.988,0],[0,0],[0,0],[0,0],[346.288,0],[261.236,0]],"o":[[-218.709,0],[0,0],[0,0],[0,0],[-297.688,0],[-261.236,0]],"v":[[-36.452,-315.913],[-243.01,1385.156],[1415.532,1409.457],[1415.532,-139.731],[1032.792,-407.041],[516.396,-139.731]],"c":true}]}],"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-32.17,-16.699],[0,0],[34.747,-18.043],[0,0],[0,0],[-0.007,-26.685],[0,0],[26.69,-0.005],[0,0],[0,0],[24.558,-10.45],[0,0],[10.448,24.562],[0,0],[0,0],[2.04,-4.802],[0,0],[24.564,10.447],[0,0],[-10.441,24.558],[0,0],[0,0],[0,26.695],[0,0],[-26.69,0],[0,0],[0,2.409]],"o":[[0.007,-36.244],[0,0],[34.747,18.041],[0,0],[0,0],[26.685,0.005],[0,0],[0,26.69],[0,0],[0,0],[10.445,24.558],[0,0],[-24.563,10.447],[0,0],[0,0],[-0.435,4.93],[0,0],[-10.448,24.562],[0,0],[-24.554,-10.45],[0,0],[0,0],[-26.694,0],[0,0],[0.006,-26.69],[0,0],[-0.326,-2.286],[0,0]],"v":[[-241.665,-460.664],[-171.077,-503.545],[304.041,-256.853],[304.041,-171.066],[-102.024,39.777],[434.997,39.777],[483.33,88.11],[483.33,160.61],[434.997,208.943],[315.487,208.943],[412.694,437.44],[387.136,500.828],[366.014,509.797],[302.625,484.238],[185.522,208.943],[-170.205,208.943],[-173.861,223.621],[-284.712,484.238],[-348.102,509.797],[-369.224,500.828],[-394.783,437.44],[-297.574,208.943],[-434.997,208.943],[-483.33,160.61],[-483.33,88.11],[-434.997,39.777],[-241.17,39.777],[-241.665,32.72]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.507398597867,0.399371936275,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[540,537.69],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":10,"op":90,"st":10,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"로고 흰색 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,540,0],"ix":2},"a":{"a":0,"k":[540,540,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[321.988,0],[0,0],[0,0],[0,0],[346.287,0],[261.236,0]],"o":[[-218.709,0],[0,0],[0,0],[0,0],[-297.688,0],[-261.236,0]],"v":[[6.075,1476.286],[-243.01,1385.156],[1415.532,1409.457],[1415.532,-139.731],[996.341,1567.414],[510.321,1221.125]],"c":true}]},{"t":40,"s":[{"i":[[321.988,0],[0,0],[0,0],[0,0],[346.288,0],[261.236,0]],"o":[[-218.709,0],[0,0],[0,0],[0,0],[-297.688,0],[-261.236,0]],"v":[[-36.452,-315.913],[-243.01,1385.156],[1415.532,1409.457],[1415.532,-139.731],[1032.792,-407.041],[516.396,-139.731]],"c":true}]}],"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-32.17,-16.699],[0,0],[34.747,-18.043],[0,0],[0,0],[-0.007,-26.685],[0,0],[26.69,-0.005],[0,0],[0,0],[24.558,-10.45],[0,0],[10.448,24.562],[0,0],[0,0],[2.04,-4.802],[0,0],[24.564,10.447],[0,0],[-10.441,24.558],[0,0],[0,0],[0,26.695],[0,0],[-26.69,0],[0,0],[0,2.409]],"o":[[0.007,-36.244],[0,0],[34.747,18.041],[0,0],[0,0],[26.685,0.005],[0,0],[0,26.69],[0,0],[0,0],[10.445,24.558],[0,0],[-24.563,10.447],[0,0],[0,0],[-0.435,4.93],[0,0],[-10.448,24.562],[0,0],[-24.554,-10.45],[0,0],[0,0],[-26.694,0],[0,0],[0.006,-26.69],[0,0],[-0.326,-2.286],[0,0]],"v":[[-241.665,-460.664],[-171.077,-503.545],[304.041,-256.853],[304.041,-171.066],[-102.024,39.777],[434.997,39.777],[483.33,88.11],[483.33,160.61],[434.997,208.943],[315.487,208.943],[412.694,437.44],[387.136,500.828],[366.014,509.797],[302.625,484.238],[185.522,208.943],[-170.205,208.943],[-173.861,223.621],[-284.712,484.238],[-348.102,509.797],[-369.224,500.828],[-394.783,437.44],[-297.574,208.943],[-434.997,208.943],[-483.33,160.61],[-483.33,88.11],[-434.997,39.777],[-241.17,39.777],[-241.665,32.72]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.682625265682,0.575428981407,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[540,537.69],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90,"st":0,"bm":0}],"markers":[]}

src/app/(pages)/(auth)/auth/kakao/callback/page.tsx

@@ -0,0 +1,39 @@
+import { authService } from '@/lib/auth/auth.service';
+import { redirect } from 'next/navigation';
+
+interface SearchParams {
+  code?: string;
+  error?: string;
+  error_description?: string;
+  state?: string;
+}
+
+export default async function KakaoCallbackPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>;
+}) {
+  const params = await searchParams;
+  const { code, error, error_description } = params;
+
+  //   try {
+  //     const result = await authService.kakaoLogin(code ?? '');
+
+  //     // token이 있다고 가정
+  //     const token = result.token;
+
+  //     const response = await fetch('/api/cookie-set', {
+  //       method: 'POST',
+  //       body: JSON.stringify({ token }),
+  //     });
+
+  //     if (!response.ok) {
+  //       throw new Error('Failed to set cookie');
+  //     }
+  //     redirect('/');
+  //   } catch (error) {
+  //     console.error(error);
+  //   }
+
+  return null;
+}

src/app/(pages)/(auth)/login/page.tsx

@@ -1,13 +1,17 @@
 'use client';
 
+import { kakaoAuthService } from '@/lib/auth/kakao.service';
 import KakaoLogo from '@/public/svg/logo/kakao-logo.svg';
 import LoginMainBigLogo from '@/public/svg/logo/login-main-big.svg';
 import { useRouter } from 'next/navigation';
 
 export default function LoginPage() {
   const router = useRouter();
+  const handleKakaoLogin = () => {
+    kakaoAuthService.login();
+  };
   return (
-    <div className='px-6 pt-57 pb-20 not-only-of-type:w-full h-screen mx-auto login-bg flex flex-col justify-between'>
+    <div className='px-6 pt-57 pb-20 min-w-0 w-full h-screen mx-auto login-bg flex flex-col justify-between'>
       {/* 헤더 || 로고 영역 */}
       <header className='flex flex-col items-center justify-center gap-8'>
         <LoginMainBigLogo />
@@ -23,11 +27,7 @@ export default function LoginPage() {
 
       <div className='flex flex-col gap-4'>
         {/* 카카오 로그인 */}
-        <button
-          // onClick={login}
-          // disabled={isLoading}
-          className='kakao-btn'
-        >
+        <button onClick={handleKakaoLogin} className='kakao-btn'>
           <KakaoLogo />
           <span className='kakao-btn-text'>카카오 로그인</span>
         </button>

src/app/(pages)/(main)/mypage/(mypage)/info/page.tsx

@@ -5,9 +5,7 @@ import { LoadingSpinner } from '@/components/loading-spinner';
 export default async function MyPageInfoPage() {
   return (
     <Suspense fallback={<LoadingSpinner />}>
-      <main className='pt-18 pb-10 w-full h-full min-h-0'>
-        <InfoContents />
-      </main>
+      <InfoContents />
     </Suspense>
   );
 }