From 1c5d51b29efe11ff224ef60365d13aaa3460211d Mon Sep 17 00:00:00 2001
From: hwna00 <layton3534@gmail.com>
Date: Sat, 23 Sep 2023 01:54:30 +0900
Subject: [PATCH] =?UTF-8?q?Feat(user):=20=EC=84=9C=EB=93=9C=ED=8C=8C?=
 =?UTF-8?q?=ED=8B=B0=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=BD=9C=EB=B0=B1=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

ref: #67
---
 packages/apps/user/package.json               |  3 +-
 packages/apps/user/src/routes/authRoutes.js   |  5 ++
 .../views/Auth/AuthCallback/AuthCallback.js   | 86 +++++++++++++++++++
 3 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 packages/apps/user/src/views/Auth/AuthCallback/AuthCallback.js

diff --git a/packages/apps/user/package.json b/packages/apps/user/package.json
index 742f9348..6eea0fdb 100644
--- a/packages/apps/user/package.json
+++ b/packages/apps/user/package.json
@@ -46,5 +46,6 @@
   },
   "devDependencies": {
     "eslint-config-enact-proxy": "^1.0.5"
-  }
+  },
+  "homepage": "./"
 }
diff --git a/packages/apps/user/src/routes/authRoutes.js b/packages/apps/user/src/routes/authRoutes.js
index 1150ab41..2f4914ef 100644
--- a/packages/apps/user/src/routes/authRoutes.js
+++ b/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 />,
+    },
   ],
 };
 
diff --git a/packages/apps/user/src/views/Auth/AuthCallback/AuthCallback.js b/packages/apps/user/src/views/Auth/AuthCallback/AuthCallback.js
new file mode 100644
index 00000000..d48d9a49
--- /dev/null
+++ b/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;