feat: edit uuid parse for cloudflare

app/components/KakaoLoginButton/KakaoLoginButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 const clientId = 'f5aa2f20e42d783654b8e8c01bfc6312';
@@ -7,14 +7,18 @@ const redirectUri = 'http://localhost:5173/oauth/kakao';
 
 //이용자의 uuid를 받아와 state값으로 사용합니다.
 const getUserUUID = (): string => uuidv4();
-const userUUID = getUserUUID();
 
-const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&state=${userUUID}`;
+const KakaoLoginButton: React.FC = () => {
+  const kakaoAuthUrl = useMemo(() => {
+    const userUUID = getUserUUID();
+    return `https://kauth.kakao.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&state=${userUUID}`;
+  }, []);
 
-const KakaoLoginButton: React.FC = () => (
-  <a href={kakaoAuthUrl}>
-    <button>카카오로 로그인</button>
-  </a>
-);
+  return (
+    <a href={kakaoAuthUrl}>
+      <button>카카오로 로그인</button>
+    </a>
+  );
+};
 
 export default KakaoLoginButton;

package.json

@@ -41,6 +41,7 @@
     "@storybook/test": "8.2.5",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "7.16.0",
     "@typescript-eslint/parser": "7.16.0",
     "@vanilla-extract/vite-plugin": "4.0.13",