Merge branch 'develop'

.github/workflows/git-push.yml

@@ -0,0 +1,30 @@
+name: git push into another repo to deploy to vercel
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container: pandoc/latex
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install mustache (to update the date)
+        run: apk add ruby && gem install mustache
+      - name: creates output
+        run: sh ./build.sh
+      - name: Pushes to another repository
+        id: push_directory
+        uses: cpina/github-action-push-to-another-repository@main
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.PiCK_GITHUB_KEY }}
+        with:
+          source-directory: 'output'
+          destination-github-username: DSM-PICK
+          destination-repository-name: PiCK2024_FRONT_v2
+          user-email: ${{ secrets.PiCK_ACCOUNT_EMAIL }}
+          commit-message: ${{ github.event.commits[0].message }}
+          target-branch: main
+      - name: Test get variable exported by push-to-another-repository
+        run: echo $DESTINATION_CLONED_DIRECTORY

src/App.tsx

@@ -1,4 +1,4 @@
-import { RouterProvider } from 'react-router-dom';
+import { RouterProvider, useNavigate } from 'react-router-dom';
 import { Router } from './router/router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { GlobalStyle, theme } from './styles/theme';
@@ -7,6 +7,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import 'react-toastify/dist/ReactToastify.css';
 import Toast from './components/toast';
 import * as ChannelService from '@channel.io/channel-web-sdk-loader';
+import { useEffect } from 'react';
 
 const queryClient = new QueryClient({
   defaultOptions: {

src/apis/attendance/index.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { instance } from '..';
-import { ChangeAttendance, attendanceType } from '../type';
+import { AttendanceType, ChangeAttendance, attendanceType } from '../type';
 
 const router = '/attendance';
 
@@ -23,3 +23,15 @@ export const useChangeAttendanceStatus = () => {
     },
   });
 };
+
+export const useGetClubMemberList = (club: string) => {
+  return useQuery({
+    queryKey: ['useGetClubMemberList', club],
+    queryFn: async () => {
+      const { data } = await instance.get<attendanceType[]>(
+        `${router}/total-time/club?club=${club}`,
+      );
+      return data;
+    },
+  });
+};

src/apis/index.ts

@@ -55,7 +55,7 @@ instance.interceptors.response.use(
               cookie.set('refresh_token', data.refresh_token);
             })
             .catch(() => {
-              window.location.href = 'login';
+              window.location.href = '/';
             });
         } catch (refreshError) {
           return Promise.reject(refreshError);

src/apis/notice/index.ts

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { instance } from '@/apis';
 import {
+  EditNotice,
   NoticeDetailType,
   SimpleNoticeType,
   UploadNoticeType,
@@ -46,3 +47,11 @@ export const useDeleteNotice = () => {
     },
   });
 };
+
+export const useEditNotice = () => {
+  return useMutation<void, Error, EditNotice>({
+    mutationFn: async (param) => {
+      await instance.patch(`${router}/modify`, param);
+    },
+  });
+};

src/apis/type.ts

@@ -15,6 +15,12 @@ export interface SelectedDaySelfStudTeacher {
   teacher: string;
 }
 
