Feature/#304 팀페이지 권한 수정 (#306)

* feat: 사이드바에서 팀 조회시 myTeamAtom으로 상태 저장

#304

* feat: myTeamAtom 구조 수정

#304

* fix: 비회원일 때 정보가 없어서 생기는 에러 해결

#304

src/app/team/[teamId]/page.tsx

@@ -146,8 +146,8 @@ const Page = ({ params }: { params: { teamId: number } }) => {
   const [isMyTeam, setIsMyTeam] = useState<boolean>(false);
 
   useEffect(() => {
-    if (myTeam.teams !== undefined) {
-      const res = myTeam.teams.filter((teamId) => teamId === params.teamId);
+    if (myTeam !== undefined) {
+      const res = myTeam.filter((teamId) => teamId === Number(params.teamId));
       setIsMyTeam(res.length === 1);
     }
   }, [myTeam, params.teamId]);

src/atom.ts

@@ -15,8 +15,6 @@ export const defaultUserAtom = {
 
 export const userAtom = atomWithStorage('user', defaultUserAtom as UserAtomType);
 
-export const myTeamAtom = atomWithStorage<{ teams: number[] }>('myTeam', {
-  teams: [],
-});
+export const myTeamAtom = atomWithStorage('myTeam', []);
 
 export const loginBackPathAtom = atomWithStorage('loginBackPath', '/');

src/components/Sidebar/SidebarContent/index.tsx

@@ -2,13 +2,13 @@
 
 import { Avatar, Button, Flex, IconButton, Text } from '@chakra-ui/react';
 import { useSetAtom } from 'jotai';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { BiBell, BiUser } from 'react-icons/bi';
 import { BsPlus, BsGrid } from 'react-icons/bs';
 import { MdOutlineLogout } from 'react-icons/md';
 
 import { useGetSideBarInfoQuery } from '@/app/api/member';
-import { defaultUserAtom, userAtom } from '@/atom';
+import { defaultUserAtom, myTeamAtom, userAtom } from '@/atom';
 import TeamModal from '@/containers/team/TeamModal';
 import useGetUser from '@/hooks/useGetUser';
 
@@ -20,8 +20,16 @@ const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
   const [isTeamModalOpen, setIsTeamModalOpen] = useState<boolean>(false);
   const user = useGetUser();
   const setUser = useSetAtom(userAtom);
+  const setMyTeams = useSetAtom(myTeamAtom);
   const { data: sidebarInfo } = useGetSideBarInfoQuery();
 
+  useEffect(() => {
+    const myTeams = sidebarInfo?.body.myTeamsAndStudies
+      ? sidebarInfo.body.myTeamsAndStudies.map((team: { teamId: number }) => team.teamId)
+      : [];
+    setMyTeams(myTeams);
+  }, [setMyTeams, sidebarInfo]);
+
   return (
     <>
       <Flex pos="sticky" top="0" left="0" direction="column" h="100vh" px={isOpen ? '4' : '2'} py="4" bg="green">