[Login] 카카오 Oauth 추가 (API 연결 없음) (#6)

.github/workflows/build-test.yml

@@ -31,6 +31,6 @@ jobs:
         run: npm install
 
       - name: Build
-        # env:
+        # .env:
         #   NEXT_PUBLIC_API_ENDPOINT: ${{ secrets.NEXT_PUBLIC_API_ENDPOINT }}
         run: npm run build

.gitignore

@@ -25,7 +25,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
+# local .env files
 .env*.local
 
 # vercel
@@ -35,4 +35,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-.idea
+.idea
+.env

package.json

@@ -16,6 +16,7 @@
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@tanstack/react-query": "^5.51.11",
+    "axios": "^1.7.2",
     "framer-motion": "^11.3.8",
     "next": "14.2.5",
     "react": "^18",

src/app/intro/layout.tsx

@@ -0,0 +1,7 @@
+import { ReactNode, Suspense } from 'react';
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>;
+};
+
+export default Layout;

src/app/intro/page.tsx

@@ -14,9 +14,11 @@ import {
   Textarea,
   VStack,
 } from '@chakra-ui/react';
-import { useMemo, useState } from 'react';
+import { Suspense, useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import Jinsimi from '@/component/common/jinsimi';
+import axios from 'axios';
+import { useSearchParams } from 'next/navigation';
 
 const CharacterPanel = ({ headText }: { headText: string }) => {
   return (
@@ -48,7 +50,7 @@ const LiteraryPanel = ({ setIndex }: { setIndex: any }) => {
 
   return (
     <VStack my={2}>
-      <Heading>(상황에 맞춰) 자유롭게 편지를 써주세요!</Heading>
+      <Heading>(진심이가 되어) 자유롭게 편지를 써주세요!</Heading>
       <Box w={'30vh'}>
         <Jinsimi />
       </Box>
@@ -86,6 +88,21 @@ const LiteraryPanel = ({ setIndex }: { setIndex: any }) => {
 
 export default function IntroPage() {
   const [pageIndex, setPageIndex] = useState(0);
+  const searchParams = useSearchParams();
+  const code = searchParams.get('code');
+
+  const getAuth = async () => {
+    const res = await axios.post(
+      `${process.env.NEXT_PUBLIC_API_URL}/auth/kakao/callback`,
+      {
+        code,
+      }
+    );
+    console.log('res', res);
+  };
+  useEffect(() => {
+    getAuth();
+  }, []);
 
   const Panel = useMemo(() => {
     switch (pageIndex) {

src/app/login/kakaoLoginButton.tsx

@@ -1,25 +1,42 @@
 // https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide
 // https://www.figma.com/community/file/1232637617420363657
+
+'use client';
+
 import { Button, ButtonProps } from '@chakra-ui/react';
 import KakaoSymbol from '@/component/icon/kakaoSymbol';
+import { useRouter } from 'next/navigation';
+
+const KakaologinButton = (props: ButtonProps) => {
+  const router = useRouter();
+  const REST_API_KEY = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY;
+  const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI;
+
+  const KakaoLogin = () => {
+    router.push(
+      `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`
+    );
+  };
 
-const KakaologinButton = (props: ButtonProps) => (
-  <Button
-    {...props}
-    h={'45px'}
-    fontSize={'15px'}
-    borderRadius={'12px'}
-    textColor={'#000000D9'}
-    bgColor={'#FEE500'}
-    _hover={{
-      bgColor: '#FFEB3B',
-    }}
-    px={'14px'}
-    py={'11px'}
-    leftIcon={<KakaoSymbol boxSize={'18px'} color={'#000000'} />}
-  >
-    카카오 로그인
-  </Button>
-);
+  return (
+    <Button
+      onClick={KakaoLogin}
+      {...props}
+      h={'45px'}
+      fontSize={'15px'}
+      borderRadius={'12px'}
+      textColor={'#000000D9'}
+      bgColor={'#FEE500'}
+      _hover={{
+        bgColor: '#FFEB3B',
+      }}
+      px={'14px'}
+      py={'11px'}
+      leftIcon={<KakaoSymbol boxSize={'18px'} color={'#000000'} />}
+    >
+      카카오 로그인
+    </Button>
+  );
+};
 
 export default KakaologinButton;

src/app/login/page.tsx

@@ -1,13 +1,15 @@
-import { Box, Heading, VStack } from '@chakra-ui/react';
+import { Box, Heading, HStack, VStack } from '@chakra-ui/react';
 import KakaologinButton from './kakaoLoginButton';
 
 const Login = () => {
   return (
     // NOTE : center에 위치하는 컨텐츠의 최대 너비는 모바일 화면을 기준으로 600px으로 설정함 (논의 필요...)
     <VStack w={'100%'} maxW={'600px'} spacing={'4'} alignItems={'stretch'}>
-      <Heading as={'span'} fontSize={'2xl'}>
-        로그인 페이지
-      </Heading>
+      <HStack justify={'center'}>
+        <Heading as={'span'} fontSize={'2xl'}>
+          로그인 페이지
+        </Heading>
+      </HStack>
       <Box h={'20'} w={'20'} mx={'auto'} bgColor={'orange'}>
         로고
       </Box>