refactor: css (#62)

Central-MakeUs · Jan 23, 2025 · 031f26d · 031f26d
1 parent 7384b5e
commit 031f26d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/packages/design-system/TimePickerBottomSheet.tsx b/packages/design-system/TimePickerBottomSheet.tsx
@@ -1,4 +1,4 @@
-import { Stack } from "@repo/ui/Stack";
+import { motion } from "motion/react";
 import { overlay } from "overlay-kit";
 import { useRef } from "react";
 import { BottomSheet } from "./BottomSheet";
@@ -60,7 +60,12 @@ export const TimePickerBottomSheet = (props: TimePickerBottomSheetProps) => {
               시간 설정하기
             </Text>
           </BottomSheet.Title>
-          <Stack className=" mt-[14px] mb-[20px] h-[160px] w-full">
+          <motion.div
+            className=" flex flex-col mt-[14px] mb-[20px] h-[160px] w-full"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
             <IosTimePicker.Layout>
               <IosTimePicker
                 slideCount={props.leftSlideCount}
@@ -77,7 +82,7 @@ export const TimePickerBottomSheet = (props: TimePickerBottomSheetProps) => {
                 label={props.rightLabel}
               />
             </IosTimePicker.Layout>
-          </Stack>
+          </motion.div>
           <CtaButton
             className=" z-[1]"
             onClick={() => {

diff --git a/src/pages/TimerPage.tsx b/src/pages/TimerPage.tsx
@@ -8,9 +8,8 @@ import { TimerButtonSection } from "~/features/timer/components/TimerButtonSecti
 import { TimerDescription } from "~/features/timer/components/TimerDescription";
 import { TimerSpeechBubble } from "~/features/timer/components/TimerSpeechBubble";
 import { TimerText } from "~/features/timer/components/TimerText";
-import { TimerEffector } from "~/features/timer/model/TimerEffector";
-
 import { TIMER_ASSETS } from "~/features/timer/lib/timer.constants";
+import { TimerEffector } from "~/features/timer/model/TimerEffector";
 
 export default function TimerPage() {
   return (
@@ -41,7 +40,7 @@ export default function TimerPage() {
           <CenterStack>
             <TimerButtonSection />
           </CenterStack>
-          <BottomNavigationBar.Height className=" mb-[62.5px]" />
+          <BottomNavigationBar.Height className=" mb-[135px]" />
         </Stack>
       </Stack>