[FEAT] : 학생 뷰에서 공지 조회, 투표 조회 기능 구현

package.json

@@ -19,6 +19,7 @@
     "axios": "^1.10.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
     "framer-motion": "^12.12.1",
     "jotai": "^2.12.4",
     "lodash": "^4.17.21",

src/app/stackflow/Stack.tsx

@@ -52,12 +52,21 @@ export const { Stack, useFlow } = stackflow({
   ],
   initialActivity: () => {
     if (fetchLoginStatus()) {
-      if (sessionStorage.getItem('userMode')) {
-        const mode = JSON.parse(sessionStorage.getItem('userMode')!).mode;
+      const userModeRaw = sessionStorage.getItem('userMode');
+      if (userModeRaw) {
+        const mode = JSON.parse(userModeRaw).mode;
         if (mode === 'STUDENT') return 'HomeScreen';
-        else if (mode === 'ADMIN') return 'AdminHomeScreen';
-        else return 'LoginScreen';
-      } else return 'LoginScreen';
-    } else return 'LoginScreen';
+        if (mode === 'ADMIN') return 'AdminHomeScreen';
+      }
+
+      const userInfoRaw = sessionStorage.getItem('userInfo');
+      if (userInfoRaw) {
+        const role = JSON.parse(userInfoRaw).role;
+        if (role === 'ROLE_USER') return 'HomeScreen';
+        if (role === 'ROLE_ADMIN') return 'AdminHomeScreen';
+      }
+    }
+
+    return 'LoginScreen';
   },
 });

src/assets/icon/index.ts

@@ -1,3 +1,4 @@
+import Alert from './icon-alert.png';
 import Character from './character.svg';
 import CharacterComplete from './character-complete.png';
 import CharacterFlat from './character-flat.png';
