feat: #67/네비게이션 바 유저 메뉴 로그아웃 api 연결 & 로그인/로그아웃 시 리디렉트 & 실제 액세스 토큰으로 리퀘스트

[hyeonjiroh]

#️⃣ Issue Number

#67

📝 요약

• 로그인 시 localStorage 뿐만 아니라 cookie에도 액세스 토큰 값을 저장하도록 변경(서버 컴포넌트에서는 localStorage에서 토큰 값을 가져올 수 없어서 cookie에서 가져와야 됨)
• 로그아웃 시 localStorage와 cookie에 저장했던 토큰 값 지운 뒤 / 페이지로 이동
• 임시 토큰으로 리퀘스트 보냈던 부분들을 실제 localStorage와 cookie에 저장되어 있는 토큰으로 리퀘스트 보내는 것으로 변경
• fetchDashboardMember 함수의 리퀘스트 쿼리 변경

🛠️ PR 유형

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항(오타 수정, 변수명 변경 등)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

📢 공유 사항

📚 참고 자료

fetchDashboardMember 함수 사용법

1. 페이지 사이즈 상수 선언
   이 페이지 사이즈만큼 데이터를 한 페이지씩 불러옵니다.

const PAGE_SIZE = 4;

2. 전역 dashboardId 값 가져오기(리퀘스트 시 필요)

import { useDashboardStore } from "@/lib/store/useDashboardStore";
...
컴포넌트 내에서
const { dashboardId } = useDashboardStore();

3. handleLoad 같은 함수를 선언한 뒤 그 안에서 fetchDashboardMember 함수를 호출

const handleLoad = async () => {
if (!dashboardId) return; // dashboardId가 없는 경우에는 리퀘스트 못 보내도록 이 코드 꼭 필요

      const {
      members,
      totalCount,
    } = await fetchDashboardMember({
      token: accessToken, // 위의 accessToken 값 가져오는 방법 참고
      page: page, // 아마 `page` state를 만들어서 그 값을 여기 담아 보내게 될 겁니다.
      size: PAGE_SIZE,
      cursorId,
      columnId: dashboardId, // 전역으로 관리하는 dashboardId 그냥 넣어주시면 됩니다.
    });

4. useEffect에서 handleLoad 함수 실행

useEffect(() => {
  handleLoad();
}, []);

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
taskify	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 30, 2025 0:43am