Fix: 초대 페이지 네비바 연결

moidot · Mar 18, 2024 · 1132f28 · 1132f28
1 parent 5a1b829
commit 1132f28
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 10 deletions.
diff --git a/src/components/common/navbar/NavInfo.ts b/src/components/common/navbar/NavInfo.ts
@@ -19,4 +19,8 @@ export const NAV_INFO = {
     label: '투표',
     url: NAV_URL_LIST.VOTE,
   },
+  [NAV_LIST.INVITE]: {
+    label: '초대',
+    url: NAV_URL_LIST.INVITE,
+  },
 } as const satisfies Record<(typeof NAV_LIST)[keyof typeof NAV_LIST], NavItemType>;
diff --git a/src/components/common/navbar/NavItem.tsx b/src/components/common/navbar/NavItem.tsx
@@ -7,14 +7,14 @@ type NavListType = keyof typeof NAV_LIST;
 interface NavItemProps {
   type: NavListType;
   isFocused: boolean;
-  groupId: number;
+  groupId: string | null;
 }
 
 const NavItem = ({ type, isFocused, groupId }: NavItemProps) => {
   const { url, label } = NAV_INFO[type];
   return (
     <>
-      {isFocused ? (
+      {isFocused && groupId !== null ? (
         <Link href={`${url}/${groupId}`} className="w-[400px] h-[29px] text-center">
           <div className="font-thin font-Pretendard text-main_orange text-b2">{label}</div>
           <div className="mt-1.5 w-full h-0.5 bg-main_orange rounded-2xl"></div>

diff --git a/src/components/common/navbar/Navigation.ts b/src/components/common/navbar/Navigation.ts
@@ -2,9 +2,11 @@ export const NAV_LIST = {
   MAIN: 'MAIN',
   PARTICIPANT: 'PARTICIPANT',
   VOTE: 'VOTE',
+  INVITE: 'INVITE',
 } as const;
 export const NAV_URL_LIST = {
   [NAV_LIST.MAIN]: '/main',
   [NAV_LIST.PARTICIPANT]: '/participant',
   [NAV_LIST.VOTE]: '/vote',
+  [NAV_LIST.INVITE]: '/invite',
 } as const;
diff --git a/src/components/common/navbar/index.tsx b/src/components/common/navbar/index.tsx
@@ -1,15 +1,12 @@
-import { useRecoilValue } from 'recoil';
 import { NAV_URL_LIST, NAV_LIST } from './Navigation';
 import NavItem from './NavItem';
-import { groupIdAtom } from '@/states/groupIdAtom';
 
 interface NavigationBarProps {
   focusType: keyof typeof NAV_URL_LIST;
 }
 
 const Navbar = ({ focusType }: NavigationBarProps) => {
-  const group = useRecoilValue(groupIdAtom);
-  const groupId = group.groupId;
+  const groupId = sessionStorage.getItem('groupId');
 
   return (
     <>

diff --git a/src/components/common/navbar/inviteIndex.tsx b/src/components/common/navbar/inviteIndex.tsx
@@ -0,0 +1,21 @@
+import { NAV_URL_LIST, NAV_LIST } from './Navigation';
+import NavItem from './NavItem';
+
+interface NavigationBarProps {
+  focusType: keyof typeof NAV_URL_LIST;
+}
+
+const InviteNavbar = ({ focusType }: NavigationBarProps) => {
+  const groupId = sessionStorage.getItem('groupId');
+
+  return (
+    <>
+      <div className="flex justify-center items-center mt-10 w-full pl-20 pr-2 gap-10 ">
+        <NavItem type={NAV_LIST.MAIN} isFocused={focusType == NAV_LIST.MAIN} groupId={groupId} />
+        <NavItem type={NAV_LIST.INVITE} isFocused={focusType == NAV_LIST.INVITE} groupId={groupId} />
+        <NavItem type={NAV_LIST.VOTE} isFocused={focusType == NAV_LIST.VOTE} groupId={groupId} />
+      </div>
+    </>
+  );
+};
+export default InviteNavbar;
diff --git a/src/components/invite/InviteSpaceInvite.tsx b/src/components/invite/InviteSpaceInvite.tsx
@@ -2,13 +2,13 @@ import { ParticipationProps } from '@/types/ParticipateType';
 import { useEffect, useState } from 'react';
 import Header from '../common/header';
 import ParticipationList from '../participate/ParticipationList';
-import Navbar from '../common/navbar';
 import { NAV_LIST } from '../common/navbar/Navigation';
 import LoginPopup from './LoginPopup';
 import { useSetRecoilState } from 'recoil';
 import { groupNameAtom } from '@/states/groupNameAtom';
 import api from '@/services/TokenService';
 import { useGetGroup } from '@/hooks/useGetGroup';
+import InviteNavbar from '../common/navbar/inviteIndex';
 // import { useRouter } from 'next/router';
 
 const InviteSpaceInvite = ({ id }: any) => {
@@ -58,7 +58,7 @@ const InviteSpaceInvite = ({ id }: any) => {
   return (
     <section>
       <Header />
-      <Navbar focusType={NAV_LIST.PARTICIPANT} />
+      <InviteNavbar focusType={NAV_LIST.INVITE} />
       <div className="max-w-[1200px] mx-auto font-Pretendard">
         {partData && <ParticipationList data={partData} mode={false} setMode={undefined} />}
       </div>

diff --git a/src/pages/vote/[id].tsx b/src/pages/vote/[id].tsx
@@ -6,17 +6,28 @@ import { useRecoilValue } from 'recoil';
 import VoteWaitPage from './wait/[id]';
 import VoteDetailPage from './detail/[id]';
 import InviteVoteBeforeLogin from '@/components/invite/InviteVoteBeforeLogin';
+import NotFound from '../404';
 
 const VotePage = () => {
   const token = api.getToken();
   const group = useRecoilValue(groupIdAtom);
-  const response = useGetGroupVote(token, group.groupId);
+  const { data: response, isLoading, isError } = useGetGroupVote(token, group.groupId);
   const [voteData, setVoteData] = useState<any>(null);
 
   useEffect(() => {
-    if (response.data?.message === '성공') setVoteData(response.data?.data);
+    if (response?.message === '성공') setVoteData(response?.data);
   }, [response]);
 
+  if (isLoading) {
+    console.log('isLoading', isLoading);
+    return <InviteVoteBeforeLogin />;
+  }
+
+  if (isError) {
+    console.log('isError', isError);
+    return <NotFound />;
+  }
+
   return (
     <div>
       {token === undefined ? (