🔀출석 기능 추가

assets/svg/Attend_ABSENT.tsx

@@ -0,0 +1,26 @@
+export const Attend_ABSENT = ({ color }: { color?: string }) => {
+
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+    >
+      <g clipPath='url(#clip0_746_7978)'>
+        <path
+          d='M2 2L22 22M2 22L22 2'
+          stroke={color ? '#FF6666' : 'white'}
+          strokeWidth='4'
+          strokeLinecap='round'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_746_7978'>
+          <rect width='24' height='24' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

assets/svg/Attend_ATTENDED.tsx

@@ -0,0 +1,26 @@
+export const Attend_ATTENDED = ({ color }: { color?: string }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+    >
+      <g clipPath='url(#clip0_746_7970)'>
+        <circle
+          cx='12'
+          cy='12'
+          r='10'
+          stroke={color ? '#4164E1' : 'white'}
+          strokeWidth='4'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_746_7970'>
+          <rect width='24' height='24' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

assets/svg/Attend_LATE.tsx

@@ -0,0 +1,17 @@
+export const Attend_LATE = ({ color }: { color?: string }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+    >
+      <path
+        d='M11.7854 3.14663C11.8248 3.07239 11.8634 3.04317 11.8878 3.02894C11.9177 3.01146 11.9562 3 12 3C12.0438 3 12.0823 3.01146 12.1122 3.02894C12.1366 3.04317 12.1752 3.07239 12.2146 3.14663L21.9545 21.5056C22.0189 21.6272 22.0129 21.7527 21.9486 21.864C21.9166 21.9193 21.8784 21.9541 21.8478 21.9727C21.8228 21.988 21.792 22 21.7398 22H2.26015C2.20803 22 2.17718 21.988 2.15217 21.9727C2.12157 21.9541 2.08337 21.9193 2.05142 21.864C1.98714 21.7527 1.98107 21.6272 2.04554 21.5056L11.7854 3.14663Z'
+        stroke={color ? '#FFD466' : 'white'}
+        strokeWidth='4'
+      />
+    </svg>
+  )
+}

assets/svg/Attend_REASONABLE_ABSENT.tsx

@@ -0,0 +1,28 @@
+export const Attend_REASONABLE_ABSENT = ({ color }: { color?: string }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+    >
+      <g clipPath='url(#clip0_1933_5170)'>
+        <rect
+          x='1.5'
+          y='1.5'
+          width='21'
+          height='21'
+          rx='3.5'
+          stroke={color ? '#C1C1C1' : 'white'}
+          strokeWidth='3'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_1933_5170'>
+          <rect width='24' height='24' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

assets/svg/Calendar.tsx

@@ -0,0 +1,17 @@
+export const Calendar = () => {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <rect x='3' y='6' width='18' height='12' rx='1' fill='white' />
+      <path
+        d='M21 8.5V17.75C21 19.5449 19.5449 21 17.75 21H6.25C4.45507 21 3 19.5449 3 17.75V8.5H21ZM7.25 15C6.55964 15 6 15.5596 6 16.25C6 16.9404 6.55964 17.5 7.25 17.5C7.94036 17.5 8.5 16.9404 8.5 16.25C8.5 15.5596 7.94036 15 7.25 15ZM12 15C11.3096 15 10.75 15.5596 10.75 16.25C10.75 16.9404 11.3096 17.5 12 17.5C12.6904 17.5 13.25 16.9404 13.25 16.25C13.25 15.5596 12.6904 15 12 15ZM7.25 10.5C6.55964 10.5 6 11.0596 6 11.75C6 12.4404 6.55964 13 7.25 13C7.94036 13 8.5 12.4404 8.5 11.75C8.5 11.0596 7.94036 10.5 7.25 10.5ZM12 10.5C11.3096 10.5 10.75 11.0596 10.75 11.75C10.75 12.4404 11.3096 13 12 13C12.6904 13 13.25 12.4404 13.25 11.75C13.25 11.0596 12.6904 10.5 12 10.5ZM16.75 10.5C16.0596 10.5 15.5 11.0596 15.5 11.75C15.5 12.4404 16.0596 13 16.75 13C17.4404 13 18 12.4404 18 11.75C18 11.0596 17.4404 10.5 16.75 10.5ZM17.75 3C19.5449 3 21 4.45507 21 6.25V7H3V6.25C3 4.45507 4.45507 3 6.25 3H17.75Z'
+        fill='#4164E1'
+      />
+    </svg>
+  )
+}

assets/svg/Hand.tsx

@@ -0,0 +1,20 @@
+export const Hand = () => {
+  return (
+    <svg
+      width='29'
+      height='29'
+      viewBox='0 0 29 29'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M9.76381 3.60399C9.54497 2.99795 8.87627 2.68408 8.27024 2.90292C7.66421 3.12177 7.35034 3.79045 7.56918 4.39649L10.1953 11.6689C10.3598 12.1244 10.0813 12.6197 9.60667 12.7159C9.2283 12.7925 8.84966 12.5857 8.70973 12.2259L6.25382 5.91071C6.02029 5.31019 5.34415 5.01269 4.74363 5.24622C4.14311 5.47976 3.84561 6.15589 4.07915 6.75641L7.76424 16.2323C5.77901 16.0182 4.36101 16.5235 3.50687 17.0121C3.00778 17.2976 2.77431 17.8229 2.84699 18.3376C2.91555 18.823 3.24191 19.232 3.69496 19.4304C5.25312 20.1125 8.81252 21.8664 11.8593 24.773C13.056 25.9146 14.8014 26.4897 16.4827 25.9866L19.7478 25.0095C20.7177 24.7191 21.5259 23.9757 21.8189 22.953C22.1689 21.7316 22.6662 19.6629 22.6662 17.7086C22.6662 16.3668 22.1955 14.6924 21.7669 13.4268C20.919 10.9235 19.9687 8.45029 19.1021 5.95132C18.891 5.34255 18.2263 5.02019 17.6175 5.2313C17.0088 5.44241 16.6864 6.10705 16.8976 6.71581L18.0564 10.0575C18.2187 10.5255 17.9313 11.0292 17.4458 11.1276C17.047 11.2084 16.6496 10.9839 16.5127 10.6008L14.4318 4.77451C14.2152 4.16772 13.5475 3.85149 12.9407 4.0682C12.3339 4.28491 12.0178 4.9525 12.2344 5.5593L14.1222 10.845C14.2902 11.3153 14.0023 11.8253 13.5129 11.9244C13.1143 12.0052 12.7168 11.7817 12.5788 11.3993L9.76381 3.60399Z'
+        fill='#4164E1'
+      />
+      <path
+        d='M22.2383 3.20963C22.5138 2.81264 23.0592 2.71421 23.4561 2.98977C24.3991 3.6443 25.1809 4.7907 25.6705 6.05431C26.1651 7.33078 26.4047 8.83581 26.1523 10.2762C26.069 10.7522 25.6156 11.0705 25.1396 10.9871C24.6636 10.9037 24.3452 10.4503 24.4286 9.97427C24.6151 8.90941 24.4429 7.7301 24.0387 6.68656C23.6293 5.63016 23.0251 4.82086 22.4582 4.42738C22.0612 4.15181 21.9628 3.60662 22.2383 3.20963ZM21.8472 5.44534C21.5178 5.09182 20.9641 5.07233 20.6106 5.40179C20.2569 5.73126 20.2375 6.28494 20.5669 6.63846C21.0541 7.16125 21.4987 7.79307 21.4987 8.95857C21.4987 9.44182 21.8905 9.83357 22.3737 9.83357C22.857 9.83357 23.2487 9.44182 23.2487 8.95857C23.2487 7.20741 22.5223 6.16976 21.8472 5.44534Z'
+        fill='white'
+      />
+    </svg>
+  )
+}

assets/svg/Plus.tsx

@@ -0,0 +1,16 @@
+export const Plus = () => {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M11.1873 3H12.8127V11.1873H21V12.8127H12.8127V21H11.1873V12.8127L3 12.8127V11.1873H11.1873V3Z'
+        fill='#4164E1'
+      />
+    </svg>
+  )
+}

