fix: build 에러-컴포넌트 Props에 undefined 제거

HiimKwak · Nov 28, 2023 · 2e4e4b6 · 2e4e4b6
1 parent 7d41dbe
commit 2e4e4b6
Show file tree

Hide file tree

Showing 5 changed files with 219 additions and 23 deletions.
diff --git a/src/app/admin/register/[leagueId]/page.tsx b/src/app/admin/register/[leagueId]/page.tsx
@@ -2,23 +2,19 @@
 
 import { Suspense } from 'react';
 
-import RegisterLeague from '@/components/admin/register/League';
+import EditLeague from '@/components/admin/register/League/edit';
 import LeagueRegisterFetcher from '@/queries/admin/useLeagueRegister/Fetcher';
 import useSportsListByLeagueId from '@/queries/useSportsListByLeagueId/query';
 
-export default function EditLeague({
-  params,
-}: {
-  params: { leagueId: string };
-}) {
+export default function Edit({ params }: { params: { leagueId: string } }) {
   const { leagueId } = params;
   const { sportsList: leagueSportsData } = useSportsListByLeagueId(leagueId);
   return (
     <div className="space-y-8 py-8">
       <Suspense fallback={<div>리그 정보 로딩중...</div>}>
         <LeagueRegisterFetcher>
           {data => (
-            <RegisterLeague
+            <EditLeague
               data={{ ...data, leagueSportsData }}
               leagueId={Number(leagueId)}
             />

diff --git a/src/app/admin/register/page.tsx b/src/app/admin/register/page.tsx
@@ -3,7 +3,7 @@
 import { Suspense } from 'react';
 
 import RegisterWrapper from '@/components/admin/register/context/RegisterWrapper';
-import RegisterLeague from '@/components/admin/register/League';
+import RegisterLeague from '@/components/admin/register/League/';
 import RegisterTeam from '@/components/admin/register/Team';
 import { useFunnel } from '@/hooks/useFunnel';
 import LeagueRegisterFetcher from '@/queries/admin/useLeagueRegister/Fetcher';

diff --git a/src/components/admin/register/League/edit/index.tsx b/src/components/admin/register/League/edit/index.tsx
@@ -0,0 +1,213 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
+
+import Button from '@/components/common/Button';
+import CheckboxItem from '@/components/common/Checkbox/Item';
+import Input from '@/components/common/Input/Input';
+import useValidate from '@/hooks/useValidate';
+import {
+  usePostLeagueMutation,
+  usePutLeagueMutation,
+} from '@/queries/admin/useLeagueRegister/query';
+import {
+  LeagueDataType,
+  LeagueRegisterDataType,
+  SportsDataType,
+} from '@/types/admin/league';
+import { SportsType } from '@/types/league';
+import { updateSet } from '@/utils/set';
+import { parseTimeString } from '@/utils/time';
+
+export default function EditLeague({
+  data,
+  leagueId,
+  onNext,
+}: {
+  data: LeagueRegisterDataType & { leagueSportsData: SportsType[] };
+  leagueId?: number;
+  onNext?: () => void;
+}) {
+  const [newLeagueData, setNewLeagueData] = useState<LeagueDataType>(
+    {} as LeagueDataType,
+  );
+  const [newSportsData, setNewSportsData] = useState<Set<number>>(new Set());
+
+  const { leagueData, leagueSportsData, sportsListData } = data;
+  const currentLeague = leagueData.find(e => e.leagueId === Number(leagueId));
+
+  const router = useRouter();
+
+  const { mutate: postLeague } = usePostLeagueMutation();
+  const { mutate: putLeague } = usePutLeagueMutation();
+
+  useEffect(() => {
+    if (currentLeague) {
+      const parseDate = (dateString: string) => dateString.split('T')[0];
+
+      setNewLeagueData({
+        name: currentLeague.name,
+        startAt: parseDate(currentLeague.startAt),
+        endAt: parseDate(currentLeague.endAt),
+      });
+    }
+    if (leagueSportsData) {
+      const reducedSportsData = leagueSportsData.reduce(
+        (acc, cur) => [...acc, cur.sportId],
+        [] as SportsDataType,
+      );
+
+      setNewSportsData(new Set(reducedSportsData));
+    }
+  }, []);
+
+  const { month, date } = parseTimeString(new Date().toString());
+
+  const isDateError =
+    new Date(newLeagueData.endAt) < new Date(newLeagueData.startAt);
+  const { isError: isStartAtEmpty } = useValidate(
+    newLeagueData.startAt,
+    dateValue => !dateValue,
+  );
+  const { isError: isEndAtEmpty } = useValidate(
+    newLeagueData.endAt,
+    dateValue => !dateValue,
+  );
+  const { isError: isNameEmpty } = useValidate(
+    newLeagueData.name,
+    nameValue => String(nameValue).length < 1,
+  );
+  const { isError: isSportsEmpty } = useValidate(
+    Array.from(newSportsData).length,
+    length => length === 0,
+  );
+  const isAnyInvalid =
+    isNameEmpty ||
+    isDateError ||
+    isSportsEmpty ||
+    isStartAtEmpty ||
+    isEndAtEmpty;
+
+  const updateCheckbox = (id: number) => {
+    setNewSportsData(prevSet => updateSet<number>(prevSet, id));
+  };
+
+  const handleInput = (
+    e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+  ) => {
+    const { name, value } = e.target;
+
+    setNewLeagueData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const payload = {
+      leagueData: newLeagueData,
+      sportData: Array.from(newSportsData),
+    };
+
+    if (leagueId) {
+      putLeague({
+        leagueId,
+        ...payload,
+      });
+    } else {
+      postLeague(payload);
+    }
+
+    if (onNext) {
+      onNext();
+    } else {
+      router.push('/admin/league/');
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="text-2xl font-medium">
+        {currentLeague ? '리그 수정' : '새 리그 등록'}
+      </div>
+      <form className="flex flex-col space-y-4" onSubmit={onSubmit}>
+        <label>
+          <div className="flex items-center justify-between">
+            <span>리그 이름</span>
+            {isNameEmpty && (
+              <span className="text-sm text-red-400">필수 항목입니다.</span>
+            )}
+          </div>
+          <Input
+            name="name"
+            type="text"
+            value={newLeagueData.name}
+            onChange={handleInput}
+            required
+          />
+        </label>
+        <label>
+          <div className="flex items-center justify-between">
+            <span>리그 시작/종료일</span>
+            {isStartAtEmpty || isEndAtEmpty ? (
+              <span className="text-sm text-red-400">날짜를 선택해주세요.</span>
+            ) : (
+              isDateError && (
+                <span className="text-sm text-red-400">
+                  종료일은 시작일보다 이후로 설정해주세요!
+                </span>
+              )
+            )}
+          </div>
+          <Input
+            name="startAt"
+            type="date"
+            value={newLeagueData.startAt}
+            onChange={handleInput}
+            min={`2023-${month}-${date.toString().padStart(2, '0')}`}
+            max={'2023-12-3'}
+            required
+          />
+          <Input
+            name="endAt"
+            type="date"
+            value={newLeagueData.endAt}
+            onChange={handleInput}
+            min={`2023-${month}-${date.toString().padStart(2, '0')}`}
+            max={'2023-12-3'}
+            required
+          />
+        </label>
+        <label>
+          <div className="flex items-center justify-between">
+            <span>리그 종목</span>
+            {isSportsEmpty && (
+              <span className="text-sm text-red-400">
+                적어도 한 종목은 선택해주세요.
+              </span>
+            )}
+          </div>
+          {sportsListData.map(({ name, sportId }) => (
+            <CheckboxItem
+              key={sportId}
+              id={String(sportId)}
+              name="sportData"
+              value={sportId}
+              checked={newSportsData.has(+sportId)}
+              onChange={() => updateCheckbox(+sportId)}
+            >
+              {name}
+            </CheckboxItem>
+          ))}
+        </label>
+        <Button
+          className="w-full rounded-lg bg-primary p-4 text-xl text-white hover:bg-[#303ECE] disabled:bg-gray-2 disabled:text-gray-4"
+          disabled={isAnyInvalid}
+          type="submit"
+        >
+          {currentLeague ? '수정하기' : '다음으로'}
+        </Button>
+      </form>
+    </div>
+  );
+}
diff --git a/src/components/admin/register/League/index.tsx b/src/components/admin/register/League/index.tsx
@@ -11,11 +11,7 @@ import {
   usePostLeagueMutation,
   usePutLeagueMutation,
 } from '@/queries/admin/useLeagueRegister/query';
-import {
-  LeagueDataType,
-  LeagueRegisterDataType,
-  SportsDataType,
-} from '@/types/admin/league';
+import { LeagueDataType, LeagueRegisterDataType } from '@/types/admin/league';
 import { updateSet } from '@/utils/set';
 import { parseTimeString } from '@/utils/time';
 
@@ -33,7 +29,7 @@ export default function RegisterLeague({
   );
   const [newSportsData, setNewSportsData] = useState<Set<number>>(new Set());
 
-  const { leagueData, leagueSportsData, sportsListData } = data;
+  const { leagueData, sportsListData } = data;
   const currentLeague = leagueData.find(e => e.leagueId === Number(leagueId));
 
   const router = useRouter();
@@ -51,14 +47,6 @@ export default function RegisterLeague({
         endAt: parseDate(currentLeague.endAt),
       });
     }
-    if (leagueSportsData) {
-      const reducedSportsData = leagueSportsData.reduce(
-        (acc, cur) => [...acc, cur.sportId],
-        [] as SportsDataType,
-      );
-
-      setNewSportsData(new Set(reducedSportsData));
-    }
   }, []);
 
   const { month, date } = parseTimeString(new Date().toString());

diff --git a/src/types/admin/league.ts b/src/types/admin/league.ts
@@ -33,6 +33,5 @@ export type DeleteLeaguePayload = LeagueIdType;
 
 export type LeagueRegisterDataType = {
   leagueData: LeagueType[];
-  leagueSportsData?: SportsCategoriesType[];
   sportsListData: SportsCategoriesType[];
 };