Merge pull request dnd-side-project#50 from dnd-side-project/feature/dnd-side-project#10

[FEAT] 카카오 로그인 토큰 설정

Author: ujinsim

package.json

@@ -15,6 +15,7 @@
     "@tanstack/react-query": "^5.84.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cookies-next": "^6.1.0",
     "framer-motion": "^12.23.12",
     "ky": "^1.8.2",
     "next": "15.4.4",

src/app/login/page.tsx

@@ -0,0 +1,12 @@
+'use client';
+import { KakaoLoginButton } from '@/components/ui/KakaoLoginButton';
+import { MainLayout } from '@/components/layout';
+
+export default function LoginPage() {
+  return (
+    <MainLayout>
+      <h1>로그인 페이지</h1>
+      <KakaoLoginButton />
+    </MainLayout>
+  );
+}

src/components/HouseMemo/CheckList/CheckList.tsx

@@ -1,7 +1,8 @@
 'use client';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Tabs, TabsList, TabsContent, TabsTrigger } from '@/components/ui/Tabs';
 import { Dropdown, DropdownContent } from '@/components/ui/Dropdown';
+import { useChecklistInfo } from '@/queries/houseMemo/useCheklistInfo';
 
 // 예시 데이터
 const checkListData = {
@@ -66,6 +67,10 @@ const checkListData = {
 };
 
 export default function CheckList() {
+  const { data, isLoading, error } = useChecklistInfo();
+
+  console.log(data, 'chekList data');
+
   return (
     <div>
       <Tabs defaultValue="필수 확인">

src/components/ui/KakaoLoginButton/KakaoLoginButton.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { getKakaoAuthURL } from '@/utils/kakao';
+
+export const KakaoLoginButton = () => {
+  const handleLogin = () => {
+    window.location.href = getKakaoAuthURL();
+  };
+
+  return <button onClick={handleLogin}>카카오 로그인</button>;
+};

src/components/ui/KakaoLoginButton/index.tsx

@@ -0,0 +1 @@
+export { KakaoLoginButton } from './KakaoLoginButton';

src/lib/api/ky.ts

@@ -1,9 +1,9 @@
 import ky from 'ky';
+import { getCookie } from 'cookies-next';
 
 const getToken = () => {
-  // TODO: 나중에 zustand, cookie, localStorage 등에서 토큰 가져오기
   if (typeof window !== 'undefined') {
-    return localStorage.getItem('accessToken') || '';
+    return getCookie('Access') as string | undefined;
   }
   return '';
 };

src/queries/houseMemo/useCheklistInfo.ts

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { getChecklist } from '@/services/house.memo';
+
+export function useChecklistInfo() {
+  return useQuery({
+    queryKey: ['checklist'],
+    queryFn: getChecklist,
+  });
+}

src/services/house.memo.ts

@@ -1,4 +1,5 @@
 import ky from 'ky';
+import { api } from '@/lib/api/ky';
 
 export type Place = {
   id: string;
@@ -42,3 +43,7 @@ export async function fetchPlaces(query: string, page: number): Promise<ApiRespo
     })
     .json<ApiResponse>();
 }
+
+export async function getChecklist() {
+  return api.get('api/checklist').json();
+}

src/utils/kakao.ts

@@ -0,0 +1,7 @@
+export const getKakaoAuthURL = () => {
+  const REST_API_KEY = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY;
+  const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI;
+  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+
+  return kakaoURL;
+};

yarn.lock

@@ -3133,6 +3133,18 @@ convert-source-map@^2.0.0:
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+cookie@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.0.2.tgz#27360701532116bd3f1f9416929d176afe1e4610"
+  integrity sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==
+
+cookies-next@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/cookies-next/-/cookies-next-6.1.0.tgz#0bdfe6e78166d494a0b3d30afcdac9456d1164da"
+  integrity sha512-8MqWliHg6YRatqlup5HlKCqXM5cFtwq9BVowDpPniPfbTOmrfIEXUQOcRFVXQltV+hyvKDRGJPNtceICkiJ/IA==
+  dependencies:
+    cookie "^1.0.1"
+
 core-js-compat@^3.43.0:
   version "3.44.0"
   resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.44.0.tgz"