From 3db3c321716dc7a63c00e060938086d487aea794 Mon Sep 17 00:00:00 2001
From: hwna00 <layton3534@gmail.com>
Date: Wed, 13 Sep 2023 15:46:59 +0900
Subject: [PATCH 01/10] =?UTF-8?q?Feat(user):=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=ED=95=AD=EB=AA=A9=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 회원가입 입력값 중 chronicDisease의 placeholder 변경
- 해당 내용을 119상황실에 전달할 때, 수술이력이 필요하기 때문에 변경
---
 packages/apps/user/src/components/SignUpForm/SignUpForm.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/apps/user/src/components/SignUpForm/SignUpForm.js b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
index d0d047a3..141ae2fe 100644
--- a/packages/apps/user/src/components/SignUpForm/SignUpForm.js
+++ b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
@@ -336,14 +336,11 @@ const SignUpForm = function ({
               </FormControl>
             </HStack>
 
-            <FormControl
-              width="full"
-              isInvalid={errors.step2?.chronicDisease}
-            >
+            <FormControl width="full" isInvalid={errors.step2?.chronicDisease}>
               <FormLabel>질환 정보</FormLabel>
               <Textarea
                 resize="none"
-                placeholder="평소 앓고 있었던 질병이 있다면 입력해주세요."
+                placeholder="평소 앓고 있었던 질병이나 수술 이력이 있다면 입력해주세요."
                 {...register('step2.chronicDisease')}
               />
               <FormErrorMessage>

From eb6f5efc2430c53cabd932b6032fed8cc94049bd Mon Sep 17 00:00:00 2001
From: hwna00 <layton3534@gmail.com>
Date: Fri, 15 Sep 2023 15:17:16 +0900
Subject: [PATCH 02/10] =?UTF-8?q?Refactor(user):=20=ED=9A=8C=EC=9B=90?=
 =?UTF-8?q?=EA=B0=80=EC=9E=85=20=EC=8A=A4=ED=85=9D=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 기존: 가로로 긴 하나의 레이아웃에 가로로 배치
- 변경: 컴포넌트로 분리하여 Outlet으로 배치

ref: #62
---
 .../src/components/SignUpForm/SignUpForm.js   | 336 ++----------------
 packages/apps/user/src/routes/authRoutes.js   |  34 +-
 .../apps/user/src/views/Auth/SignUp/Step1.js  |  86 +++++
 .../apps/user/src/views/Auth/SignUp/Step2.js  |  88 +++++
 .../apps/user/src/views/Auth/SignUp/Step3.js  |  96 +++++
 .../apps/user/src/views/Auth/SignUp/Step4.js  |  12 +
 6 files changed, 340 insertions(+), 312 deletions(-)
 create mode 100644 packages/apps/user/src/views/Auth/SignUp/Step1.js
 create mode 100644 packages/apps/user/src/views/Auth/SignUp/Step2.js
 create mode 100644 packages/apps/user/src/views/Auth/SignUp/Step3.js
 create mode 100644 packages/apps/user/src/views/Auth/SignUp/Step4.js

diff --git a/packages/apps/user/src/components/SignUpForm/SignUpForm.js b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
index 141ae2fe..c0511c3d 100644
--- a/packages/apps/user/src/components/SignUpForm/SignUpForm.js
+++ b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
@@ -1,6 +1,6 @@
 import { useCallback, useRef, useState } from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { Outlet, useNavigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { useForm } from 'react-hook-form';
 import PropTypes from 'prop-types';
@@ -38,336 +38,58 @@ const SignUpForm = function ({
   isActiveStep,
   isCompleteStep,
 }) {
-  const {
-    register,
-    handleSubmit,
-    getValues,
-    trigger,
-    formState: { errors },
-  } = useForm({ mode: 'all' });
+  const reactHookForm = useForm({ mode: 'all' });
 
   const navigate = useNavigate();
   const [formPosition, setFormPosition] = useState(0);
   const ref = useRef();
 
   const handleNext = useCallback(async () => {
-    const isFullfilled = await trigger(`step${activeStep}`);
-    if (isFullfilled) {
-      const currentFormWidth = ref.current?.offsetWidth;
-      setFormPosition(formPosition - currentFormWidth);
-      goToNext();
-    }
-  }, [trigger, activeStep, goToNext, setFormPosition, formPosition]);
+    // const currentFormWidth = ref.current?.offsetWidth;
+    // setFormPosition(formPosition - currentFormWidth);
+    navigate(`/auth/sign-up/step${activeStep + 2}`);
+    goToNext();
+  }, [activeStep, goToNext, setFormPosition, formPosition]);
 
   const handlePrev = useCallback(() => {
-    const currentFormWidth = ref.current?.offsetWidth;
-    setFormPosition(formPosition + currentFormWidth);
+    // const currentFormWidth = ref.current?.offsetWidth;
+    // setFormPosition(formPosition + currentFormWidth);
+    navigate(`/auth/sign-up/step${activeStep}`);
     goToPrevious();
   }, [goToPrevious, setFormPosition, formPosition]);
 
   const profileImgSrc = useSelector(state => state.url);
-  console.log(profileImgSrc);
 
   const onSubmit = function (data) {
-    const {
-      step0: { email, password, username },
-    } = data;
-
-    setPersistence(auth, browserLocalPersistence)
-      .then(() => {
-        signIn(email, password)
-          .then(userCredential => {
-            updateProfile(userCredential.user, {
-              displayName: username,
-            }).then(() => navigate('/'));
-          })
-          .catch(error => {
-            console.log(error);
-            navigate('/error');
-          });
-      })
-      .catch(() => navigate('/error'));
+    //Todo: 데이터 무결성 확인하기
+    //Todo: 데이터를 store에 저장하기
+    //Todo: navigate('/auth/sign-up/step2');
+    // setPersistence(auth, browserLocalPersistence)
+    //   .then(() => {
+    //     signIn(email, password)
+    //       .then(userCredential => {
+    //         updateProfile(userCredential.user, {
+    //           displayName: username,
+    //         }).then(() => navigate('/'));
+    //       })
+    //       .catch(error => {
+    //         console.log(error);
+    //         navigate('/error');
+    //       });
+    //   })
+    //   .catch(() => navigate('/error'));
   };
 
-  const FORM_WIDTH = 700;
-
   return (
     <VStack
       as="form"
-      onSubmit={handleSubmit(onSubmit)}
+      onSubmit={reactHookForm.handleSubmit(onSubmit)}
       alignItems="flex-end"
       gap="4"
       maxWidth="full"
       overflowY="scroll"
     >
-      <Box ref={ref} width={FORM_WIDTH} overflowX="hidden" p="2">
-        <HStack
-          gap={0}
-          as={motion.div}
-          animate={{ x: formPosition }}
-          transition="0.1s linear"
-        >
-          <VStack minWidth={FORM_WIDTH} gap="4" pr="4">
-            <FormControl
-              width="full"
-              isRequired
-              isInvalid={errors.step0?.email}
-            >
-              <FormLabel>이메일</FormLabel>
-              <Input
-                required
-                type="email"
-                placeholder="이메일을 입력해주세요."
-                {...register('step0.email', {
-                  required: '이 항목은 필수입니다.',
-                  pattern: {
-                    value:
-                      /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i,
-                    message: '이메일 형식이 아닙니다.',
-                  },
-                })}
-              />
-              <FormErrorMessage>
-                {errors.step0?.email?.message}
-              </FormErrorMessage>
-            </FormControl>
-
-            <FormControl
-              width="full"
-              isRequired
-              isInvalid={errors.step0?.username}
-            >
-              <FormLabel>이름</FormLabel>
-              <Input
-                required
-                placeholder="성함을 입력해주세요."
-                {...register('step0.username', {
-                  required: '이 항목은 필수입니다.',
-                })}
-              />
-              <FormErrorMessage>
-                {errors.step0?.username?.message}
-              </FormErrorMessage>
-            </FormControl>
-
-            <FormControl
-              width="full"
-              isRequired
-              isInvalid={errors.step0?.password}
-            >
-              <FormLabel>비밀번호</FormLabel>
-              <Input
-                required
-                type="password"
-                placeholder="6자리 이상의 비밀번호를 입력해주세요."
-                {...register('step0.password', {
-                  required: '이 항목은 필수입니다.',
-                  minLength: { value: 6, message: '6자리 이상 입력해주세요.' },
-                })}
-              />
-              <FormErrorMessage>
-                {errors.step0?.password?.message}
-              </FormErrorMessage>
-            </FormControl>
-
-            <FormControl
-              width="full"
-              isRequired
-              isInvalid={errors.step0?.checkPassword}
-            >
-              <FormLabel>비밀번호 확인</FormLabel>
-              <Input
-                required
-                type="password"
-                placeholder="필수 요소입니다."
-                {...register('step0.checkPassword', {
-                  required: '이 항목은 필수입니다.',
-                  validate: {
-                    check: checkPassword => {
-                      if (getValues('step0.password') !== checkPassword) {
-                        return '비밀번호가 일치하지 않습니다.';
-                      }
-                    },
-                  },
-                })}
-              />
-              <FormErrorMessage>
-                {errors.step0?.checkPassword?.message}
-              </FormErrorMessage>
-            </FormControl>
-          </VStack>
-          <VStack minWidth={FORM_WIDTH} gap="4" pr="4">
-            <FormControl
-              width="full"
-              isRequired
-              isInvalid={errors.step1?.birthDate}
-            >
-              <FormLabel>생년월일</FormLabel>
-              <Input
-                required
-                type="date"
-                placeholder="생년월일을 선택해주세요."
-                {...register('step1.birthDate', {
-                  required: '이 항목은 필수입니다.',
-                })}
-              />
-              <FormErrorMessage>
-                {errors.step1?.birthDate?.message}
-              </FormErrorMessage>
-            </FormControl>
-
-            <FormControl
-              width="full"
-              isRequired
-              isInvalid={errors.step1?.address}
-            >
-              <FormLabel>주소</FormLabel>
-              <Input
-                required
-                placeholder="옵션 요소입니다."
-                {...register('step1.address', {
-                  required: '이 항목은 필수입니다.',
-                })}
-              />
-              <FormErrorMessage>
-                {errors.step1?.address?.message}
-              </FormErrorMessage>
-            </FormControl>
-
-            <FormControl
-              width="full"
-              isRequired
-              isInvalid={errors.step1?.phoneNumber}
-            >
-              <FormLabel>전화번호</FormLabel>
-              <InputGroup colorScheme="primary">
-                <InputLeftAddon>010</InputLeftAddon>
-                <Input
-                  required
-                  type="tel"
-                  maxLength="8"
-                  placeholder="필수 요소입니다."
-                  {...register('step1.phoneNumber', {
-                    required: '이 항목은 필수입니다.',
-                    pattern: {
-                      value: /^[0-9]{8}$/i,
-                      message: '전화번호는 8자리의 숫자로만 이루어져야 합니다.',
-                    },
-                  })}
-                />
-              </InputGroup>
-              <FormErrorMessage>
-                {errors.step1?.phoneNumber?.message}
-              </FormErrorMessage>
-            </FormControl>
-
-            <FormControl
-              width="full"
-              isInvalid={errors.step1?.secondPhoneNumber}
-            >
-              <FormLabel>비상 시 연락처</FormLabel>
-              <InputGroup>
-                <InputLeftAddon>010</InputLeftAddon>
-                <Input
-                  type="tel"
-                  maxLength="8"
-                  placeholder="옵션 요소입니다."
-                  {...register('step1.secondPhoneNumber', {
-                    pattern: {
-                      value: /^[0-9]{8}$/i,
-                      message: '전화번호는 8자리의 숫자로만 이루어져야 합니다.',
-                    },
-                  })}
-                />
-              </InputGroup>
-              <FormErrorMessage>
-                {errors.step1?.secondPhoneNumber?.message}
-              </FormErrorMessage>
-            </FormControl>
-          </VStack>
-          <VStack minWidth={FORM_WIDTH} gap="4" pr="4">
-            <HStack width="full" gap="4">
-              <FormControl width="full" isInvalid={errors.step2?.bloodType}>
-                <FormLabel>혈액형</FormLabel>
-                <Select placeholder="혈액형" {...register('step2.bloodType')}>
-                  <option value="blood_A">A형</option>
-                  <option value="blood_B">B형</option>
-                  <option value="blood_O">O형</option>
-                  <option value="blood_AB">AB형</option>
-                </Select>
-                <FormErrorMessage>
-                  {errors.step2?.bloodType?.message}
-                </FormErrorMessage>
-              </FormControl>
-
-              <FormControl width="full" isInvalid={errors.step?.height}>
-                <FormLabel>키</FormLabel>
-                <InputGroup>
-                  <Input
-                    type="number"
-                    placeholder="키"
-                    {...register('step2.height', {
-                      pattern: {
-                        value: /^[0-9]/i,
-                        message: '키는 숫자로만 이루어져야 합니다.',
-                      },
-                    })}
-                  />
-                  <InputRightAddon>cm</InputRightAddon>
-                </InputGroup>
-                <FormErrorMessage>
-                  {errors.step2?.height?.message}
-                </FormErrorMessage>
-              </FormControl>
-
-              <FormControl width="full" isInvalid={errors.step2?.weight}>
-                <FormLabel>몸무게</FormLabel>
-                <InputGroup>
-                  <Input
-                    type="number"
-                    placeholder="몸무게"
-                    {...register('step2.weight')}
-                  />
-                  <InputRightAddon>kg</InputRightAddon>
-                </InputGroup>
-                <FormErrorMessage>
-                  {errors.step2?.weight?.message}
-                </FormErrorMessage>
-              </FormControl>
-            </HStack>
-
-            <FormControl width="full" isInvalid={errors.step2?.chronicDisease}>
-              <FormLabel>질환 정보</FormLabel>
-              <Textarea
-                resize="none"
-                placeholder="평소 앓고 있었던 질병이나 수술 이력이 있다면 입력해주세요."
-                {...register('step2.chronicDisease')}
-              />
-              <FormErrorMessage>
-                {errors.step2?.chronicDisease?.message}
-              </FormErrorMessage>
-            </FormControl>
-
-            <FormControl
-              width="full"
-              isInvalid={errors.step2?.regularMedicines}
-            >
-              <FormLabel>복약 정보</FormLabel>
-              <Textarea
-                resize="none"
-                placeholder="평소 지속적으로 복용하고 있는 약이 있다면 입력해주세요."
-                {...register('step2.regularMedicines')}
-              />
-              <FormErrorMessage>
-                {errors.step2?.regularMedicines?.message}
-              </FormErrorMessage>
-            </FormControl>
-          </VStack>
-          <VStack minWidth={FORM_WIDTH} gap="4" pr="4">
-            <UserFace />
-          </VStack>
-        </HStack>
-      </Box>
+      <Outlet context={reactHookForm} />
 
       <ButtonGroup gap="4">
         {isCompleteStep(0) && (
diff --git a/packages/apps/user/src/routes/authRoutes.js b/packages/apps/user/src/routes/authRoutes.js
index c5537740..92ce3c89 100644
--- a/packages/apps/user/src/routes/authRoutes.js
+++ b/packages/apps/user/src/routes/authRoutes.js
@@ -6,6 +6,9 @@ import LogIn from '../views/Auth/LogIn/LogIn';
 import OnCapture from '../components/SignUpForm/OnCapture';
 import BeforeCapture from '../components/SignUpForm/BeforeCapture';
 import AfterCapture from '../components/SignUpForm/AfterCapture';
+import Step1 from '../views/Auth/SignUp/Step1';
+import Step2 from '../views/Auth/SignUp/Step2';
+import Step3 from '../views/Auth/SignUp/Step3';
 
 const authRoutes = {
   path: 'auth',
@@ -18,15 +21,36 @@ const authRoutes = {
       children: [
         {
           path: '',
-          element: <BeforeCapture />,
+          element: <Step1 />,
         },
         {
-          path: 'on-capture',
-          element: <OnCapture />,
+          path: 'step1',
+          element: <Step1 />,
         },
         {
-          path: 'after-capture',
-          element: <AfterCapture />,
+          path: 'step2',
+          element: <Step2 />,
+        },
+        {
+          path: 'step3',
+          element: <Step3 />,
+        },
+        {
+          path: 'step4',
+          children: [
+            {
+              path: '',
+              element: <BeforeCapture />,
+            },
+            {
+              path: 'on-capture',
+              element: <OnCapture />,
+            },
+            {
+              path: 'after-capture',
+              element: <AfterCapture />,
+            },
+          ],
         },
       ],
     },
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step1.js b/packages/apps/user/src/views/Auth/SignUp/Step1.js
new file mode 100644
index 00000000..65307209
--- /dev/null
+++ b/packages/apps/user/src/views/Auth/SignUp/Step1.js
@@ -0,0 +1,86 @@
+import {
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  VStack,
+} from '@chakra-ui/react';
+import { useOutletContext } from 'react-router-dom';
+
+const Step1 = function () {
+  const {
+    register,
+    getValues,
+    formState: { errors },
+  } = useOutletContext();
+
+  return (
+    <VStack width={'full'} gap={'4'}>
+      <FormControl width="full" isRequired isInvalid={errors.email}>
+        <FormLabel>이메일</FormLabel>
+        <Input
+          required
+          type="email"
+          placeholder="이메일을 입력해주세요."
+          {...register('email', {
+            required: '이 항목은 필수입니다.',
+            pattern: {
+              value:
+                /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i,
+              message: '이메일 형식이 아닙니다.',
+            },
+          })}
+        />
+        <FormErrorMessage>{errors.email?.message}</FormErrorMessage>
+      </FormControl>
+
+      <FormControl width="full" isRequired isInvalid={errors.username}>
+        <FormLabel>이름</FormLabel>
+        <Input
+          required
+          placeholder="성함을 입력해주세요."
+          {...register('username', {
+            required: '이 항목은 필수입니다.',
+          })}
+        />
+        <FormErrorMessage>{errors.username?.message}</FormErrorMessage>
+      </FormControl>
+
+      <FormControl width="full" isRequired isInvalid={errors.password}>
+        <FormLabel>비밀번호</FormLabel>
+        <Input
+          required
+          type="password"
+          placeholder="6자리 이상의 비밀번호를 입력해주세요."
+          {...register('password', {
+            required: '이 항목은 필수입니다.',
+            minLength: { value: 6, message: '6자리 이상 입력해주세요.' },
+          })}
+        />
+        <FormErrorMessage>{errors.password?.message}</FormErrorMessage>
+      </FormControl>
+
+      <FormControl width="full" isRequired isInvalid={errors.checkPassword}>
+        <FormLabel>비밀번호 확인</FormLabel>
+        <Input
+          required
+          type="password"
+          placeholder="필수 요소입니다."
+          {...register('checkPassword', {
+            required: '이 항목은 필수입니다.',
+            validate: {
+              check: checkPassword => {
+                if (getValues('password') !== checkPassword) {
+                  return '비밀번호가 일치하지 않습니다.';
+                }
+              },
+            },
+          })}
+        />
+        <FormErrorMessage>{errors.checkPassword?.message}</FormErrorMessage>
+      </FormControl>
+    </VStack>
+  );
+};
+
+export default Step1;
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step2.js b/packages/apps/user/src/views/Auth/SignUp/Step2.js
new file mode 100644
index 00000000..db371836
--- /dev/null
+++ b/packages/apps/user/src/views/Auth/SignUp/Step2.js
@@ -0,0 +1,88 @@
+import {
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  InputGroup,
+  InputLeftAddon,
+  VStack,
+} from '@chakra-ui/react';
+import { useOutletContext } from 'react-router-dom';
+
+const Step2 = function () {
+  const {
+    register,
+    formState: { errors },
+  } = useOutletContext();
+
+  return (
+    <VStack width={'full'} gap={'4'}>
+      <FormControl width="full" isRequired isInvalid={errors.birthDate}>
+        <FormLabel>생년월일</FormLabel>
+        <Input
+          required
+          type="date"
+          placeholder="생년월일을 선택해주세요."
+          {...register('step1.birthDate', {
+            required: '이 항목은 필수입니다.',
+          })}
+        />
+        <FormErrorMessage>{errors.birthDate?.message}</FormErrorMessage>
+      </FormControl>
+
+      <FormControl width="full" isRequired isInvalid={errors.address}>
+        <FormLabel>주소</FormLabel>
+        <Input
+          required
+          placeholder="옵션 요소입니다."
+          {...register('step1.address', {
+            required: '이 항목은 필수입니다.',
+          })}
+        />
+        <FormErrorMessage>{errors.address?.message}</FormErrorMessage>
+      </FormControl>
+
+      <FormControl width="full" isRequired isInvalid={errors.phoneNumber}>
+        <FormLabel>전화번호</FormLabel>
+        <InputGroup colorScheme="primary">
+          <InputLeftAddon>010</InputLeftAddon>
+          <Input
+            required
+            type="tel"
+            maxLength="8"
+            placeholder="필수 요소입니다."
+            {...register('step1.phoneNumber', {
+              required: '이 항목은 필수입니다.',
+              pattern: {
+                value: /^[0-9]{8}$/i,
+                message: '전화번호는 8자리의 숫자로만 이루어져야 합니다.',
+              },
+            })}
+          />
+        </InputGroup>
+        <FormErrorMessage>{errors.phoneNumber?.message}</FormErrorMessage>
+      </FormControl>
+
+      <FormControl width="full" isInvalid={errors.secondPhoneNumber}>
+        <FormLabel>비상 시 연락처</FormLabel>
+        <InputGroup>
+          <InputLeftAddon>010</InputLeftAddon>
+          <Input
+            type="tel"
+            maxLength="8"
+            placeholder="옵션 요소입니다."
+            {...register('step1.secondPhoneNumber', {
+              pattern: {
+                value: /^[0-9]{8}$/i,
+                message: '전화번호는 8자리의 숫자로만 이루어져야 합니다.',
+              },
+            })}
+          />
+        </InputGroup>
+        <FormErrorMessage>{errors.secondPhoneNumber?.message}</FormErrorMessage>
+      </FormControl>
+    </VStack>
+  );
+};
+
+export default Step2;
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step3.js b/packages/apps/user/src/views/Auth/SignUp/Step3.js
new file mode 100644
index 00000000..5b2e2c72
--- /dev/null
+++ b/packages/apps/user/src/views/Auth/SignUp/Step3.js
@@ -0,0 +1,96 @@
+import {
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  HStack,
+  Input,
+  VStack,
+  InputGroup,
+  InputRightAddon,
+  Textarea,
+  Select,
+} from '@chakra-ui/react';
+import { useOutletContext } from 'react-router-dom';
+
+const Step3 = function () {
+  const {
+    register,
+    formState: { errors },
+  } = useOutletContext();
+
+  return (
+    <VStack width={'full'} gap={'4'}>
+      <HStack width="full" gap="4">
+        <FormControl width="full" isInvalid={errors.step2?.bloodType}>
+          <FormLabel>혈액형</FormLabel>
+          <Select placeholder="혈액형" {...register('step2.bloodType')}>
+            <option value="blood_A">A형</option>
+            <option value="blood_B">B형</option>
+            <option value="blood_O">O형</option>
+            <option value="blood_AB">AB형</option>
+          </Select>
+          <FormErrorMessage>
+            {errors.step2?.bloodType?.message}
+          </FormErrorMessage>
+        </FormControl>
+
+        <FormControl width="full" isInvalid={errors.step?.height}>
+          <FormLabel>키</FormLabel>
+          <InputGroup>
+            <Input
+              type="number"
+              placeholder="키"
+              {...register('step2.height', {
+                pattern: {
+                  value: /^[0-9]/i,
+                  message: '키는 숫자로만 이루어져야 합니다.',
+                },
+              })}
+            />
+            <InputRightAddon>cm</InputRightAddon>
+          </InputGroup>
+          <FormErrorMessage>{errors.step2?.height?.message}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl width="full" isInvalid={errors.step2?.weight}>
+          <FormLabel>몸무게</FormLabel>
+          <InputGroup>
+            <Input
+              type="number"
+              placeholder="몸무게"
+              {...register('step2.weight')}
+            />
+            <InputRightAddon>kg</InputRightAddon>
+          </InputGroup>
+          <FormErrorMessage>{errors.step2?.weight?.message}</FormErrorMessage>
+        </FormControl>
+      </HStack>
+
+      <FormControl width="full" isInvalid={errors.step2?.chronicDisease}>
+        <FormLabel>질환 정보</FormLabel>
+        <Textarea
+          resize="none"
+          placeholder="평소 앓고 있었던 질병이나 수술 이력이 있다면 입력해주세요."
+          {...register('step2.chronicDisease')}
+        />
+        <FormErrorMessage>
+          {errors.step2?.chronicDisease?.message}
+        </FormErrorMessage>
+      </FormControl>
+
+      <FormControl width="full" isInvalid={errors.step2?.regularMedicines}>
+        <FormLabel>복약 정보</FormLabel>
+        <Textarea
+          resize="none"
+          placeholder="평소 지속적으로 복용하고 있는 약이 있다면 입력해주세요."
+          {...register('step2.regularMedicines')}
+        />
+        <FormErrorMessage>
+          {errors.step2?.regularMedicines?.message}
+        </FormErrorMessage>
+      </FormControl>
+    </VStack>
+  );
+};
+
+export default Step3;
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step4.js b/packages/apps/user/src/views/Auth/SignUp/Step4.js
new file mode 100644
index 00000000..f5690423
--- /dev/null
+++ b/packages/apps/user/src/views/Auth/SignUp/Step4.js
@@ -0,0 +1,12 @@
+import UserFase from '../../../components/SignUpForm/UserFace';
+
+//TODO: UserFase -> UserFace 오타 수정
+const Step4 = function () {
+  return (
+    <UserFase width={'full'} gap={'4'}>
+      <UserFace />
+    </UserFase>
+  );
+};
+
+export default Step4;

From ac60d4d7ef445cafa64c7aaeff28d49f29187e1a Mon Sep 17 00:00:00 2001
From: hwna00 <layton3534@gmail.com>
Date: Fri, 15 Sep 2023 18:06:28 +0900
Subject: [PATCH 03/10] =?UTF-8?q?Feat(user):=20=EB=B6=84=EB=A6=AC=EB=90=9C?=
 =?UTF-8?q?=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EA=B3=BC=EC=A0=95?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20validation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- store 객체에 formState의 errors 객체 저장
- errors의 ref 값을 제외하고 store에 저장
- 각 과정에서 useSelector를 이용해 errors 객체 참조

ref: [FEAT] 회원가입 구조 변경 #62
---
 .../src/components/SignUpForm/SignUpForm.js   | 55 +++++++++----------
 packages/apps/user/src/store.js               | 13 +++--
 .../apps/user/src/views/Auth/SignUp/SignUp.js |  2 +-
 .../apps/user/src/views/Auth/SignUp/Step1.js  |  8 +--
 .../apps/user/src/views/Auth/SignUp/Step2.js  | 15 +++--
 .../apps/user/src/views/Auth/SignUp/Step3.js  | 45 ++++++---------
 .../apps/user/src/views/Auth/SignUp/Step4.js  |  2 +-
 7 files changed, 62 insertions(+), 78 deletions(-)

diff --git a/packages/apps/user/src/components/SignUpForm/SignUpForm.js b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
index c0511c3d..49a69b9f 100644
--- a/packages/apps/user/src/components/SignUpForm/SignUpForm.js
+++ b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
@@ -1,7 +1,7 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import { Outlet, useNavigate } from 'react-router-dom';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useForm } from 'react-hook-form';
 import PropTypes from 'prop-types';
 import { motion } from 'framer-motion';
@@ -10,26 +10,12 @@ import {
   setPersistence,
   updateProfile,
 } from 'firebase/auth';
-import {
-  Box,
-  Button,
-  ButtonGroup,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  HStack,
-  Input,
-  InputGroup,
-  InputLeftAddon,
-  InputRightAddon,
-  Select,
-  Textarea,
-  VStack,
-} from '@chakra-ui/react';
+import { Button, ButtonGroup, VStack } from '@chakra-ui/react';
 
 import { auth, signIn } from '../../../firebase';
 
 import UserFace from './UserFace';
+import { setErrors } from '../../store';
 
 const SignUpForm = function ({
   activeStep,
@@ -39,31 +25,40 @@ const SignUpForm = function ({
   isCompleteStep,
 }) {
   const reactHookForm = useForm({ mode: 'all' });
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const errors = reactHookForm.formState.errors;
+
+    const filteredErrors = {};
+    Object.entries(errors).map(([key, value]) => {
+      filteredErrors[key] = { message: value.message };
+    });
+
+    dispatch(setErrors(filteredErrors));
+  }, [dispatch, reactHookForm.formState]);
 
   const navigate = useNavigate();
-  const [formPosition, setFormPosition] = useState(0);
   const ref = useRef();
 
   const handleNext = useCallback(async () => {
-    // const currentFormWidth = ref.current?.offsetWidth;
-    // setFormPosition(formPosition - currentFormWidth);
-    navigate(`/auth/sign-up/step${activeStep + 2}`);
-    goToNext();
-  }, [activeStep, goToNext, setFormPosition, formPosition]);
+    const isFullfilled = await reactHookForm.trigger();
+
+    if (isFullfilled) {
+      navigate(`/auth/sign-up/step${activeStep + 2}`);
+      goToNext();
+    }
+  }, [activeStep, goToNext, navigate, reactHookForm]);
 
   const handlePrev = useCallback(() => {
-    // const currentFormWidth = ref.current?.offsetWidth;
-    // setFormPosition(formPosition + currentFormWidth);
     navigate(`/auth/sign-up/step${activeStep}`);
     goToPrevious();
-  }, [goToPrevious, setFormPosition, formPosition]);
+  }, [goToPrevious, activeStep, navigate]);
 
   const profileImgSrc = useSelector(state => state.url);
 
   const onSubmit = function (data) {
     //Todo: 데이터 무결성 확인하기
-    //Todo: 데이터를 store에 저장하기
-    //Todo: navigate('/auth/sign-up/step2');
     // setPersistence(auth, browserLocalPersistence)
     //   .then(() => {
     //     signIn(email, password)
@@ -86,7 +81,7 @@ const SignUpForm = function ({
       onSubmit={reactHookForm.handleSubmit(onSubmit)}
       alignItems="flex-end"
       gap="4"
-      maxWidth="full"
+      width="full"
       overflowY="scroll"
     >
       <Outlet context={reactHookForm} />
diff --git a/packages/apps/user/src/store.js b/packages/apps/user/src/store.js
index 3d29a981..138ba4a9 100644
--- a/packages/apps/user/src/store.js
+++ b/packages/apps/user/src/store.js
@@ -1,12 +1,15 @@
 import { configureStore, createSlice } from '@reduxjs/toolkit';
 
-const userImgSlice = createSlice({
-  name: 'userImg',
-  initialState: { url: '' },
+const signUpSlice = createSlice({
+  name: 'signUp',
+  initialState: { errors: {}, url: '' },
   reducers: {
     setImg: (state, action) => {
       state.url = action.payload;
     },
+    setErrors: (_, action) => {
+      return { errors: { ...action.payload } };
+    },
   },
 });
 
@@ -23,11 +26,11 @@ const appointmentSlice = createSlice({
 
 export const store = configureStore({
   reducer: {
-    userImg: userImgSlice.reducer,
+    signUp: signUpSlice.reducer,
     appointment: appointmentSlice.reducer,
   },
   devTools: process.env.NODE_ENV !== 'production',
 });
 
-export const { setImg } = userImgSlice.actions;
+export const { setImg, setErrors } = signUpSlice.actions;
 export const { setAppointDatetime } = appointmentSlice.actions;
diff --git a/packages/apps/user/src/views/Auth/SignUp/SignUp.js b/packages/apps/user/src/views/Auth/SignUp/SignUp.js
index cc6b3a84..491c23a1 100644
--- a/packages/apps/user/src/views/Auth/SignUp/SignUp.js
+++ b/packages/apps/user/src/views/Auth/SignUp/SignUp.js
@@ -29,7 +29,7 @@ const SignUp = function () {
         </ChakraLink>
       </HStack>
 
-      <Container centerContent height="full" maxW="container.xl">
+      <Container centerContent height="full" maxW="3xl">
         <HStack
           justifyContent="center"
           gap="12"
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step1.js b/packages/apps/user/src/views/Auth/SignUp/Step1.js
index 65307209..57cc29b7 100644
--- a/packages/apps/user/src/views/Auth/SignUp/Step1.js
+++ b/packages/apps/user/src/views/Auth/SignUp/Step1.js
@@ -5,14 +5,12 @@ import {
   Input,
   VStack,
 } from '@chakra-ui/react';
+import { useSelector } from 'react-redux';
 import { useOutletContext } from 'react-router-dom';
 
 const Step1 = function () {
-  const {
-    register,
-    getValues,
-    formState: { errors },
-  } = useOutletContext();
+  const { register, getValues } = useOutletContext();
+  const errors = useSelector(state => state.signUp.errors);
 
   return (
     <VStack width={'full'} gap={'4'}>
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step2.js b/packages/apps/user/src/views/Auth/SignUp/Step2.js
index db371836..23fa2eb6 100644
--- a/packages/apps/user/src/views/Auth/SignUp/Step2.js
+++ b/packages/apps/user/src/views/Auth/SignUp/Step2.js
@@ -7,13 +7,12 @@ import {
   InputLeftAddon,
   VStack,
 } from '@chakra-ui/react';
+import { useSelector } from 'react-redux';
 import { useOutletContext } from 'react-router-dom';
 
 const Step2 = function () {
-  const {
-    register,
-    formState: { errors },
-  } = useOutletContext();
+  const { register } = useOutletContext();
+  const errors = useSelector(state => state.signUp.errors);
 
   return (
     <VStack width={'full'} gap={'4'}>
@@ -23,7 +22,7 @@ const Step2 = function () {
           required
           type="date"
           placeholder="생년월일을 선택해주세요."
-          {...register('step1.birthDate', {
+          {...register('birthDate', {
             required: '이 항목은 필수입니다.',
           })}
         />
@@ -35,7 +34,7 @@ const Step2 = function () {
         <Input
           required
           placeholder="옵션 요소입니다."
-          {...register('step1.address', {
+          {...register('address', {
             required: '이 항목은 필수입니다.',
           })}
         />
@@ -51,7 +50,7 @@ const Step2 = function () {
             type="tel"
             maxLength="8"
             placeholder="필수 요소입니다."
-            {...register('step1.phoneNumber', {
+            {...register('phoneNumber', {
               required: '이 항목은 필수입니다.',
               pattern: {
                 value: /^[0-9]{8}$/i,
@@ -71,7 +70,7 @@ const Step2 = function () {
             type="tel"
             maxLength="8"
             placeholder="옵션 요소입니다."
-            {...register('step1.secondPhoneNumber', {
+            {...register('secondPhoneNumber', {
               pattern: {
                 value: /^[0-9]{8}$/i,
                 message: '전화번호는 8자리의 숫자로만 이루어져야 합니다.',
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step3.js b/packages/apps/user/src/views/Auth/SignUp/Step3.js
index 5b2e2c72..92ce92da 100644
--- a/packages/apps/user/src/views/Auth/SignUp/Step3.js
+++ b/packages/apps/user/src/views/Auth/SignUp/Step3.js
@@ -10,28 +10,25 @@ import {
   Textarea,
   Select,
 } from '@chakra-ui/react';
+import { useSelector } from 'react-redux';
 import { useOutletContext } from 'react-router-dom';
 
 const Step3 = function () {
-  const {
-    register,
-    formState: { errors },
-  } = useOutletContext();
+  const { register } = useOutletContext();
+  const errors = useSelector(state => state.signUp.errors);
 
   return (
     <VStack width={'full'} gap={'4'}>
       <HStack width="full" gap="4">
-        <FormControl width="full" isInvalid={errors.step2?.bloodType}>
+        <FormControl width="full" isInvalid={errors.bloodType}>
           <FormLabel>혈액형</FormLabel>
-          <Select placeholder="혈액형" {...register('step2.bloodType')}>
+          <Select placeholder="혈액형" {...register('bloodType')}>
             <option value="blood_A">A형</option>
             <option value="blood_B">B형</option>
             <option value="blood_O">O형</option>
             <option value="blood_AB">AB형</option>
           </Select>
-          <FormErrorMessage>
-            {errors.step2?.bloodType?.message}
-          </FormErrorMessage>
+          <FormErrorMessage>{errors.bloodType?.message}</FormErrorMessage>
         </FormControl>
 
         <FormControl width="full" isInvalid={errors.step?.height}>
@@ -40,7 +37,7 @@ const Step3 = function () {
             <Input
               type="number"
               placeholder="키"
-              {...register('step2.height', {
+              {...register('height', {
                 pattern: {
                   value: /^[0-9]/i,
                   message: '키는 숫자로만 이루어져야 합니다.',
@@ -49,45 +46,37 @@ const Step3 = function () {
             />
             <InputRightAddon>cm</InputRightAddon>
           </InputGroup>
-          <FormErrorMessage>{errors.step2?.height?.message}</FormErrorMessage>
+          <FormErrorMessage>{errors.height?.message}</FormErrorMessage>
         </FormControl>
 
-        <FormControl width="full" isInvalid={errors.step2?.weight}>
+        <FormControl width="full" isInvalid={errors.weight}>
           <FormLabel>몸무게</FormLabel>
           <InputGroup>
-            <Input
-              type="number"
-              placeholder="몸무게"
-              {...register('step2.weight')}
-            />
+            <Input type="number" placeholder="몸무게" {...register('weight')} />
             <InputRightAddon>kg</InputRightAddon>
           </InputGroup>
-          <FormErrorMessage>{errors.step2?.weight?.message}</FormErrorMessage>
+          <FormErrorMessage>{errors.weight?.message}</FormErrorMessage>
         </FormControl>
       </HStack>
 
-      <FormControl width="full" isInvalid={errors.step2?.chronicDisease}>
+      <FormControl width="full" isInvalid={errors.chronicDisease}>
         <FormLabel>질환 정보</FormLabel>
         <Textarea
           resize="none"
           placeholder="평소 앓고 있었던 질병이나 수술 이력이 있다면 입력해주세요."
-          {...register('step2.chronicDisease')}
+          {...register('chronicDisease')}
         />
-        <FormErrorMessage>
-          {errors.step2?.chronicDisease?.message}
-        </FormErrorMessage>
+        <FormErrorMessage>{errors.chronicDisease?.message}</FormErrorMessage>
       </FormControl>
 
-      <FormControl width="full" isInvalid={errors.step2?.regularMedicines}>
+      <FormControl width="full" isInvalid={errors.regularMedicines}>
         <FormLabel>복약 정보</FormLabel>
         <Textarea
           resize="none"
           placeholder="평소 지속적으로 복용하고 있는 약이 있다면 입력해주세요."
-          {...register('step2.regularMedicines')}
+          {...register('regularMedicines')}
         />
-        <FormErrorMessage>
-          {errors.step2?.regularMedicines?.message}
-        </FormErrorMessage>
+        <FormErrorMessage>{errors.regularMedicines?.message}</FormErrorMessage>
       </FormControl>
     </VStack>
   );
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step4.js b/packages/apps/user/src/views/Auth/SignUp/Step4.js
index f5690423..61ad20a5 100644
--- a/packages/apps/user/src/views/Auth/SignUp/Step4.js
+++ b/packages/apps/user/src/views/Auth/SignUp/Step4.js
@@ -4,7 +4,7 @@ import UserFase from '../../../components/SignUpForm/UserFace';
 const Step4 = function () {
   return (
     <UserFase width={'full'} gap={'4'}>
-      <UserFace />
+      <UserFase />
     </UserFase>
   );
 };

From 69869e0e866dc5059bd4990002a13c7d5fe5de40 Mon Sep 17 00:00:00 2001
From: hwna00 <layton3534@gmail.com>
Date: Fri, 15 Sep 2023 18:23:24 +0900
Subject: [PATCH 04/10] =?UTF-8?q?Refactor(user):=20=ED=9A=8C=EC=9B=90?=
 =?UTF-8?q?=EA=B0=80=EC=9E=85=20=EC=82=AC=EC=A7=84=20=EC=B4=AC=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- step을 나눔에 따라 버튼 클릭 시 적용한 링크 수정
- 오차 수정 UserFase -> UserFace
---
 .../user/src/components/SignUpForm/BeforeCapture.js    |  9 ++-------
 .../apps/user/src/components/SignUpForm/OnCapture.js   |  9 ++-------
 .../apps/user/src/components/SignUpForm/SignUpForm.js  | 10 +++++-----
 .../apps/user/src/components/SignUpForm/UserFace.js    |  8 +++-----
 packages/apps/user/src/views/Auth/SignUp/Step4.js      |  9 ++-------
 5 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/packages/apps/user/src/components/SignUpForm/BeforeCapture.js b/packages/apps/user/src/components/SignUpForm/BeforeCapture.js
index 7cae02a8..4cde2ff2 100644
--- a/packages/apps/user/src/components/SignUpForm/BeforeCapture.js
+++ b/packages/apps/user/src/components/SignUpForm/BeforeCapture.js
@@ -10,16 +10,11 @@ import {
 const BeforeCapture = function () {
   return (
     <HStack width="full" justifyContent="space-evenly">
-      <AspectRatio
-        width="xs"
-        ratio={1}
-        borderRadius="full"
-        overflow="hidden"
-      >
+      <AspectRatio width="xs" ratio={1} borderRadius="full" overflow="hidden">
         <Avatar />
       </AspectRatio>
 
-      <ChakraLink as={ReactRouterLink} to="/auth/sign-up/on-capture">
+      <ChakraLink as={ReactRouterLink} to="on-capture">
         <Button colorScheme="primary">프로필 사진 추가</Button>
       </ChakraLink>
     </HStack>
diff --git a/packages/apps/user/src/components/SignUpForm/OnCapture.js b/packages/apps/user/src/components/SignUpForm/OnCapture.js
index 9a37e3db..5bcff80d 100644
--- a/packages/apps/user/src/components/SignUpForm/OnCapture.js
+++ b/packages/apps/user/src/components/SignUpForm/OnCapture.js
@@ -63,7 +63,7 @@ const OnCapture = function () {
   const handleClick = async () => {
     const profileImg = captureCam();
     dispatch(setImg(profileImg));
-    navigate('/auth/sign-up/after-capture', { state: { profileImg } });
+    navigate('/auth/sign-up/step4/after-capture', { state: { profileImg } });
   };
 
   useEffect(() => {
@@ -78,12 +78,7 @@ const OnCapture = function () {
 
   return (
     <HStack width="full" justifyContent="space-evenly">
-      <AspectRatio
-        width="xs"
-        ratio={1}
-        borderRadius="full"
-        overflow="hidden"
-      >
+      <AspectRatio width="xs" ratio={1} borderRadius="full" overflow="hidden">
         <video autoPlay ref={videoRef} />
       </AspectRatio>
 
diff --git a/packages/apps/user/src/components/SignUpForm/SignUpForm.js b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
index 49a69b9f..5df353b0 100644
--- a/packages/apps/user/src/components/SignUpForm/SignUpForm.js
+++ b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
@@ -42,12 +42,12 @@ const SignUpForm = function ({
   const ref = useRef();
 
   const handleNext = useCallback(async () => {
-    const isFullfilled = await reactHookForm.trigger();
+    // const isFullfilled = await reactHookForm.trigger();
 
-    if (isFullfilled) {
-      navigate(`/auth/sign-up/step${activeStep + 2}`);
-      goToNext();
-    }
+    // if (isFullfilled) {
+    navigate(`/auth/sign-up/step${activeStep + 2}`);
+    goToNext();
+    // }
   }, [activeStep, goToNext, navigate, reactHookForm]);
 
   const handlePrev = useCallback(() => {
diff --git a/packages/apps/user/src/components/SignUpForm/UserFace.js b/packages/apps/user/src/components/SignUpForm/UserFace.js
index e5fedcc6..db40d306 100644
--- a/packages/apps/user/src/components/SignUpForm/UserFace.js
+++ b/packages/apps/user/src/components/SignUpForm/UserFace.js
@@ -1,9 +1,7 @@
 import { Outlet } from 'react-router-dom';
 
-const UserFase = function () {
-  return (
-    <Outlet />
-  );
+const UserFace = function () {
+  return <Outlet />;
 };
 
-export default UserFase;
+export default UserFace;
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step4.js b/packages/apps/user/src/views/Auth/SignUp/Step4.js
index 61ad20a5..f2ed6a50 100644
--- a/packages/apps/user/src/views/Auth/SignUp/Step4.js
+++ b/packages/apps/user/src/views/Auth/SignUp/Step4.js
@@ -1,12 +1,7 @@
-import UserFase from '../../../components/SignUpForm/UserFace';
+import UserFace from '../../../components/SignUpForm/UserFace';
 
-//TODO: UserFase -> UserFace 오타 수정
 const Step4 = function () {
-  return (
-    <UserFase width={'full'} gap={'4'}>
-      <UserFase />
-    </UserFase>
-  );
+  return <UserFace />;
 };
 
 export default Step4;

From 1b50e2dc8e40e259586b82d351b0de0a87828471 Mon Sep 17 00:00:00 2001
From: hwna00 <layton3534@gmail.com>
Date: Sun, 17 Sep 2023 21:16:57 +0900
Subject: [PATCH 05/10] =?UTF-8?q?Feat(user):=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=EC=9D=98=20=ED=94=84=EB=A1=9C=ED=95=84=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=EB=A5=BC=20firebase=EC=97=90=20=EC=A0=80=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 사용자의 사진을 firebase storage에 저장하는 기능 추가
- signUp slice의 setImg 액션을 setImgBlob 액션으로 변경
- 'before-capture' 라우터 추가

ref: #62
---
 packages/apps/user/firebase.js                |  4 +++-
 .../src/components/SignUpForm/AfterCapture.js | 15 +++++--------
 .../src/components/SignUpForm/OnCapture.js    | 20 +++++++-----------
 .../src/components/SignUpForm/SignUpForm.js   | 21 ++++++++++++-------
 packages/apps/user/src/hooks/useCamera.js     |  0
 packages/apps/user/src/routes/authRoutes.js   |  4 ++++
 packages/apps/user/src/store.js               | 19 +++++++++++------
 7 files changed, 47 insertions(+), 36 deletions(-)
 create mode 100644 packages/apps/user/src/hooks/useCamera.js

diff --git a/packages/apps/user/firebase.js b/packages/apps/user/firebase.js
index a8c84f11..07289978 100644
--- a/packages/apps/user/firebase.js
+++ b/packages/apps/user/firebase.js
@@ -6,6 +6,7 @@ import {
   GoogleAuthProvider,
   signInWithPopup,
 } from 'firebase/auth';
+import { getStorage } from 'firebase/storage';
 
 const firebaseConfig = {
   apiKey: process.env.REACT_APP_FB_API_KEY,
@@ -18,6 +19,7 @@ const firebaseConfig = {
 
 const app = initializeApp(firebaseConfig);
 const auth = getAuth(app);
+const storage = getStorage(app);
 const provider = new GoogleAuthProvider();
 
 const signIn = (email, password) => {
@@ -32,4 +34,4 @@ const googleLogin = () => {
   return signInWithPopup(auth, provider);
 };
 
-export { auth, signIn, logIn, googleLogin, provider };
+export { auth, signIn, logIn, googleLogin, provider, storage };
diff --git a/packages/apps/user/src/components/SignUpForm/AfterCapture.js b/packages/apps/user/src/components/SignUpForm/AfterCapture.js
index 12c1e3ce..1aaed79f 100644
--- a/packages/apps/user/src/components/SignUpForm/AfterCapture.js
+++ b/packages/apps/user/src/components/SignUpForm/AfterCapture.js
@@ -1,20 +1,15 @@
-import { useLocation } from 'react-router-dom';
 import { AspectRatio, HStack } from '@chakra-ui/react';
 
+import { useSelector } from 'react-redux';
+
 const AfterCapture = function () {
-  const location = useLocation();
-  const {profileImg} = location.state;
+  const imgBlob = useSelector(state => state.signUp.blob);
 
   return (
     <HStack width="full" justifyContent="space-evenly">
-      <AspectRatio
-        width="xs"
-        ratio={1}
-        borderRadius="full"
-        overflow="hidden"
-      >
+      <AspectRatio width="xs" ratio={1} borderRadius="full" overflow="hidden">
         <input
-          src={profileImg}
+          src={window.URL.createObjectURL(imgBlob)}
           accept="image/*"
           type="image"
           alt="profile image"
diff --git a/packages/apps/user/src/components/SignUpForm/OnCapture.js b/packages/apps/user/src/components/SignUpForm/OnCapture.js
index 5bcff80d..1e0f38e3 100644
--- a/packages/apps/user/src/components/SignUpForm/OnCapture.js
+++ b/packages/apps/user/src/components/SignUpForm/OnCapture.js
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { AspectRatio, Button, HStack } from '@chakra-ui/react';
 
-import { setImg } from '../../store';
+import { setImgBlob } from '../../store';
 
 const OnCapture = function () {
   const dispatch = useDispatch();
@@ -20,7 +20,7 @@ const OnCapture = function () {
     const cameras = devices.filter(device => device.kind === 'videoinput');
 
     try {
-      const devicdId = cameras[1].deviceId;
+      const devicdId = cameras[0].deviceId;
 
       const cameraContraints = {
         audio: true,
@@ -52,18 +52,13 @@ const OnCapture = function () {
 
     context.drawImage(video, 0, 0, width, height);
 
-    const data = canvas.toDataURL('image/png');
+    canvas.toBlob(async blob => {
+      dispatch(setImgBlob(blob));
+      navigate('/auth/sign-up/step4/after-capture');
+    });
 
     canvas.setAttribute('width', 0);
     canvas.setAttribute('height', 0);
-
-    return data;
-  };
-
-  const handleClick = async () => {
-    const profileImg = captureCam();
-    dispatch(setImg(profileImg));
-    navigate('/auth/sign-up/step4/after-capture', { state: { profileImg } });
   };
 
   useEffect(() => {
@@ -72,6 +67,7 @@ const OnCapture = function () {
 
   useEffect(() => {
     if (error) {
+      console.log(error);
       navigate('/error');
     }
   }, [error, navigate]);
@@ -83,7 +79,7 @@ const OnCapture = function () {
       </AspectRatio>
 
       {/* eslint-disable */}
-      <Button colorScheme={'primary'} onClick={handleClick}>
+      <Button colorScheme={'primary'} onClick={captureCam}>
         사진 찍기
       </Button>
       <canvas ref={canvasRef} height={0} width={0} />
diff --git a/packages/apps/user/src/components/SignUpForm/SignUpForm.js b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
index 5df353b0..ee9caa82 100644
--- a/packages/apps/user/src/components/SignUpForm/SignUpForm.js
+++ b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
@@ -4,6 +4,7 @@ import { Outlet, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useForm } from 'react-hook-form';
 import PropTypes from 'prop-types';
+import { ref, uploadBytes } from 'firebase/storage';
 import { motion } from 'framer-motion';
 import {
   browserLocalPersistence,
@@ -13,8 +14,7 @@ import {
 import { Button, ButtonGroup, VStack } from '@chakra-ui/react';
 
 import { auth, signIn } from '../../../firebase';
-
-import UserFace from './UserFace';
+import { storage } from '../../../firebase';
 import { setErrors } from '../../store';
 
 const SignUpForm = function ({
@@ -24,8 +24,10 @@ const SignUpForm = function ({
   isActiveStep,
   isCompleteStep,
 }) {
+  const navigate = useNavigate();
   const reactHookForm = useForm({ mode: 'all' });
   const dispatch = useDispatch();
+  const profileImgBlob = useSelector(state => state.signUp.blob);
 
   useEffect(() => {
     const errors = reactHookForm.formState.errors;
@@ -38,9 +40,6 @@ const SignUpForm = function ({
     dispatch(setErrors(filteredErrors));
   }, [dispatch, reactHookForm.formState]);
 
-  const navigate = useNavigate();
-  const ref = useRef();
-
   const handleNext = useCallback(async () => {
     // const isFullfilled = await reactHookForm.trigger();
 
@@ -55,10 +54,18 @@ const SignUpForm = function ({
     goToPrevious();
   }, [goToPrevious, activeStep, navigate]);
 
-  const profileImgSrc = useSelector(state => state.url);
+  const uploadBlob = blob => {
+    const storageRef = ref(storage, 'images/' + new Date().getTime() + '.png');
+
+    uploadBytes(storageRef, blob).catch(() => {
+      navigate('/error');
+    });
+  };
 
   const onSubmit = function (data) {
-    //Todo: 데이터 무결성 확인하기
+    uploadBlob(profileImgBlob);
+
+    //Todo: firebase로부터 받아온 토큰을 DB에 저장하기
     // setPersistence(auth, browserLocalPersistence)
     //   .then(() => {
     //     signIn(email, password)
diff --git a/packages/apps/user/src/hooks/useCamera.js b/packages/apps/user/src/hooks/useCamera.js
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/apps/user/src/routes/authRoutes.js b/packages/apps/user/src/routes/authRoutes.js
index 92ce3c89..3f3a9c8b 100644
--- a/packages/apps/user/src/routes/authRoutes.js
+++ b/packages/apps/user/src/routes/authRoutes.js
@@ -42,6 +42,10 @@ const authRoutes = {
               path: '',
               element: <BeforeCapture />,
             },
+            {
+              path: 'before-capture',
+              element: <BeforeCapture />,
+            },
             {
               path: 'on-capture',
               element: <OnCapture />,
diff --git a/packages/apps/user/src/store.js b/packages/apps/user/src/store.js
index 138ba4a9..4b52a58f 100644
--- a/packages/apps/user/src/store.js
+++ b/packages/apps/user/src/store.js
@@ -2,13 +2,13 @@ import { configureStore, createSlice } from '@reduxjs/toolkit';
 
 const signUpSlice = createSlice({
   name: 'signUp',
-  initialState: { errors: {}, url: '' },
+  initialState: { errors: {}, blob: '' },
   reducers: {
-    setImg: (state, action) => {
-      state.url = action.payload;
+    setImgBlob: (state, action) => {
+      state.blob = action.payload;
     },
-    setErrors: (_, action) => {
-      return { errors: { ...action.payload } };
+    setErrors: (state, action) => {
+      state.errors = { ...action.payload };
     },
   },
 });
@@ -29,8 +29,15 @@ export const store = configureStore({
     signUp: signUpSlice.reducer,
     appointment: appointmentSlice.reducer,
   },
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: ['signUp/setImgBlob'],
+        ignoredPaths: ['signUp.blob'],
+      },
+    }),
   devTools: process.env.NODE_ENV !== 'production',
 });
 
-export const { setImg, setErrors } = signUpSlice.actions;
+export const { setImgBlob, setErrors } = signUpSlice.actions;
 export const { setAppointDatetime } = appointmentSlice.actions;

From 88b6718d39a8e71ad05247df890a255eaa465035 Mon Sep 17 00:00:00 2001
From: hwna00 <layton3534@gmail.com>
Date: Sun, 17 Sep 2023 21:42:08 +0900
Subject: [PATCH 06/10] =?UTF-8?q?Feat(user):=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=84=ED=99=98=20?=
 =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- framer motion의 AnimatePresence을 사용하여 애니메이션 추가
- SignUpForm 내부의 Outlet에 애니메이션 적용

ref: #62
---
 .../src/components/SignUpForm/SignUpForm.js    | 18 +++++++++++++++---
 packages/apps/user/src/index.js                |  5 ++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/apps/user/src/components/SignUpForm/SignUpForm.js b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
index ee9caa82..eeda0c22 100644
--- a/packages/apps/user/src/components/SignUpForm/SignUpForm.js
+++ b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useForm } from 'react-hook-form';
 import PropTypes from 'prop-types';
@@ -11,7 +11,7 @@ import {
   setPersistence,
   updateProfile,
 } from 'firebase/auth';
-import { Button, ButtonGroup, VStack } from '@chakra-ui/react';
+import { Box, Button, ButtonGroup, VStack } from '@chakra-ui/react';
 
 import { auth, signIn } from '../../../firebase';
 import { storage } from '../../../firebase';
@@ -82,6 +82,8 @@ const SignUpForm = function ({
     //   .catch(() => navigate('/error'));
   };
 
+  const location = useLocation();
+
   return (
     <VStack
       as="form"
@@ -91,7 +93,17 @@ const SignUpForm = function ({
       width="full"
       overflowY="scroll"
     >
-      <Outlet context={reactHookForm} />
+      <Box
+        key={location.pathname}
+        width={'full'}
+        as={motion.div}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 1.0 }}
+      >
+        <Outlet context={reactHookForm} />
+      </Box>
 
       <ButtonGroup gap="4">
         {isCompleteStep(0) && (
diff --git a/packages/apps/user/src/index.js b/packages/apps/user/src/index.js
index a4d66132..625ad0e2 100644
--- a/packages/apps/user/src/index.js
+++ b/packages/apps/user/src/index.js
@@ -9,6 +9,7 @@ import theme from '../theme';
 
 import { store } from './store';
 import router from './routes/index';
+import { AnimatePresence } from 'framer-motion';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
@@ -18,7 +19,9 @@ if (typeof window !== 'undefined') {
     <React.StrictMode>
       <ChakraProvider theme={theme}>
         <Provider store={store}>
-          <RouterProvider router={router} />
+          <AnimatePresence>
+            <RouterProvider router={router} />
+          </AnimatePresence>
         </Provider>
       </ChakraProvider>
     </React.StrictMode>,

From fbcb3ad56b6d11ae7eff21aadb2b469f7cc449ff Mon Sep 17 00:00:00 2001
From: hwna00 <layton3534@gmail.com>
Date: Sun, 17 Sep 2023 23:16:46 +0900
Subject: [PATCH 07/10] =?UTF-8?q?Feat(user):=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=A3=BC=EC=86=8C=20=ED=95=AD=EB=AA=A9=EA=B3=BC=20?=
 =?UTF-8?q?=EC=B9=B4=EC=B9=B4=EC=98=A4=20=EC=A3=BC=EC=86=8C=20API=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- react-daum-postcode API 설치
- Chakra 모달을 이용해 주소 입력 모달 생성

ref: #62
---
 package.json                                  |  5 +-
 .../apps/user/src/views/Auth/SignUp/Step2.js  | 61 ++++++++++++++++---
 yarn.lock                                     |  5 ++
 3 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index b6709cb6..1266b36b 100644
--- a/package.json
+++ b/package.json
@@ -37,11 +37,11 @@
     "react-router-dom": "^6.14.2"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^10.1.0",
     "@jest/globals": "^29.6.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@babel/eslint-parser": "^10.1.0",
     "eslint": "^8.48.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.10.0",
@@ -49,6 +49,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "prettier": "^3.0.1"
+    "prettier": "^3.0.1",
+    "react-daum-postcode": "^3.1.3"
   }
 }
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step2.js b/packages/apps/user/src/views/Auth/SignUp/Step2.js
index 23fa2eb6..ca0fda0d 100644
--- a/packages/apps/user/src/views/Auth/SignUp/Step2.js
+++ b/packages/apps/user/src/views/Auth/SignUp/Step2.js
@@ -1,19 +1,34 @@
 import {
+  Button,
   FormControl,
   FormErrorMessage,
   FormLabel,
   Input,
   InputGroup,
   InputLeftAddon,
+  Modal,
+  ModalContent,
+  ModalOverlay,
   VStack,
+  useDisclosure,
 } from '@chakra-ui/react';
+import { useState } from 'react';
+import { DaumPostcodeEmbed } from 'react-daum-postcode';
+import { FaSearch } from 'react-icons/fa';
 import { useSelector } from 'react-redux';
 import { useOutletContext } from 'react-router-dom';
 
 const Step2 = function () {
+  const [address, setAddress] = useState();
   const { register } = useOutletContext();
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const errors = useSelector(state => state.signUp.errors);
 
+  const handleComplete = data => {
+    onClose();
+    setAddress(data.address);
+  };
+
   return (
     <VStack width={'full'} gap={'4'}>
       <FormControl width="full" isRequired isInvalid={errors.birthDate}>
@@ -31,13 +46,38 @@ const Step2 = function () {
 
       <FormControl width="full" isRequired isInvalid={errors.address}>
         <FormLabel>주소</FormLabel>
-        <Input
-          required
-          placeholder="옵션 요소입니다."
-          {...register('address', {
-            required: '이 항목은 필수입니다.',
-          })}
-        />
+
+        {address ? (
+          <>
+            <Input
+              required
+              placeholder="주소"
+              mb={'2'}
+              value={address}
+              {...register('address', {
+                required: '이 항목은 필수입니다.',
+              })}
+              readOnly
+            />
+            <Input
+              required
+              placeholder="상세 주소"
+              {...register('addressDetail', {
+                required: '이 항목은 필수입니다.',
+              })}
+            />
+          </>
+        ) : (
+          <Button
+            leftIcon={<FaSearch />}
+            colorScheme="primary"
+            variant={'outline'}
+            onClick={onOpen}
+          >
+            주소 찾기
+          </Button>
+        )}
+
         <FormErrorMessage>{errors.address?.message}</FormErrorMessage>
       </FormControl>
 
@@ -80,6 +120,13 @@ const Step2 = function () {
         </InputGroup>
         <FormErrorMessage>{errors.secondPhoneNumber?.message}</FormErrorMessage>
       </FormControl>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <DaumPostcodeEmbed onComplete={handleComplete} />
+        </ModalContent>
+      </Modal>
     </VStack>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 7af542be..d4107fb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9836,6 +9836,11 @@ react-clientside-effect@^1.2.6:
   dependencies:
     "@babel/runtime" "^7.12.13"
 
+react-daum-postcode@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/react-daum-postcode/-/react-daum-postcode-3.1.3.tgz#008a0815a08fb9356fe7845d4376dcc9363f495d"
+  integrity sha512-qTyzUb1BeszPFO4FXSj6p83Wrn5Zpo6YqI2EZ46XSVRZT+du9CrKg9p3KshBRFKYxXmFE1Mv7wEynzXdRFNlmQ==
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz"

From 83a0f4704e4966be2db7cd8f4a3125059f3cdfb7 Mon Sep 17 00:00:00 2001
From: hwna00 <layton3534@gmail.com>
Date: Mon, 18 Sep 2023 01:02:05 +0900
Subject: [PATCH 08/10] =?UTF-8?q?Refactor(user):=20useCamera=20=ED=9B=85?=
 =?UTF-8?q?=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- OnCapture 컴포넌트의 fetchStream 함수를 훅으로 분리
- isLoading, error, stream 항목을 리턴하는 useCamera 훅 생성
- isLoading일때 빈 공간 대신 스켈레톤 적용
- error 발생 시 '/error' 경로로 이동
---
 .../src/components/SignUpForm/OnCapture.js    | 56 ++++++------------
 .../src/components/SignUpForm/SignUpForm.js   |  2 +-
 packages/apps/user/src/hooks/useCamera.js     | 47 +++++++++++++++
 .../apps/user/src/views/Auth/SignUp/Step2.js  | 58 +++++++++++--------
 4 files changed, 100 insertions(+), 63 deletions(-)

diff --git a/packages/apps/user/src/components/SignUpForm/OnCapture.js b/packages/apps/user/src/components/SignUpForm/OnCapture.js
index 1e0f38e3..588c7d90 100644
--- a/packages/apps/user/src/components/SignUpForm/OnCapture.js
+++ b/packages/apps/user/src/components/SignUpForm/OnCapture.js
@@ -1,52 +1,29 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { AspectRatio, Button, HStack } from '@chakra-ui/react';
+import { AspectRatio, Button, HStack, SkeletonCircle } from '@chakra-ui/react';
 
 import { setImgBlob } from '../../store';
+import useCamera from '../../hooks/useCamera';
 
 const OnCapture = function () {
-  const dispatch = useDispatch();
-
-  const [error, setError] = useState();
   const videoRef = useRef(null);
   const canvasRef = useRef(null);
 
+  const dispatch = useDispatch();
   const navigate = useNavigate();
 
-  const fetchStream = async () => {
-    const devices = await window.navigator.mediaDevices.enumerateDevices();
-    const cameras = devices.filter(device => device.kind === 'videoinput');
-
-    try {
-      const devicdId = cameras[0].deviceId;
-
-      const cameraContraints = {
-        audio: true,
-        video: {
-          deviceId: { exact: devicdId },
-        },
-      };
-
-      const myStream = await window.navigator.mediaDevices.getUserMedia(
-        cameraContraints,
-      );
-      if (videoRef?.current) {
-        videoRef.current.srcObject = myStream;
-      }
-    } catch (err) {
-      setError(err);
-    }
-  };
+  const { isLoading, stream, error } = useCamera();
 
   const captureCam = () => {
     const video = videoRef.current;
-
     const canvas = canvasRef.current;
     const context = canvas.getContext('2d');
+
     const width = videoRef.current?.offsetWidth;
     const height = videoRef.current?.offsetHeight;
+
     canvas.setAttribute('width', width);
     canvas.setAttribute('height', height);
 
@@ -62,21 +39,26 @@ const OnCapture = function () {
   };
 
   useEffect(() => {
-    fetchStream();
-  }, []);
+    if (videoRef?.current) {
+      videoRef.current.srcObject = stream;
+    }
+  }, [videoRef, stream]);
 
   useEffect(() => {
     if (error) {
-      console.log(error);
       navigate('/error');
     }
-  }, [error, navigate]);
+  }, [error]);
 
   return (
     <HStack width="full" justifyContent="space-evenly">
-      <AspectRatio width="xs" ratio={1} borderRadius="full" overflow="hidden">
-        <video autoPlay ref={videoRef} />
-      </AspectRatio>
+      {isLoading ? (
+        <SkeletonCircle size={'80'} />
+      ) : (
+        <AspectRatio width="xs" ratio={1} borderRadius="full" overflow="hidden">
+          <video autoPlay ref={videoRef} />
+        </AspectRatio>
+      )}
 
       {/* eslint-disable */}
       <Button colorScheme={'primary'} onClick={captureCam}>
diff --git a/packages/apps/user/src/components/SignUpForm/SignUpForm.js b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
index eeda0c22..30c519d0 100644
--- a/packages/apps/user/src/components/SignUpForm/SignUpForm.js
+++ b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
diff --git a/packages/apps/user/src/hooks/useCamera.js b/packages/apps/user/src/hooks/useCamera.js
index e69de29b..e50f87d7 100644
--- a/packages/apps/user/src/hooks/useCamera.js
+++ b/packages/apps/user/src/hooks/useCamera.js
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+const useCamera = () => {
+  const [state, setState] = useState({
+    isLoading: true,
+    error: null,
+    stream: null,
+  });
+
+  useEffect(() => {
+    const fetchStream = async () => {
+      const devices = await window.navigator.mediaDevices.enumerateDevices();
+      const cameras = devices.filter(device => device.kind === 'videoinput');
+      const devicdId = cameras[1].deviceId;
+
+      const cameraContraints = {
+        audio: true,
+        video: {
+          deviceId: { exact: devicdId },
+        },
+      };
+
+      window.navigator.mediaDevices
+        .getUserMedia(cameraContraints)
+        .then(userStream => {
+          setState({
+            ...state,
+            isLoading: false,
+            stream: userStream,
+          });
+        })
+        .catch(error => {
+          setState({
+            ...state,
+            isLoading: false,
+            error,
+          });
+        });
+    };
+
+    fetchStream();
+  }, []);
+
+  return state;
+};
+
+export default useCamera;
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step2.js b/packages/apps/user/src/views/Auth/SignUp/Step2.js
index ca0fda0d..b499efe2 100644
--- a/packages/apps/user/src/views/Auth/SignUp/Step2.js
+++ b/packages/apps/user/src/views/Auth/SignUp/Step2.js
@@ -3,6 +3,7 @@ import {
   FormControl,
   FormErrorMessage,
   FormLabel,
+  HStack,
   Input,
   InputGroup,
   InputLeftAddon,
@@ -20,6 +21,7 @@ import { useOutletContext } from 'react-router-dom';
 
 const Step2 = function () {
   const [address, setAddress] = useState();
+
   const { register } = useOutletContext();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const errors = useSelector(state => state.signUp.errors);
@@ -44,30 +46,18 @@ const Step2 = function () {
         <FormErrorMessage>{errors.birthDate?.message}</FormErrorMessage>
       </FormControl>
 
-      <FormControl width="full" isRequired isInvalid={errors.address}>
-        <FormLabel>주소</FormLabel>
-
-        {address ? (
-          <>
-            <Input
-              required
-              placeholder="주소"
-              mb={'2'}
-              value={address}
-              {...register('address', {
-                required: '이 항목은 필수입니다.',
-              })}
-              readOnly
-            />
-            <Input
-              required
-              placeholder="상세 주소"
-              {...register('addressDetail', {
-                required: '이 항목은 필수입니다.',
-              })}
-            />
-          </>
-        ) : (
+      <FormControl
+        width="full"
+        isRequired
+        isInvalid={errors.address || errors.addressDetail}
+      >
+        <HStack
+          width={'full'}
+          justifyContent={'space-between'}
+          alignItems={'center'}
+          mb={'2'}
+        >
+          <FormLabel margin={0}>주소</FormLabel>
           <Button
             leftIcon={<FaSearch />}
             colorScheme="primary"
@@ -76,7 +66,25 @@ const Step2 = function () {
           >
             주소 찾기
           </Button>
-        )}
+        </HStack>
+
+        <Input
+          required
+          placeholder="주소"
+          mb={'2'}
+          value={address}
+          {...register('address', {
+            required: '이 항목은 필수입니다.',
+          })}
+          readOnly
+        />
+        <Input
+          required
+          placeholder="상세 주소"
+          {...register('addressDetail', {
+            required: '이 항목은 필수입니다.',
+          })}
+        />
 
         <FormErrorMessage>{errors.address?.message}</FormErrorMessage>
       </FormControl>

From d86017926d6527739b56edeb7712f3af308f5e6d Mon Sep 17 00:00:00 2001
From: hwna00 <layton3534@gmail.com>
Date: Mon, 18 Sep 2023 15:29:55 +0900
Subject: [PATCH 09/10] =?UTF-8?q?Feat(user):=20=ED=94=84=EB=A1=9C=ED=95=84?=
 =?UTF-8?q?=20=EC=82=AC=EC=A7=84=20=EC=B4=AC=EC=98=81=20=ED=9B=84=20?=
 =?UTF-8?q?=EC=B9=B4=EB=A9=94=EB=9D=BC=20=EB=81=84=EB=8A=94=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- onCapture 컴포넌트의 useEffect에 클린업 함수 추가
- 클린업 함수에 현재 stream의 track을 종료하는 로직 추가
- useCamera 훅에서 카메라 번호를 지정하는 변수 추가

ref: #62
---
 .../src/components/SignUpForm/OnCapture.js     |  8 ++++++++
 .../src/components/SignUpForm/SignUpForm.js    |  1 +
 packages/apps/user/src/hooks/useCamera.js      |  4 +++-
 .../apps/user/src/views/Auth/SignUp/Step2.js   | 18 ++----------------
 4 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/packages/apps/user/src/components/SignUpForm/OnCapture.js b/packages/apps/user/src/components/SignUpForm/OnCapture.js
index 588c7d90..41e6bdca 100644
--- a/packages/apps/user/src/components/SignUpForm/OnCapture.js
+++ b/packages/apps/user/src/components/SignUpForm/OnCapture.js
@@ -42,6 +42,14 @@ const OnCapture = function () {
     if (videoRef?.current) {
       videoRef.current.srcObject = stream;
     }
+
+    return () => {
+      console.log('clean up', stream?.getTracks());
+
+      stream?.getTracks().forEach(track => {
+        track.stop();
+      });
+    };
   }, [videoRef, stream]);
 
   useEffect(() => {
diff --git a/packages/apps/user/src/components/SignUpForm/SignUpForm.js b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
index 30c519d0..027381c5 100644
--- a/packages/apps/user/src/components/SignUpForm/SignUpForm.js
+++ b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
@@ -64,6 +64,7 @@ const SignUpForm = function ({
 
   const onSubmit = function (data) {
     uploadBlob(profileImgBlob);
+    navigate('/');
 
     //Todo: firebase로부터 받아온 토큰을 DB에 저장하기
     // setPersistence(auth, browserLocalPersistence)
diff --git a/packages/apps/user/src/hooks/useCamera.js b/packages/apps/user/src/hooks/useCamera.js
index e50f87d7..eaeb4340 100644
--- a/packages/apps/user/src/hooks/useCamera.js
+++ b/packages/apps/user/src/hooks/useCamera.js
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 
+const CAMERA_NUMBER = 0;
+
 const useCamera = () => {
   const [state, setState] = useState({
     isLoading: true,
@@ -11,7 +13,7 @@ const useCamera = () => {
     const fetchStream = async () => {
       const devices = await window.navigator.mediaDevices.enumerateDevices();
       const cameras = devices.filter(device => device.kind === 'videoinput');
-      const devicdId = cameras[1].deviceId;
+      const devicdId = cameras[CAMERA_NUMBER].deviceId;
 
       const cameraContraints = {
         audio: true,
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step2.js b/packages/apps/user/src/views/Auth/SignUp/Step2.js
index b499efe2..fd2453bf 100644
--- a/packages/apps/user/src/views/Auth/SignUp/Step2.js
+++ b/packages/apps/user/src/views/Auth/SignUp/Step2.js
@@ -51,22 +51,7 @@ const Step2 = function () {
         isRequired
         isInvalid={errors.address || errors.addressDetail}
       >
-        <HStack
-          width={'full'}
-          justifyContent={'space-between'}
-          alignItems={'center'}
-          mb={'2'}
-        >
-          <FormLabel margin={0}>주소</FormLabel>
-          <Button
-            leftIcon={<FaSearch />}
-            colorScheme="primary"
-            variant={'outline'}
-            onClick={onOpen}
-          >
-            주소 찾기
-          </Button>
-        </HStack>
+        <FormLabel margin={0}>주소</FormLabel>
 
         <Input
           required
@@ -76,6 +61,7 @@ const Step2 = function () {
           {...register('address', {
             required: '이 항목은 필수입니다.',
           })}
+          onClick={onOpen}
           readOnly
         />
         <Input

From d00867361431afe726c3546714f67c7023166268 Mon Sep 17 00:00:00 2001
From: hwna00 <layton3534@gmail.com>
Date: Mon, 18 Sep 2023 15:48:19 +0900
Subject: [PATCH 10/10] =?UTF-8?q?FIX(user):=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=A4=91=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20API?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B0=9B=EC=95=84=EC=98=A8=20=EC=A3=BC=EC=86=8C=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=EB=A5=BC=20redux=EC=97=90=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 기존: useState로 관리
- 변경: redux-toolkit으로 관리
- 변경이유: 페이지 전환 시 주소 정보가 초기화되는 문제를 해결하기 위해 변경

ref: #62
---
 .../user/src/components/SignUpForm/SignUpForm.js     | 10 +++++-----
 packages/apps/user/src/store.js                      |  7 +++++--
 packages/apps/user/src/views/Auth/SignUp/Step2.js    | 12 +++++-------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/apps/user/src/components/SignUpForm/SignUpForm.js b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
index 027381c5..82a3f499 100644
--- a/packages/apps/user/src/components/SignUpForm/SignUpForm.js
+++ b/packages/apps/user/src/components/SignUpForm/SignUpForm.js
@@ -41,12 +41,12 @@ const SignUpForm = function ({
   }, [dispatch, reactHookForm.formState]);
 
   const handleNext = useCallback(async () => {
-    // const isFullfilled = await reactHookForm.trigger();
+    const isFullfilled = await reactHookForm.trigger();
 
-    // if (isFullfilled) {
-    navigate(`/auth/sign-up/step${activeStep + 2}`);
-    goToNext();
-    // }
+    if (isFullfilled) {
+      navigate(`/auth/sign-up/step${activeStep + 2}`);
+      goToNext();
+    }
   }, [activeStep, goToNext, navigate, reactHookForm]);
 
   const handlePrev = useCallback(() => {
diff --git a/packages/apps/user/src/store.js b/packages/apps/user/src/store.js
index 4b52a58f..68aa788e 100644
--- a/packages/apps/user/src/store.js
+++ b/packages/apps/user/src/store.js
@@ -2,11 +2,14 @@ import { configureStore, createSlice } from '@reduxjs/toolkit';
 
 const signUpSlice = createSlice({
   name: 'signUp',
-  initialState: { errors: {}, blob: '' },
+  initialState: { errors: {}, blob: '', address: '' },
   reducers: {
     setImgBlob: (state, action) => {
       state.blob = action.payload;
     },
+    setAddress: (state, action) => {
+      state.address = action.payload;
+    },
     setErrors: (state, action) => {
       state.errors = { ...action.payload };
     },
@@ -39,5 +42,5 @@ export const store = configureStore({
   devTools: process.env.NODE_ENV !== 'production',
 });
 
-export const { setImgBlob, setErrors } = signUpSlice.actions;
+export const { setImgBlob, setErrors, setAddress } = signUpSlice.actions;
 export const { setAppointDatetime } = appointmentSlice.actions;
diff --git a/packages/apps/user/src/views/Auth/SignUp/Step2.js b/packages/apps/user/src/views/Auth/SignUp/Step2.js
index fd2453bf..0d4d3079 100644
--- a/packages/apps/user/src/views/Auth/SignUp/Step2.js
+++ b/packages/apps/user/src/views/Auth/SignUp/Step2.js
@@ -1,9 +1,7 @@
 import {
-  Button,
   FormControl,
   FormErrorMessage,
   FormLabel,
-  HStack,
   Input,
   InputGroup,
   InputLeftAddon,
@@ -13,14 +11,14 @@ import {
   VStack,
   useDisclosure,
 } from '@chakra-ui/react';
-import { useState } from 'react';
 import { DaumPostcodeEmbed } from 'react-daum-postcode';
-import { FaSearch } from 'react-icons/fa';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useOutletContext } from 'react-router-dom';
+import { setAddress } from '../../../store';
 
 const Step2 = function () {
-  const [address, setAddress] = useState();
+  const dispatch = useDispatch();
+  const address = useSelector(state => state.signUp.address);
 
   const { register } = useOutletContext();
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -28,7 +26,7 @@ const Step2 = function () {
 
   const handleComplete = data => {
     onClose();
-    setAddress(data.address);
+    dispatch(setAddress(data.address));
   };
 
   return (