Refactor/kakao login csr

src/axios/config/axios-instance.ts

@@ -1,6 +1,8 @@
+import { getLocalStorage } from "@/utils/storage";
 import axios, { Method } from "axios";
+import { LOCAL_STORAGE } from "@/constants";
 
-// const API_END_POINT = process.env.NEXT_PUBLIC_API_END_POINT;
+const { TOKEN } = LOCAL_STORAGE;
 const API_END_POINT = "/api";
 
 const METHOD: Record<string, Method> = {
@@ -13,12 +15,15 @@ const METHOD: Record<string, Method> = {
 
 const { GET, POST, DELETE, PUT, PATCH } = METHOD;
 
-//공통 instance
-//TODO : Authorization이 필요하다면 등록
 const getDefaultInstance = (method: Method) => {
+  const token = getLocalStorage(TOKEN);
+
   const defaultInstance = axios.create({
     baseURL: API_END_POINT,
     method,
+    headers: {
+      Authorization: token ? `Bearer ${token}` : "",
+    },
   });
 
   return defaultInstance;

src/axios/groups.ts

@@ -3,17 +3,18 @@ import { removeLocalStorage } from "@/utils/storage";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import HTTP from "./config/axios-instance";
+import { LOCAL_STORAGE } from "@/constants";
+
+const { TOKEN, LOGOUT_TOKEN } = LOCAL_STORAGE;
 
 const ERROR_DEFAULT_MSG = "오류가 발생했습니다.";
+const ERROR_CODE_REMOVE_LOCAL_STORAGE = "MOO1";
 
 export const GroupsApi = {
-  getAll: async (token: string) => {
+  getAll: async () => {
     try {
       const { data } = await HTTP.get({
         url: "/v1/groups",
-        headers: {
-          Authorization: token,
-        },
       });
 
       return data;
@@ -22,26 +23,23 @@ export const GroupsApi = {
       if (axios.isAxiosError(e)) {
         const data = e.response?.data;
 
-        if (data.errorCode === "M001") {
-          removeLocalStorage("logoutToken");
-          removeLocalStorage("token");
+        if (data.errorCode === ERROR_CODE_REMOVE_LOCAL_STORAGE) {
+          removeLocalStorage(LOGOUT_TOKEN);
+          removeLocalStorage(TOKEN);
         }
 
         const errorMessage = data.error || ERROR_DEFAULT_MSG;
         throw new Error(errorMessage);
       }
     }
   },
-  postCreateGroup: async (token: string, count: string) => {
+  postCreateGroup: async (count: string) => {
     try {
       const { data } = await HTTP.post({
         url: "/v1/groups/post",
         data: {
           capacity: count,
         },
-        headers: {
-          Authorization: token,
-        },
       });
 
       return data;

src/components/layout/header.tsx

@@ -133,22 +133,8 @@ const Header = ({ token }: TokenProps) => {
           </HeaderIconWrap>
         </>
       )}
+
       <TextP>{HEADER_TEXT}</TextP>
-      {!token && !tokenData && (
-        <>
-          <HeaderIconWrap>
-            <Tooltip title='로그인' arrow>
-              <IconButton
-                onClick={handleClickLogin}
-                style={{
-                  color: "white",
-                }}>
-                <LoginIcon />
-              </IconButton>
-            </Tooltip>
-          </HeaderIconWrap>
-        </>
-      )}
 
       <embed src='/logo1.svg' width={147} height={56} />
     </HeaderContainer>

src/constants/error.ts

@@ -1,4 +1,4 @@
-export const ERROR_TEXT = {
+export const ERROR_CLIENT_TEXT = {
   ERROR_OUT_OF_BOUND: "수도권 내의 범위로 출발지를 입력해주세요",
   ERROR_DUPLICATE_START_POINT: "중복 출발지입니다",
   ERROR_MISSING_START_POINT: "주소를 2개 이상 입력해주세요",

src/constants/index.ts

@@ -1,6 +1,6 @@
 export { COLORS } from "./css";
-export { ERROR_TEXT } from "./error";
+export { ERROR_CLIENT_TEXT } from "./error";
 export { ROUTES } from "./routes";
-export { COUNT } from "./local-storage";
+export { COUNT, LOCAL_STORAGE } from "./local-storage";
 export { BUTTON_TEXT, MAIN_TEXT, MODAL_TEXT } from "./component-text";
 export { STATUS_CODE } from "./status";

src/constants/local-storage.ts

@@ -1 +1,7 @@
 export const COUNT = "count";
+
+export const LOCAL_STORAGE = {
+  COUNT: "count",
+  TOKEN: "token",
+  LOGOUT_TOKEN: "logoutToken",
+};

src/hooks/use-signup-search.ts

@@ -21,10 +21,9 @@ const useSignupSearch = () => {
 
   const [isToggleBoxLoading, setToggleBoxIsLoading] = useState(true);
 
-  const [token, setToken] = useState("");
+  const [, setToken] = useState("");
 
   const router = useRouter();
-  console.log(token);
 
   const handleChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;

src/pages/api/v1/groups/index.ts

@@ -16,7 +16,7 @@ export default async function handler(
       url: requestUrl,
       method: "get",
       headers: {
-        Authorization: `Bearer ${authorization}`,
+        Authorization: authorization,
       },
     });
 

src/pages/api/v1/groups/post/index.ts

@@ -20,7 +20,7 @@ export default async function handler(
         capacity,
       },
       headers: {
-        Authorization: `Bearer ${authorization}`,
+        Authorization: authorization,
       },
     });
 

src/pages/group/[groupId].tsx

@@ -3,7 +3,7 @@ import { MidPointApi } from "@/axios/mid-point";
 import FormInput from "@/components/common/form-input";
 import Header from "@/components/layout/header";
 import Main from "@/components/layout/main";
-import { COLORS, COUNT, ERROR_TEXT } from "@/constants";
+import { COLORS, COUNT, ERROR_CLIENT_TEXT } from "@/constants";
 import { useModal } from "@/hooks";
 import { isFirstVisitState, MidPointState } from "@/recoil";
 import { searchProps } from "@/types/search-props";
@@ -211,12 +211,12 @@ const GroupPage = () => {
           try {
             const count = getLocalStorage(COUNT);
             if (count === "")
-              throw new Error(ERROR_TEXT.ERROR_UNSELECT_PEOPLE_COUNT);
+              throw new Error(ERROR_CLIENT_TEXT.ERROR_UNSELECT_PEOPLE_COUNT);
 
             //만료된 방이 있다면, 방 삭제 후, 방 만들기
             await GroupsApi.deleteGroup(gId, token);
 
-            const data = await GroupsApi.postCreateGroup(token, count);
+            const data = await GroupsApi.postCreateGroup(count);
             setLocalStorage(COUNT, "");
 
             const { groupId } = data;

src/pages/index.tsx

@@ -24,7 +24,7 @@ import {
 import { useModal, useMultipleInputs, useTimeoutFn } from "@/hooks";
 import { isFirstVisitState, MidPointState, searchState } from "@/recoil";
 import { BUTTON_TEXT, MAIN_TEXT, MODAL_TEXT } from "@/constants/component-text";
-import { COUNT, ERROR_TEXT, ROUTES } from "@/constants";
+import { LOCAL_STORAGE, ERROR_CLIENT_TEXT, ROUTES } from "@/constants";
 import { AllGroupsResponse } from "@/types/api/group";
 import { formatTime, inputsEqual } from "@/utils/helpers";
 import Main from "@/components/layout/main";
@@ -41,15 +41,23 @@ const {
 
 const { LOGIN_TEXT, CLOSE_TEXT, MAKE_A_GROUP_TEXT } = MODAL_TEXT;
 
-const { ERROR_UNSELECT_PEOPLE_COUNT, ERROR_DUPLICATE_START_POINT } = ERROR_TEXT;
+const { ERROR_UNSELECT_PEOPLE_COUNT, ERROR_DUPLICATE_START_POINT } =
+  ERROR_CLIENT_TEXT;
 
 const { SEARCH, LOGIN, MAP, GROUP, HOME } = ROUTES;
 
+const { COUNT, TOKEN } = LOCAL_STORAGE;
+
+const NOT_SHOW_TOAST_MESSAGE_ERROR_CODE = {
+  M001: "M001",
+  G007: "G007",
+};
+
 export default function Home() {
   const [isLoading, setIsLoading] = useState(false);
   const [groupId, setGroupId] = useState("");
   const [midPointResponse, setMidPointResponse] = useRecoilState(MidPointState);
-  const token = getLocalStorage("token");
+  const token = getLocalStorage(TOKEN);
   const hasAccessToken = token ? true : false;
   const [addressList, setAddressList] = useRecoilState(searchState);
   const { inputs, addInput, removeInput } = useMultipleInputs();
@@ -85,7 +93,7 @@ export default function Home() {
           await GroupsApi.deleteGroup(gId, token);
         }
 
-        const data = await GroupsApi.postCreateGroup(token, count);
+        const data = await GroupsApi.postCreateGroup(count);
         setLocalStorage(COUNT, "");
 
         const { groupId } = data;
@@ -106,7 +114,7 @@ export default function Home() {
     handleConfirm: async () => {
       try {
         const { groupId, minutes, seconds } =
-          await getMinutesSecondsAndGroupIdFromGroupAPI(token);
+          await getMinutesSecondsAndGroupIdFromGroupAPI();
 
         minutes === 0 && seconds === 0
           ? router.push(`${HOME}`)
@@ -118,8 +126,8 @@ export default function Home() {
     },
   });
 
-  const getMinutesSecondsAndGroupIdFromGroupAPI = async (token: string) => {
-    const { groups }: AllGroupsResponse = await GroupsApi.getAll(token);
+  const getMinutesSecondsAndGroupIdFromGroupAPI = async () => {
+    const { groups }: AllGroupsResponse = await GroupsApi.getAll();
     const { groupId, remainingTime } = groups[0];
     const { minutes, seconds } = formatTime(remainingTime);
 
@@ -135,18 +143,19 @@ export default function Home() {
       if (!hasAccessToken) return;
 
       try {
-        const data = await GroupsApi.getAll(token);
+        const data = await GroupsApi.getAll();
         const groupId = data?.groups?.[0]?.groupId || "";
 
         await GroupsApi.getGroup(groupId, token);
 
         setGroupId(groupId);
       } catch (e) {
         const errorMessage = e instanceof Error ? e.message : String(e);
+        const { M001, G007 } = NOT_SHOW_TOAST_MESSAGE_ERROR_CODE;
 
         if (
-          errorMessage !== CustomError["G007"].error &&
-          errorMessage !== CustomError["M001"].error
+          errorMessage !== CustomError[G007].error &&
+          errorMessage !== CustomError[M001].error
         )
           toast.error(errorMessage);
 
@@ -177,7 +186,7 @@ export default function Home() {
 
     try {
       const { minutes, seconds } =
-        await getMinutesSecondsAndGroupIdFromGroupAPI(token);
+        await getMinutesSecondsAndGroupIdFromGroupAPI();
 
       if (minutes === 0 || seconds === 0) {
         openModal(getSelectModalConfig(false, groupId));