From 96892005683e8870d2f7e1fd6e74b955fc932c90 Mon Sep 17 00:00:00 2001
From: jspark2000 <idpjs2000@gmail.com>
Date: Fri, 22 Mar 2024 05:45:03 +0000
Subject: [PATCH] feat: implement update roster page

---
 .../update/_components/UpdateRosterForm.tsx   | 280 ++++++++++++++++++
 .../app/console/roster/[id]/update/page.tsx   |  23 ++
 .../roster/_components/RosterListTable.tsx    |   8 +-
 .../new/_components/CreateRosterForm.tsx      |  17 +-
 frontend/src/app/console/roster/page.tsx      |   6 -
 frontend/src/lib/actions.ts                   |   6 +-
 frontend/src/lib/forms.ts                     |  14 +-
 7 files changed, 338 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/app/console/roster/[id]/update/_components/UpdateRosterForm.tsx
 create mode 100644 frontend/src/app/console/roster/[id]/update/page.tsx

diff --git a/frontend/src/app/console/roster/[id]/update/_components/UpdateRosterForm.tsx b/frontend/src/app/console/roster/[id]/update/_components/UpdateRosterForm.tsx
new file mode 100644
index 0000000..819242b
--- /dev/null
+++ b/frontend/src/app/console/roster/[id]/update/_components/UpdateRosterForm.tsx
@@ -0,0 +1,280 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select'
+import { RosterStatus, RosterType } from '@/lib/enums'
+import fetcher from '@/lib/fetcher'
+import { RosterFormSchema } from '@/lib/forms'
+import type { Roster } from '@/lib/types/roster'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import type { z } from 'zod'
+
+export default function UpdateRosterForm({ roster }: { roster: Roster }) {
+  const [isFetching, setIsFetching] = useState(false)
+
+  const router = useRouter()
+
+  const UpdateRosterFormSchema = RosterFormSchema.omit({ id: true })
+
+  const form = useForm<z.infer<typeof UpdateRosterFormSchema>>({
+    resolver: zodResolver(UpdateRosterFormSchema),
+    defaultValues: {
+      ...roster,
+      offPosition: roster.offPosition ?? undefined,
+      defPosition: roster.defPosition ?? undefined,
+      splPosition: roster.splPosition ?? undefined
+    }
+  })
+
+  const onSubmit = async (data: z.infer<typeof UpdateRosterFormSchema>) => {
+    try {
+      setIsFetching(true)
+      await fetcher.put(
+        `/rosters/${roster.id}`,
+        {
+          ...data,
+          class: data.class === '' ? '없음' : data.class,
+          offPosition:
+            data.type !== RosterType.Athlete ? data.type : data.offPosition
+        },
+        false
+      )
+      router.push('/console/roster?revalidate=true')
+      router.refresh()
+      toast.success('부원정보가 업데이트 되었습니다')
+    } catch (error) {
+      toast.error('부원을 업데이트하지 못했습니다')
+    } finally {
+      setIsFetching(false)
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="grid grid-cols-12 gap-5"
+      >
+        <div className="col-span-12 sm:col-span-6 lg:col-span-4">
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>이름</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="col-span-12 sm:col-span-6 lg:col-span-4">
+          <FormField
+            control={form.control}
+            name="studentId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>학번 (코치진의 경우 전화번호 뒤 4자리)</FormLabel>
+                <FormControl>
+                  <Input {...field} placeholder="10자리 (ex 2024310000)" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="col-span-12 sm:col-span-6 lg:col-span-4">
+          <FormField
+            control={form.control}
+            name="type"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>구분</FormLabel>
+                <Select
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="로스터 종류를 선택해주세요" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value={RosterType.Athlete}>선수</SelectItem>
+                    <SelectItem value={RosterType.Staff}>스태프</SelectItem>
+                    <SelectItem value={RosterType.HeadCoach}>감독</SelectItem>
+                    <SelectItem value={RosterType.Coach}>코치</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="col-span-12 sm:col-span-6 lg:col-span-4">
+          <FormField
+            control={form.control}
+            name="status"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>상태</FormLabel>
+                <Select
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="부원의 상태를 선택해주세요" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value={RosterStatus.Enable}>활성</SelectItem>
+                    <SelectItem value={RosterStatus.Absence}>휴학</SelectItem>
+                    <SelectItem value={RosterStatus.Military}>군대</SelectItem>
+                    <SelectItem value={RosterStatus.Alumni}>졸업</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="col-span-12 sm:col-span-6 lg:col-span-4">
+          <FormField
+            control={form.control}
+            name="registerYear"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>입부년도 (미식축구부에 입부한 년도)</FormLabel>
+                <FormControl>
+                  <Input
+                    {...field}
+                    type="number"
+                    placeholder="4자리 (ex 2024)"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="col-span-12 sm:col-span-6 lg:col-span-4">
+          <FormField
+            control={form.control}
+            name="admissionYear"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>입학년도 (학교에 입학한 년도)</FormLabel>
+                <FormControl>
+                  <Input
+                    {...field}
+                    type="number"
+                    placeholder="4자리 (ex 2024)"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="col-span-12 sm:col-span-6 lg:col-span-4">
+          <FormField
+            control={form.control}
+            name="class"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>직책 (선택)</FormLabel>
+                <FormControl>
+                  <Input {...field} placeholder="(ex 주장, 주무)" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        {form.getValues('type') === RosterType.Athlete && (
+          <>
+            <div className="col-span-12 sm:col-span-6 lg:col-span-4">
+              <FormField
+                control={form.control}
+                name="offPosition"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>오펜스포지션</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className="col-span-12 sm:col-span-6 lg:col-span-4">
+              <FormField
+                control={form.control}
+                name="defPosition"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>디펜스포지션</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className="col-span-12 sm:col-span-6 lg:col-span-4">
+              <FormField
+                control={form.control}
+                name="splPosition"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>스페셜포지션</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </>
+        )}
+        <div className="col-span-12 flex space-x-1">
+          <Button type="submit" disabled={isFetching}>
+            수정하기
+          </Button>
+          <Button
+            type="button"
+            variant={'outline'}
+            onClick={() => router.back()}
+          >
+            목록으로
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+}
diff --git a/frontend/src/app/console/roster/[id]/update/page.tsx b/frontend/src/app/console/roster/[id]/update/page.tsx
new file mode 100644
index 0000000..2463869
--- /dev/null
+++ b/frontend/src/app/console/roster/[id]/update/page.tsx
@@ -0,0 +1,23 @@
+import { getRoster } from '@/lib/actions'
+import UpdateRosterForm from './_components/UpdateRosterForm'
+
+export default async function RosterPage({
+  params
+}: {
+  params: {
+    id: number
+  }
+}) {
+  const roster = await getRoster(params.id)
+
+  return (
+    <main className="mx-auto flex w-full flex-grow flex-col items-center justify-start">
+      <div className="mt-4 flex w-full items-center justify-between px-4 text-left sm:px-6">
+        <div className="flex w-full flex-col space-y-3">
+          <h1 className="text-base font-bold sm:text-xl">부원정보수정</h1>
+          <UpdateRosterForm roster={roster} />
+        </div>
+      </div>
+    </main>
+  )
+}
diff --git a/frontend/src/app/console/roster/_components/RosterListTable.tsx b/frontend/src/app/console/roster/_components/RosterListTable.tsx
index d0f50be..8dfb8f5 100644
--- a/frontend/src/app/console/roster/_components/RosterListTable.tsx
+++ b/frontend/src/app/console/roster/_components/RosterListTable.tsx
@@ -17,8 +17,8 @@ import { UserIcon } from '@heroicons/react/24/outline'
 import type { ColumnDef } from '@tanstack/react-table'
 import { MoreHorizontal } from 'lucide-react'
 import Image from 'next/image'
+import { useRouter } from 'next/navigation'
 import { useState } from 'react'
-import { toast } from 'sonner'
 import DeleteRosterForm from './DeleteRosterForm'
 
 export default function RosterListTable({
@@ -29,6 +29,8 @@ export default function RosterListTable({
   const [open, setOpen] = useState(false)
   const [targetRoster, setTargetRoster] = useState<RosterListItem>()
 
+  const router = useRouter()
+
   const handleClick = (roster: RosterListItem) => {
     setTargetRoster(roster)
     setOpen(true)
@@ -132,7 +134,9 @@ export default function RosterListTable({
               <DropdownMenuLabel>메뉴</DropdownMenuLabel>
               <DropdownMenuSeparator />
               <DropdownMenuItem
-                onClick={() => toast.warning('준비중인 기능입니다')}
+                onClick={() =>
+                  router.push(`/console/roster/${roster.id}/update`)
+                }
               >
                 수정
               </DropdownMenuItem>
diff --git a/frontend/src/app/console/roster/new/_components/CreateRosterForm.tsx b/frontend/src/app/console/roster/new/_components/CreateRosterForm.tsx
index ce92272..c7874b5 100644
--- a/frontend/src/app/console/roster/new/_components/CreateRosterForm.tsx
+++ b/frontend/src/app/console/roster/new/_components/CreateRosterForm.tsx
@@ -50,13 +50,18 @@ export default function CreateRosterForm() {
     setIsFetching(true)
 
     try {
-      await fetcher.post('/rosters', {
-        ...data,
-        class: data.class === '' ? '없음' : data.class,
-        offPosition:
-          data.type !== RosterType.Athlete ? data.type : data.offPosition
-      })
+      await fetcher.post(
+        '/rosters',
+        {
+          ...data,
+          class: data.class === '' ? '없음' : data.class,
+          offPosition:
+            data.type !== RosterType.Athlete ? data.type : data.offPosition
+        },
+        false
+      )
       router.push('/console/roster?revalidate=true')
+      router.refresh()
       toast.success('부원을 등록했습니다')
     } catch (error) {
       toast.error('부원을 등록하지 못했습니다')
diff --git a/frontend/src/app/console/roster/page.tsx b/frontend/src/app/console/roster/page.tsx
index 88b7b99..106e414 100644
--- a/frontend/src/app/console/roster/page.tsx
+++ b/frontend/src/app/console/roster/page.tsx
@@ -3,7 +3,6 @@ import { Button } from '@/components/ui/button'
 import { getRosters } from '@/lib/actions'
 import { calculateTotalPages } from '@/lib/utils'
 import { PAGINATION_LIMIT_DEFAULT } from '@/lib/vars'
-import { revalidatePath } from 'next/cache'
 import Link from 'next/link'
 import RosterListTable from './_components/RosterListTable'
 
@@ -12,16 +11,11 @@ export default async function RosterPage({
 }: {
   searchParams?: {
     page?: string
-    revalidate?: string
   }
 }) {
   const currentPage = Number(searchParams?.page) || 1
   const rosterList = await getRosters(currentPage)
 
-  if (searchParams?.revalidate) {
-    revalidatePath('/console/roster')
-  }
-
   return (
     <main className="mx-auto flex w-full flex-grow flex-col items-center justify-start">
       <div className="mt-4 flex w-full items-center justify-between px-4 text-left sm:px-6">
diff --git a/frontend/src/lib/actions.ts b/frontend/src/lib/actions.ts
index 932734b..c5513f7 100644
--- a/frontend/src/lib/actions.ts
+++ b/frontend/src/lib/actions.ts
@@ -3,7 +3,7 @@
 import type { RosterType } from './enums'
 import fetcher from './fetcher'
 import type { AttendanceList } from './types/attendance'
-import type { RosterList } from './types/roster'
+import type { Roster, RosterList } from './types/roster'
 import type { ScheduleList, ScheduleListItem } from './types/schedule'
 import type {
   SurveyGroupList,
@@ -24,6 +24,10 @@ export const getUsers = async (page: number): Promise<UserList> => {
   )
 }
 
+export const getRoster = async (rosterId: number): Promise<Roster> => {
+  return await fetcher.get<Roster>(`/rosters/${rosterId}`)
+}
+
 export const getRosters = async (page: number): Promise<RosterList> => {
   return await fetcher.get<RosterList>(
     `/rosters?page=${page}&limit=${PAGINATION_LIMIT_DEFAULT}&filter=Enable`
diff --git a/frontend/src/lib/forms.ts b/frontend/src/lib/forms.ts
index 1b2b221..45c2cf7 100644
--- a/frontend/src/lib/forms.ts
+++ b/frontend/src/lib/forms.ts
@@ -72,7 +72,19 @@ export const RosterFormSchema = z.object({
     .optional()
     .refine(
       (val) => {
-        return val === undefined || ['QB', 'OL', 'RB', 'WR', 'TE'].includes(val)
+        return (
+          val === undefined ||
+          [
+            'QB',
+            'OL',
+            'RB',
+            'WR',
+            'TE',
+            'HeadCoach',
+            'Coach',
+            'Staff'
+          ].includes(val)
+        )
       },
       {
         message: