Merge pull request #24 from TeamRecorDream/feat/#21-post-error

[로그인] post 에러 해결

src/hooks/queries/useDeleteUser.tsx

@@ -3,6 +3,7 @@ import user from '../../apis/user';
 
 export const useDeleteUser = () => {
   const deleteUser = async (accessToken: string) => {
+    console.log('clicked?');
     const navigate = useNavigate();
     try {
       await user.deleteUser(accessToken);

src/hooks/queries/useGetToken.tsx

@@ -1,22 +1,27 @@
 import axios from 'axios';
-import { REDIRECT_URI, REST_API_KEY } from '../../utils/login';
+import { REDIRECT_URI, REST_API_KEY, CLIENT_SECRET } from '../../utils/login';
 
 const useGetToken = async () => {
   const code = new URL(window.location.href).searchParams.get('code');
-  const res = axios.post(
-    'https://kauth.kakao.com/oauth/token',
-    {
-      grant_type: 'authorization_code',
-      client_id: REST_API_KEY,
-      redirect_uri: REDIRECT_URI,
-      code: code,
+
+  if (!code) {
+    throw new Error('Authorization code not found');
+  }
+
+  const params = new URLSearchParams();
+  params.append('grant_type', 'authorization_code');
+  params.append('client_id', REST_API_KEY);
+  params.append('redirect_uri', REDIRECT_URI);
+  params.append('code', code);
+  if (CLIENT_SECRET) {
+    params.append('client_secret', CLIENT_SECRET);
+  }
+
+  const res = axios.post('https://kauth.kakao.com/oauth/token', params, {
+    headers: {
+      'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
     },
-    {
-      headers: {
-        'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
-      },
-    }
-  );
+  });
   return res;
 };
 export default useGetToken;

src/layouts/DeleteLayout.tsx

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import { IcFeelingLBlank, IcPcBlank, IcPcRecordream } from '../assets/svg';
+import Button from '../components/Button';
+import { Outlet } from 'react-router-dom';
+import { useDeleteUser } from '../hooks/queries/useDeleteUser';
+
+interface DeleteLayoutInterface {
+  iconOn: boolean;
+  btnColor: string;
+  btnMessage: string;
+}
+
+const DeleteLayout = ({ iconOn, btnColor, btnMessage }: DeleteLayoutInterface) => {
+  const { deleteUser } = useDeleteUser();
+  const accessToken = localStorage.getItem('accessToken');
+
+  console.log('ACCESSTOKEn', accessToken);
+  if (!accessToken) {
+    console.error('Access token is missing');
+    return null;
+  }
+
+  const handleDeleteUser = () => {
+    deleteUser(accessToken);
+  };
+
+  return (
+    <RecordreamLayoutWrapper>
+      <IcPcRecordream style={{ width: 134, height: 24, marginTop: 74, marginBottom: 18 }} />
+      {iconOn ? (
+        <IcFeelingLBlank style={{ width: 85, height: 85, marginTop: 74, marginBottom: 18 }} />
+      ) : (
+        <IcPcBlank style={{ width: 85, height: 85, marginTop: 74, marginBottom: 18 }} />
+      )}
+      <Outlet />
+      <Button color={btnColor} message={btnMessage} onClick={handleDeleteUser} />
+    </RecordreamLayoutWrapper>
+  );
+};
+
+export default DeleteLayout;
+
+const RecordreamLayoutWrapper = styled.div`
+  height: 100dvh;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;

src/pages/RecordreamLayout.tsx → src/layouts/RecordreamLayout.tsx

@@ -25,7 +25,7 @@ const RecordreamLayout = ({
         <IcPcBlank style={{ width: 85, height: 85, marginTop: 74, marginBottom: 18 }} />
       )}
       <Outlet />
-      <Button color={btnColor} message={btnMessage} onClick={handleClick} />
+      <Button color={btnColor} message={btnMessage} onClick={() => handleClick} />
     </RecordreamLayoutWrapper>
   );
 };

src/main.tsx

@@ -1,9 +1,8 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>
 );

src/router/Router.tsx

@@ -1,7 +1,7 @@
 import { createBrowserRouter } from 'react-router-dom';
 import Layout from '../layouts/Layout';
 import LoginPage from '../pages/LoginPage';
-import RecordreamLayout from '../pages/RecordreamLayout';
+import RecordreamLayout from '../layouts/RecordreamLayout';
 import DeletePage from '../pages/DeletePage';
 import CompletePage from '../pages/CompletePage';
 import UnregisteredPage from '../pages/UnregisteredPage';

src/utils/login.ts

@@ -1,3 +1,4 @@
 export const REST_API_KEY: string = import.meta.env.VITE_REST_API_KEY;
 export const REDIRECT_URI: string = import.meta.env.VITE_REDIRECT_URI;
+export const CLIENT_SECRET: string = import.meta.env.VITE_CLIENT_SECRET;
 export const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;