Merge branch 'develop'

.github/workflows/main.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

build.sh

@@ -1,7 +1,5 @@
 #!/bin/sh
 cd ../
 mkdir output
-cp -R ./PiCK2024_FRONT_V2/. ./output
-cp -R ./output ./PiCK2024_FRONT_V2/
-
-
+cp -R ./PiCK2024_FRONT_v2/* ./output
+cp -R ./output ./PiCK2024_FRONT_v2/

src/apis/attendance/index.ts

@@ -13,6 +13,7 @@ export const useGetAttendanceStatus = (grade: number, class_num: number) => {
       );
       return data;
     },
+    staleTime: 100 * 1,
   });
 };
 

src/components/Button/bottom.tsx

@@ -1,53 +1,13 @@
 import { styled } from 'styled-components';
 import { Button } from '.';
+import React from 'react';
 
 interface BottomProp {
-  firstOnclick: () => void;
-  firstType: 'main' | 'error' | 'black' | 'error2';
-  firstSize: 'small' | 'standard';
-  firstContent: string;
-  second?: boolean;
-  secondOnclick?: () => void;
-  secondType?: 'main' | 'error' | 'black' | 'error2';
-  secondSize?: 'small' | 'standard';
-  disabled?: boolean;
-  secondContent?: string;
+  children: React.ReactNode;
 }
 
-const BottomButtonWrap = ({
-  firstOnclick,
-  firstType,
-  firstSize,
-  firstContent,
-  disabled,
-  second,
-  secondOnclick,
-  secondSize,
-  secondType,
-  secondContent,
-}: BottomProp) => {
-  return (
-    <BottomButton>
-      <Button
-        onClick={firstOnclick}
-        type={firstType}
-        size={firstSize}
-        disabled={disabled}
-      >
-        {firstContent}
-      </Button>
-      {second && secondSize && secondType && secondOnclick && (
-        <Button
-          onClick={secondOnclick}
-          type={secondType}
-          disabled={disabled}
-          size={secondSize}
-        >
-          {secondContent}
-        </Button>
-      )}
-    </BottomButton>
-  );
+const BottomButtonWrap = ({ children }: BottomProp) => {
+  return <BottomButton>{children}</BottomButton>;
 };
 
 export default BottomButtonWrap;

src/components/calendar/reCalendar.tsx

@@ -0,0 +1,131 @@
+import { MonthScheduleData } from '@/apis/schedule/type';
+import { dataType } from '@/apis/type';
+import { theme } from '@/styles/theme';
+import { useMemo, useState } from 'react';
+import { styled } from 'styled-components';
+
+interface CalendarProp {
+  data: MonthScheduleData[] | dataType[];
+}
+
+export const ReCalendar = ({ data }: CalendarProp) => {
+  const today = useMemo(() => {
+    const now = new Date();
+    return {
+      year: now.getFullYear(),
+      month: now.getMonth() + 1,
+      date: now.getDate(),
+    };
+  }, []);
+
+  const [selectedDate, setSelectedDate] = useState(today);
+
+  const weekDays = [
+    '일요일',
+    '월요일',
+    '화요일',
+    '수요일',
+    '목요일',
+    '금요일',
+    '토요일',
+  ];
+
+  const firstDayOfMonth = useMemo(() => {
+    return new Date(selectedDate.year, selectedDate.month - 1, 1).getDay();
+  }, [selectedDate]);
+
+  const daysInMonth = useMemo(() => {
+    return new Date(selectedDate.year, selectedDate.month, 0).getDate();
+  }, [selectedDate]);
+
+  const days = useMemo(() => {
+    const daysArray = [];
+    for (let i = 1; i <= daysInMonth; i++) {
+      daysArray.push(i);
+    }
+    return daysArray;
+  }, [daysInMonth]);
+
+  return (
+    <CalendarContainer>
+      <Week>
+        {weekDays.map((day, index) => (
+          <WeekText key={index}>{day}</WeekText>
+        ))}
+      </Week>
+      <DayWrap>
+        {days.map((day, index) => {
+          const filteredEvents = data?.filter(
+            (event: MonthScheduleData | dataType) => {
+              if ('day' in event) {
+                return event.day === day;
+              } else if ('date' in event) {
+                const eventDate = new Date(event.date);
+                return (
+                  eventDate.getFullYear() === selectedDate.year &&
+                  eventDate.getMonth() + 1 === selectedDate.month &&
+                  eventDate.getDate() === day
+                );
+              }
+              return false;
+            },
+          );
+
+          return (
+            <Day key={index}>
+              <DayNumber>{day}</DayNumber>
+              {filteredEvents?.map((event, idx) => (
+                <Event key={idx}>{event.event_name || event.teacher}</Event>
+              ))}
+            </Day>
+          );
+        })}
+      </DayWrap>
+    </CalendarContainer>
+  );
+};
+
+const CalendarContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+`;
+
+const DayWrap = styled.div`
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(7, 1fr);
+`;
+
+const Week = styled.div`
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(7, 1fr);
+`;
+
+const WeekText = styled.p`
+  font-size: ${theme.font.heading[3].size};
+  font-weight: ${theme.font.heading[3].fontweight};
+  text-align: center;
+  border: 1px solid ${theme.color.gray[100]};
+`;
+
+const Day = styled.div`
+  border: 1px solid ${theme.color.gray[100]};
+  padding: 8px;
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const DayNumber = styled.p`
+  font-size: ${theme.font.heading[4].size};
+  font-weight: ${theme.font.heading[4].fontweight};
+`;
+
+const Event = styled.p`
+  font-size: ${theme.font.body[2].size};
+  color: ${theme.color.main[500]};
+`;

src/components/list/class.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { theme } from '@/styles/theme';
 import StatusDrop from '../dropdown/status';
@@ -36,6 +36,7 @@ const ClassList = ({
 }: ClassListProp) => {
   const { mutate: ChangeMutate } = ChangeStudentStatus();
   const { mutateAsync: AlltimeChange } = useChangeAttendanceStatus();
+
   const [statuses, setStatuses] = useState<Status[]>([
     status6,
     status7,
@@ -44,6 +45,10 @@ const ClassList = ({
     status10,
   ]);
 
+  useEffect(() => {
+    setStatuses([status6, status7, status8, status9, status10]);
+  }, [status6, status7, status8, status9, status10]);
+
   const updateStatus = async (newStatus: Status, index: number) => {
     const updatedStatuses = statuses.map((status, i) =>
       i >= index ? newStatus : status,
@@ -138,7 +143,6 @@ const ListWrap = styled.div`
   align-items: center;
   padding: 16px 20px;
   background-color: ${theme.color.main[50]};
-
   border-radius: 12px;
   min-width: fit-content;
 `;

src/components/list/index.tsx

@@ -7,6 +7,7 @@ interface OutAcceptProp {
   content: string;
   onClick: () => void;
   type: 'application' | 'early-return';
+  active?: boolean;
 }
 
 const OutAcceptList = ({
@@ -15,20 +16,10 @@ const OutAcceptList = ({
   content,
   onClick,
   type,
+  active,
 }: OutAcceptProp) => {
-  const [isActive, setIsActive] = useState<boolean>(false);
-
-  const handleClick = () => {
-    setIsActive(!isActive);
-    onClick();
-  };
   return (
-    <S.OutAcceptWrap
-      type={type}
-      draggable
-      isActive={isActive}
-      onClick={handleClick}
-    >
+    <S.OutAcceptWrap type={type} draggable isActive={active!} onClick={onClick}>
       <S.OutAcceptTitle>{name}</S.OutAcceptTitle>
       <div>외출</div>
       <S.OutAcceptDate>{date}</S.OutAcceptDate>

src/components/list/style.ts

@@ -18,12 +18,9 @@ export const OutAcceptWrap = styled.div<AcceptListProp>`
       isActive && type === 'application'
         ? theme.color.main[500]
         : theme.color.main[50]};
-  &:hover {
-    border: 2px solid
-      ${({ type }) =>
-        type === 'application' ? theme.color.main[500] : 'transparent'};
-  }
+  cursor: pointer;
 `;
+
 export const OutAcceptTitle = styled.p`
   font-size: ${theme.font.heading[3].size};
   font-weight: ${theme.font.heading[3].fontweight};

src/components/menu/style.ts

@@ -73,6 +73,7 @@ export const Menu = styled.div`
   background-color: ${theme.color.normal.black};
   opacity: 0.5;
   top: 0;
+  z-index: 1;
 `;
 
 export const SelfStudyListWrap = styled.div`

src/pages/notice/detail/index.tsx

@@ -1,14 +1,15 @@
-import React, { TextareaHTMLAttributes, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Layout } from '@/components/layout';
 import nextSvg from '@/assets/svg/next.svg';
-import { useNavigate, useNavigation, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { DetailNotice, useDeleteNotice, useEditNotice } from '@/apis/notice';
 import * as S from '../style';
 import BottomButtonWrap from '@/components/Button/bottom';
 import Modal from '@/components/modal';
 import { showToast } from '@/components/toast';
 import Input from '@/components/input';
 import { Textarea } from '@/components/input/textarea';
+import { Button } from '@/components/Button';
 
 const NoticeDetail = () => {
   const params = useParams();
@@ -118,20 +119,26 @@ const NoticeDetail = () => {
         )}
       </S.NoticeDetailContent>
       {GetDetailNotice?.teacher === name && (
-        <BottomButtonWrap
-          second
-          firstContent={edit ? '완료' : '수정'}
-          firstOnclick={edit ? () => Modify() : () => setEdit(true)}
-          firstSize="standard"
-          firstType="black"
-          secondContent="삭제"
-          secondOnclick={() => setDeleteNotice(true)}
-          secondSize="standard"
-          secondType="error2"
-        />
+        <BottomButtonWrap>
+          <Button
+            size="standard"
+            type="black"
+            onClick={() => (edit ? Modify() : setEdit(true))}
+          >
+            {edit ? '완료' : '수정'}
+          </Button>
+          <Button
+            onClick={() => setDeleteNotice(true)}
+            type="error2"
+            size="standard"
+          >
+            삭제
+          </Button>
+        </BottomButtonWrap>
       )}
       {deleteNotice && (
         <Modal
+          refetchStatus={() => {}}
           title="이 공지를 삭제하시겠습니까?"
           subTitle="삭제 시에는 복구 시킬 수 없습니다."
           onCancel={() => setDeleteNotice(false)}