[김도균] Sprint11

README.md

@@ -2,6 +2,22 @@
 
 **코드잇 12기 스프린트 내용입니다.**
 
+## 11주차 스프린트
+
+### 서버 액션 로직 간소화
+- fetch로만 로그인 로직을 처리하려고 하니, refresh 토큰을 이용하여 재 요청할 때 코드가 복잡하여 읽기가 힘들었다.
+- 또한, 공통으로 사용되는 로직이 있는데, 이 부분도 fetch로 하려고 하니, 공통되는 부분을 추출하기가 힘들었다.
+- axios 라이브러리 중 인터셉터를 활용하여 본래 가지고 있던 accessToken이 만료됨에 따라 재요청하는 로직을 공통으로 묶었다.
+- axios로 바꿨더니, 기존 fetch 코드보다 조금 더 가독성이 향상 되었고, accessToken 재요청 로직을 재사용할 수 있었다.
+
+### 로그인 상태 감지
+- 요구사항에서 accessToken이 로컬스토리지에 존재하면 로그인 버튼이 프로필 아이콘으로 바뀌고, 존재하지 않으면 로그인 버튼이 렌더링되도록 구현해야 했다.
+- 사용자가 로그아웃이나 웹사이트 최초 접속 후 로그인을 할 시 단순 이벤트로 처리하면 로컬스토리지의 값의 변화를 인식하지 못한다.
+- 때문에 이 accessToken(로그인) 상태를 관리하는 것이 필요하다고 생각했고, 전역 상태관리를 해야한다고 생각했다.
+- Context API나 Redux 등이 있지만, 간편하게 사용하기 위해서 Zustand 상태관리 라이브러리를 사용하였다.
+- `useAuthStore`에 accessToken을 관리하도록 코드를 작성했고, 전역 상태이다 보니 다른 페이지나 컴포넌트의 상호작용으로 accessToken이 변경될 때 상태를 감지하도록 반영했다.
+
+
 ## 10주차 스프린트
 
 ### 댓글 추가에 따른 revalidate 관련 이슈

package.json

@@ -11,14 +11,16 @@
   "dependencies": {
     "@fontsource/pretendard": "^5.1.0",
     "@tanstack/react-query": "^5.64.1",
+    "axios": "^1.7.9",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "es-toolkit": "^1.31.0",
     "next": "15.1.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
-    "react-intersection-observer": "^9.15.0"
+    "react-intersection-observer": "^9.15.0",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",