Merge pull request #132 from Onion-City/dev

Feat: 출석 정정 api 연결 & 멤버 출석 확인 페이지 & AuthBox을 InputBox에서 분리
Onion-City · Aug 7, 2024 · 43863b8 · 43863b8
2 parents 503e872 + a481b36
commit 43863b8
Show file tree

Hide file tree

Showing 19 changed files with 426 additions and 144 deletions.
diff --git a/src/apis/http.tsx b/src/apis/http.tsx
@@ -3,7 +3,7 @@ import axios from "axios";
 import { AxiosInstance, AxiosRequestConfig } from "axios";
 
 const axiosInstance = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_LOCAL_URL,
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
   withCredentials: true,
 });
 

diff --git a/src/app/member/list/[memberId]/attendance/page.tsx b/src/app/member/list/[memberId]/attendance/page.tsx
@@ -0,0 +1,7 @@
+import SetupMemberAttendamce from "@/features/member/list/SetupMemberAttendance";
+
+export default function InfoAttendance () {
+    return (
+        <SetupMemberAttendamce />
+    )
+}
diff --git a/src/app/user/signup/complete/page.tsx b/src/app/user/signup/complete/page.tsx
@@ -1,8 +1,13 @@
 import SignupComplete from "@/features/user/signup/components/SignupComplete";
+import { Suspense } from "react";
 
 const UserSignupComplete = () => {
     // 추가 회원가입 완료 페이지
-    return <SignupComplete />;
+    return (
+        <Suspense fallback={<div>Loading...</div>}>
+            <SignupComplete />
+        </Suspense>
+    );
 }
 
 export default UserSignupComplete;
diff --git a/src/components/molecules/inputBox/InputBox.tsx b/src/components/molecules/inputBox/InputBox.tsx
@@ -7,7 +7,6 @@ import { Textarea } from "@/components/atoms/textarea";
 import { Toggle } from "@/components/atoms/toggle";
 import { COLORS } from "@/styles";
 import { Controller } from "react-hook-form";
-import { AuthBox } from "../authBox";
 import { ChipBox } from "../chipBox/ChipBox";
 import "./InputBox.css";
 
