[FEAT] : 투표 조회 및 생성 기능 연동

index.html

@@ -10,6 +10,11 @@
       as="image"
       href="/src/assets/image/bg-vote-promise.png"
     />
+    <link
+      rel="preload"
+      as="image"
+      href="https://lottie.host/a0efbf08-977e-49af-926d-01b31d530dd8/7e8jbdwS7b.lottie"
+    />
     <link rel="preload" as="image" href="/src/assets/image/bg-vote.png" />
     <link rel="preload" as="image" href="/src/assets/icon/icon-notice.png" />
     <link rel="preload" as="image" href="/src/assets/icon/icon-result.png" />

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@lottiefiles/dotlottie-react": "^0.14.2",
     "@stackflow/core": "^1.2.0",
     "@stackflow/plugin-basic-ui": "^1.14.1",
     "@stackflow/plugin-renderer-basic": "^1.1.13",

src/app/stackflow/Stack.tsx

@@ -14,6 +14,7 @@ import { NoticeCreateScreen } from '@/screen/notice-create/ui';
 import { NoticeScreen } from '@/screen/notice/ui';
 import { VoteCompleteScreen } from '@/screen/vote-complete/ui';
 import { VoteCreateCompleteScreen } from '@/screen/vote-create-complete/ui';
+import { VoteCreateLoadingScreen } from '@/screen/vote-create-loading/ui';
 import { VoteCreateScreen } from '@/screen/vote-create/ui';
 import { VoteEditScreen } from '@/screen/vote-edit/ui';
 import { VotePromiseScreen } from '@/screen/vote-promise/ui';
@@ -37,6 +38,7 @@ export const { Stack, useFlow } = stackflow({
     VoteEditScreen,
     VoteScreen,
     VoteCreateScreen,
+    VoteCreateLoadingScreen,
     VoteCreateCompleteScreen,
     VoteCompleteScreen,
     VotePromiseScreen,

src/assets/icon/index.ts

@@ -16,6 +16,7 @@ import NotificationIcon from './icon-notification.png';
 import ResultIcon from './icon-result.png';
 import TextBoxIcon from './icon-textbox.svg';
 import UserIcon from './icon-user.svg';
+import UserSquareIcon from './icon-user-square.svg';
 import VoteCompleteIcon from './icon-vote-complete.png';
 import VoteIcon from './icon-vote.svg';
 import WriteIcon from './icon-write.svg';
@@ -38,6 +39,7 @@ export {
   ResultIcon,
   TextBoxIcon,
   UserIcon,
+  UserSquareIcon,
   VerifiedCheckIcon,
   VoteCompleteIcon,
   VoteIcon,

src/features/admin-dashboard/api/election.ts

@@ -0,0 +1,19 @@
+import { REQUEST, userGet } from '@/shared/api';
+import type { Election, VoteStatus } from '@/shared/types';
+import { useQuery } from '@tanstack/react-query';
+
+const fetchElectionByStatus = async (status: VoteStatus) => {
+  const response = await userGet<Election[], { status: VoteStatus }>({
+    request: REQUEST.ELECTION_STATUS,
+    params: { status: status },
+  });
+  return response.data;
+};
+
+export const useFetchElectionByStatus = (status: VoteStatus) => {
+  return useQuery({
+    queryKey: ['election-status', `${status}`],
+    queryFn: () => fetchElectionByStatus(status),
+    staleTime: 60 * 5,
+  });
+};

src/features/admin-dashboard/api/index.ts

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

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

@@ -1,25 +1,52 @@
-import type { VoteStatus } from '@/shared/types';
-// import { Card } from '@/shared/ui';
-import { VOTE_MOCK } from '@/features/admin-dashboard/mock';
+import type { Election, VoteStatus } from '@/shared/types';
+import { Card } from '@/shared/ui';
+import { getDate } from '@/shared/utils';
 
-export default function CardList({ status }: { status: VoteStatus }) {
-  const data = VOTE_MOCK.filter(
-    ({ status: voteStatus }) => voteStatus === status,
+import { useFetchElectionByStatus } from '@/features/admin-dashboard/api';
+
+export default function CardList({ status }: { status: string }) {
+  const VOTE_STATUS: Record<string, VoteStatus> = {
+    진행중: 'ongoing',
+    예정: 'upcoming',
+    종료: 'ended',
+  };
+  const { data, isError, isFetching } = useFetchElectionByStatus(
+    VOTE_STATUS[status],
   );
-  console.log(data);
-
+
+  const renderElection = (data: Election[]) => {
+    if (isError)
+      return (
+        <div className="px-normal mt-8 w-full text-center">
+          투표를 가져오던 중 오류가 발생했어요!
+        </div>
+      );
+    if (!isFetching && data.length === 0)
+      return (
+        <div className="px-normal mt-8 w-full text-center">투표가 없어요</div>
+      );
+    if (data && data.length > 0)
+      return (
+        <>
+          {data.map(({ id, campus, title, startAt, endAt }, index) => (
+            <Card
+              className={index === 0 ? 'mt-8' : ''}
+              id={id}
+              key={id}
+              campus={campus}
+              status={status}
+              title={title}
+              date={`${getDate(startAt, 'YYYY.MM.DD')} - ${getDate(endAt, 'YYYY.MM.DD')}`}
+            />
+          ))}
+        </>
+      );
+    return <></>;
+  };
+
   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) => (
-        <Card
-          className={index === 0 ? 'mt-8' : ''}
-          key={id}
-          campus={campus}
-          status={status}
-          title={title}
-          date={date}
-        />
-      ))} */}
+      {renderElection(data || [])}
     </div>
   );
 }

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