assets/svg/index.ts

@@ -18,4 +18,11 @@ export * from './ClassBadge'
 export * from './HamburgerBar'
 export * from './Envelope'
 export * from './DownloadBtn'
-export * from './PrintIcon'
+export * from './PrintIcon'
+export * from './Attend_REASONABLE_ABSENT'
+export * from './Attend_LATE'
+export * from './Attend_ATTENDED'
+export * from './Attend_ABSENT'
+export * from './Calendar'
+export * from './Plus'
+export * from './Hand'

components/ApplicantPage/index.tsx

@@ -41,6 +41,7 @@ export default function ApplicantPage() {
 
   useEffect(() => {
     if (clubId) fetch()
+    dispatch(removeAllUser())
   }, [clubId])
 
   return (

components/AttendPage/AttendanceForm.tsx

@@ -0,0 +1,149 @@
+import React from 'react'
+import * as S from './style'
+import Calendar from 'react-calendar'
+import dayjs from 'dayjs'
+import { PeriodEnumType } from '.'
+import { RedX } from '@/assets/svg/RedX'
+import { Layer } from '../StatisticsPage/CalendarModal/style'
+import Portal from '../Portal'
+
+interface AttendanceFormProps {
+  onClose: () => void
+  isShow: string
+  setIsPick: React.Dispatch<React.SetStateAction<string>>
+  setClicked: React.Dispatch<React.SetStateAction<boolean>>
+  date: Date
+  setDate: React.Dispatch<React.SetStateAction<Date>>
+  setCurrentDate: React.Dispatch<React.SetStateAction<string>>
+  clicked: boolean
+  selectedPeriods: PeriodEnumType[]
+  isPick: string
+  onClickPeriod: (period: PeriodEnumType) => void
+  periodArr: { text: string; period: PeriodEnumType }[]
+  create: () => void
+  download: () => void
+}
+
+const AttendanceForm: React.FC<AttendanceFormProps> = ({
+  onClose,
+  isShow,
+  setIsPick,
+  setClicked,
+  date,
+  setDate,
+  setCurrentDate,
+  clicked,
+  selectedPeriods,
+  isPick,
+  onClickPeriod,
+  periodArr,
+  create,
+  download,
+}) => {
+  const yoilArr = ['일', '월', '화', '수', '목', '금', '토']
+
+  return (
+    <Portal onClose={onClose}>
+      <S.Wrapper>
+        <S.Header>
+          <S.Title>출석표 {isShow.slice(0, 2)}</S.Title>
+          <S.CancelBtn onClick={onClose}>
+            <RedX />
+          </S.CancelBtn>
+        </S.Header>
+        <S.InputWrapper>
+          <S.DateContainer
+            onFocus={() => {
+              setIsPick('calendar')
+              setClicked(true)
+            }}
+          >
+            <S.SelectDate>날짜 선택</S.SelectDate>
+            <S.DateSelectionContainer
+              readOnly
+              value={
+                clicked
+                  ? dayjs(date).format(
+                      `YYYY.MM.DD (${yoilArr[dayjs(date).day()]})`
+                    )
+                  : ''
+              }
+              placeholder='조회할 날짜를 선택해주세요. (미선택 시 당일 조회)'
+            />
+          </S.DateContainer>
+          <S.DateContainer onFocus={() => setIsPick('period')}>
+            <S.SelectDate>교시 선택</S.SelectDate>
+            <S.DateSelectionContainer
+              readOnly
+              value={selectedPeriods.map((period) =>
+                period === 'FIRST'
+                  ? '1교시'
+                  : period === 'SECOND'
+                  ? '2교시'
+                  : period === 'THIRD'
+                  ? '3교시'
+                  : period === 'FOURTH'
+                  ? '4교시'
+                  : period === 'FIFTH'
+                  ? '5교시'
+                  : period === 'SIXTH'
+                  ? '6교시'
+                  : period === 'SEVENTH'
+                  ? '7교시'
+                  : period === 'EIGHTH'
+                  ? '8교시'
+                  : period === 'NINTH'
+                  ? '9교시'
+                  : period === 'TENTH'
+                  ? '10교시'
+                  : period === 'ELEVENTH'
+                  ? '11교시'
+                  : ''
+              )}
+              placeholder='조회할 교시를 선택해주세요. (미선택 시 현재 시간 조회)'
+            />
+          </S.DateContainer>
+          {isPick === 'calendar' ? (
+            <Layer>
+              <Calendar
+                value={date}
+                onChange={(value) => {
+                  if (!(value instanceof Date)) return
+                  setDate(value)
+                  setCurrentDate(dayjs(value).format('YYYY-MM-DD'))
+                }}
+                calendarType='US'
+                locale='kr'
+                formatDay={(_locale, date) =>
+                  date.toLocaleString('en', { day: 'numeric' })
+                }
+              />
+            </Layer>
+          ) : (
+            isPick === 'period' && (
+              <S.ClassPick>
+                {periodArr.map((item) => (
+                  <S.Class
+                    key={item.period}
+                    onClick={() => onClickPeriod(item.period)}
+                    selected={selectedPeriods.includes(item.period)}
+                  >
+                    {item.text}
+                  </S.Class>
+                ))}
+              </S.ClassPick>
+            )
+          )}
+        </S.InputWrapper>
+        <S.Button
+          isPick={isPick}
+          onClick={isShow === '조회하기' ? download : create}
+        >
+          출석표 {isShow}
+        </S.Button>
+      </S.Wrapper>
+    </Portal>
+  )
+}
+
+export default AttendanceForm