@@ -24,6 +23,7 @@ export interface InputBoxProps {
   addName?: string;
   value?: string | number;
   placeholder?: string;
+  setIsAuth?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const renderInputComponent = (
@@ -34,7 +34,8 @@ const renderInputComponent = (
   field: any,
   getValues: any,
   value?: string | number,
-  placeholder?: string
+  placeholder?: string,
+  setIsAuth?: React.Dispatch<React.SetStateAction<boolean>>,
 ) => {
   switch (type) {
     case "input":
@@ -51,8 +52,8 @@ const renderInputComponent = (
       return <ChipBox field={field} />;
     case "fileUpload":
       return <FileUpload name={name} field={field} />;
-    case "btnInput":
-      return <AuthBox field={field} getValues={getValues} error={error} />;
+    // case "btnInput":
+    //   return <AuthBox field={field} getValues={getValues} error={error} setIsAuth={setIsAuth} />;
     default:
       return <Input maxCnt={maxCnt} name={name} field={field} error={error} value={value} placeholder={placeholder} />;
   }
@@ -66,13 +67,14 @@ const InputField = ({
   control,
   getValues,
   value,
-  placeholder
+  placeholder,
+  setIsAuth
 }: InputBoxProps) => (
   <Controller
     name={name}
     control={control}
     render={({ field }) =>
-      renderInputComponent(type, maxCnt, name, error, field, getValues, value, placeholder)
+      renderInputComponent(type, maxCnt, name, error, field, getValues, value, placeholder, setIsAuth)
     }
   />
 );
@@ -88,7 +90,8 @@ export function InputBox({
   getValues,
   addName,
   value,
-  placeholder
+  placeholder,
+  setIsAuth
 }: InputBoxProps) {
   return (
     <div className="registerBox">
@@ -111,6 +114,7 @@ export function InputBox({
               control={control}
               getValues={getValues}
               placeholder={placeholder}
+              setIsAuth={setIsAuth}
             />
           </div>
         )}

diff --git a/src/features/home/calendar/SetCalendarRegister.tsx b/src/features/home/calendar/SetCalendarRegister.tsx
@@ -8,48 +8,43 @@ import CalendarRegister from "./components/CalendarRegister";
 import { CALENDAR_BTN } from "./constants/const";
 
 const SetCalendarRegister = () => {
-    const path = usePathname();
-
-    // 일정 등록 입력 폼 관리
-    const {
-        register,
-        formState: {errors},
-        handleSubmit,
-        setValue,
-    } = useForm<ScheduleData>({
-        mode: "onSubmit",
-        defaultValues: {
-            scheduleName: "",
-            scheduleDate: "",
-            scheduleTime: "",
-            schedulePlace: "",
-            scheduleContent: "",
-        },
-    });
+  const path = usePathname();
 
-    const { mutate } = useScheduleMutation({
-        clubId: +path.split("/")[1],
-        userId: 6
-    });
+  // 일정 등록 입력 폼 관리
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+    setValue,
+  } = useForm<ScheduleData>({
+    mode: "onSubmit",
+    defaultValues: {
+      scheduleName: "",
+      scheduleDate: "",
+      scheduleTime: "",
+      schedulePlace: "",
+      scheduleContent: "",
+    },
+  });
 
-    const onsubmit = (data: ScheduleData) => {
-        console.log(data);
-        mutate(data);
-    };
+  const { mutate } = useScheduleMutation({
+    clubId: +path.split("/")[1],
+    userId: 6,
+  });
 
-    return (
-        <form onSubmit={handleSubmit(onsubmit)}>
-            <Wrapper isHeader={true}>
-                <CalendarRegister 
-                    register={register}
-                    setValue={setValue}
-                />
-                <Button 
-                    type="submit"
-                >{CALENDAR_BTN.register}</Button>
-            </Wrapper>
-        </form>
-    )
+  const onsubmit = (data: ScheduleData) => {
+    console.log(data);
+    mutate(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onsubmit)}>
+      <Wrapper isHeader={true}>
+        <CalendarRegister register={register} setValue={setValue} />
+        <Button type="submit">{CALENDAR_BTN.register}</Button>
+      </Wrapper>
+    </form>
+  );
 };
 
-export default SetCalendarRegister;
+export default SetCalendarRegister;
diff --git a/src/features/manager/attendance/components/AttendanceStatusList.tsx b/src/features/manager/attendance/components/AttendanceStatusList.tsx
@@ -16,7 +16,7 @@ import "./Attendance.css";
 const AttendanceStatusList: React.FC = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const scheduleId = searchParams.get('scheduleId');
+  const scheduleId = searchParams.get("scheduleId");
   const [selectedStatus, setSelectedStatus] = useState<string | null>(null);
   const { data, error } = useAttendanceMemberListQuery({
     clubId: FormatClubId(),

diff --git a/src/features/manager/attendance/components/AttendanceStatusListEdit.tsx b/src/features/manager/attendance/components/AttendanceStatusListEdit.tsx
@@ -1,43 +1,76 @@
 "use client";
+import { ATTENDANCE_STATUS_EDIT } from "../constants/const";
+import "./Attendance.css";
+import { useState, useEffect } from "react";
 import { Button } from "@/components/atoms/button";
 import { useAttendanceMemberListQuery } from "@/hook/attendance/manager/useAttendanceMemberListQuery";
-import { FormatClubId } from "@/utils/extractPathElements";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
-import { ATTENDANCE_STATUS_EDIT } from "../constants/const";
+import { FormatClubId } from "@/utils/extractPathElements";
 import AttendanceStatusEditItem from "../molecules/AttendanceStatusEditItem";
-import "./Attendance.css";
+import { useAttendanceUpdateMutation } from "@/hook/attendance/manager/useAttendanceUpdateMutation";
 
 interface AttendanceStatus {
   id: number;
   name: string;
   status: string;
+  isModified: boolean;
 }
 
 const AttendanceStatusListEdit: React.FC = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const scheduleId = searchParams.get("scheduleId");
+  const clubId = FormatClubId();
+
   const { data, isLoading, error } = useAttendanceMemberListQuery({
-    clubId: FormatClubId(),
+    clubId: clubId,
     scheduleId: Number(scheduleId),
   });
+
   const [attendanceStatus, setAttendanceStatus] = useState<AttendanceStatus[]>(
-    data?.data.data.map((item) => ({
-      id: item.clubMemberId,
-      name: item.clubMemberName,
-      status: item.attendanceType,
-    })) || []
+    []
   );
 
+  useEffect(() => {
+    if (data) {
+      setAttendanceStatus(
+        data.data.data.map((item) => ({
+          id: item.clubMemberId,
+          name: item.clubMemberName,
+          status: item.attendanceType,
+          isModified: false,
+        }))
+      );
+    }
+  }, [data]);
+
   const handleStatusChange = (name: string, status: string) => {
     setAttendanceStatus((prevStatus) =>
       prevStatus.map((item) =>
-        item.name === name ? { ...item, status } : item
+        item.name === name ? { ...item, status, isModified: true } : item
       )
     );
   };
 
+  const { mutate: updateAttendance } = useAttendanceUpdateMutation(clubId);
+
+  const handleDone = () => {
+    const modifiedData = attendanceStatus
+      .filter((item) => item.isModified)
+      .map((item) => ({
+        memberId: item.id,
+        attendanceType: item.status,
+        isModified: item.isModified,
+      }));
+
+    updateAttendance({
+      scheduleId: Number(scheduleId),
+      attendmodifyDtoList: modifiedData,
+    });
+
+    router.replace(`/manager/attendance/status?scheduleId=${scheduleId}`);
+  };
+
   return (
     <div className="attendance_status_list_edit">
       <div className="attendance_status_list__item">
@@ -60,9 +93,7 @@ const AttendanceStatusListEdit: React.FC = () => {
         >
           {ATTENDANCE_STATUS_EDIT.cancle}
         </Button>
-        <Button onClick={() => router.push("/manager/attendance/status")}>
-          {ATTENDANCE_STATUS_EDIT.done}
-        </Button>
+        <Button onClick={handleDone}>{ATTENDANCE_STATUS_EDIT.done}</Button>
       </div>
     </div>
   );

diff --git a/src/features/member/list/SetupMemberAttendance.tsx b/src/features/member/list/SetupMemberAttendance.tsx
@@ -0,0 +1,49 @@
+"use client";
+import { HistoryHeader } from "@/components/organisms/Header";
+import { Nav } from "@/components/organisms/Nav";
+import { AttendanceHeader } from "@/features/info/attendance/components/AttendanceHeader";
+import { AttendanceList } from "@/features/info/attendance/components/AttendanceList";
+import useMemberAttendance from "@/hook/attendance/member/useMemberAttendance";
+import { FormatClubId } from "@/utils/extractPathElements";
+import { usePathname } from "next/navigation";
+
+// 멤버 아이디로 조회할 수 있도록 수정하기
+export default function SetupMemberAttendamce() {
+  const pathName = usePathname();
+  const { refetchPeriodSchedule, attendances } = useMemberAttendance({
+    clubId: FormatClubId(),
+    startDate: "2000-01-01",
+    endDate: "2030-01-01",
+    attendanceType: "TOTAL",
+    memberId: parseInt(pathName.split("/")[3], 10),
+  });
+
+  console.log(attendances);
+
+  const filteredData = (attendanceType: string): number => {
+    return (
+      attendances?.data?.attendanceList?.content?.filter(
+        (el) => el.attendanceType === attendanceType
+      ).length || 0
+    );
+  };
+
+  return (
+    <>
+      <HistoryHeader title="출석 현황" />
+      <AttendanceHeader
+        clubMemberName={attendances?.data?.memberName}
+        attend={filteredData("출석")}
+        absent={filteredData("공결")}
+        miss={filteredData("결석")}
+        refetchPeriodSchedule={refetchPeriodSchedule}
+      />
+      {attendances && attendances.data && attendances.data.attendanceList ? (
+        <AttendanceList attendance={attendances.data.attendanceList.content} />
+      ) : (
+        <div>Loading...</div>
+      )}
+      <Nav />
+    </>
+  );
+}
diff --git a/src/features/member/list/components/MemberDetail.css b/src/features/member/list/components/MemberDetail.css
@@ -46,3 +46,15 @@
 .member__detail__bottom {
   margin-top: auto;
 }
+
+.member__detail__bottom__push__detail__page {
+  position: absolute;
+  top: 4.5rem;
+  right: 1rem;
+}
+.member__detail__bottom__push__detail__page img {
+  transform: rotate(180deg);
+  width: 0.25rem;
+  height: 0.5625rem;
+  margin-left: 0.44rem;
+}