@@ -0,0 +1,26 @@
+import { useFlow } from '@/app/stackflow';
+import { useMutation } from '@tanstack/react-query';
+
+import { REQUEST, userPost } from '@/shared/api';
+import type { Replace, WholeCampus, Notice } from '@/shared/types';
+
+const submitNotice = async (data: Replace<Notice, 'campus', WholeCampus>) => {
+  const response = await userPost({
+    request: REQUEST.NOTICE.slice(0, -1),
+    data: data,
+  });
+  return response;
+};
+
+export const useSubmitNotice = () => {
+  const { pop } = useFlow();
+
+  return useMutation({
+    mutationFn: (data: Replace<Notice, 'campus', WholeCampus>) =>
+      submitNotice(data),
+    onSuccess: () => {
+      alert('공지 등록 성공!');
+      pop({ animate: false });
+    },
+  });
+};

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

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

src/features/notice-create/ui/NoticeForm.tsx

@@ -1,35 +1,108 @@
+import { useForm } from 'react-hook-form';
+import { useEffect, useState } from 'react';
+
+import type {
+  Campus,
+  Replace,
+  WholeCampus,
+  Notice,
+  NoticeType,
+} from '@/shared/types';
+import { CAMPUS, NOTICE_TYPE } from '@/shared/constants';
+import { keys } from '@/shared/utils';
+import { Button } from '@/shared/ui';
+
+import { useSubmitNotice } from '@/features/notice-create/api';
+
 import NoticeFormButton from './NoticeFormButton';
 import NoticeFormInput from './NoticeFormInput';
 import NoticeFormItem from './NoticeFormItem';
 
 export default function NoticeForm() {
+  const { mutate } = useSubmitNotice();
+  const [noticeType, setNoticeType] = useState<NoticeType | undefined>();
+  const [campus, setCampus] = useState<Campus[]>([]);
+  const { register, handleSubmit, watch, setValue } = useForm<
+    Replace<Notice, 'campus', WholeCampus>
+  >({
+    defaultValues: {
+      startAt: '2025-06-27',
+      endAt: '2025-06-28',
+    },
+  });
+  const isFormValid =
+    watch('title') &&
+    watch('campus') &&
+    watch('content') &&
+    watch('noticeType');
+
+  useEffect(() => {
+    const value = campus.length > 1 ? ('ALL' as const) : campus[0];
+    setValue('campus', value);
+  }, [campus, setValue]);
+
   return (
-    <div className="p-normal scrollbar-hide size-full space-y-6 overflow-scroll pb-38">
-      <NoticeFormItem label="공지 유형이 무엇인가요?" required>
-        <div className="items-center space-x-[10px]">
-          <NoticeFormButton label="알림" />
-          <NoticeFormButton label="선거 공지" />
-        </div>
-      </NoticeFormItem>
-      <NoticeFormItem label="어떤 캠퍼스 공지인가요?">
-        <div className="items-center space-x-[10px]">
-          <NoticeFormButton label="수원캠" />
-          <NoticeFormButton label="서울캠" />
-        </div>
-      </NoticeFormItem>
-      <NoticeFormItem label="기간">
-        <div className="flex w-full items-center gap-x-[10px]">
-          <div className="border-sl h-[46px] flex-1 rounded-md border-[1px] px-5 py-[11px] focus:outline-none" />
-          ~
-          <div className="border-sl h-[46px] flex-1 rounded-md border-[1px] px-5 py-[11px] focus:outline-none" />
-        </div>
-      </NoticeFormItem>
-      <NoticeFormItem label="제목">
-        <NoticeFormInput />
-      </NoticeFormItem>
-      <NoticeFormItem label="내용">
-        <textarea className="border-sl h-42 w-full resize-none rounded-md border-[1px] px-5 py-[18px] focus:outline-none" />
-      </NoticeFormItem>
-    </div>
+    <form onSubmit={handleSubmit(data => mutate(data))}>
+      <div className="p-normal scrollbar-hide size-full space-y-6 overflow-scroll pb-38">
+        <NoticeFormItem label="공지 유형이 무엇인가요?" required>
+          <div className="items-center space-x-[10px]">
+            {keys(NOTICE_TYPE).map(noti => (
+              <NoticeFormButton
+                key={noti}
+                label={NOTICE_TYPE[noti]}
+                selected={noti === noticeType}
+                onClick={() => {
+                  setNoticeType(noti);
+                  setValue('noticeType', noti);
+                }}
+              />
+            ))}
+          </div>
+        </NoticeFormItem>
+        <NoticeFormItem label="어떤 캠퍼스 공지인가요?">
+          <div className="items-center space-x-[10px]">
+            {keys(CAMPUS).map(cam => (
+              <NoticeFormButton
+                key={cam}
+                label={CAMPUS[cam]}
+                selected={campus.includes(cam)}
+                onClick={() => {
+                  setCampus(prev => {
+                    if (!prev?.includes(cam)) return [cam, ...prev];
+                    else return prev.filter(c => c !== cam);
+                  });
+                }}
+              />
+            ))}
+          </div>
+        </NoticeFormItem>
+        <NoticeFormItem label="기간">
+          <div className="flex w-full items-center gap-x-[10px]">
+            <div className="border-sl h-[46px] flex-1 rounded-md border-[1px] px-5 py-[11px] focus:outline-none" />
+            ~
+            <div className="border-sl h-[46px] flex-1 rounded-md border-[1px] px-5 py-[11px] focus:outline-none" />
+          </div>
+        </NoticeFormItem>
+        <NoticeFormItem label="제목">
+          <NoticeFormInput {...register('title')} />
+        </NoticeFormItem>
+        <NoticeFormItem label="내용">
+          <textarea
+            className="border-sl h-42 w-full resize-none rounded-md border-[1px] px-5 py-[18px] focus:outline-none"
+            {...register('content')}
+          />
+        </NoticeFormItem>
+      </div>
+      <div className="shadow-voteCreateDock px-normal fixed bottom-0 flex w-full gap-x-[9px] bg-white pt-4 pb-15">
+        <Button
+          intent={isFormValid ? 'gradient' : 'disabled'}
+          disabled={!isFormValid}
+          className="flex-1 text-lg"
+          type="submit"
+        >
+          작성 완료
+        </Button>
+      </div>
+    </form>
   );
 }