+export interface EditNotice {
+  id: string;
+  title: string;
+  content: string;
+}
+
 export interface TodayMealsType {
   date: string;
   meal_list: {

src/apis/weekend-meals/index.ts

@@ -13,7 +13,7 @@ export const GetAllMeals = () => {
   return useQuery<GetAllMealsType[]>({
     queryKey: [],
     queryFn: async () => {
-      const { data } = await instance.get(`${router}/hey`);
+      const { data } = await instance.get(`${router}/application-list`);
       return data;
     },
   });

src/components/dropdown/status.tsx

@@ -7,13 +7,15 @@ import arrowLeft from '@/assets/svg/statusArrowLeft.svg';
 interface StatusDropProps {
   status: string;
   onChange: (newState: string) => Promise<void>;
-  type?: 'NO';
+  type?: 'HOMEROOM' | 'ATTENDANCE';
 }
 
 const StatusDrop = ({ status, onChange, type }: StatusDropProps) => {
   const [isDropdownVisible, setIsDropdownVisible] = useState<boolean>(false);
   const [selectedOption, setSelectedOption] = useState<string>(status);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const homeroomStatus = ['출석', '현체', '귀가', '취업', '자퇴'];
+  const attendanceStatus = ['출석', '이동', '외출', '귀가', '현체', '무단'];
 
   useEffect(() => {
     setSelectedOption(status);
@@ -51,6 +53,8 @@ const StatusDrop = ({ status, onChange, type }: StatusDropProps) => {
         return 'GO_OUT';
       case '이동':
         return 'MOVEMENT';
+      case '무단':
+        return 'DISALLOWED';
       default:
         return '';
     }
@@ -73,6 +77,7 @@ const StatusDrop = ({ status, onChange, type }: StatusDropProps) => {
       case '취업':
         return theme.color.main[500];
       case '자퇴':
+      case '무단':
         return theme.color.error[500];
       case '외출':
       case '이동':
@@ -97,21 +102,23 @@ const StatusDrop = ({ status, onChange, type }: StatusDropProps) => {
       </DropdownButton>
       {isDropdownVisible && (
         <DropdownMenu>
-          <DropdownItem onClick={() => handleOptionClick('출석')}>
-            출석
-          </DropdownItem>
-          <DropdownItem onClick={() => handleOptionClick('현체')}>
-            현체
-          </DropdownItem>
-          <DropdownItem onClick={() => handleOptionClick('귀가')}>
-            귀가
-          </DropdownItem>
-          <DropdownItem onClick={() => handleOptionClick('취업')}>
-            취업
-          </DropdownItem>
-          <DropdownItem onClick={() => handleOptionClick('자퇴')}>
-            자퇴
-          </DropdownItem>
+          {type === 'ATTENDANCE'
+            ? attendanceStatus.map((item, index) => (
+                <DropdownItem
+                  key={`attendance-${item}-${index}`}
+                  onClick={() => handleOptionClick(item)}
+                >
+                  {item}
+                </DropdownItem>
+              ))
+            : homeroomStatus.map((item, index) => (
+                <DropdownItem
+                  key={`homeroom-${item}-${index}`}
+                  onClick={() => handleOptionClick(item)}
+                >
+                  {item}
+                </DropdownItem>
+              ))}
         </DropdownMenu>
       )}
     </DropdownContainer>

src/components/dropdown/style.ts

@@ -10,7 +10,9 @@ export const DropdownClickContainer = styled.div<DropdownClickProp>`
   position: absolute;
   flex-direction: column;
   top: 120%;
-  width: 140px;
+  width: 100%;
+  max-height: 250px;
+  overflow-y: auto;
   border-radius: 12px;
   background-color: ${theme.color.normal.white};
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
@@ -28,6 +30,7 @@ export const DropdownClick = styled.div<DropdownClickProp>`
   border-radius: 12px;
   background-color: ${theme.color.normal.white};
   border: 1px solid ${theme.color.normal.white};
+  width: 100%;
 
   &:hover {
     background-color: ${theme.color.main[50]};
@@ -36,11 +39,13 @@ export const DropdownClick = styled.div<DropdownClickProp>`
 
 export const DropdownTitle = styled.div`
   position: relative;
-  width: 140px;
+  min-width: 140px;
   height: 49px;
   border: 2px solid ${theme.color.gray[300]};
   border-radius: 12px;
   box-sizing: border-box;
+  padding: 0 8px;
+  gap: 12px;
 
   display: flex;
   align-items: center;

src/components/helpmenu/index.tsx

@@ -17,7 +17,7 @@ const HelfMenu = () => {
     cookie.remove('access_token');
     cookie.remove('refresh_token');
     localStorage.clear();
-    navigate('/login');
+    navigate('/');
   };
 
   return (

src/components/list/class.tsx

@@ -14,11 +14,12 @@ interface ClassListProp {
   name: string;
   status6: Status;
   id: string;
-  self?: boolean;
+  self?: 'attendance' | 'club';
   status7?: Status;
   status8?: Status;
   status9?: Status;
   status10?: Status;
+  refetchStatus: () => void;
 }
 
 const ClassList = ({
@@ -31,9 +32,10 @@ const ClassList = ({
   status8 = 'ATTENDANCE',
   status9 = 'ATTENDANCE',
   self,
+  refetchStatus,
 }: ClassListProp) => {
   const { mutate: ChangeMutate } = ChangeStudentStatus();
-  const { mutate: AlltimeChange } = useChangeAttendanceStatus();
+  const { mutateAsync: AlltimeChange } = useChangeAttendanceStatus();
   const [statuses, setStatuses] = useState<Status[]>([
     status6,
     status7,
@@ -43,26 +45,30 @@ const ClassList = ({
   ]);
 
   const updateStatus = async (newStatus: Status, index: number) => {
-    const updatedStatuses = [...statuses];
-    updatedStatuses[index] = newStatus;
-
+    const updatedStatuses = statuses.map((status, i) =>
+      i >= index ? newStatus : status,
+    );
     setStatuses(updatedStatuses);
 
     if (self) {
       const newModifiedStudents = [
         { user_id: id, status_list: updatedStatuses },
       ];
-      try {
-        await AlltimeChange(newModifiedStudents);
-        showToast({ type: 'success', message: '상태가 변경되었습니다.' });
-      } catch (error) {
-        showToast({ type: 'error', message: '상태 변경에 실패했습니다.' });
-      }
+      await AlltimeChange(newModifiedStudents, {
+        onSuccess: () => {
+          showToast({ type: 'success', message: '상태가 변경되었습니다.' });
+          refetchStatus();
+        },
+        onError: () => {
+          showToast({ type: 'error', message: '상태 변경에 실패했습니다.' });
+        },
+      });
     } else {
       const newModifiedStudents = [{ user_id: id, status_type: newStatus }];
       ChangeMutate(newModifiedStudents, {
         onSuccess: () => {
           showToast({ type: 'success', message: '상태가 변경되었습니다.' });
+          refetchStatus();
         },
         onError: () => {
           showToast({ type: 'error', message: '상태 변경에 실패했습니다.' });
@@ -77,21 +83,43 @@ const ClassList = ({
         <div>{number}</div>
         <div>{name}</div>
       </Title>
-      <StatusDrop
-        status={useChangeStatusName(statuses[0])}
-        onChange={(newStatus) => updateStatus(newStatus as Status, 0)}
-      />
-      {self && (
-        <>
-          {[1, 2, 3, 4].map((index) => (
-            <StatusDrop
-              key={index}
-              status={useChangeStatusName(statuses[index])}
-              onChange={(newStatus) => updateStatus(newStatus as Status, index)}
-            />
-          ))}
-        </>
-      )}
+      <DropdownWrap type={self}>
+        {!self && (
+          <StatusDrop
+            status={useChangeStatusName(statuses[0])}
+            onChange={(newStatus) => updateStatus(newStatus as Status, 0)}
+            type={self ? 'ATTENDANCE' : 'HOMEROOM'}
+          />
+        )}
+        {self === 'club' && (
+          <>
+            {[0, 1, 2, 3, 4].map((index) => (
+              <StatusDrop
+                key={index}
+                status={useChangeStatusName(statuses[index])}
+                onChange={(newStatus) =>
+                  updateStatus(newStatus as Status, index)
+                }
+                type="ATTENDANCE"
+              />
+            ))}
+          </>
+        )}
+        {self === 'attendance' && (
+          <>
+            {[2, 3, 4].map((index) => (
+              <StatusDrop
+                key={index}
+                status={useChangeStatusName(statuses[index])}
+                onChange={(newStatus) =>
+                  updateStatus(newStatus as Status, index)
+                }
+                type="ATTENDANCE"
+              />
+            ))}
+          </>
+        )}
+      </DropdownWrap>
     </ListWrap>
   );
 };
@@ -110,6 +138,18 @@ const ListWrap = styled.div`
   align-items: center;
   padding: 16px 20px;
   background-color: ${theme.color.main[50]};
+
   border-radius: 12px;
   min-width: fit-content;
 `;
+
+const DropdownWrap = styled.div<{ type?: 'attendance' | 'club' }>`
+  display: flex;
+  justify-content: space-between;
+  width: ${(props) =>
+    props.type === 'club'
+      ? '800px'
+      : props.type === 'attendance'
+        ? '440px'
+        : ''};
+`;