FIX(user): 회원가입 중 카카오 API로 받아온 주소 정보를 redux에 저장

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

ref: #62

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(() => {

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;

packages/apps/user/src/views/Auth/SignUp/Step2.js

@@ -1,9 +1,7 @@
 import {
-  Button,
   FormControl,
   FormErrorMessage,
   FormLabel,
-  HStack,
   Input,
   InputGroup,
   InputLeftAddon,
@@ -13,22 +11,22 @@ 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();
   const errors = useSelector(state => state.signUp.errors);
 
   const handleComplete = data => {
     onClose();
-    setAddress(data.address);
+    dispatch(setAddress(data.address));
   };
 
   return (