Feat(user): 서드파티 로그인 콜백 화면 제작

- 카카오/네이버 로그인 시, 회원가입 필수 정보인 '주소'값을 받아올 수 없는 문제 발생
- 따라서 주소값을 입력받는 페이지 제작

ref: #67

packages/apps/user/package.json

@@ -46,5 +46,6 @@
   },
   "devDependencies": {
     "eslint-config-enact-proxy": "^1.0.5"
-  }
+  },
+  "homepage": "./"
 }

packages/apps/user/src/routes/authRoutes.js

@@ -8,6 +8,7 @@ import Step1 from '../views/Auth/SignUp/Step1';
 import Step2 from '../views/Auth/SignUp/Step2';
 import Step3 from '../views/Auth/SignUp/Step3';
 import AuthRoot from '../components/Root/AuthRoot';
+import AuthCallback from '../views/Auth/AuthCallback/AuthCallback';
 
 const authRoutes = {
   path: 'auth',
@@ -61,6 +62,10 @@ const authRoutes = {
       path: 'log-in',
       element: <LogIn />,
     },
+    {
+      path: 'callback',
+      element: <AuthCallback />,
+    },
   ],
 };
 

packages/apps/user/src/views/Auth/AuthCallback/AuthCallback.js

@@ -0,0 +1,86 @@
+import {
+  Button,
+  ButtonGroup,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Heading,
+  Input,
+  Modal,
+  ModalContent,
+  ModalOverlay,
+  VStack,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+import { Form } from 'react-router-dom';
+import { DaumPostcodeEmbed } from 'react-daum-postcode';
+import { useState } from 'react';
+
+const AuthCallback = function () {
+  const [address, setAddress] = useState('');
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+
+  const handleComplete = data => {
+    setAddress(data.address);
+    onClose();
+  };
+
+  const onSubmit = data => {
+    //TODO 데이터의 address와 addressDetail을 서버로 전송
+  };
+
+  return (
+    <VStack height={'100vh'} justifyContent={'center'}>
+      <Heading as={'h1'} mb={'8'}>
+        필수 정보를 입력해주세요
+      </Heading>
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <FormControl width="full" isRequired isInvalid={errors.address}>
+          <FormLabel margin={0}>주소</FormLabel>
+
+          <Input
+            required
+            placeholder="주소"
+            mb={'2'}
+            {...register('address', {
+              required: '이 항목은 필수입니다.',
+            })}
+            value={address}
+            onClick={onOpen}
+            readOnly
+          />
+          <Input
+            required
+            placeholder="상세 주소"
+            {...register('addressDetail', {
+              required: '이 항목은 필수입니다.',
+            })}
+          />
+
+          <FormErrorMessage>{errors?.message}</FormErrorMessage>
+        </FormControl>
+
+        <ButtonGroup mt={'6'} display={'flex'} justifyContent={'flex-end'}>
+          <Button type="submit" colorScheme="primary">
+            제출하기
+          </Button>
+        </ButtonGroup>
+
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <ModalOverlay />
+          <ModalContent>
+            <DaumPostcodeEmbed onComplete={handleComplete} />
+          </ModalContent>
+        </Modal>
+      </Form>
+    </VStack>
+  );
+};
+
+export default AuthCallback;