refactor: Add On My Own 아키텍쳐 이주

src/components/timetable/LectureBottomSheet/AddOnMyOwn/TimeSelector.tsx → src/common/components/TimeSelector/index.tsx

@@ -1,25 +1,32 @@
-import { css } from '@styled-system/css'
 import { useEffect, useState } from 'react'
 import { UseFormSetValue } from 'react-hook-form'
 
+import * as s from './style.css'
+
 import Dropdown from '@/components/timetable/Dropdown'
-import { AddOnMyOwnForm } from '@/components/timetable/LectureBottomSheet/AddOnMyOwn'
+import { AddOnMyOwnForm } from '@/domain/Timetable/components/LectureBottomSheet/AddOnMyOwn/types'
 import { hSelectors, mSelectors } from '@/lib/constants/timeSelectors'
 
 interface TimeSelector {
   type: 'startTime' | 'endTime'
+  value: string
   setValue: UseFormSetValue<AddOnMyOwnForm>
 }
-const TimeSelector = ({ type, setValue }: TimeSelector) => {
-  const [curH, setCurH] = useState(0)
-  const [curM, setCurM] = useState(0)
+const TimeSelector = ({ type, value, setValue }: TimeSelector) => {
+  // Set initial curH and curM from value string
+  const [hours, minutes] = value.split(':')
+  const hIndex = hSelectors.findIndex(h => h.startsWith(hours))
+  const mIndex = mSelectors.findIndex(m => m.startsWith(minutes))
+
+  const [curH, setCurH] = useState(hIndex === -1 ? 0 : hIndex)
+  const [curM, setCurM] = useState(mIndex === -1 ? 0 : mIndex)
 
   useEffect(() => {
     setValue(type, `${hSelectors[curH].slice(0, 2)}:${mSelectors[curM].slice(0, 2)}:00`)
   }, [curH, curM, setValue, type])
 
   return (
-    <div className={css({ display: 'flex', gap: 5 })}>
+    <div className={s.Wrapper}>
       <Dropdown dropdownList={hSelectors} curIndex={curH} setCurIndex={setCurH} isTimeSelector={true} />
       <Dropdown dropdownList={mSelectors} curIndex={curM} setCurIndex={setCurM} isTimeSelector={true} />
     </div>

src/common/components/TimeSelector/style.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css'
+
+import { f } from '@/style'
+
+export const Wrapper = style([
+  f.flex,
+  {
+    gap: '1.25rem',
+  },
+])

src/components/timetable/Grid/LectureSticker/ScheduledLecture.tsx

@@ -1,10 +1,9 @@
 import { css } from '@styled-system/css'
+import { AnimatePresence } from 'framer-motion'
 import { useSetAtom } from 'jotai'
 import { CircleUser, MapPin } from 'lucide-react'
-import { MouseEvent } from 'react'
-import { createPortal } from 'react-dom'
 
-import EditSchedule from '@/components/timetable/Modal/EditSchedule'
+import EditSchedule from '@/domain/Timetable/components/LectureBottomSheet/EditSchedule'
 import { isBottomSheetVisible } from '@/domain/Timetable/store/bottomSheetVisibility'
 import { GridType } from '@/types/timetable'
 import { getDuration, getStartTime } from '@/util/timetableUtil'
@@ -54,14 +53,6 @@ const ScheduledLecture = ({
     setIsSheetOpened(true)
   }
 
-  const handleModalOutsideClick = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
-    // 모달 안쪽을 눌렀을 때도 모달 state가 null 되는 것을 방지
-    if (event.target === event.currentTarget) {
-      setIsScheduleEditOpened(false)
-      setIsSheetOpened(true)
-    }
-  }
-
   return (
     <>
       <div
@@ -113,30 +104,11 @@ const ScheduledLecture = ({
           )}
         </div>
       </div>
-      {isScheduleEditOpened &&
-        createPortal(
-          <div
-            className={css({
-              position: 'fixed',
-              top: 0,
-              left: 0,
-              w: '100vw',
-              h: '100vh',
-              bgColor: 'rgba(0, 0, 0, 0.40)',
-              zIndex: 100,
-              display: 'flex',
-              flexDir: 'column',
-              justifyContent: 'flex-end',
-              alignItems: 'center',
-              paddingBottom: '50px',
-            })}
-            role="presentation"
-            onClick={handleModalOutsideClick}
-          >
-            <EditSchedule timetableId={timetableId!} data={data} closeScheduleModal={closeScheduleModal} />
-          </div>,
-          document.body,
+      <AnimatePresence>
+        {isScheduleEditOpened && (
+          <EditSchedule timetableId={timetableId!} data={data} closeEditSheet={closeScheduleModal} />
         )}
+      </AnimatePresence>
     </>
   )
 }