feat: 세부 기록(심박수, 페이스, 칼로리) 작성 구현합니다.

components/atoms/accordion/accordion.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ReactNode } from 'react';
+
+interface AccordionProps {
+  className?: string;
+  children: ReactNode;
+}
+
+export function Accordion({ className, children }: AccordionProps) {
+  return (
+    <motion.div
+      layout
+      animate={{ y: 0, opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.3, ease: [0.43, 0.13, 0.23, 0.96] }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}

components/atoms/accordion/index.ts

@@ -0,0 +1 @@
+export * from './accordion';

components/atoms/index.ts

@@ -1,3 +1,4 @@
+export * from './accordion';
 export * from './button';
 export * from './dim';
 export * from './icons';

features/record/components/organisms/diary-section.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useFormContext } from 'react-hook-form';
 
 import { TextArea } from '@/components/molecules';

features/record/components/organisms/form.tsx

@@ -5,14 +5,15 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 import { Divider } from '@/components/atoms/divider';
 import { TextField } from '@/components/molecules';
-import { css } from '@/styled-system/css';
+import { css, cx } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
 import { RecordRequestProps } from '../../apis/dto';
 import {
   isDistancePageModalOpen,
   isLaneLengthBottomSheetOpen,
   isPoolSearchPageModalOpen,
+  timeBottomSheetState,
 } from '../../store';
 import { formSectionStyles } from '../../styles/form-section';
 import { DiarySection } from './diary-section';
@@ -22,6 +23,7 @@ import { LaneLengthBottomSheet } from './lane-length-bottom-sheet';
 import { PhotoSection } from './photo-section';
 import { PoolSearchPageModal } from './pool-search-page-modal';
 import { SubInfoSection } from './sub-info-section';
+import { TimeBottomSheet } from './time-bottom-sheet';
 
 interface SubInfoProps {
   poolName: string | null;
@@ -30,6 +32,7 @@ interface SubInfoProps {
 }
 
 //Todo: null 타입 제거
+//Todo: watch의 성능 이슈 고민
 export function Form() {
   const methods = useForm<RecordRequestProps & SubInfoProps>({
     defaultValues: {
@@ -56,11 +59,15 @@ export function Form() {
 
   const setIsPoolSearchPageModalOpen = useSetAtom(isPoolSearchPageModalOpen);
   const setIsDistancePageModalOpen = useSetAtom(isDistancePageModalOpen);
+  const setTimeBottomSheetState = useSetAtom(timeBottomSheetState);
+
+  const startTime = methods.watch('startTime');
+  const endTime = methods.watch('endTime');
   return (
     //react-hook-form 전역적으로 사용
     <FormProvider {...methods}>
       <form>
-        <div className={formSectionStyles}>
+        <div className={cx(formSectionStyles)}>
           <TextField
             variant="select"
             isRequired
@@ -73,20 +80,34 @@ export function Form() {
               variant="select"
               isRequired
               hasDownArrow
-              value="18:30"
+              value={startTime || ''}
               placeholder="00:00"
               label="수영 시간"
               wrapperClassName={timeStyles.field}
+              onClick={() =>
+                setTimeBottomSheetState((prev) => ({
+                  ...prev,
+                  variant: 'start',
+                  isOpen: true,
+                }))
+              }
             />
             <span className={css({ fontSize: '30px' })}>-</span>
             <TextField
               variant="select"
               isRequired
               hasDownArrow
-              value={'19:00'}
+              value={endTime || ''}
               label="수영 시간"
               placeholder="00:00"
               wrapperClassName={timeStyles.field}
+              onClick={() =>
+                setTimeBottomSheetState((prev) => ({
+                  ...prev,
+                  variant: 'end',
+                  isOpen: true,
+                }))
+              }
             />
           </div>
           <TextField
@@ -148,6 +169,7 @@ export function Form() {
       <LaneLengthBottomSheet title="레인 길이를 선택해주세요" />
       <PoolSearchPageModal title="어디서 수영했나요?" />
       <DistancePageModal />
+      <TimeBottomSheet />
     </FormProvider>
   );
 }

features/record/components/organisms/index.ts

@@ -8,3 +8,4 @@ export * from './pool-search-page-modal';
 export * from './pool-search-result-list';
 export * from './sub-info-section';
 export * from './sub-info-text-fields';
+export * from './time-bottom-sheet';

features/record/components/organisms/lane-length-bottom-sheet.tsx

@@ -4,7 +4,6 @@ import { useAtom } from 'jotai';
 import { useFormContext } from 'react-hook-form';
 
 import { BottomSheet } from '@/components/molecules';
-import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
 import { isLaneLengthBottomSheetOpen } from '../../store';
@@ -33,10 +32,14 @@ export function LaneLengthBottomSheet({ title }: LaneLengthBottomSheetProps) {
   };
 
   return (
-    <BottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
+    <BottomSheet
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      header={{ title }}
+      isRenderHandlebar
+    >
       <div className={layout.bottomSheetStyles}>
         {/* Title 컴포넌트로 대체 */}
-        <h1 className={titleStyles}>{title}</h1>
         <SelectList
           value={getValues('lane') + 'm'}
           options={laneOptions}
@@ -53,7 +56,7 @@ const layout = {
   bottomSheetStyles: flex({
     w: 'full',
     direction: 'column',
-    padding: '40px 20px',
+    padding: '24px 20px',
   }),
   listElement: flex({
     position: 'relative',
@@ -63,7 +66,3 @@ const layout = {
     marginBottom: '8px',
   }),
 };
-
-const titleStyles = css({
-  marginBottom: '24px',
-});

features/record/components/organisms/sub-info-section.tsx

@@ -1,40 +1,60 @@
 'use client';
 
-import { DownArrowIcon } from '@/components/atoms';
+import { AnimatePresence } from 'framer-motion';
+import { useState } from 'react';
+
+import { Accordion, DownArrowIcon } from '@/components/atoms';
 import { Divider } from '@/components/atoms/divider';
 import { css } from '@/styled-system/css';
+import { flex } from '@/styled-system/patterns';
 
-import { useSubInfoTextFields } from '../../hooks';
 import { FormSectionProps } from '../../types/form-section';
 import { SubInfoTextFields } from './sub-info-text-fields';
 
 export function SubInfoSection({ title }: FormSectionProps) {
-  const { isOpen, handlers } = useSubInfoTextFields();
+  const [isTextFieldsOpen, setIsTextFieldsOpen] = useState(false);
+
+  const handleTextFieldsOpenStateClick = () => {
+    setIsTextFieldsOpen((prev) => !prev);
+  };
 
   return (
-    <section>
+    <>
       <div
-        className={beforeExpandStyles.layout}
-        onClick={() => handlers.onChangeFieldsOpen()}
+        className={titleStyles.layout}
+        onClick={handleTextFieldsOpenStateClick}
       >
-        <h1 className={beforeExpandStyles.title}>{title}</h1>
+        <h1 className={titleStyles.text}>{title}</h1>
         <DownArrowIcon />
       </div>
-      {!isOpen && <Divider variant="thick" />}
-      <SubInfoTextFields isOpen={isOpen} />
-    </section>
+      <AnimatePresence>
+        {!isTextFieldsOpen ? (
+          <Accordion>
+            <Divider variant="thick" />
+          </Accordion>
+        ) : (
+          <Accordion className={textFieldsStyles}>
+            <SubInfoTextFields />
+          </Accordion>
+        )}
+      </AnimatePresence>
+    </>
   );
 }
 
-const beforeExpandStyles = {
-  layout: css({
-    display: 'flex',
+const titleStyles = {
+  layout: flex({
     justifyContent: 'space-between',
     alignItems: 'center',
-    padding: '24px 20px',
+    padding: '20px 24px',
   }),
-  title: css({
+
+  text: css({
     textStyle: 'heading4',
     fontWeight: '600',
   }),
 };
+
+const textFieldsStyles = css({
+  padding: '0 20px 24px 20px',
+});

features/record/components/organisms/sub-info-text-fields.tsx

@@ -1,28 +1,38 @@
+'use client';
+
+import { useFormContext } from 'react-hook-form';
+
 import { TextField } from '@/components/molecules';
 import { css } from '@/styled-system/css';
 
-interface SubInfoTextFieldsProps {
-  isOpen: boolean;
-}
+import { useSubInfoTextFields } from '../../hooks';
+
+export function SubInfoTextFields() {
+  const { watch } = useFormContext();
+  const { handlers } = useSubInfoTextFields();
 
-export function SubInfoTextFields({ isOpen }: SubInfoTextFieldsProps) {
-  return isOpen ? (
-    <div className={layoutStyles}>
+  return (
+    <>
       <TextField
         label="심박수"
         unit="BPM"
+        value={watch('heartRate') ? String(watch('heartRate')) : ''}
         wrapperClassName={css({ marginBottom: '23px' })}
+        onChange={handlers.onChangeHeartRate}
       />
       <TextField
         label="페이스"
         unit="/100m"
+        value={watch('pace') ? (watch('pace') as string) : ''}
         wrapperClassName={css({ marginBottom: '23px' })}
+        onChange={handlers.onChangePace}
       />
-      <TextField label="칼로리" unit="Kcal" />
-    </div>
-  ) : null;
+      <TextField
+        label="칼로리"
+        unit="Kcal"
+        value={watch('kcal') ? String(watch('kcal')) : ''}
+        onChange={handlers.onChangeKcal}
+      />
+    </>
+  );
 }
-
-const layoutStyles = css({
-  padding: '0 20px 24px 20px',
-});