feat(active): change type

src/features/setting/Container.tsx

@@ -3,22 +3,32 @@ import { useLayoutEffect } from 'react';
 
 import { bottomBtnAtom, titleAtom } from '../shared/layout/atom';
 
+import useSetting from './hooks/useSetting';
 import './style/index.scss';
 import PreviewSection from './components/PreviewSection';
 import SubmitForm from './components/SubmitForm';
 
 const Container = () => {
   const [, setTitle] = useAtom(titleAtom);
   const [, setBottomBtn] = useAtom(bottomBtnAtom);
+
+  const { handlePreviewClick, handleSubmit, onSubmit, register, control } =
+    useSetting();
+
   useLayoutEffect(() => {
     setTitle({ title: 'Active', back: true });
     setBottomBtn({ text: 'Save' });
   }, []);
 
   return (
     <div className="setting-container">
-      <PreviewSection />
-      <SubmitForm />
+      <PreviewSection handlePreviewClick={handlePreviewClick} />
+      <SubmitForm
+        handleSubmit={handleSubmit}
+        onSubmit={onSubmit}
+        register={register}
+        control={control}
+      />
     </div>
   );
 };

src/features/setting/components/PreviewSection.tsx

@@ -1,8 +1,14 @@
+import { FunctionComponent } from 'react';
+
 import { previewSubText, previewTitleText } from '../constants';
-import useSetting from '../hooks/useSetting';
 
-const PreviewSection = () => {
-  const { handlePreviewClick } = useSetting();
+type PreviewSectionProps = {
+  handlePreviewClick: () => void;
+};
+
+const PreviewSection: FunctionComponent<PreviewSectionProps> = ({
+  handlePreviewClick,
+}) => {
   return (
     <div className="setting-preview-container">
       <div className="setting-preview-title-text">{previewTitleText}</div>

src/features/setting/components/SubmitForm/DailySticker.tsx

@@ -1,13 +1,17 @@
+import { FunctionComponent } from 'react';
 import { Controller } from 'react-hook-form';
+import { Control } from 'react-hook-form';
 
+import { Inputs } from '../../types';
 import { stickerList, wordStickerText } from '../../constants';
-import useSetting from '../../hooks/useSetting';
 
 import '../../style/index.scss';
 
-const DailySticker = () => {
-  const { control } = useSetting();
+type DailyStickerProps = {
+  control: Control<Inputs, any>;
+};
 
+const DailySticker: FunctionComponent<DailyStickerProps> = ({ control }) => {
   return (
     <div className="setting-sticker-container">
       <span className="setting-sticker-title">{wordStickerText}</span>
@@ -18,7 +22,11 @@ const DailySticker = () => {
         render={({ field }) => (
           <div className="setting-sticker-box" {...field}>
             {stickerList.map((sticker) => (
-              <label htmlFor={sticker} key={sticker}>
+              <label
+                htmlFor={sticker}
+                key={sticker}
+                className="setting-sticker-width"
+              >
                 <input
                   type="radio"
                   id={sticker}

src/features/setting/components/SubmitForm/DailyWord.tsx

@@ -1,9 +1,15 @@
+import { FunctionComponent } from 'react';
+import { UseFormRegister } from 'react-hook-form';
+
+import { Inputs } from '../../types';
 import { wordTitleText } from '../../constants';
-import useSetting from '../../hooks/useSetting';
 import '../../style/index.scss';
 
-const DailyWord = () => {
-  const { register } = useSetting();
+type DailyWordProps = {
+  register: UseFormRegister<Inputs>;
+};
+
+const DailyWord: FunctionComponent<DailyWordProps> = ({ register }) => {
   return (
     <div className="setting-word-container">
       <span className="setting-word-title">{wordTitleText}</span>

src/features/setting/components/SubmitForm/index.tsx

@@ -1,15 +1,31 @@
 import { useAtom } from 'jotai';
-import { useEffect } from 'react';
+import { FunctionComponent, useEffect } from 'react';
+import {
+  UseFormHandleSubmit,
+  SubmitHandler,
+  UseFormRegister,
+  Control,
+} from 'react-hook-form';
 
-import LayoutBottomBtn from '../../../shared/layout/components/BottomBtn';
-import useSetting from '../../hooks/useSetting';
 import { activeSaveAtom } from '../../../shared/layout/atom';
+import { Inputs } from '../../types';
 
 import DailySticker from './DailySticker';
 import DailyWord from './DailyWord';
 
-const SubmitForm = () => {
-  const { handleSubmit, onSubmit } = useSetting();
+type SubmitFormProps = {
+  handleSubmit: UseFormHandleSubmit<Inputs, undefined>;
+  onSubmit: SubmitHandler<Inputs>;
+  register: UseFormRegister<Inputs>;
+  control: Control<Inputs, any>;
+};
+
+const SubmitForm: FunctionComponent<SubmitFormProps> = ({
+  handleSubmit,
+  onSubmit,
+  register,
+  control,
+}) => {
   const [activeSave] = useAtom(activeSaveAtom);
 
   useEffect(() => {
@@ -21,9 +37,8 @@ const SubmitForm = () => {
 
   return (
     <form>
-      <DailyWord />
-      <DailySticker />
-      <LayoutBottomBtn />
+      <DailyWord register={register} />
+      <DailySticker control={control} />
     </form>
   );
 };

src/features/setting/style/index.scss

@@ -1,12 +1,11 @@
 .setting {
   &-container {
     width: 100%;
-    height: calc(100% - 78px);
+    height: calc(100% - 159px);
     background: #F7F7F7;
   }
 
   &-preview-container {
-    height: 176px;
     display: flex;
     padding: 24px 16px;
     flex-direction: column;
@@ -16,7 +15,7 @@
   }
 
   &-preview-title-text {
-    height: 36px;
+    height: fit-content;
     margin-bottom: 4px;
     color: #191919;
     text-align: center;
@@ -27,7 +26,6 @@
   }
 
   &-preview-sub-text {
-    height: 72px;
     margin-bottom: 16px;
     color: #9797AE;
     font-size: 14px;
@@ -102,6 +100,7 @@
     display: flex;
     height: 100%;
     width: 100%;
+    justify-content: space-between;
     align-items: flex-start;
     align-content: flex-start;
     gap: 8px;
@@ -115,4 +114,11 @@
       outline: 1px solid #000;
     }
    }
+
+   &-sticker-width {
+    width: 48%;
+    img {
+      width: 100%;
+    }
+   }
 }