feat: 카카오 로그인 구현 (회원가입 기능 완료 전)

src/app/provider/authStore.ts

@@ -1,15 +1,29 @@
 import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 interface AuthStore {
+  accessToken: string | null;
+  refreshToken: string | null;
+  setAccessToken: (token: string | null) => void;
+  setRefreshToken: (token: string | null) => void;
+
   isModalOpen: boolean;
   openModal: () => void;
   closeModal: () => void;
 }
 
-const useAuthStore = create<AuthStore>(set => ({
-  isModalOpen: false,
-  openModal: () => set({ isModalOpen: true }),
-  closeModal: () => set({ isModalOpen: false }),
-}));
+export const useAuthStore = create<AuthStore>()(
+  persist(
+    (set) => ({
+      accessToken: null,
+      refreshToken: null,
+      setAccessToken: (token) => set({ accessToken: token }),
+      setRefreshToken: (token) => set({ refreshToken: token }),
+      isModalOpen: false,
+      openModal: () => set({ isModalOpen: true }),
+      closeModal: () => set({ isModalOpen: false }),
+    }), { name: 'auth-storage' }
+  )
+);
 
 export default useAuthStore;

src/pages/home/ui/MainPage.tsx

@@ -32,7 +32,7 @@ const MainPage = () => {
   const [closingStartIndex, setClosingStartIndex] = useState<number>(0);
   const maxCardsToShow = 2;
   const navigate = useNavigate();
-  const { isModalOpen, openModal, closeModal } = useAuthStore();
+  const { isModalOpen, openModal, closeModal} = useAuthStore();
 
   type SetStartIndex = Dispatch<SetStateAction<number>>;
 
@@ -51,12 +51,12 @@ const MainPage = () => {
           <SearchTextField
             iconPath={<img src={searchIcon} alt="Search" />}
             onClick={() => navigate('/search')}
-            onChange={() => {}}
+            onChange={() => { }}
             placeholder="입력해주세요"
           />
         }
         leftButtonClassName="sm:text-lg md:text-xl lg:text-2xl font-extrabold font-nexon"
-        leftButtonClick={() => {}}
+        leftButtonClick={() => { }}
         leftButtonLabel="같이가요"
         rightContent={<SecondaryButton size="large" color="black" label="로그인" onClick={openModal} />}
       />
@@ -91,6 +91,7 @@ const MainPage = () => {
             )
             .map((event, index) => (
               <EventCard
+                id={index}
                 key={index}
                 img={event.img}
                 eventTitle={event.eventTitle}
@@ -127,6 +128,7 @@ const MainPage = () => {
             )
             .map((event, index) => (
               <EventCard
+                id={index}
                 key={index}
                 img={event.img}
                 eventTitle={event.eventTitle}
@@ -165,6 +167,7 @@ const MainPage = () => {
             )
             .map((event, index) => (
               <EventCard
+                id={index}
                 key={index}
                 img={event.img}
                 eventTitle={event.eventTitle}

src/pages/menu/ui/MyTicketPage.tsx

@@ -8,6 +8,8 @@ import { readTicket } from '../../../features/ticket/api/order';
 import completedImg from '../../../../public/assets/menu/Completed.svg';
 import pendingImg from '../../../../public/assets/menu/Pending.svg';
 import ticketImg from '../../../../public/assets/menu/Ticket.svg';
+import useAuthStore from '../../../app/provider/authStore';
+import Cookies from 'js-cookie';
 
 type Ticket = {
   id: number;
@@ -33,7 +35,22 @@ const MyTicketPage = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [myTickets, setMyTickets] = useState<Ticket[]>([]);
   const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
-
+  const { setAccessToken, setRefreshToken } = useAuthStore();
+  useEffect(() => {
+    const accessToken = Cookies.get('access-token');
+    const refreshToken = Cookies.get('refresh-token');
+
+    console.log("access-token:", accessToken);
+    console.log("refresh-token:", refreshToken);
+
+    if (accessToken) {
+      setAccessToken(accessToken);
+    }
+    if (refreshToken) {
+      setRefreshToken(refreshToken);
+    }
+  }, []);
+
   useEffect(() => {
     const fetchMyTickets = async () => {
       try {

src/shared/types/api/http-client.ts

@@ -6,20 +6,21 @@ import useAuthStore from '../../../app/provider/authStore';
 export const axiosClient = axios.create({
   baseURL: 'http://ec2-3-35-48-123.ap-northeast-2.compute.amazonaws.com:8080/api/v1',
   timeout: 3000,
+  withCredentials: true,
   headers: {
     'Content-Type': 'application/json',
-    Authorization: `Bearer ${import.meta.env.VITE_HEADER_TOKEN}`,
+    //Authorization: `Bearer `,
   },
 });
 
 axiosClient.interceptors.request.use(
   config => {
-    const token = Cookies.get('access_token');
+    //const token = Cookies.get('access_token');
     //zustand 사용함으로써 코드변경 할 듯 현재는 임시 입니다.
-
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
-    }
+    // const token = useAuthStore.getState().accessToken;
+    // if (token) {
+    //   config.headers.Authorization = `Bearer ${token}`;
+    // }
 
     return config;
   },

src/widgets/main/ui/LoginModal.tsx

@@ -9,6 +9,12 @@ interface LoginModalProps {
 }
 
 const LoginModal = ({ onClose }: LoginModalProps) => {
+  const kakaoLogin = () => {
+    window.location.href = 'http://ec2-3-35-48-123.ap-northeast-2.compute.amazonaws.com:8080/oauth2/authorization/kakao';
+  };
+  const gooleLogin = () => {
+    window.location.href = 'http://ec2-3-35-48-123.ap-northeast-2.compute.amazonaws.com:8080/oauth2/authorization/google';
+  }
   return (
     <motion.div
       initial={{ y: '-100vh', opacity: 0 }}
@@ -30,15 +36,15 @@ const LoginModal = ({ onClose }: LoginModalProps) => {
             <HorizontalCardButton
               iconPath={<img src={kakao} alt="카카오 아이콘" className="" />}
               label="카카오 로그인"
-              onClick={() => {}}
+              onClick={kakaoLogin}
               className="mx-auto my-auto"
             />
           </div>
           <div className="flex items-center w-full h-12 bg-white gap-4 rounded-full">
             <HorizontalCardButton
               iconPath={<img src={google} alt="구글 아이콘" className="" />}
               label="Google 로그인"
-              onClick={() => {}}
+              onClick={gooleLogin}
               className="mx-auto my-auto"
             />
           </div>