From 49d03a1c774a8414eeea7d09fed3f7ccd940222c Mon Sep 17 00:00:00 2001
From: crew852 <65230973+crew852@users.noreply.github.com>
Date: Tue, 27 Aug 2024 16:43:49 +0900
Subject: [PATCH] feat: uuid utilize, comment to js doc, action to loader
 function

---
 .../KakaoLoginButton/KakaoLoginButton.tsx     |  7 ++--
 app/routes/oauth.kakao.tsx.tsx                | 33 +++++++++----------
 app/utils/getUUID.ts                          |  9 +++++
 3 files changed, 27 insertions(+), 22 deletions(-)
 create mode 100644 app/utils/getUUID.ts

diff --git a/app/components/KakaoLoginButton/KakaoLoginButton.tsx b/app/components/KakaoLoginButton/KakaoLoginButton.tsx
index 8bc92bd..783d2fc 100644
--- a/app/components/KakaoLoginButton/KakaoLoginButton.tsx
+++ b/app/components/KakaoLoginButton/KakaoLoginButton.tsx
@@ -1,16 +1,13 @@
 import React, { useMemo } from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import getUUID from '@/utils/getUUID';
 
 const clientId = 'f5aa2f20e42d783654b8e8c01bfc6312';
 //redirectUri는 등록된 redirectUri중에 임의로 사용했습니다.
 const redirectUri = 'http://localhost:5173/oauth/kakao';
 
-//이용자의 uuid를 받아와 state값으로 사용합니다.
-const getUserUUID = (): string => uuidv4();
-
 const KakaoLoginButton: React.FC = () => {
   const kakaoAuthUrl = useMemo(() => {
-    const userUUID = getUserUUID();
+    const userUUID = getUUID();
     return `https://kauth.kakao.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&state=${userUUID}`;
   }, []);
 
diff --git a/app/routes/oauth.kakao.tsx.tsx b/app/routes/oauth.kakao.tsx.tsx
index 2971bfb..d93125a 100644
--- a/app/routes/oauth.kakao.tsx.tsx
+++ b/app/routes/oauth.kakao.tsx.tsx
@@ -1,20 +1,19 @@
 //HTTP 요청을 보내기 위해 axios라이브러리를 추가했습니다.
-import { ActionFunction, json } from '@remix-run/cloudflare';
+import { LoaderFunction, json } from '@remix-run/cloudflare';
 import { useSearchParams } from '@remix-run/react';
 import axios, { AxiosError } from 'axios';
 import { useEffect } from 'react';
 
-export const action: ActionFunction = async ({ request }) => {
-  //request.formData()를 통해 요청에서 전송된 폼 데이터를 가져옵니다.
-  const formData = await request.formData();
-  const code = formData.get('code');
-  const state = formData.get('state');
+export const loader: LoaderFunction = async ({ request }) => {
+  const url = new URL(request.url);
+  const code = url.searchParams.get('code');
+  const state = url.searchParams.get('state');
 
-  /*
-  code와 state 값을 추출하여 axios.post를 사용해 백엔드 서버에 요청을 보냅니다.
-  요청 성공 시 성공 메시지와 반환된 데이터를 JSON 형태로 반환합니다.
-  요청 실패 시 오류 메시지를 JSON 형태로 반환하고 콘솔에 오류를 출력합니다. 
-  */
+  /**
+   * code와 state 값을 추출하여 axios.post를 사용해 백엔드 서버에 요청을 보냅니다.
+   * 요청 성공 시 성공 메시지와 반환된 데이터를 JSON 형태로 반환합니다.
+   * 요청 실패 시 오류 메시지를 JSON 형태로 반환하고 콘솔에 오류를 출력합니다.
+   */
   try {
     //추후에 진짜 백엔드 api url로 변경예정입니다.
     const response = await axios.post('(백엔드api url)', {
@@ -29,12 +28,12 @@ export const action: ActionFunction = async ({ request }) => {
   }
 };
 
-/*
-KakaoRedirect 함수는 카카오 로그인 후 리다이렉트된 페이지에서 실행되는 컴포넌트입니다.
-useSearchParams 훅을 사용해 URL 쿼리 파라미터를 가져옵니다.
-useEffect 훅을 사용해 컴포넌트가 마운트될 때 실행되는 코드를 작성합니다.
-sendCodeToServer 함수는 쿼리 파라미터에서 code와 state를 추출하고, 이 값을 FormData 객체에 추가한 후, /oauth/kakao 엔드포인트로 POST 요청을 보냅니다.
-*/
+/**
+ * @constructor KakaoRedirect 함수는 카카오 로그인 후 리다이렉트된 페이지에서 실행되는 컴포넌트입니다.
+ * @useSearchParams 훅을 사용해 URL 쿼리 파라미터를 가져옵니다.
+ * @useEffect 훅을 사용해 컴포넌트가 마운트될 때 실행되는 코드를 작성합니다.
+ * @sendCodeToServer 쿼리 파라미터에서 code와 state를 추출하고, 이 값을 url.searchParams 객체에 추가한 후, /oauth/kakao 엔드포인트로 POST 요청을 보냅니다.
+ */
 const KakaoRedirect = () => {
   const [searchParams] = useSearchParams();
 
diff --git a/app/utils/getUUID.ts b/app/utils/getUUID.ts
new file mode 100644
index 0000000..3860c57
--- /dev/null
+++ b/app/utils/getUUID.ts
@@ -0,0 +1,9 @@
+import { v4 as uuidv4 } from 'uuid';
+
+//이용자의 uuid를 받아옵니다.
+const getUUID = () => {
+  const getUserUUID = (): string => uuidv4();
+  return getUserUUID;
+};
+
+export default getUUID;