[feat] 보컬 페이지의 수요지식회 카테고리에 열 구분자 추가

42Check-in · Sep 4, 2023 · f26eb16 · f26eb16
1 parent 8de3022
commit f26eb16
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/components/status/PresentationsStatus.tsx b/components/status/PresentationsStatus.tsx
@@ -1,16 +1,15 @@
 import type PresentationsFormInfo from '@/interfaces/PresentationsFormInfo';
 import { cls } from '@/styles/cls';
-import { preventDefault } from '@fullcalendar/core/internal';
 import dayjs from 'dayjs';
-import { Dispatch, ReactElement } from 'react';
+import type { Dispatch, ReactElement } from 'react';
 
 interface PresentationsStatus {
   status: PresentationsFormInfo;
   setChangePresentations: Dispatch<React.SetStateAction<{}>>;
   changePresentations: {};
 }
 
-const STATUS = ['신청 중', '스케줄 등록 완료', '아젠다 등록', '강의 완료', '차례 대기 중'];
+const STATUS = ['신청 중', '스케줄 등록', '아젠다 등록', '강의 완료', '차례 대기 중'];
 const SPEECHTIME = ['15분', '30분', '45분', '1시간', '1시간 이상'];
 
 export default function PresentationsStatus({
@@ -38,12 +37,13 @@ export default function PresentationsStatus({
         <div className='ml-1 flex w-[18%] justify-center whitespace-nowrap text-center dark:text-white '>
           {date}
         </div>
-        <div className='h-3 border-[1px] border-gray-300 dark:border-white' />
+        <div className='column-separator' />
         <div className='w-[10%] text-center dark:text-white'>{SPEECHTIME[status.time]}</div>
-        <div className='h-3 border-[1px] border-gray-300 dark:border-white' />
+        <div className='column-separator' />
         <div className='w-[51%] whitespace-nowrap text-center dark:text-gray-300'>
           {status.subject}
         </div>
+        <div className='column-separator' />
         <select
           name='statusBox'
           id={status.formId.toString()}
@@ -54,7 +54,7 @@ export default function PresentationsStatus({
           defaultValue={status.status}
           className={cls(
             status.status !== 4 ? 'visible' : 'invisible',
-            'w-[21%] text-xs transition group-hover:bg-[#6AA6FF] group-hover:transition group-hover:duration-300 group-hover:ease-in-out dark:bg-slate-800 dark:group-hover:bg-gray-700 sm:text-sm',
+            'w-[21%] text-center text-xs transition group-hover:bg-[#6AA6FF] group-hover:transition group-hover:duration-300 group-hover:ease-in-out dark:bg-slate-800 dark:group-hover:bg-gray-700 sm:text-sm',
           )}
         >
           <option value='0'>선택해주세요.</option>

diff --git a/components/status/Status.tsx b/components/status/Status.tsx
@@ -100,13 +100,13 @@ export default function Status({
         <div className='ml-1 flex w-[20%] justify-center whitespace-nowrap text-center dark:text-white'>
           {date}
         </div>
-        <div className='h-3 border-[1px] border-gray-300 dark:border-white' />
+        <div className='column-separator' />
         <div
           className={cls(isConferenceRoom ? 'w-[30%]' : 'w-[20%]', 'text-center dark:text-white')}
         >
           {time}
         </div>
-        <div className='h-3 border-[1px] border-gray-300 dark:border-white' />
+        <div className='column-separator' />
         <div
           className={cls(
             isConferenceRoom ? 'w-[25%]' : 'w-[39%]',

diff --git a/styles/globals.css b/styles/globals.css
@@ -49,6 +49,10 @@ body {
   @apply text-2xl font-extrabold text-white xl:text-4xl;
 }
 
+.column-separator {
+  @apply h-3 border-[1px] border-gray-300 dark:border-white;
+}
+
 .darkModeIcon {
   @apply fill-slate-700 text-slate-700 transition dark:fill-white;
 }