MARA-9 소셜로그인 기능 구현 (#16)

* chore: 로그인 이미지 추가

* feat: 로그인 페이지 마크업 추가

* chore: 환경변수 .gitignore 추가

* feat: 카카오 로그인 코드 받아오기

* feat: 로그인 페이지 이동 HOC

* feat: 구글 로그인 URL 추가

* feat: 전역 QueryClientProvider 추가

* feat: 카카오 로그인 api 요청

Network Error

* feat: 식자재 불러오기 api 추가

Network Error

* fix: 쿼리 키 분리

* feat: 기본 useBaseQuery 추가

* chore: 프로필 경고메시지 atom 분리

* chore: 워크플로우 환경변수 추가

.github/workflows/workflow-pr.yml

@@ -26,5 +26,13 @@ jobs:
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
 
+      # 환경 변수 추가
+      - name: Set Environment Variables
+        run: |
+          echo "NEXT_PUBLIC_KAKAO_API_KEY=${{ secrets.NEXT_PUBLIC_KAKAO_API_KEY }}" >> .env
+          echo "NEXT_PUBLIC_KAKAO_REDIRECT_URI=${{ secrets.NEXT_PUBLIC_KAKAO_REDIRECT_URI }}" >> .env
+          echo "NEXT_PUBLIC_GOOGLE_API_KEY=${{ secrets.NEXT_PUBLIC_GOOGLE_API_KEY }}" >> .env
+          echo "NEXT_PUBLIC_GOOGLE_REDIRECT_URI=${{ secrets.NEXT_PUBLIC_GOOGLE_REDIRECT_URI }}" >> .env
+
       - name: Build
         run: yarn build

.github/workflows/workflow.yml

@@ -29,6 +29,14 @@ jobs:
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
 
+      # 환경 변수 추가
+      - name: Set Environment Variables
+        run: |
+          echo "NEXT_PUBLIC_KAKAO_API_KEY=${{ secrets.NEXT_PUBLIC_KAKAO_API_KEY }}" >> .env
+          echo "NEXT_PUBLIC_KAKAO_REDIRECT_URI=${{ secrets.NEXT_PUBLIC_KAKAO_REDIRECT_URI }}" >> .env
+          echo "NEXT_PUBLIC_GOOGLE_API_KEY=${{ secrets.NEXT_PUBLIC_GOOGLE_API_KEY }}" >> .env
+          echo "NEXT_PUBLIC_GOOGLE_REDIRECT_URI=${{ secrets.NEXT_PUBLIC_GOOGLE_REDIRECT_URI }}" >> .env
+
       - name: Build
         run: yarn build
 

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

package.json

@@ -24,6 +24,7 @@
     "@commitlint/config-conventional": "^18.4.3",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@tanstack/react-query": "^5.18.1",
     "@typescript-eslint/parser": "^6.19.0",
     "axios": "^1.6.5",
     "dayjs": "^1.11.10",

src/api/login/getToken.ts

@@ -0,0 +1,31 @@
+import axiosInstance from '../axiosInstance';
+
+interface LoginResponseType {
+  data: { accessToken: string; refreshToken: string; email: string };
+}
+
+const fetchKaKao = async (code: string): Promise<LoginResponseType> =>
+  await axiosInstance.get(`/users/kakao-login?code=${code}`);
+
+export const getKaKaoToken: (code: string) => Promise<void> = async (code) => {
+  fetchKaKao(code)
+    .then((response: LoginResponseType) => {
+      localStorage.setItem('token', response.data.accessToken);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};
+
+const fetchGoogle = async (code: string): Promise<LoginResponseType> =>
+  await axiosInstance.get(`/users/google-login?code=${code}`);
+
+export const getGoogleToken: (code: string) => Promise<void> = async (code) => {
+  fetchGoogle(code)
+    .then((response: LoginResponseType) => {
+      localStorage.setItem('token', response.data.accessToken);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};

src/components/atoms/ExclamationAlertSpan.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ExclamationIcon } from '@/assets/icons';
+
+interface AlertMessageProps {
+  message: string;
+  className?: string;
+}
+
+const ExclamationAlertSpan: React.FC<AlertMessageProps> = ({
+  message,
+  className,
+}) => {
+  return (
+    <span
+      className={`flex items-center gap-[4px] text-point4 body1-medium ${className}`}
+    >
+      <ExclamationIcon />
+      {message}
+    </span>
+  );
+};
+
+export default ExclamationAlertSpan;

src/components/atoms/index.ts

@@ -15,3 +15,4 @@ export { default as SortButton } from './SortButton';
 export { default as RadioButtonField } from './RadioButtonField';
 export { default as Input } from './Input';
 export { default as MiniButton } from './MiniButton';
+export { default as ExclamationAlertSpan } from './ExclamationAlertSpan';

src/components/templates/withLogin.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+const withLogin = (InnerComponent: React.FC) => {
+  return () => {
+    const router = useRouter();
+    const token = localStorage.getItem('token');
+
+    const redirectToLogin: () => Promise<void> = async () => {
+      if (!token) {
+        alert('로그인이 필요합니다.');
+        try {
+          await router.push('/login');
+        } catch (error) {
+          console.error('로그인 체크 에러', error);
+        }
+      }
+    };
+
+    useEffect(() => {
+      void redirectToLogin();
+    }, [token]);
+
+    return token ? <InnerComponent /> : null;
+  };
+};
+
+export default withLogin;

src/hooks/queries/fridge/index.ts

@@ -0,0 +1 @@
+export { default as useGetIngredientList } from './useGetIngredientList';

src/hooks/queries/fridge/useGetIngredientList.ts

@@ -0,0 +1,9 @@
+import type { IngredientType } from '@/types/fridge';
+import { queryKeys } from '../queryKeys';
+import { useBaseQuery } from '../useBaseQuery';
+
+const useGetIngredientList = () => {
+  return useBaseQuery<IngredientType>(queryKeys.INGREDIENT(), '/ingrs');
+};
+
+export default useGetIngredientList;

src/hooks/queries/queryKeys.ts

@@ -0,0 +1,5 @@
+export const queryKeys = {
+  INGREDIENT: (id?: number) => ['ingredient', id] as const,
+} as const;
+
+export type QueryKeys = (typeof queryKeys)[keyof typeof queryKeys];

src/hooks/queries/useBaseQuery.ts

@@ -0,0 +1,19 @@
+import axiosInstance from '@/api/axiosInstance';
+import { useQuery } from '@tanstack/react-query';
+
+export const fetchData = async <T>(url: string) => {
+  const response = await axiosInstance.get<{ data: T }>(url);
+  return response.data;
+};
+
+export const useBaseQuery = <T>(queryKey: any, url: string) => {
+  return useQuery({
+    queryKey,
+    queryFn: async () =>
+      await fetchData<T>(url)
+        .then((res) => res.data)
+        .catch((error) => {
+          console.error(error);
+        }),
+  });
+};