feat: add token setting and store setting (#39)

* feat: api token header setting

* chore: add zustand

* refactor: change localStorage logic to store method

* COMMENT: add task comment

* refactor: unify userId key naming rules

apply the rules except those set to key values in the post method param

package.json

@@ -30,7 +30,8 @@
     "react-router-dom": "5.3.4",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",

src/api/answer/index.ts

@@ -13,7 +13,7 @@ export const answerAPI = {
   list: async (
     param: T.GetAnswerListParam
   ): Promise<AxiosResponse<T.GetAnswerListResponse>> => {
-    const res = await api.get(`answer/${param.memberId}/list`);
+    const res = await api.get(`answer/${param.userId}/list`);
 
     return res;
   },
@@ -30,9 +30,9 @@ export const answerAPI = {
     return res;
   },
   getSelfReflectionAnswer: async (
-    memberId: string
+    userId: number
   ): Promise<T.SelfReflectionAnswerResponse> => {
-    const res = await api.get(`/self-reflection/${memberId}/list`);
+    const res = await api.get(`/self-reflection/${userId}/list`);
     return res.data;
   },
 };

src/api/answer/type.ts

@@ -20,7 +20,7 @@ export type AnswerCreateResponse = BaseResponse<{
 export type SelfReflectionAnswerResponse = BaseResponse<SelfReflection>;
 
 export type GetAnswerListParam = {
-  memberId: number;
+  userId: number;
 };
 
 export type GetAnswerListResponse = BaseResponse<{

src/api/index.ts

@@ -1,4 +1,8 @@
-import axios, { AxiosInstance } from "axios";
+import axios, {
+  AxiosHeaders,
+  AxiosInstance,
+  InternalAxiosRequestConfig,
+} from "axios";
 
 const BASE_URL: string = import.meta.env.VITE_API_HOST;
 const VERSION = import.meta.env.VITE_API_VERSION;
@@ -13,5 +17,26 @@ const createAxios = (): AxiosInstance => {
   return axios.create({ baseURL: BASE_URL + VERSION, headers: HEADERS });
 };
 
+// TODO: token 세팅 후 코드 수정 필요
+const token = "";
+const interceptors = (instance: AxiosInstance): AxiosInstance => {
+  instance.interceptors.request.use(
+    async (config: InternalAxiosRequestConfig) => {
+      if (!config.headers) {
+        config.headers = new AxiosHeaders();
+      }
+      config.headers.Authorization = `Bearer ${token}`;
+      return config;
+    },
+    (error) => {
+      return Promise.reject(error);
+    }
+  );
+  return instance;
+};
+
 // No token
-export const api: AxiosInstance = createAxios();
+export const api = createAxios();
+
+// With token
+export const apiWithToken = interceptors(api);

src/api/link/index.ts

@@ -2,11 +2,11 @@ import * as T from "./type";
 import { api } from "..";
 
 export async function getLink(
-  questionId: string,
-  memberId: string,
+  questionId: number,
+  userId: number,
   params: T.ShareLinkParam
 ): Promise<T.ShareLinkResponse> {
-  const res = await api.get(`/question/${questionId}/share-info/${memberId}`, {
+  const res = await api.get(`/question/${questionId}/share-info/${userId}`, {
     params,
   });
   return res.data;

src/api/member/index.ts

@@ -18,9 +18,9 @@ export const memberAPI = {
     return res;
   },
   search: async (
-    memberId: string
+    userId: number
   ): Promise<AxiosResponse<T.MemberSearchResponse>> => {
-    const res = await api.get(`/member/${memberId}`);
+    const res = await api.get(`/member/${userId}`);
 
     return res;
   },

src/api/self-reflection/index.ts

@@ -3,25 +3,21 @@ import { api } from "..";
 import * as T from "./type";
 
 export const selfReflection = {
-  getCommonQuestions: async (
-    memberId: string
-  ): Promise<AxiosResponse<T.QuestionResponse>> => {
-    return api.get("/self-reflection/common-question", {
-      params: { memberId },
-    });
+  getCommonQuestions: async (): Promise<AxiosResponse<T.QuestionResponse>> => {
+    return api.get("/self-reflection/common-question");
   },
 
   getSelfReflection: async (
-    memberId: string
+    userId: number
   ): Promise<AxiosResponse<T.GetReflectionAnswerResponse>> => {
-    return api.get(`/self-reflection/${memberId}/list`);
+    return api.get(`/self-reflection/${userId}/list`);
   },
 
   submitReflections: async (
-    memberId: string,
+    userId: number,
     reflections: T.ReflectionRequest[]
   ) => {
-    return api.post(`/self-reflection/${memberId}`, {
+    return api.post(`/self-reflection/${userId}`, {
       reflections,
     });
   },

src/api/settings/index.ts

@@ -4,15 +4,15 @@ import { api } from "@/api";
 
 export const userInfo = {
   getSettings: async (
-    memberId: string
+    userId: number
   ): Promise<AxiosResponse<MemberResponse>> => {
-    return api.get(`/member/${memberId}`);
+    return api.get(`/member/${userId}`);
   },
 
   updateSettings: async (
-    memberId: string,
+    userId: number,
     settings: MemberSettings
   ): Promise<AxiosResponse<MemberResponse>> => {
-    return api.put(`/member/${memberId}`, settings);
+    return api.put(`/member/${userId}`, settings);
   },
 };

src/components/common/snowFall.tsx

@@ -1,13 +1,15 @@
-import { answerAPI } from "@/api/answer";
 import { useEffect, useState } from "react";
+import { answerAPI } from "@/api/answer";
+
+import { useUserStore } from "@/store/userStore";
 
 const Snowfall = () => {
   const snowflakes = Array.from({ length: 50 });
 
   const [snowColorArray, setSnowColorArray] = useState<string[]>([]);
 
-  const handleSnowflakeColor = async (memberId: number) => {
-    await answerAPI.list({ memberId }).then((res) => {
+  const handleSnowflakeColor = async (userId: number) => {
+    await answerAPI.list({ userId }).then((res) => {
       const data = res.data.data;
 
       const colorArr = data.list?.map((answer) => answer.colorCode);
@@ -17,9 +19,9 @@ const Snowfall = () => {
     });
   };
 
-  const userId = Number(localStorage.getItem("userId"));
+  const { userId } = useUserStore();
   useEffect(() => {
-    handleSnowflakeColor(userId);
+    if (userId) handleSnowflakeColor(userId);
   }, [userId]);
 
   return (

src/components/display/DirectLogin.tsx

@@ -15,7 +15,7 @@ export function DirectLogin() {
         onClick={() =>
           history.push({
             pathname: "/member-login",
-            state: { memberId: DUMMY_MEMBER_ID },
+            state: { userId: DUMMY_MEMBER_ID },
           })
         }
       >

src/components/share/ShareButton.tsx

@@ -6,27 +6,21 @@ import { SHARE_LINK_PARAM } from "@/constant/link";
 
 type Props = {
   className?: string;
-  memberId: number;
+  userId: number;
   questionId: number;
 };
 
-export default function ShareButton({
-  className,
-  memberId,
-  questionId,
-}: Props) {
+export default function ShareButton({ className, userId, questionId }: Props) {
   const { toast } = useToast();
 
   const copyShareLinkAddress = () => {
-    getLink(String(questionId), String(memberId), SHARE_LINK_PARAM).then(
-      (data) => {
-        navigator.clipboard.writeText(data.data.url).then(() => {
-          toast({
-            description: "링크가 복사되었습니다",
-          });
+    getLink(questionId, userId, SHARE_LINK_PARAM).then((data) => {
+      navigator.clipboard.writeText(data.data.url).then(() => {
+        toast({
+          description: "링크가 복사되었습니다",
         });
-      }
-    );
+      });
+    });
   };
 
   return (

src/hooks/useSelfReflection.ts

@@ -3,15 +3,15 @@ import { answerAPI } from "@/api/answer";
 import { SelfReflection } from "@/types/self-reflection";
 import { useToast } from "@/hooks/use-toast";
 
-export function useSelfReflection(memberId: string) {
+export function useSelfReflection(userId: number) {
   const [selfReflection, setSelfReflection] = useState<SelfReflection>([]);
   const [isLoading, setIsLoading] = useState(true);
   const { toast } = useToast();
 
   useEffect(() => {
     const fetchSelfReflection = async () => {
       try {
-        const response = await answerAPI.getSelfReflectionAnswer(memberId);
+        const response = await answerAPI.getSelfReflectionAnswer(userId);
         setSelfReflection(response.data);
       } catch (error) {
         toast({
@@ -25,7 +25,7 @@ export function useSelfReflection(memberId: string) {
     };
 
     fetchSelfReflection();
-  }, [memberId]);
+  }, [userId, toast]);
 
   return {
     selfReflection,

src/pages/answer-create/index.tsx

@@ -1,20 +1,24 @@
+import { useState, useMemo } from "react";
 import { useLocation } from "react-router-dom";
 
+import { answerAPI } from "@/api/answer";
+import { memberAPI } from "@/api/member";
+
 import { ColorPicker } from "@/components/color/ColorPicker";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { MOCK_MEMBER } from "../_mock/data/member";
-import { useState, useMemo } from "react";
+import UnderlineInput from "@/components/input/UnderlineInput";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import UnderlineInput from "@/components/input/UnderlineInput";
-import { COLOR_CODE_LIST } from "@/constant/color";
-import { answerAPI } from "@/api/answer";
 import { DirectLogin } from "@/components/display/DirectLogin";
-import { memberAPI } from "@/api/member";
+
+import { MOCK_MEMBER } from "../_mock/data/member";
+import { COLOR_CODE_LIST } from "@/constant/color";
+
+import { useUserStore } from "@/store/userStore";
 
 function useQuery() {
   const { search } = useLocation();
@@ -23,27 +27,29 @@ function useQuery() {
 
 export default function AnswerCreate() {
   const query = useQuery();
-  // const memberId = query.get("memberId") as string;
+
+  // TODO: questionId로 질문 정보 조회하는 api 연결 필요
   const questionId = query.get("questionId") as string;
 
   const [colorCode, setColorCode] = useState<string | undefined>(undefined);
   const [content, setContent] = useState<string>("");
   const [userNickname, setUserNicname] = useState<string>("");
   const [senderName, setSenderName] = useState<string>("");
 
-  const storedId = localStorage.getItem("userId");
+  const { userId } = useUserStore();
 
-  if (!storedId) {
+  if (!userId) {
+    // TODO: 추후 질문에 설정된 옵션에 따라 login 체크 여부 나뉘도록 설정 필요
     return <DirectLogin />;
   }
 
   const sendAnswer = async () => {
-    await memberAPI.search(storedId).then((res) => {
+    await memberAPI.search(userId).then((res) => {
       const userInfo = res.data.data;
       setUserNicname(userInfo.nickname);
 
       answerAPI.create({
-        memberId: Number(storedId),
+        memberId: userId,
         questionId: questionId,
         nickname: userNickname,
         sender: senderName,