src/features/notice-create/ui/NoticeFormButton.tsx

@@ -1,15 +1,26 @@
 import { cn } from '@/shared/utils';
-import { useState } from 'react';
+import type { HTMLAttributes } from 'react';
 
-export default function NoticeFormButton({ label }: { label: string }) {
-  const [selected, setSelected] = useState(false);
+interface NoticeFormButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  label: string;
+  selected: boolean;
+}
+
+export default function NoticeFormButton({
+  label,
+  selected,
+  onClick,
+  ...rest
+}: NoticeFormButtonProps) {
   return (
     <button
-      onClick={() => setSelected(!selected)}
+      type="button"
+      onClick={onClick}
       className={cn(
         selected ? 'text-m border-m' : 'border-sl text-s',
         'cursor-pointer rounded-md border-[1px] px-[14px] py-1 text-sm focus:outline-none',
       )}
+      {...rest}
     >
       {label}
     </button>

src/features/notice-create/ui/NoticeFormInput.tsx

@@ -1,5 +1,12 @@
-export default function NoticeFormInput() {
+import type { HTMLAttributes } from 'react';
+
+type NoticeFormInputProps = HTMLAttributes<HTMLInputElement>;
+
+export default function NoticeFormInput({ ...rest }: NoticeFormInputProps) {
   return (
-    <input className="border-sl w-full rounded-md border-[1px] px-5 py-[11px] focus:outline-none" />
+    <input
+      className="border-sl w-full rounded-md border-[1px] px-5 py-[11px] focus:outline-none"
+      {...rest}
+    />
   );
 }