[FRONTEND] 회원가입 기능 구현 (#24)

yuhoyeong · web-flow · commit 366538112340 · 2025-09-22T16:59:27.000+09:00
## #️⃣연관된 이슈

없음

## 📝작업 내용

회원가입 기능 구현, 백엔드 연결 x
diff --git a/frontend/.env b/frontend/.env
@@ -0,0 +1,4 @@
+VITE_KAKAO_CLIENT_ID=e84faf4e473047e82fd05e50e9b0c0ce
+VITE_KAKAO_AUTH_URL=https://kauth.kakao.com/oauth/authorize
+VITE_KAKAO_REDIRECT_URI=http://localhost:3000/oauth/kakao/redirect
+VITE_API_URL=https://api.comtogether.com
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+    "cSpell.words": [
+        "kakao",
+        "lineheigh",
+        "lineheight",
+        "VITE"
+    ]
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,6 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.89.0",
+    "axios": "^1.12.2",
+    "i": "^0.3.7",
+    "npm": "^11.6.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router": "^7.8.2",
diff --git a/frontend/src/api/.gitkeep b/frontend/src/api/.gitkeep
diff --git a/frontend/src/api/useKakaoLogin.ts b/frontend/src/api/useKakaoLogin.ts
@@ -0,0 +1,32 @@
+import axios from "axios";
+import { useMutation } from "@tanstack/react-query";
+import { useAuthStore } from "../stores/useAuthStore";
+import { useTokenStore } from "../stores/useTokenStore";
+
+export const useKakaoLogin = () => {
+    const setUser = useAuthStore((state) => state.setUser);
+    const setTokens = useTokenStore((state) => state.setTokens);
+
+    const mutation = useMutation({
+        mutationFn: (code: string) =>
+            axios.post(
+                `${import.meta.env.VITE_API_URL}/auth/kakao`,
+                { code }
+            ),
+        onSuccess: (response) => {
+            const { user, accessToken, refreshToken } = response.data;
+            setUser(user);
+            setTokens(accessToken, refreshToken);
+        },
+        onError: (error) => {
+            console.error("Kakao login error:", error);
+        },
+    });
+
+    const initiateKakaoLogin = () => {
+        const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${import.meta.env.VITE_KAKAO_CLIENT_ID}&redirect_uri=${import.meta.env.VITE_KAKAO_REDIRECT_URI}&response_type=code`;
+        window.location.href = kakaoAuthUrl;
+    };
+
+    return { initiateKakaoLogin, mutation };
+}
diff --git a/frontend/src/assets/image/icon/chatBotIcon.tsx b/frontend/src/assets/image/icon/chatBotIcon.tsx
@@ -16,7 +16,7 @@ export default function ChatBotIcon({ text }: { text: string }) {
           dominantBaseline="middle"
           fontSize="23.657px"
           fontWeight="700"
-          lineHeight="150%"
+          lineheight="150%"
           fill="#fff"
         >
           {text}
@@ -30,9 +30,9 @@ export default function ChatBotIcon({ text }: { text: string }) {
           width="84.4844"
           height="84.4844"
           filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
+          colorInterpolationFilters="sRGB"
         >
-          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
diff --git a/frontend/src/components/common/chatBot/chatBot.tsx b/frontend/src/components/common/chatBot/chatBot.tsx
@@ -0,0 +1,45 @@
+import style from "./chatBot.module.css";
+import { useSearchChatBotStore } from "@/stores/useSearchChatBotStore";
+import RecentSearchItem from "./recentSearchItem";
+import SearchResult from "./searchResult/searchResult";
+
+export default function ChatBot() {
+  const { result, resultNotFound, recentSearches } =
+    useSearchChatBotStore.useMultiple((state) => ({
+      result: state.result,
+      resultNotFound: state.resultNotFound,
+      recentSearches: state.recentSearches,
+    }));
+
+  const clearRecentSearches = useSearchChatBotStore.useClearRecentSearches();
+
+  return (
+    <div className={style.chatBot}>
+      {/* 검색 결과가 있는 경우 */}
+      {result && <SearchResult />}
+
+      {/* 검색 결과가 없는 경우 */}
+      {resultNotFound && (
+        <div className={style.noResult}>
+          <p>검색 결과가 없습니다.</p>
+          <p>다른 키워드로 검색해보세요.</p>
+        </div>
+      )}
+
+      {/* 최근 검색어 */}
+      {!result && !resultNotFound && recentSearches.length > 0 && (
+        <div className={style.recentSearches}>
+          <div className={style.recentHeader}>
+            <span>최근 검색어</span>
+            <button onClick={clearRecentSearches}>전체 삭제</button>
+          </div>
+          <div className={style.recentList}>
+            {recentSearches.map((keyword) => (
+              <RecentSearchItem key={keyword} keyword={keyword} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/common/chatBot/chatBotModal/chatBotModal.tsx b/frontend/src/components/common/chatBot/chatBotModal/chatBotModal.tsx
@@ -5,6 +5,7 @@ import close_icon from "@/assets/image/icon/close_icon.svg";
 import SearchBar from "@/components/common/searchBar/searchBar";
 import SearchResult from "@/components/common/chatBot/searchResult/searchResult";
 import { useSearchChatBotStore } from "@/stores/useSearchChatBotStore";
+import { useShallow } from "zustand/shallow";
 
 interface ChatBotModalProps {
   open: boolean;
@@ -13,7 +14,12 @@ interface ChatBotModalProps {
 
 export default function ChatBotModal({ open, onClose }: ChatBotModalProps) {
   const modalBackground = useRef<HTMLDivElement>(null);
-  const { result, setShowMore } = useSearchChatBotStore();
+  const { result, setShowMore } = useSearchChatBotStore(
+    useShallow((state) => ({
+      result: state.result,
+      setShowMore: state.setShowMore,
+    }))
+  );
 
   if (!open) return null;
 
diff --git a/frontend/src/components/common/chatBot/recentSearchItem.tsx b/frontend/src/components/common/chatBot/recentSearchItem.tsx
@@ -24,11 +24,9 @@ const style = {
   cursor: "pointer",
 };
 
-export default function RecentSearchItem({
-  keyword,
-  onRemove,
-}: RecentSearchItemProps) {
-  const { setSearch, handleSearch } = useSearchChatBotStore();
+export default function RecentSearchItem({ keyword }: RecentSearchItemProps) {
+  const { setSearch, handleSearch, handleRemoveRecent } =
+    useSearchChatBotStore();
   const onClick = () => {
     setSearch(keyword);
     setTimeout(() => {
@@ -42,7 +40,7 @@ export default function RecentSearchItem({
         className="recent-search-remove"
         onClick={(e) => {
           e.stopPropagation();
-          onRemove(keyword);
+          handleRemoveRecent(keyword);
         }}
       >
         &nbsp;
diff --git a/frontend/src/components/common/home/ctaButton/ctaButton.tsx b/frontend/src/components/common/home/ctaButton/ctaButton.tsx
@@ -15,7 +15,11 @@ export default function CtaButton({
   return (
     <button
       className={style.button}
-      style={{ color: `${color}`, backgroundColor: `${backgroundColor}` }}
+      style={{
+        color: `${color}`,
+        backgroundColor: `${backgroundColor}`,
+        cursor: `pointer`,
+      }}
       onClick={onClick}
     >
       {text}
diff --git a/frontend/src/components/common/home/navButton/navButton.tsx b/frontend/src/components/common/home/navButton/navButton.tsx
@@ -9,4 +9,4 @@ export default function NavButton({text, onClick}: NavButtonProps){
     return(
         <button className={style.navBtn} onClick={onClick}>{text}</button>
     )
-}
+}   
diff --git a/frontend/src/components/common/searchBar/searchBar.tsx b/frontend/src/components/common/searchBar/searchBar.tsx
@@ -3,6 +3,7 @@ import RecentSearchItem from "../chatBot/recentSearchItem";
 import { useSearchChatBotStore } from "../../../stores/useSearchChatBotStore";
 import style from "./SearchBar.module.css";
 import clock_icon from "@/assets/image/icon/clock_icon.svg";
+import { useShallow } from "zustand/shallow";
 
 export default function SearchBar() {
   const {
@@ -11,7 +12,15 @@ export default function SearchBar() {
     recentSearches,
     handleSearch,
     handleRemoveRecent,
-  } = useSearchChatBotStore();
+  } = useSearchChatBotStore(
+    useShallow((state) => ({
+      search: state.search,
+      setSearch: state.setSearch,
+      recentSearches: state.recentSearches,
+      handleSearch: state.handleSearch,
+      handleRemoveRecent: state.handleRemoveRecent,
+    }))
+  );
 
   return (
     <div className={style.searchBar}>
diff --git a/frontend/src/components/common/signIn/signInButton/signInButton.tsx b/frontend/src/components/common/signIn/signInButton/signInButton.tsx
@@ -1,11 +1,13 @@
-import style from './signInButton.module.css'
-import kakao from '@/assets/image/kakao.svg'
+import style from "./signInButton.module.css";
+import kakao from "@/assets/image/kakao.svg";
+import { useKakaoLogin } from "@/api/useKakaoLogin";
 
-export default function SignInButton(){
-    return(
-        <button className={style.signInBtn}>
-            <img src={kakao} alt="kakao"/>
-            <span>카카오로 시작하기</span>
-        </button>
-    )
-}
+export default function SignInButton() {
+  const { initiateKakaoLogin } = useKakaoLogin();
+  return (
+    <button className={style.signInBtn} onClick={initiateKakaoLogin}>
+      <img src={kakao} alt="kakao" />
+      <span>카카오로 시작하기</span>
+    </button>
+  );
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -1,10 +1,15 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById("root")!).render(
+  <QueryClientProvider client={queryClient}>
+    <StrictMode>
+      <App />
+    </StrictMode>
+  </QueryClientProvider>
+);
diff --git a/frontend/src/pages/oauth/kakao/RedirectPage.tsx b/frontend/src/pages/oauth/kakao/RedirectPage.tsx
@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import { useKakaoLogin } from "@/api/useKakaoLogin";
+
+export default function KakaoRedirectPage() {
+  const [searchParams] = useSearchParams();
+  const code = searchParams.get("code");
+  const { mutation } = useKakaoLogin();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (code) {
+      mutation.mutate(code, {
+        onSuccess: () => {
+          navigate("/");
+        },
+        onError: () => {
+          alert("로그인에 실패했습니다.");
+        },
+      });
+    }
+  }, [code, mutation, navigate]);
+
+  return <div>로그인 처리 중...</div>;
+}
diff --git a/frontend/src/services/.gitkeep b/frontend/src/services/.gitkeep
diff --git a/frontend/src/services/authService.ts b/frontend/src/services/authService.ts
@@ -0,0 +1,22 @@
+import axios from "axios";
+
+const KAKAO_CLIENT_ID = import.meta.env.VITE_KAKAO_CLIENT_ID;
+const KAKAO_AUTH_URL = import.meta.env.VITE_KAKAO_AUTH_URL;
+const KAKAO_REDIRECT_URI = import.meta.env.VITE_KAKAO_REDIRECT_URI;
+const API_URL = import.meta.env.VITE_API_URL;
+
+// 카카오 인증 URL 생성
+export const getKakaoAuthUrl = () => {
+  const params = new URLSearchParams({
+    client_id: KAKAO_CLIENT_ID,
+    redirect_uri: KAKAO_REDIRECT_URI,
+    response_type: "code",
+  });
+  return `${KAKAO_AUTH_URL}?${params.toString()}`;
+};
+
+// 백엔드에 인가코드로 로그인 요청
+export const signInWithKakao = async (code: string) => {
+  const response = await axios.post(`${API_URL}/auth/kakao`, { code });
+  return response.data;
+};
diff --git a/frontend/src/stores/useAuthStore.ts b/frontend/src/stores/useAuthStore.ts
@@ -0,0 +1,24 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import type User from "../types/user";
+
+interface AuthState {
+    user: User | null;
+    setUser: (user: User) => void;
+    clearUser: () => void;
+}
+
+export const useAuthStore = create<AuthState>()(
+    persist(
+        (set) => ({
+            user: null,
+            setUser: (user) => set({ user }),
+            clearUser: () => set({ user: null }),
+        }),
+        {
+            name: "auth-store",
+            partialize: (state) => ({ user: state.user }),
+        }
+    )
+);
+
diff --git a/frontend/src/stores/useSearchChatBotStore.ts b/frontend/src/stores/useSearchChatBotStore.ts
@@ -47,6 +47,10 @@ export const useSearchChatBotStore = create<SearchChatBotState>()(
         }));
       },
       setShowMore: (v) => set({ showMore: v }),
+      useClearRecentSearches: () => {
+        set({ recentSearches: [] });
+      },
+      
     }),
     {
       name: "search-chatbot-store",
diff --git a/frontend/src/stores/useTokenStore.ts b/frontend/src/stores/useTokenStore.ts
@@ -0,0 +1,24 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface TokenState {
+  accessToken: string | null;
+  refreshToken: string | null;
+  setToken: (accessToken: string, refreshToken: string) => void;
+  clearTokens: () => void;
+}
+
+export const useTokenStore = create<TokenState>()(
+  persist(
+    (set) => ({
+      accessToken: null,
+      refreshToken: null,
+      setToken: (accessToken, refreshToken) => set({ accessToken, refreshToken }),
+      clearTokens: () => set({ accessToken: null, refreshToken: null }),
+    }),
+    {
+      name: 'token-storage',
+        partialize: (state) => ({ accessToken: state.accessToken, refreshToken: state.refreshToken }),
+    }
+  )
+);
diff --git a/frontend/src/types/.gitkeep b/frontend/src/types/.gitkeep
diff --git a/frontend/src/types/chatBot.ts b/frontend/src/types/chatBot.ts
@@ -0,0 +1,8 @@
+export type ChatBotItem = {
+  keyword: string;
+  title: string;
+  highlight: string;
+  description: string;
+  detailsTitle: string;
+  details: { title: string; desc: string }[];
+};
diff --git a/frontend/src/types/user.ts b/frontend/src/types/user.ts