@@ -20,6 +21,7 @@ import VoteIcon from './icon-vote.svg';
 import WriteIcon from './icon-write.svg';
 
 export {
+  Alert,
   BackButton,
   Character,
   Character2,

src/features/admin-dashboard/ui/CardList.tsx

@@ -1,14 +1,16 @@
 import type { VoteStatus } from '@/shared/types';
-import { Card } from '@/shared/ui';
-import { VOTE_MOCK } from '../mock';
+// import { Card } from '@/shared/ui';
+import { VOTE_MOCK } from '@/features/admin-dashboard/mock';
 
 export default function CardList({ status }: { status: VoteStatus }) {
   const data = VOTE_MOCK.filter(
     ({ status: voteStatus }) => voteStatus === status,
   );
+  console.log(data);
+
   return (
     <div className="scrollbar-hide px-normal flex size-full flex-1 flex-col gap-y-[26px] overflow-scroll">
-      {data.map(({ id, campus, status, title, date }, index) => (
+{/*       {data.map(({ id, campus, status, title, date }, index) => (
         <Card
           className={index === 0 ? 'mt-8' : ''}
           key={id}
@@ -17,7 +19,7 @@ export default function CardList({ status }: { status: VoteStatus }) {
           title={title}
           date={date}
         />
-      ))}
+      ))} */}
     </div>
   );
 }

src/features/home/api/election.ts

@@ -0,0 +1,29 @@
+import { REQUEST, userGet } from '@/shared/api';
+import type { Election } from '@/shared/types';
+import { useQuery } from '@tanstack/react-query';
+
+interface ElectionResponse {
+  status: {
+    code: number;
+    message: string;
+  };
+  metadata: {
+    resultCount: number;
+  };
+  results: Election[];
+}
+
+const fetchAllElections = async () => {
+  const response = await userGet<ElectionResponse>({
+    request: REQUEST.ELECTION_ALL,
+  });
+  if (response.data.metadata.resultCount === 0) return [];
+  return response.data.results;
+};
+
+export const useFetchAllElections = () => {
+  return useQuery({
+    queryKey: ['elections'],
+    queryFn: fetchAllElections,
+  });
+};

src/features/home/api/index.ts

@@ -0,0 +1 @@
+export * from './election';

src/features/home/mock/card.ts

@@ -1,4 +1,10 @@
-import type { CardProps } from '@/features/home/types';
+type CardProps = {
+  id: number;
+  title: string;
+  campus: string;
+  status: string;
+  date: string;
+}
 
 export const CARD_MOCK: CardProps[] = [
   {

src/features/home/ui/CardSection.tsx

@@ -0,0 +1,26 @@
+import { useFetchAllElections } from '../api';
+import CardStack from './CardStack';
+
+export default function CardSection() {
+  const { data, isFetching, isError } = useFetchAllElections();
+  if (isFetching) return <></>;
+  if (isError) return <></>;
+  if (data && data.length === 0)
+    return (
+      <>
+        <p className="mb-8 text-2xl font-semibold">진행중인 선거가 없어요</p>
+        <div className="shadow-card flex h-fit w-full cursor-pointer flex-col rounded-lg bg-white p-6">
+          <div className="flex w-full justify-between">투표가 없어여</div>
+        </div>
+      </>
+    );
+  if (data)
+    return (
+      <>
+        <p className="mb-8 text-2xl font-semibold">진행중인 선거가 있어요!</p>
+        <CardStack data={data} />
+      </>
+    );
+
+  return <></>;
+}

src/features/home/ui/CardStack.tsx

@@ -2,14 +2,14 @@ import { useRef, useState } from 'react';
 import { animate, motion } from 'framer-motion';
 
 import { Card } from '@/shared/ui';
-import type { CardProps } from '@/features/home/types';
-import { CARD_MOCK } from '@/features/home/mock';
+import type { Election } from '@/shared/types';
+import { getDate } from '@/shared/utils';
 
-export default function CardStack() {
-  const [stack, setStack] = useState<CardProps[]>(CARD_MOCK);
-  const [passedCards, setPassedCards] = useState<CardProps[]>([]);
+export default function CardStack({ data }: { data: Election[] }) {
+  const [stack, setStack] = useState<Election[]>(data);
+  const [passedCards, setPassedCards] = useState<Election[]>([]);
   const cardRefs = useRef<{ [key: number]: HTMLDivElement | null }>({});
-  const currentIndex = CARD_MOCK.length - stack.length;
+  const currentIndex = data.length - stack.length;
 
   return (
     <>
@@ -47,7 +47,7 @@ export default function CardStack() {
                 { x: 0 },
                 { type: 'spring', stiffness: 300 },
               );
-              setStack(CARD_MOCK);
+              setStack(data);
               setPassedCards([]);
             } else if (stack.length !== 0) {
               setPassedCards(prev => [...prev, stack[0]]);
@@ -94,17 +94,17 @@ export default function CardStack() {
             >
               <Card
                 isStackCard
+                id={card.id}
                 campus={card.campus}
-                status={card.status}
                 title={card.title}
-                date={card.date}
+                date={`${getDate(card.startAt, 'YYYY.MM.DD')} - ${getDate(card.endAt, 'YYYY.MM.DD')}`}
               />
             </motion.div>
           );
         })}
       </div>
       <div className="mt-[14px] flex w-full justify-center gap-[6px]">
-        {CARD_MOCK.map((_, idx) => (
+        {data.map((_, idx) => (
           <div
             key={idx}
             className={`h-[6px] rounded-full transition-colors ${

src/features/home/ui/index.ts

@@ -1 +1,2 @@
 export { default as CardStack } from './CardStack';
+export { default as CardSection } from './CardSection';

src/features/notice-content/api/content.ts

@@ -0,0 +1,23 @@
+import { REQUEST, userGet } from '@/shared/api';
+import { useQuery } from '@tanstack/react-query';
+
+interface NoticeResponse {
+  id: number;
+  title: string;
+  content: string;
+  createdAt: string;
+}
+
+const fetchNoticeContent = async (id: number) => {
+  const response = await userGet<NoticeResponse>({
+    request: REQUEST.NOTICE + `${id}`,
+  });
+  return response.data;
+};
+
+export const useFetchNoticeContent = (id: number) => {
+  return useQuery({
+    queryKey: [`${id}`, 'notice-content'],
+    queryFn: () => fetchNoticeContent(id),
+  });
+};

src/features/notice-content/api/index.ts

@@ -0,0 +1 @@
+export * from './content';

src/features/notice-content/ui/NoticeContentSection.tsx

@@ -0,0 +1,17 @@
+import { useFetchNoticeContent } from '../api';
+
+export default function NoticeContentSection({ id }: { id: number }) {
+  const { data } = useFetchNoticeContent(id);
+  if (data)
+    return (
+      <div className="text-s flex flex-col gap-1 font-normal">
+        {data.content.split('\n').map((line, index) => (
+          <div key={index} className="mb-1">
+            {line}
+          </div>
+        ))}
+      </div>
+    );
+
+  return <></>;
+}

src/features/notice-content/ui/index.ts

@@ -0,0 +1 @@
+export { default as NoticeContentSection } from './NoticeContentSection';

src/features/notice/api/notice.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { REQUEST, userGet } from '@/shared/api';
+import type { Campus } from '@/shared/types';
+import type { NoticeList } from '../types';
+
+const fetchNoticeByCampus = async (campus: Campus) => {
+  const response = await userGet<NoticeList[]>({
+    request: REQUEST.NOTICE_CAMPUS + campus,
+  });
+  return response.data;
+};
+
+export const useFetchNoticeByCampus = (campus: Campus) => {
+  return useQuery({
+    queryKey: ['notices', campus],
+    queryFn: () => fetchNoticeByCampus(campus),
+    staleTime: 1000 * 60 * 5,
+    retry: 1,
+  });
+};

src/features/notice/constants/index.ts

@@ -0,0 +1 @@
+export * from './status';

src/features/notice/constants/status.ts

@@ -0,0 +1,22 @@
+import type { NoticeListType } from '../types';
+
+type StatusStyle = {
+  label: string;
+  bgColor: string;
+  color: string;
+};
+
+export const NOTICE_STATUS: Record<NoticeListType, StatusStyle> = {
+  COMPLETED: { label: '종료', bgColor: '#F5F5F5', color: '#999' },
+  NOTIFY: {
+    label: '알림',
+    bgColor: 'rgba(255, 95, 95, 0.10)',
+    color: '#FA4545',
+  },
+  ONGOING: {
+    label: '진행',
+    bgColor: 'rgba(50, 205, 50, 0.10)',
+    color: '#32CD32',
+  },
+  UPCOMING: { label: '예정', bgColor: '#E9F6FF', color: '#377FF8' },
+};

src/features/notice/types/notice.ts

@@ -1,8 +1,15 @@
-export type NoticeType = 'MESSAGE' | 'NOTIFICATION';
+export type NoticeType = 'UPCOMING' | 'NOTIFY';
+
+export type NoticeListType = NoticeType | 'ONGOING' | 'COMPLETED';
 
 export type Notice = {
   id: number;
   title: string;
-  type: NoticeType;
-  date: string;
+  startAt: string;
+  endAt: string;
+  noticeType: NoticeType;
+};
+
+export type NoticeList = Omit<Notice, 'noticeType'> & {
+  noticeStatus: NoticeListType;
 };