타임서비스 이름 변경 및 타임테이블 모달 내부 요소 추가

apps/time/src/shared/ui/Modal.tsx

@@ -37,11 +37,11 @@ interface ModalDropdownProps extends PropsWithChildren {
 interface ModalDropdownItemProps extends PropsWithChildren {
   onClick: () => void;
   selected: boolean;
+  closeOnClick?: boolean;
 }
 
-interface ModalItemProps {
+interface ModalItemProps extends PropsWithChildren {
   title: string;
-  value: string;
 }
 
 interface ModalDropdownContextType {
@@ -59,7 +59,7 @@ const ModalDropdownContext = createContext<ModalDropdownContextType>({
 function ModalFilter({ title, children }: ModalFilterProps) {
   return (
     <div className="flex items-center gap-x-4 py-1 text-sm">
-      <p className="w-20 break-keep">{title}</p>
+      <p className="w-20 shrink-0 break-keep">{title}</p>
       <ul className="flex divide-x divide-gray-400 overflow-hidden rounded-md border border-gray-400">
         {children}
       </ul>
@@ -92,7 +92,7 @@ function ModalDropdown({ title, value, children }: ModalDropdownProps) {
   const [open, setOpen] = useState<boolean>(false);
 
   const closeAction = useCallback(() => {
-    setOpen(false);
+    setOpen(() => false);
   }, [setOpen]);
 
   const dropdownRef = useOutsideClick({ callback: closeAction });
@@ -109,23 +109,16 @@ function ModalDropdown({ title, value, children }: ModalDropdownProps) {
       <div className="relative grow" onClick={() => setOpen((prev) => !prev)}>
         <ModalDropdownContext.Provider value={defaultModalDropdownContext}>
           <div className="flex items-center justify-between rounded-md border border-gray-400 p-1">
-            <div
-              className={cn(
-                'flex text-gray-500',
-                typeof value === 'string' && 'select-none',
-              )}
-            >
-              {value}
-            </div>
+            <div className={cn('flex text-gray-500')}>{value}</div>
             <ChevronDownOutline
               className={cn(
-                'mr-2 transition-all',
+                'mr-2 shrink-0 transition-all',
                 open ? 'rotate-0' : 'rotate-180',
               )}
             />
           </div>
           {open && (
-            <div className="absolute mt-4 h-60 w-full overflow-hidden overflow-y-scroll rounded-md border border-gray-400 bg-white p-2 drop-shadow-md">
+            <div className="absolute z-40 mt-4 max-h-60 min-h-fit w-full overflow-hidden overflow-y-scroll rounded-md border border-gray-400 bg-white p-2 drop-shadow-md">
               {children}
             </div>
           )}
@@ -139,6 +132,7 @@ function ModalDropdownItem({
   selected,
   onClick,
   children,
+  closeOnClick = false,
 }: ModalDropdownItemProps) {
   const { action } = useContext(ModalDropdownContext);
 
@@ -149,27 +143,30 @@ function ModalDropdownItem({
         selected ? 'text-blue-400' : 'text-black',
       )}
       type="button"
-      onClick={() => {
+      onClick={(event) => {
+        event.stopPropagation();
         onClick();
-        action.closeAction();
+        if (closeOnClick) {
+          action.closeAction();
+        }
       }}
     >
       {children}
     </button>
   );
 }
 
-function ModalItem({ title, value }: ModalItemProps) {
+function ModalItem({ title, children }: ModalItemProps) {
   return (
     <div className="flex items-center gap-x-4 py-1 text-sm">
-      <p className="w-20 break-keep">{title}</p>
-      <p>{value}</p>
+      <p className="w-20 shrink-0 break-keep">{title}</p>
+      <div className="w-full">{children}</div>
     </div>
   );
 }
 
 function ModalContent({ children }: PropsWithChildren) {
-  return <div className="space-y-2">{children}</div>;
+  return <div className="flex flex-col gap-y-3">{children}</div>;
 }
 
 export default function Modal({ title, close, children }: ModalProps) {
@@ -195,7 +192,7 @@ export default function Modal({ title, close, children }: ModalProps) {
     <div className="fixed top-0 z-40 flex h-dvh w-dvw flex-col items-center justify-center bg-gray-800/60 transition-colors">
       <div
         ref={modalRef}
-        className="h-fit w-3/4 space-y-4 rounded-xl bg-white p-6"
+        className="container h-fit space-y-4 rounded-xl bg-white p-6"
       >
         <div className="flex w-full justify-between">
           <p className="font-bold">{title ?? ''}</p>

apps/time/src/widgets/time-table/model/constants/grade.ts

@@ -1,3 +1,8 @@
-const GRADE = ['1학년', '2학년', '3학년', '4학년', '5학년', '6학년'] as const;
-
-export default GRADE;
+export const GRADE = [
+  '1학년',
+  '2학년',
+  '3학년',
+  '4학년',
+  '5학년',
+  '6학년',
+] as const;

apps/time/src/widgets/time-table/model/constants/index.ts

@@ -1,2 +1,4 @@
 export * from './period';
-export { default as GRADE } from './grade';
+export * from './grade';
+export * from './region';
+export * from './lecture';

apps/time/src/widgets/time-table/model/constants/lecture.ts

@@ -0,0 +1,14 @@
+import { LectureKey, LectureValue } from '@/widgets/time-table';
+
+export const LECTURE = {
+  CULTURE: '교양',
+  MAJOR: '전공',
+  TEACHING: '교직이수',
+  ROTC: 'ROTC',
+  LINKEDFUSION: '연계융합',
+} as const;
+
+export const LECTURE_ARRAY = Object.entries(LECTURE) as [
+  LectureKey,
+  LectureValue,
+][];

apps/time/src/widgets/time-table/model/constants/period.ts

@@ -147,9 +147,12 @@ const DAY_STATUS = {
   night: '야간',
 } as const;
 
+const SPECIAL_PERIOD = ['이러닝', '교외수업', '사회봉사'] as const;
+
 export {
   DAY_PERIOD,
   NIGHT_PERIOD,
+  SPECIAL_PERIOD,
   DAY_PERIOD_ARRAY,
   NIGHT_PERIOD_ARRAY,
   DAY_STATUS,

apps/time/src/widgets/time-table/model/constants/region.ts

@@ -0,0 +1,6 @@
+export const REGION = {
+  campus1: '수원',
+  campus2: '서울',
+} as const;
+
+export const REGION_VALUE_ARRAY = Object.values(REGION);

apps/time/src/widgets/time-table/types/grade.ts

@@ -1,4 +1,4 @@
-import GRADE from '@/widgets/time-table/model/constants/grade';
+import { GRADE } from '@/widgets/time-table';
 
 type Grade = (typeof GRADE)[number];
 

apps/time/src/widgets/time-table/types/index.ts

@@ -1,3 +1,5 @@
 export * from './day-status';
 export * from './grade';
 export * from './period';
+export * from './lecture';
+export * from './region';

apps/time/src/widgets/time-table/types/lecture.ts

@@ -0,0 +1,5 @@
+import { LECTURE } from '@/widgets/time-table';
+
+export type LectureKey = keyof typeof LECTURE;
+
+export type LectureValue = (typeof LECTURE)[keyof typeof LECTURE];

apps/time/src/widgets/time-table/types/period.ts

@@ -1,7 +1,7 @@
-import { DAY_PERIOD, NIGHT_PERIOD } from '@/widgets/time-table';
+import { DAY_PERIOD, NIGHT_PERIOD, SPECIAL_PERIOD } from '@/widgets/time-table';
 
-type DayPeriod = keyof typeof DAY_PERIOD;
+export type SpecialPeriod = (typeof SPECIAL_PERIOD)[number];
 
-type NightPeriod = keyof typeof NIGHT_PERIOD;
+export type DayPeriod = keyof typeof DAY_PERIOD | SpecialPeriod;
 
-export type { DayPeriod, NightPeriod };
+export type NightPeriod = keyof typeof NIGHT_PERIOD | SpecialPeriod;

apps/time/src/widgets/time-table/types/region.ts

@@ -0,0 +1,3 @@
+import { REGION } from '@/widgets/time-table';
+
+export type Region = (typeof REGION)[keyof typeof REGION];