From b4fc52dcc2fd28f2d28f61466106bdf30d46638e Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 16 Jul 2022 16:14:44 +0900 Subject: [PATCH 01/17] =?UTF-8?q?feat:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/testLogin/LoginForm.tsx | 76 +++++++++++++++++++++++++ src/components/testLogin/index.ts | 1 + src/hooks/common/useForm.ts | 7 ++- src/lib/api/index.ts | 9 ++- src/lib/api/login.ts | 21 +++++++ src/lib/constants/index.ts | 1 + src/pages/TestLogin.tsx | 78 ++++++++++++++++++++++++++ src/pages/TypeOfMeetingSurvey.tsx | 2 +- src/pages/index.ts | 2 + src/router/Path.ts | 1 + src/router/Routing.tsx | 4 +- src/types/user.ts | 8 +++ 12 files changed, 201 insertions(+), 9 deletions(-) create mode 100644 src/components/testLogin/LoginForm.tsx create mode 100644 src/components/testLogin/index.ts create mode 100644 src/lib/api/login.ts create mode 100644 src/lib/constants/index.ts create mode 100644 src/pages/TestLogin.tsx create mode 100644 src/types/user.ts diff --git a/src/components/testLogin/LoginForm.tsx b/src/components/testLogin/LoginForm.tsx new file mode 100644 index 0000000..ae4ef31 --- /dev/null +++ b/src/components/testLogin/LoginForm.tsx @@ -0,0 +1,76 @@ +import React, { useState } from 'react'; +import { Input, Button } from '@/components/base'; +import useForm, { InitialValues } from '@/hooks/common/useForm'; +import styled from 'styled-components'; +import { LoginRequest } from '@/types/user'; +import { palette } from '@/lib/styles/palette'; + +interface LoginFormProps { + onSubmitAuthCode: (values: LoginRequest) => void; +} + +const LoginForm = ({ onSubmitAuthCode }: LoginFormProps) => { + const [onFocus, setFocus] = useState(true); + const { values, errors, handleSubmit, handleChange } = useForm({ + initialValues: { + userName: '', + password: '', + }, + onSubmit: async () => { + try { + if (values.userName) { + onSubmitAuthCode(values as any); + setFocus(false); + } + } catch (e) { + console.error('Modal 띄워야 할 듯'); + } + }, + validate: ({ userName, password }) => { + const newErrors: InitialValues = { userName: '' }; + if (userName?.length === 0) { + newErrors.userName = '이름을 입력해주세요'; + return newErrors; + } + + if (password?.length === 0) { + newErrors.password = '비밀번호를 입력해주세요'; + return newErrors; + } + return newErrors; + }, + }); + + return ( + + + + {errors.userName && {errors.userName}} + + + + {errors.password && {errors.password}} + + + + ); +}; + +const FormsWrapper = styled.form` + display: flex; + flex-direction: column; + gap: 30px; +`; + +const InputsWrapper = styled.div` + position: relative; +`; + +export const ErrorMessage = styled.p` + position: absolute; + font-size: 12px; + color: ${palette.warning}; + padding-top: 2px; +`; + +export default LoginForm; diff --git a/src/components/testLogin/index.ts b/src/components/testLogin/index.ts new file mode 100644 index 0000000..5c49358 --- /dev/null +++ b/src/components/testLogin/index.ts @@ -0,0 +1 @@ +export { default as LoginForm } from './LoginForm'; diff --git a/src/hooks/common/useForm.ts b/src/hooks/common/useForm.ts index 5d78180..37195e4 100644 --- a/src/hooks/common/useForm.ts +++ b/src/hooks/common/useForm.ts @@ -2,6 +2,8 @@ import { useState, useCallback, useEffect } from 'react'; export interface InitialValues { email?: string; + userName?: string; + password?: string; authCode?: string; } @@ -18,13 +20,14 @@ const useForm = ({ initialValues, onSubmit, validate }: UseFormProps) => { const handleChange = useCallback((e: React.ChangeEvent) => { const { name, value } = e.target; - setValues({ ...values, [name]: value }); + setValues((prevValues) => { + return { ...prevValues, [name]: value }; + }); }, []); const handleSubmit = async (e: React.FormEvent) => { setIsLoading(true); e.preventDefault(); - console.log(Object.values(errors), 'auth'); await onSubmit(); setIsLoading(false); }; diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts index 4fa208e..784e636 100644 --- a/src/lib/api/index.ts +++ b/src/lib/api/index.ts @@ -1,13 +1,12 @@ import axios from 'axios'; +import { SERVER_URL } from '@/lib/constants'; import Cookies from 'js-cookie'; -const host = import.meta.env.VITE_SERVER_URL; - const apiClient = axios.create({ - // baseURL: host, - withCredentials: true, + baseURL: SERVER_URL, + // withCredentials: true, headers: { - Authorization: Cookies.get('AccessToken'), + Authorization: Cookies.get('accessToken') ?? '', }, }); export default apiClient; diff --git a/src/lib/api/login.ts b/src/lib/api/login.ts new file mode 100644 index 0000000..13b21e6 --- /dev/null +++ b/src/lib/api/login.ts @@ -0,0 +1,21 @@ +import apiClient from './index'; +import { LoginResponse, LoginRequest } from '@/types/user'; + +/* + @desc + 임시 아이디 비번: test1 +*/ + +export const postLogin = async (payload: LoginRequest): Promise => { + try { + const res = await apiClient.post('/login', payload); + + if (res.status !== 200 && res.status !== 201) { + throw new Error(res.data.message); + } + console.log(res, 'res'); + return res.data; + } catch (e) { + console.error(e); + } +}; diff --git a/src/lib/constants/index.ts b/src/lib/constants/index.ts new file mode 100644 index 0000000..9b71a64 --- /dev/null +++ b/src/lib/constants/index.ts @@ -0,0 +1 @@ +export const SERVER_URL = import.meta.env.VITE_SERVER_URL; diff --git a/src/pages/TestLogin.tsx b/src/pages/TestLogin.tsx new file mode 100644 index 0000000..1a6c235 --- /dev/null +++ b/src/pages/TestLogin.tsx @@ -0,0 +1,78 @@ +import styled from 'styled-components'; +import { SurveyTemplate } from '@/components/domain/survey'; +import { Button } from '@/components/base'; +import { Title } from '@/lib/styles/styledComponents'; +import { palette } from '@/lib/styles/palette'; +import { LoginForm } from '@/components/testLogin'; +import { LoginRequest } from '@/types/user'; +import { postLogin } from '@/lib/api/login'; +import Cookies from 'js-cookie'; +import { useNavigate } from 'react-router-dom'; + +const TestLogin = () => { + const navigate = useNavigate(); + const onSubmitAuthCode = async (values: LoginRequest) => { + try { + const response = await postLogin(values); + + if (response) { + const { accessToken } = response; + Cookies.set('accessToken', accessToken); + } + } catch (e) { + alert(e.message); + } + }; + + const handleNextClick = () => { + navigate('/type-of-meeting'); + }; + + return ( + <> + + + <strong>로그인해주세요.</strong> + + 임시 로그인 계정: test1 + + + + + + ); +}; + +const Description = styled.p` + padding-top: 10px; + font-weight: 300; + font-size: 12px; + line-height: 18px; + letter-spacing: -0.02em; + color: rgba(0, 0, 0, 0.6); +`; + +export const StyledButton = styled(Button)` + margin-top: 16px; +`; + +export const FormWrapper = styled.div` + position: absolute; + width: 100%; + top: 40%; + transform: translateY(-50%); + margin-top: 65px; +`; + +export const InputsWrapper = styled.div` + position: relative; +`; + +export const ErrorMessage = styled.p` + position: absolute; + font-size: 12px; + color: ${palette.warning}; + padding-top: 2px; +`; + +export default TestLogin; diff --git a/src/pages/TypeOfMeetingSurvey.tsx b/src/pages/TypeOfMeetingSurvey.tsx index c281e7a..8991465 100644 --- a/src/pages/TypeOfMeetingSurvey.tsx +++ b/src/pages/TypeOfMeetingSurvey.tsx @@ -41,7 +41,7 @@ const TypeOfMeetingSurvey = () => { disableNext={!checkedOption} currStep={1} totalStep={14} - handlePrevClick={() => navigate(Path.AuthMail)} + handlePrevClick={() => navigate(Path.LandingPage)} handleNextClick={handleNextClick} > diff --git a/src/pages/index.ts b/src/pages/index.ts index 11d8858..0a93ce7 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -29,3 +29,5 @@ export { default as PreferBodyDateCountSurvey } from './PreferBodyDateCountSurve export { default as MatchingPage } from './MatchingPage'; export { default as OauthKakao } from './OauthKakao'; + +export { default as TestLogin } from './TestLogin'; diff --git a/src/router/Path.ts b/src/router/Path.ts index d63d738..88bbca8 100644 --- a/src/router/Path.ts +++ b/src/router/Path.ts @@ -26,6 +26,7 @@ enum Path { PreferDepartmentCharacterSurvey = 'prefer-dprt-character', PreferBodyDateCountSurvey = 'prefer-body-dcount', OauthKakao = '/oauth/kakao', + TestLogin = '/test-login', MatchingMeeting = '/matching/meeting', MatchingDating = '/matching/dating', } diff --git a/src/router/Routing.tsx b/src/router/Routing.tsx index 022c8c0..f1e91e5 100644 --- a/src/router/Routing.tsx +++ b/src/router/Routing.tsx @@ -31,6 +31,7 @@ import { OauthKakao, PreferBodyDateCountSurvey, MatchingPage, + TestLogin, } from '@/pages'; import Test from '@/components/base/Test'; import UserHeader from '@/components/header/UserHeader'; @@ -42,7 +43,8 @@ function Routing() { <PageLayout> <PageWrapper> <Routes> - <Route path={Path.LandingPage} element={<LandingPage />} /> + <Route path={Path.LandingPage} element={<TestLogin />} /> + {/* <Route path={Path.LandingPage} element={<LandingPage />} /> */} <Route path={Path.Component} element={<Test />} /> <Route path={Path.AuthMail} element={<AuthMail />} /> <Route path={Path.TypeOfMeetingSurvey} element={<TypeOfMeetingSurvey />} /> diff --git a/src/types/user.ts b/src/types/user.ts new file mode 100644 index 0000000..7add91d --- /dev/null +++ b/src/types/user.ts @@ -0,0 +1,8 @@ +export interface LoginRequest { + password: 'string'; + userName: 'string'; +} + +export interface LoginResponse { + accessToken: 'string'; +} From 9dabe71e5a373af0ef9089ba55307733478f7a47 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim <kimm.jeongs@gmail.com> Date: Sat, 16 Jul 2022 16:32:42 +0900 Subject: [PATCH 02/17] =?UTF-8?q?feat:=20=EC=B6=94=EA=B0=80=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/api/index.ts | 4 ++-- src/pages/TestLogin.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts index 784e636..857a18c 100644 --- a/src/lib/api/index.ts +++ b/src/lib/api/index.ts @@ -4,9 +4,9 @@ import Cookies from 'js-cookie'; const apiClient = axios.create({ baseURL: SERVER_URL, - // withCredentials: true, + withCredentials: false, headers: { - Authorization: Cookies.get('accessToken') ?? '', + Authorization: Cookies.get('AccessToken') ?? '', }, }); export default apiClient; diff --git a/src/pages/TestLogin.tsx b/src/pages/TestLogin.tsx index 1a6c235..24e8f51 100644 --- a/src/pages/TestLogin.tsx +++ b/src/pages/TestLogin.tsx @@ -17,7 +17,7 @@ const TestLogin = () => { if (response) { const { accessToken } = response; - Cookies.set('accessToken', accessToken); + Cookies.set('AccessToken', accessToken); } } catch (e) { alert(e.message); From 339b6a3e7df4c8d60682b216cc6330c203d6ca86 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim <kimm.jeongs@gmail.com> Date: Sat, 16 Jul 2022 16:41:32 +0900 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/domain/landing/LandingContainer.tsx | 3 +++ src/pages/TestLogin.tsx | 6 +++++- src/router/Path.ts | 2 +- src/router/Routing.tsx | 4 ++-- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/domain/landing/LandingContainer.tsx b/src/components/domain/landing/LandingContainer.tsx index 77acb37..389fde0 100644 --- a/src/components/domain/landing/LandingContainer.tsx +++ b/src/components/domain/landing/LandingContainer.tsx @@ -48,6 +48,9 @@ function LandingContainer() { <LandingBtn size="medium" fontWeight={700} fullWidth variant={'kakao'} onClick={handleKakaoLoginClick}> 카카오 로그인 </LandingBtn> + <Button size="medium" fontWeight={700} fullWidth onClick={() => navigate('/test-login')}> + 일반 로그인 + </Button> </BtnBox> ) : ( <BtnBox> diff --git a/src/pages/TestLogin.tsx b/src/pages/TestLogin.tsx index 24e8f51..c3601be 100644 --- a/src/pages/TestLogin.tsx +++ b/src/pages/TestLogin.tsx @@ -28,9 +28,13 @@ const TestLogin = () => { navigate('/type-of-meeting'); }; + const handlePrevClick = () => { + navigate('/'); + }; + return ( <> - <SurveyTemplate disableNext={false} hasProgressBar={false} handleNextClick={handleNextClick}> + <SurveyTemplate disableNext={false} hasProgressBar={false} handleNextClick={handleNextClick} handlePrevClick={handlePrevClick}> <Title> <strong>로그인해주세요.</strong> diff --git a/src/router/Path.ts b/src/router/Path.ts index 88bbca8..cbcb5f4 100644 --- a/src/router/Path.ts +++ b/src/router/Path.ts @@ -1,5 +1,6 @@ enum Path { LandingPage = '/', + TestLogin = '/test-login', Component = '/component', // FIXME: 컴포넌트 모아두는 곳 (개발완료 후 삭제) AuthMail = '/auth-mail', TypeOfMeetingSurvey = '/type-of-meeting', @@ -26,7 +27,6 @@ enum Path { PreferDepartmentCharacterSurvey = 'prefer-dprt-character', PreferBodyDateCountSurvey = 'prefer-body-dcount', OauthKakao = '/oauth/kakao', - TestLogin = '/test-login', MatchingMeeting = '/matching/meeting', MatchingDating = '/matching/dating', } diff --git a/src/router/Routing.tsx b/src/router/Routing.tsx index f1e91e5..f36a6b4 100644 --- a/src/router/Routing.tsx +++ b/src/router/Routing.tsx @@ -43,8 +43,8 @@ function Routing() { - } /> - {/* } /> */} + } /> + } /> } /> } /> } /> From 8477f0d290c9bb212a0416e358cd7aee2373a4ee Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 16 Jul 2022 16:52:48 +0900 Subject: [PATCH 04/17] =?UTF-8?q?refactor:=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/testLogin/LoginForm.tsx | 2 +- src/hooks/common/useForm.ts | 6 +++--- src/lib/api/login.ts | 1 - src/types/user.ts | 4 ++-- 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/testLogin/LoginForm.tsx b/src/components/testLogin/LoginForm.tsx index ae4ef31..6d4f1e6 100644 --- a/src/components/testLogin/LoginForm.tsx +++ b/src/components/testLogin/LoginForm.tsx @@ -11,7 +11,7 @@ interface LoginFormProps { const LoginForm = ({ onSubmitAuthCode }: LoginFormProps) => { const [onFocus, setFocus] = useState(true); - const { values, errors, handleSubmit, handleChange } = useForm({ + const { values, errors, handleSubmit, handleChange } = useForm({ initialValues: { userName: '', password: '', diff --git a/src/hooks/common/useForm.ts b/src/hooks/common/useForm.ts index 37195e4..ff35a75 100644 --- a/src/hooks/common/useForm.ts +++ b/src/hooks/common/useForm.ts @@ -7,13 +7,13 @@ export interface InitialValues { authCode?: string; } -interface UseFormProps { - initialValues: InitialValues; +interface UseFormProps { + initialValues: T; onSubmit: () => void; validate: (arg: InitialValues) => InitialValues; } -const useForm = ({ initialValues, onSubmit, validate }: UseFormProps) => { +const useForm = ({ initialValues, onSubmit, validate }: UseFormProps) => { const [values, setValues] = useState(initialValues); const [errors, setErrors] = useState | InitialValues>({}); const [isLoading, setIsLoading] = useState(false); diff --git a/src/lib/api/login.ts b/src/lib/api/login.ts index 13b21e6..93fd01c 100644 --- a/src/lib/api/login.ts +++ b/src/lib/api/login.ts @@ -13,7 +13,6 @@ export const postLogin = async (payload: LoginRequest): Promise Date: Sat, 16 Jul 2022 17:36:27 +0900 Subject: [PATCH 05/17] =?UTF-8?q?fix:=20=EA=B5=AC=EB=AC=B8=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/api/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts index 1e89a2d..d78085e 100644 --- a/src/lib/api/index.ts +++ b/src/lib/api/index.ts @@ -7,6 +7,7 @@ const apiClient = axios.create({ withCredentials: false, headers: { Authorization: Cookies.get('AccessToken') ?? '', + }, }); export default apiClient; From 48a30a6a880b8ed866c0ebf277cc4139b1cc19c1 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 16 Jul 2022 17:43:37 +0900 Subject: [PATCH 06/17] =?UTF-8?q?feat:=20=EC=9E=84=EC=8B=9C=EB=A1=9C=20joi?= =?UTF-8?q?n=20=ED=9B=84=20login=20post?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/api/login.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/lib/api/login.ts b/src/lib/api/login.ts index 93fd01c..732d243 100644 --- a/src/lib/api/login.ts +++ b/src/lib/api/login.ts @@ -1,6 +1,6 @@ import apiClient from './index'; import { LoginResponse, LoginRequest } from '@/types/user'; - +import { AxiosResponse } from 'axios'; /* @desc 임시 아이디 비번: test1 @@ -8,12 +8,12 @@ import { LoginResponse, LoginRequest } from '@/types/user'; export const postLogin = async (payload: LoginRequest): Promise => { try { - const res = await apiClient.post('/login', payload); - - if (res.status !== 200 && res.status !== 201) { - throw new Error(res.data.message); + const joinRes = await apiClient.post('/join', payload); + if (joinRes.status === 200) { + const res = await apiClient.post('/login', payload); + return res.data; } - return res.data; + throw new Error(joinRes.statusText); } catch (e) { console.error(e); } From eba5816c2dfbe87f283e269b75a02ba160243764 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 16 Jul 2022 20:13:58 +0900 Subject: [PATCH 07/17] =?UTF-8?q?feat:=20Meeting,=20Dating=20=EC=84=A4?= =?UTF-8?q?=EB=AC=B8=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/api/dating.ts | 12 ++++++++++++ src/lib/api/login.ts | 11 +++-------- src/lib/api/meeting.ts | 12 ++++++++++++ src/pages/KakaoIdSurvey.tsx | 29 ++++++++++++----------------- src/pages/TestLogin.tsx | 4 +++- 5 files changed, 42 insertions(+), 26 deletions(-) create mode 100644 src/lib/api/dating.ts create mode 100644 src/lib/api/meeting.ts diff --git a/src/lib/api/dating.ts b/src/lib/api/dating.ts new file mode 100644 index 0000000..469386c --- /dev/null +++ b/src/lib/api/dating.ts @@ -0,0 +1,12 @@ +import apiClient from './index'; +import { Dating } from '@/types/dating'; +import { AxiosResponse } from 'axios'; + +export const postDatingSurvey = async (payload: Dating) => { + try { + const res = await apiClient.post('/dating/survey', payload); + return res.data; + } catch (e) { + alert(e.message); + } +}; diff --git a/src/lib/api/login.ts b/src/lib/api/login.ts index 732d243..070bc7d 100644 --- a/src/lib/api/login.ts +++ b/src/lib/api/login.ts @@ -1,6 +1,5 @@ import apiClient from './index'; import { LoginResponse, LoginRequest } from '@/types/user'; -import { AxiosResponse } from 'axios'; /* @desc 임시 아이디 비번: test1 @@ -8,13 +7,9 @@ import { AxiosResponse } from 'axios'; export const postLogin = async (payload: LoginRequest): Promise => { try { - const joinRes = await apiClient.post('/join', payload); - if (joinRes.status === 200) { - const res = await apiClient.post('/login', payload); - return res.data; - } - throw new Error(joinRes.statusText); + const res = await apiClient.post('/login', payload); + return res.data; } catch (e) { - console.error(e); + alert(e.message); } }; diff --git a/src/lib/api/meeting.ts b/src/lib/api/meeting.ts new file mode 100644 index 0000000..7f6e65d --- /dev/null +++ b/src/lib/api/meeting.ts @@ -0,0 +1,12 @@ +import apiClient from './index'; +import { Meeting } from '@/types/meeting'; +import { AxiosResponse } from 'axios'; + +export const postMeetingSurvey = async (payload: Meeting) => { + try { + const res = await apiClient.post('/meeting/survey', payload); + return res.data; + } catch (e) { + alert(e.message); + } +}; diff --git a/src/pages/KakaoIdSurvey.tsx b/src/pages/KakaoIdSurvey.tsx index 3fad5bb..e9f7885 100644 --- a/src/pages/KakaoIdSurvey.tsx +++ b/src/pages/KakaoIdSurvey.tsx @@ -10,9 +10,8 @@ import Path from '@/router/Path'; import { useMatch, useNavigate } from 'react-router-dom'; import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate'; import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common'; -import apiClient from '@/lib/api'; -// import { useRecoilValue } from 'recoil'; -// import { meetingState } from '@/atoms/meetingState'; +import { postMeetingSurvey } from '@/lib/api/meeting'; +import { postDatingSurvey } from '@/lib/api/dating'; const KakaoIdSurvey = () => { const matchMeeting = useMatch('/meeting/*'); @@ -23,22 +22,18 @@ const KakaoIdSurvey = () => { const navigate = useNavigate(); const [kakaoId, setkakaoId] = useState(matchMeeting ? initMeetingState.kakaoId : initDatingState.kakaoId); const [isConfirm, setConfirm] = useState(false); - // const meetingData = useRecoilValue(meetingState); 나중에 이걸로 data post const handleNextClick = async () => { - if (initMeetingState) { - matchMeeting ? setMeetingData({ ...initMeetingState, kakaoId }) : setDatingData({ ...initDatingState, kakaoId }); - await postMeetingSurvey(); - navigate(Path.MatchingMeeting); - } - }; - - const postMeetingSurvey = async () => { - try { - await apiClient.post('/api/meeting/survey', matchMeeting ? { ...initMeetingState, kakaoId } : { ...initDatingState, kakaoId }); - } catch (e) { - console.error(e); + if (matchMeeting) { + const meetingData = { ...initMeetingState, kakaoId }; + const res = await postMeetingSurvey(meetingData); + setMeetingData(meetingData); + } else { + const datingData = { ...initDatingState, kakaoId }; + const res = await postDatingSurvey(datingData); + setDatingData(datingData); } + navigate(Path.MatchingMeeting); }; return ( @@ -105,4 +100,4 @@ const InputWrapper = styled(FormWrapper)` margin-top: 46px; `; -export default KakaoIdSurvey; +export default React.memo(KakaoIdSurvey); diff --git a/src/pages/TestLogin.tsx b/src/pages/TestLogin.tsx index c3601be..b2c5c94 100644 --- a/src/pages/TestLogin.tsx +++ b/src/pages/TestLogin.tsx @@ -18,6 +18,8 @@ const TestLogin = () => { if (response) { const { accessToken } = response; Cookies.set('AccessToken', accessToken); + alert('로그인 성공'); + navigate('/type-of-meeting'); } } catch (e) { alert(e.message); @@ -38,7 +40,7 @@ const TestLogin = () => { <strong>로그인해주세요.</strong> - 임시 로그인 계정: test1 + 임시 로그인 계정: test2 From 099825c4d48967558e0e14566ccf8b45d6f35d5b Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 16 Jul 2022 20:19:12 +0900 Subject: [PATCH 08/17] =?UTF-8?q?feat:=20=EC=BD=98=EC=86=94=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0,=20=EC=9E=84=EC=8B=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=ED=99=9C=EC=84=B1=ED=99=94=20=EC=97=AC?= =?UTF-8?q?=EB=B6=80=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/header/DatingInfoBox.tsx | 1 - src/pages/TestLogin.tsx | 5 ++++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/header/DatingInfoBox.tsx b/src/components/header/DatingInfoBox.tsx index 68e4104..8f061db 100644 --- a/src/components/header/DatingInfoBox.tsx +++ b/src/components/header/DatingInfoBox.tsx @@ -39,7 +39,6 @@ const DatingInfoBox = ({ dating }: DatingInfoProps) => { abroadAreas, //여까지 선호 조건 } = dating; - console.log(abroadAreas); return (
Me diff --git a/src/pages/TestLogin.tsx b/src/pages/TestLogin.tsx index b2c5c94..3e8987d 100644 --- a/src/pages/TestLogin.tsx +++ b/src/pages/TestLogin.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import styled from 'styled-components'; import { SurveyTemplate } from '@/components/domain/survey'; import { Button } from '@/components/base'; @@ -11,6 +12,7 @@ import { useNavigate } from 'react-router-dom'; const TestLogin = () => { const navigate = useNavigate(); + const [isLogin, setLogin] = useState(false); const onSubmitAuthCode = async (values: LoginRequest) => { try { const response = await postLogin(values); @@ -19,6 +21,7 @@ const TestLogin = () => { const { accessToken } = response; Cookies.set('AccessToken', accessToken); alert('로그인 성공'); + setLogin(true); navigate('/type-of-meeting'); } } catch (e) { @@ -36,7 +39,7 @@ const TestLogin = () => { return ( <> - + <strong>로그인해주세요.</strong> From 004c6c8cc1aa8aa3f460cec3150ed5526832aa41 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 16 Jul 2022 20:30:18 +0900 Subject: [PATCH 09/17] =?UTF-8?q?feat:=20loginState=20atom=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/atoms/userState.tsx | 23 +++++++++++++++++++ .../domain/landing/LandingContainer.tsx | 23 ++++--------------- 2 files changed, 27 insertions(+), 19 deletions(-) create mode 100644 src/atoms/userState.tsx diff --git a/src/atoms/userState.tsx b/src/atoms/userState.tsx new file mode 100644 index 0000000..0449e5d --- /dev/null +++ b/src/atoms/userState.tsx @@ -0,0 +1,23 @@ +import { useEffect } from 'react'; +import Cookies from 'js-cookie'; +import { atom, useRecoilState } from 'recoil'; + +const isLoginData = atom({ + key: 'loginState', + default: false, +}); + +const useLoginState = () => { + const [isLogin, setLogin] = useRecoilState(isLoginData); + + useEffect(() => { + const hasAccessToken = Boolean(Cookies.get('AccessToken')); + setLogin(hasAccessToken); + }, []); + + return { + isLogin, + }; +}; + +export { useLoginState }; diff --git a/src/components/domain/landing/LandingContainer.tsx b/src/components/domain/landing/LandingContainer.tsx index 51c4c52..b53690f 100644 --- a/src/components/domain/landing/LandingContainer.tsx +++ b/src/components/domain/landing/LandingContainer.tsx @@ -1,42 +1,27 @@ +import React from 'react'; import { StringLogo, RadiousLogo } from '@/assets/img'; import { Button, Modal } from '@/components/base'; import useToggle from '@/hooks/common/useToggle'; import { palette } from '@/lib/styles/palette'; -import React, { useState } from 'react'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; +import { useLoginState } from '@/atoms/userState'; function LandingContainer() { - /** - * 로그인 되었는지 안되었는지는 나중에 리코일에서 꺼내기 - */ - const [isLogin, setIsLogin] = useState(false); // FIXME: 임시 콘텐츠 연결을 위한 처리 const [isModal, onToggleModal] = useToggle(); const navigate = useNavigate(); + const { isLogin } = useLoginState(); const handleKakaoLoginClick = () => { const clientId = import.meta.env.VITE_KAKAO_JAVASCRIPT_KEY; const redirectUri = encodeURI(`${window.location.origin}/oauth/kakao`); const loginUrl = import.meta.env.VITE_KAKAO_OPEN_URL.replace('{clientId}', clientId).replace('{redirectUri}', redirectUri); window.location.href = loginUrl; - - // console.log(code); }; return ( - { - setIsLogin((prev) => !prev); - }} - > - 테스트용 로그인 토글버튼 - 유학생을 위한 미팅/소개팅 @@ -65,7 +50,7 @@ function LandingContainer() { > 시작하기 - setIsLogin((prev) => !prev)}> + console.log('응답 수정')}> 응답 수정하기 From 7fc56f09acee33607f063f5c084084dc38f79d4d Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 16 Jul 2022 21:03:09 +0900 Subject: [PATCH 10/17] =?UTF-8?q?feat:=20=EC=84=A4=EB=AC=B8=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0=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 --- src/components/header/DatingInfoBox.tsx | 29 ++++++++++--- src/components/header/MeetingInfoBox.tsx | 31 +++++++++---- src/components/header/MenuBlock.tsx | 55 ++---------------------- src/lib/api/dating.ts | 9 ++++ src/lib/api/meeting.ts | 9 ++++ 5 files changed, 66 insertions(+), 67 deletions(-) diff --git a/src/components/header/DatingInfoBox.tsx b/src/components/header/DatingInfoBox.tsx index 8f061db..ace2f2b 100644 --- a/src/components/header/DatingInfoBox.tsx +++ b/src/components/header/DatingInfoBox.tsx @@ -1,5 +1,5 @@ +import React, { useEffect } from 'react'; import { palette } from '@/lib/styles/palette'; -import { Dating } from '@/types/dating'; import { addComma } from '@/utils/addComma'; import { conversionBody, @@ -9,13 +9,12 @@ import { conversionDomesticArea, conversionGender, } from '@/utils/converson'; -import React from 'react'; import styled from 'styled-components'; +import { getDatingSurvey } from '@/lib/api/dating'; +import { useDatingSessionState } from '@/hooks/common'; -interface DatingInfoProps { - dating: Dating; -} -const DatingInfoBox = ({ dating }: DatingInfoProps) => { +const DatingInfoBox = () => { + const { initDatingState, setDatingData } = useDatingSessionState(); const { age, myDepartment, @@ -38,7 +37,23 @@ const DatingInfoBox = ({ dating }: DatingInfoProps) => { isAbroad, abroadAreas, //여까지 선호 조건 - } = dating; + } = initDatingState; + + const getDatingData = async () => { + try { + const res = await getDatingSurvey(); + if (res) { + setDatingData(res); + } + } catch (e) { + alert(e.message); + } + }; + + useEffect(() => { + getDatingData(); + }, []); + return (
Me diff --git a/src/components/header/MeetingInfoBox.tsx b/src/components/header/MeetingInfoBox.tsx index 4aa98a1..5aa4245 100644 --- a/src/components/header/MeetingInfoBox.tsx +++ b/src/components/header/MeetingInfoBox.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import { Meeting } from '@/types/meeting'; +import React, { useEffect } from 'react'; import { conversionDepartment, conversionDomesticArea, @@ -10,11 +9,11 @@ import { } from '@/utils/converson'; import { FlexEle, GroupLabel, InfoBox, InfoEle, InfoLabel } from './DatingInfoBox'; import { addComma } from '@/utils/addComma'; +import { getMeetingSurvey } from '@/lib/api/meeting'; +import { useMeetingSessionState } from '@/hooks/common'; -interface MeetingInfoProps { - meeting: Meeting; -} -function MeetingInfoBox({ meeting }: MeetingInfoProps) { +function MeetingInfoBox() { + const { initMeetingState, setMeetingData } = useMeetingSessionState(); const { ourDepartments, domesticAreas, @@ -28,7 +27,23 @@ function MeetingInfoBox({ meeting }: MeetingInfoProps) { preferAge, preferDepartments, preferHeight, - } = meeting; + } = initMeetingState; + + const getMeetingData = async () => { + try { + const res = await getMeetingSurvey(); + if (res) { + setMeetingData(res); + } + } catch (e) { + alert(e.message); + } + }; + + useEffect(() => { + getMeetingData(); + }, []); + return (
Team @@ -79,4 +94,4 @@ function MeetingInfoBox({ meeting }: MeetingInfoProps) { ); } -export default MeetingInfoBox; +export default React.memo(MeetingInfoBox); diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx index a23304b..f835312 100644 --- a/src/components/header/MenuBlock.tsx +++ b/src/components/header/MenuBlock.tsx @@ -1,8 +1,6 @@ +import React from 'react'; import { Logo } from '@/assets/img'; import { palette } from '@/lib/styles/palette'; -import { Dating } from '@/types/dating'; -import { Meeting } from '@/types/meeting'; -import React from 'react'; import styled from 'styled-components'; import DatingInfoBox from './DatingInfoBox'; import MeetingInfoBox from './MeetingInfoBox'; @@ -19,53 +17,6 @@ const TempUserData = { univ: 'Boston University', }; -const TempMeetingData: Meeting = { - typeOfMeeting: 'ONE', - gender: 'FEMALE', - averageAge: 28, - ourUniversities: [1, 21, 3], - ourDepartments: ['LIBERAL', 'SCIENCE'], - averageHeight: 170, - avoidUniversities: [], - preferUniversities: [], - preferAge: [20, 25], - preferHeight: [140, 180], - preferDepartments: ['LIBERAL', 'SCIENCE'], - mindset: 'ALL', - play: 'ALL', - isAbroad: false, - domesticAreas: ['SNW', 'SNE', 'SSW', 'SSE'], - abroadAreas: [], - channel: 'FACEBOOK', - agreement: true, - kakaoId: '', -}; -const TempDatingData: Dating = { - gender: 'FEMALE', - age: 28, - myDepartment: 'LIBERAL', - characteristic: 'A_LITTLE_ACTIVE', - mbti: 'INFP', - myHeight: 0, - myBody: 'SKINNY', - mySmoke: true, - myDateCount: 'ZERO', - isSmokeOk: true, - avoidUniversities: [], - preferUniversities: [], - preferAge: [20, 28], - preferHeight: [140, 180], - preferDepartments: ['LIBERAL', 'SCIENCE'], - preferCharacteristics: ['VERY_QUIET', 'A_LITTLE_QUIET'], - preferBodies: ['SKINNY', 'SLIM'], - preferDateCount: 'ZERO', - isAbroad: false, - domesticAreas: ['SNW', 'SNE', 'SSW', 'SSE'], - abroadAreas: [], - channel: 'FACEBOOK', - agreement: true, - kakaoId: '', -}; function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) { return ( <> @@ -77,8 +28,8 @@ function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) {
{TempUserData.univ}
- - + + diff --git a/src/lib/api/dating.ts b/src/lib/api/dating.ts index 469386c..131b11e 100644 --- a/src/lib/api/dating.ts +++ b/src/lib/api/dating.ts @@ -10,3 +10,12 @@ export const postDatingSurvey = async (payload: Dating) => { alert(e.message); } }; + +export const getDatingSurvey = async () => { + try { + const res = await apiClient.get('/dating/survey'); + return res.data; + } catch (e) { + alert(e.message); + } +}; diff --git a/src/lib/api/meeting.ts b/src/lib/api/meeting.ts index 7f6e65d..38f48f4 100644 --- a/src/lib/api/meeting.ts +++ b/src/lib/api/meeting.ts @@ -10,3 +10,12 @@ export const postMeetingSurvey = async (payload: Meeting) => { alert(e.message); } }; + +export const getMeetingSurvey = async () => { + try { + const res = await apiClient.get('/meeting/survey'); + return res.data; + } catch (e) { + alert(e.message); + } +}; From fa9d077552259857161943dbe364d59ec11f0e56 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 16 Jul 2022 21:03:27 +0900 Subject: [PATCH 11/17] =?UTF-8?q?style:=20=EC=A7=9C=EC=9E=98=ED=95=9C=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/domain/matching/WaitingBox.tsx | 2 +- src/components/header/UserHeader.tsx | 11 ++++++++++- src/pages/MatchingPage.tsx | 2 +- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/domain/matching/WaitingBox.tsx b/src/components/domain/matching/WaitingBox.tsx index 621fff5..10a50f3 100644 --- a/src/components/domain/matching/WaitingBox.tsx +++ b/src/components/domain/matching/WaitingBox.tsx @@ -7,7 +7,7 @@ function WaitingBox() { <> - 매칭은 매일밤 11시에 이루어집니다. + 매칭은 매일밤 11시에 이루어집니다.
매칭이 되면 카톡과 이메일로 링크를 보내드릴게요. diff --git a/src/components/header/UserHeader.tsx b/src/components/header/UserHeader.tsx index 12f8243..9b9bf0a 100644 --- a/src/components/header/UserHeader.tsx +++ b/src/components/header/UserHeader.tsx @@ -12,7 +12,9 @@ const UserHeader = () => { <> 외딴썸 - 메뉴 이미지 + + 메뉴 이미지 + @@ -27,4 +29,11 @@ const HeaderLayout = styled(HeaderWrapper)` padding: 20px 10px; `; +const Menu = styled.button` + & > img { + width: 20px; + height: 20px; + } +`; + export default UserHeader; diff --git a/src/pages/MatchingPage.tsx b/src/pages/MatchingPage.tsx index 32486ed..922f4fd 100644 --- a/src/pages/MatchingPage.tsx +++ b/src/pages/MatchingPage.tsx @@ -9,7 +9,7 @@ import React from 'react'; import styled from 'styled-components'; const MatchingPage = () => { - const TempData = { state: 'pay' }; + const TempData = { state: 'waiting' }; return ( <> From 6013e1b1682d43aecd62288863c8c2b669c3f4da Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sun, 17 Jul 2022 14:10:25 +0900 Subject: [PATCH 12/17] =?UTF-8?q?style:=20=EC=9E=84=EC=8B=9C=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EA=B3=84=EC=A0=95=20test4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/TestLogin.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/TestLogin.tsx b/src/pages/TestLogin.tsx index 3e8987d..3572efe 100644 --- a/src/pages/TestLogin.tsx +++ b/src/pages/TestLogin.tsx @@ -43,7 +43,7 @@ const TestLogin = () => { <strong>로그인해주세요.</strong> - 임시 로그인 계정: test2 + 임시 로그인 계정: test4 From e2f37b62647b5c4f937433cd3846ab92dab1df17 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sun, 17 Jul 2022 19:33:45 +0900 Subject: [PATCH 13/17] =?UTF-8?q?feat:=20=EC=A7=80=ED=98=B8=EB=8B=98=20?= =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/header/DatingInfoBox.tsx | 20 ++++++++++---------- src/lib/api/dating.ts | 16 ++++------------ src/lib/api/login.ts | 10 +++------- 3 files changed, 17 insertions(+), 29 deletions(-) diff --git a/src/components/header/DatingInfoBox.tsx b/src/components/header/DatingInfoBox.tsx index ace2f2b..7a3e94b 100644 --- a/src/components/header/DatingInfoBox.tsx +++ b/src/components/header/DatingInfoBox.tsx @@ -39,18 +39,18 @@ const DatingInfoBox = () => { //여까지 선호 조건 } = initDatingState; - const getDatingData = async () => { - try { - const res = await getDatingSurvey(); - if (res) { - setDatingData(res); + useEffect(() => { + const getDatingData = async () => { + try { + const res = await getDatingSurvey(); + if (res) { + setDatingData(res); + } + } catch (e) { + alert(e.message); } - } catch (e) { - alert(e.message); - } - }; + }; - useEffect(() => { getDatingData(); }, []); diff --git a/src/lib/api/dating.ts b/src/lib/api/dating.ts index 131b11e..6a62438 100644 --- a/src/lib/api/dating.ts +++ b/src/lib/api/dating.ts @@ -3,19 +3,11 @@ import { Dating } from '@/types/dating'; import { AxiosResponse } from 'axios'; export const postDatingSurvey = async (payload: Dating) => { - try { - const res = await apiClient.post('/dating/survey', payload); - return res.data; - } catch (e) { - alert(e.message); - } + const res = await apiClient.post('/dating/survey', payload); + return res.data; }; export const getDatingSurvey = async () => { - try { - const res = await apiClient.get('/dating/survey'); - return res.data; - } catch (e) { - alert(e.message); - } + const res = await apiClient.get('/dating/survey'); + return res.data; }; diff --git a/src/lib/api/login.ts b/src/lib/api/login.ts index 070bc7d..6c85c6e 100644 --- a/src/lib/api/login.ts +++ b/src/lib/api/login.ts @@ -2,14 +2,10 @@ import apiClient from './index'; import { LoginResponse, LoginRequest } from '@/types/user'; /* @desc - 임시 아이디 비번: test1 + 임시 아이디 비번: test4 */ export const postLogin = async (payload: LoginRequest): Promise => { - try { - const res = await apiClient.post('/login', payload); - return res.data; - } catch (e) { - alert(e.message); - } + const res = await apiClient.post('/login', payload); + return res.data; }; From 96921407e4fad13bb31ad149ed48f5e77c91b853 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Wed, 20 Jul 2022 23:01:23 +0900 Subject: [PATCH 14/17] =?UTF-8?q?feat:=20alert=20->=20=EC=97=90=EB=9F=AC?= =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/authMail/AuthCodeForm.tsx | 45 ++++-- src/components/authMail/EmailForm.tsx | 36 +++-- .../domain/matching/KakaoCopyBox.tsx | 2 +- src/components/header/DatingInfoBox.tsx | 143 ++++++++++-------- src/components/header/MeetingInfoBox.tsx | 111 ++++++++------ src/components/testLogin/LoginForm.tsx | 43 ++++-- src/pages/AuthMail.tsx | 33 ++-- src/pages/KakaoIdSurvey.tsx | 40 +++-- src/pages/TestLogin.tsx | 17 ++- 9 files changed, 296 insertions(+), 174 deletions(-) diff --git a/src/components/authMail/AuthCodeForm.tsx b/src/components/authMail/AuthCodeForm.tsx index 7b0a431..f863f22 100644 --- a/src/components/authMail/AuthCodeForm.tsx +++ b/src/components/authMail/AuthCodeForm.tsx @@ -1,9 +1,10 @@ import React, { useEffect } from 'react'; -import { Input } from '@/components/base'; +import { Input, Modal } from '@/components/base'; import { InputsWrapper, StyledButton, ErrorMessage } from '@/pages/AuthMail'; import useForm, { InitialValues } from '@/hooks/common/useForm'; import useCountdown from '@/hooks/common/useCountdown'; import styled from 'styled-components'; +import { useToggle } from '@/hooks/common'; interface AuthCodeFormProps { email: string; @@ -12,6 +13,7 @@ interface AuthCodeFormProps { const AuthCodeForm = ({ email, onCheckAuthCode }: AuthCodeFormProps) => { const { minutes, seconds, setTarget } = useCountdown(0); + const [isErrorModal, onToggleErrorModal] = useToggle(); const { values, errors, handleSubmit, handleChange } = useForm({ initialValues: { email, @@ -22,7 +24,7 @@ const AuthCodeForm = ({ email, onCheckAuthCode }: AuthCodeFormProps) => { console.log('try submit authCode'); onCheckAuthCode(values.authCode); } catch (e) { - console.error('Modal 띄워야 할 듯'); + onToggleErrorModal(); } }, validate: () => { @@ -45,18 +47,33 @@ const AuthCodeForm = ({ email, onCheckAuthCode }: AuthCodeFormProps) => { }, [email]); return ( -
- - - {errors.email && {errors.email}} - 확인 - {email && ( - - {minutes}:{seconds} - - )} - -
+ <> +
+ + + {errors.email && {errors.email}} + 확인 + {email && ( + + {minutes}:{seconds} + + )} + +
+ {isErrorModal && ( + { + void 0; + }} + /> + )} + ); }; diff --git a/src/components/authMail/EmailForm.tsx b/src/components/authMail/EmailForm.tsx index a8a52b9..12add33 100644 --- a/src/components/authMail/EmailForm.tsx +++ b/src/components/authMail/EmailForm.tsx @@ -1,8 +1,9 @@ import React, { useState } from 'react'; -import { Input } from '@/components/base'; +import { Input, Modal } from '@/components/base'; import { InputsWrapper, StyledButton, ErrorMessage } from '@/pages/AuthMail'; import useForm, { InitialValues } from '@/hooks/common/useForm'; import { checkForm } from '@/utils/validations'; +import { useToggle } from '@/hooks/common'; interface EmailFormProps { onSubmitAuthCode: (email: string) => void; @@ -10,6 +11,7 @@ interface EmailFormProps { const EmailForm = ({ onSubmitAuthCode }: EmailFormProps) => { const [onFocus, setFocus] = useState(true); + const [isErrorModal, onToggleErrorModal] = useToggle(); const { values, errors, handleSubmit, handleChange } = useForm({ initialValues: { email: '', @@ -17,12 +19,11 @@ const EmailForm = ({ onSubmitAuthCode }: EmailFormProps) => { onSubmit: async () => { try { if (values.email) { - console.log('try'); onSubmitAuthCode(values.email); setFocus(false); } } catch (e) { - console.error('Modal 띄워야 할 듯'); + onToggleErrorModal(); } }, validate: ({ email }) => { @@ -37,13 +38,28 @@ const EmailForm = ({ onSubmitAuthCode }: EmailFormProps) => { }); return ( -
- - - {errors.email && {errors.email}} - 인증번호 보내기 - -
+ <> +
+ + + {errors.email && {errors.email}} + 인증번호 보내기 + +
+ {isErrorModal && ( + { + void 0; + }} + /> + )} + ); }; diff --git a/src/components/domain/matching/KakaoCopyBox.tsx b/src/components/domain/matching/KakaoCopyBox.tsx index b0d86e6..72eebb0 100644 --- a/src/components/domain/matching/KakaoCopyBox.tsx +++ b/src/components/domain/matching/KakaoCopyBox.tsx @@ -16,7 +16,7 @@ function KakaoCopyBox({ kakaoId }: CopyBoxPorps) { try { onToggleModal(); await navigator.clipboard.writeText(text); - } catch (error) { + } catch (e) { onToggleErrorModal(); } }; diff --git a/src/components/header/DatingInfoBox.tsx b/src/components/header/DatingInfoBox.tsx index 7a3e94b..f3704ef 100644 --- a/src/components/header/DatingInfoBox.tsx +++ b/src/components/header/DatingInfoBox.tsx @@ -1,4 +1,5 @@ import React, { useEffect } from 'react'; +import { Modal } from '@/components/base'; import { palette } from '@/lib/styles/palette'; import { addComma } from '@/utils/addComma'; import { @@ -11,10 +12,11 @@ import { } from '@/utils/converson'; import styled from 'styled-components'; import { getDatingSurvey } from '@/lib/api/dating'; -import { useDatingSessionState } from '@/hooks/common'; +import { useDatingSessionState, useToggle } from '@/hooks/common'; const DatingInfoBox = () => { const { initDatingState, setDatingData } = useDatingSessionState(); + const [isErrorModal, onToggleErrorModal] = useToggle(); const { age, myDepartment, @@ -47,7 +49,7 @@ const DatingInfoBox = () => { setDatingData(res); } } catch (e) { - alert(e.message); + onToggleErrorModal(); } }; @@ -55,67 +57,82 @@ const DatingInfoBox = () => { }, []); return ( -
- Me - 나의 정보 - - {age}살 - {conversionGender(gender)} - {conversionDepartment(myDepartment)} - {mbti} - 연애 횟수 : {conversionDateCount(myDateCount)} - {myHeight}cm - {conversionBody(myBody)} - {mySmoke ? '흡연' : '비흡연'} - {conversionCharacter(characteristic)} - - {domesticAreas?.map((area, index) => ( -
- {addComma(index)} - {conversionDomesticArea(area)} -
- ))} - - {abroadAreas.length === 0 ? '기피지역 : 없음' : abroadAreas} - 해외여부 : {isAbroad ? '예' : '아니요'} - - 선호 조건 - - - {preferAge[0]}~{preferAge[1]}살 - - - {preferBodies?.map((body, index) => ( -
- {addComma(index)} - {conversionBody(body)} -
- ))} - - - {preferCharacteristics?.map((charator, index) => ( -
- {addComma(index)} - {conversionCharacter(charator)} -
- ))} - - {conversionDateCount(preferDateCount)} - - {preferDepartments?.map((department, index) => ( -
- {addComma(index)} - {conversionDepartment(department)} -
- ))} - - - {preferHeight[0]}~{preferHeight[1]}cm - - {/* {preferUniversities} */} - 흡연 : {isSmokeOk ? '괜찮아요' : '싫어요'} - -
+ <> +
+ Me + 나의 정보 + + {age}살 + {conversionGender(gender)} + {conversionDepartment(myDepartment)} + {mbti} + 연애 횟수 : {conversionDateCount(myDateCount)} + {myHeight}cm + {conversionBody(myBody)} + {mySmoke ? '흡연' : '비흡연'} + {conversionCharacter(characteristic)} + + {domesticAreas?.map((area, index) => ( +
+ {addComma(index)} + {conversionDomesticArea(area)} +
+ ))} + + {abroadAreas.length === 0 ? '기피지역 : 없음' : abroadAreas} + 해외여부 : {isAbroad ? '예' : '아니요'} + + 선호 조건 + + + {preferAge[0]}~{preferAge[1]}살 + + + {preferBodies?.map((body, index) => ( +
+ {addComma(index)} + {conversionBody(body)} +
+ ))} + + + {preferCharacteristics?.map((charator, index) => ( +
+ {addComma(index)} + {conversionCharacter(charator)} +
+ ))} + + {conversionDateCount(preferDateCount)} + + {preferDepartments?.map((department, index) => ( +
+ {addComma(index)} + {conversionDepartment(department)} +
+ ))} + + + {preferHeight[0]}~{preferHeight[1]}cm + + {/* {preferUniversities} */} + 흡연 : {isSmokeOk ? '괜찮아요' : '싫어요'} + +
+ {isErrorModal && ( + { + void 0; + }} + /> + )} + ); }; export const InfoLabel = styled.div` diff --git a/src/components/header/MeetingInfoBox.tsx b/src/components/header/MeetingInfoBox.tsx index 5aa4245..8154d14 100644 --- a/src/components/header/MeetingInfoBox.tsx +++ b/src/components/header/MeetingInfoBox.tsx @@ -1,4 +1,5 @@ import React, { useEffect } from 'react'; +import { Modal } from '@/components/base'; import { conversionDepartment, conversionDomesticArea, @@ -10,10 +11,11 @@ import { import { FlexEle, GroupLabel, InfoBox, InfoEle, InfoLabel } from './DatingInfoBox'; import { addComma } from '@/utils/addComma'; import { getMeetingSurvey } from '@/lib/api/meeting'; -import { useMeetingSessionState } from '@/hooks/common'; +import { useMeetingSessionState, useToggle } from '@/hooks/common'; function MeetingInfoBox() { const { initMeetingState, setMeetingData } = useMeetingSessionState(); + const [isErrorModal, onToggleErrorModal] = useToggle(); const { ourDepartments, domesticAreas, @@ -36,7 +38,7 @@ function MeetingInfoBox() { setMeetingData(res); } } catch (e) { - alert(e.message); + onToggleErrorModal(); } }; @@ -45,52 +47,67 @@ function MeetingInfoBox() { }, []); return ( -
- Team - 우리 팀 정보 + <> +
+ Team + 우리 팀 정보 - - {conversionGender(gender)} - {conversionTypeOfMeeting(typeOfMeeting)} - - {ourDepartments?.map((department, index) => ( -
- {addComma(index)} - {conversionDepartment(department)} -
- ))} - - 평균나이 : {averageAge}살 - 평균 키 : {averageHeight}cm - {conversionPlay(play)} - - {domesticAreas?.map((area, index) => ( -
- {addComma(index)} - {conversionDomesticArea(area)} -
- ))} - - {conversionMindset(mindset)} - - 선호 조건 - - - {preferAge[0]}~{preferAge[1]}살 - - - {preferDepartments?.map((department, index) => ( -
- {addComma(index)} - {conversionDepartment(department)} -
- ))} - - - {preferHeight[0]}~{preferHeight[1]}cm - - -
+ + {conversionGender(gender)} + {conversionTypeOfMeeting(typeOfMeeting)} + + {ourDepartments?.map((department, index) => ( +
+ {addComma(index)} + {conversionDepartment(department)} +
+ ))} + + 평균나이 : {averageAge}살 + 평균 키 : {averageHeight}cm + {conversionPlay(play)} + + {domesticAreas?.map((area, index) => ( +
+ {addComma(index)} + {conversionDomesticArea(area)} +
+ ))} + + {conversionMindset(mindset)} + + 선호 조건 + + + {preferAge[0]}~{preferAge[1]}살 + + + {preferDepartments?.map((department, index) => ( +
+ {addComma(index)} + {conversionDepartment(department)} +
+ ))} + + + {preferHeight[0]}~{preferHeight[1]}cm + + +
+ {isErrorModal && ( + { + void 0; + }} + /> + )} + ); } diff --git a/src/components/testLogin/LoginForm.tsx b/src/components/testLogin/LoginForm.tsx index 6d4f1e6..caf65f4 100644 --- a/src/components/testLogin/LoginForm.tsx +++ b/src/components/testLogin/LoginForm.tsx @@ -1,9 +1,10 @@ import React, { useState } from 'react'; -import { Input, Button } from '@/components/base'; +import { Input, Button, Modal } from '@/components/base'; import useForm, { InitialValues } from '@/hooks/common/useForm'; import styled from 'styled-components'; import { LoginRequest } from '@/types/user'; import { palette } from '@/lib/styles/palette'; +import { useToggle } from '@/hooks/common'; interface LoginFormProps { onSubmitAuthCode: (values: LoginRequest) => void; @@ -11,6 +12,7 @@ interface LoginFormProps { const LoginForm = ({ onSubmitAuthCode }: LoginFormProps) => { const [onFocus, setFocus] = useState(true); + const [isErrorModal, onToggleErrorModal] = useToggle(); const { values, errors, handleSubmit, handleChange } = useForm({ initialValues: { userName: '', @@ -23,7 +25,7 @@ const LoginForm = ({ onSubmitAuthCode }: LoginFormProps) => { setFocus(false); } } catch (e) { - console.error('Modal 띄워야 할 듯'); + onToggleErrorModal(); } }, validate: ({ userName, password }) => { @@ -42,17 +44,32 @@ const LoginForm = ({ onSubmitAuthCode }: LoginFormProps) => { }); return ( - - - - {errors.userName && {errors.userName}} - - - - {errors.password && {errors.password}} - - - + <> + + + + {errors.userName && {errors.userName}} + + + + {errors.password && {errors.password}} + + + + {isErrorModal && ( + { + void 0; + }} + /> + )} + ); }; diff --git a/src/pages/AuthMail.tsx b/src/pages/AuthMail.tsx index ee90cd7..2f37634 100644 --- a/src/pages/AuthMail.tsx +++ b/src/pages/AuthMail.tsx @@ -7,11 +7,12 @@ import { palette } from '@/lib/styles/palette'; import { EmailForm, AuthCodeForm } from '@/components/authMail'; import { Link } from 'react-router-dom'; import client from '@/lib/api'; +import { useToggle } from '@/hooks/common'; const AuthMail = () => { const [cantMoveNext, setCantMoveNext] = useState(true); const [email, setEmail] = useState(''); - // const [state, setState] = useState(initState); + const [isErrorModal, onToggleErrorModal] = useToggle(); const postEmail = async (email: string) => { await client.post(`/api/email`, { email }); @@ -26,8 +27,7 @@ const AuthMail = () => { await postEmail(email); setEmail(email); } catch (e) { - alert(e.message); - console.error('에러 모달'); + onToggleErrorModal(); } }; @@ -36,8 +36,7 @@ const AuthMail = () => { await putEmail(authCode); setCantMoveNext(false); } catch (e) { - alert(e.message); - console.error('에러 모달'); + onToggleErrorModal(); } }; @@ -59,17 +58,19 @@ const AuthMail = () => { - {/*{isModal && (*/} - {/* setConfirm(true)}*/} - {/* />*/} - {/*)}*/} + {isErrorModal && ( + { + void 0; + }} + /> + )} ); }; diff --git a/src/pages/KakaoIdSurvey.tsx b/src/pages/KakaoIdSurvey.tsx index e9f7885..db42b01 100644 --- a/src/pages/KakaoIdSurvey.tsx +++ b/src/pages/KakaoIdSurvey.tsx @@ -19,21 +19,30 @@ const KakaoIdSurvey = () => { const { initMeetingState, setMeetingData } = useMeetingSessionState(); const { initDatingState, setDatingData } = useDatingSessionState(); const [isModal, onToggleModal] = useToggle(); + const [isErrorModal, onToggleErrorModal] = useToggle(); const navigate = useNavigate(); const [kakaoId, setkakaoId] = useState(matchMeeting ? initMeetingState.kakaoId : initDatingState.kakaoId); const [isConfirm, setConfirm] = useState(false); const handleNextClick = async () => { - if (matchMeeting) { - const meetingData = { ...initMeetingState, kakaoId }; - const res = await postMeetingSurvey(meetingData); - setMeetingData(meetingData); - } else { - const datingData = { ...initDatingState, kakaoId }; - const res = await postDatingSurvey(datingData); - setDatingData(datingData); + try { + if (matchMeeting) { + const meetingData = { ...initMeetingState, kakaoId }; + const res = await postMeetingSurvey(meetingData); + if (res.status === 200) { + setMeetingData(meetingData); + } + } else { + const datingData = { ...initDatingState, kakaoId }; + const res = await postDatingSurvey(datingData); + if (res.status === 200) { + setDatingData(datingData); + } + } + navigate(Path.MatchingMeeting); + } catch (e) { + onToggleErrorModal(); } - navigate(Path.MatchingMeeting); }; return ( @@ -82,6 +91,19 @@ const KakaoIdSurvey = () => { onClick={() => setConfirm(true)} /> )} + {isErrorModal && ( + { + void 0; + }} + /> + )} ); }; diff --git a/src/pages/TestLogin.tsx b/src/pages/TestLogin.tsx index 3572efe..3dcc14e 100644 --- a/src/pages/TestLogin.tsx +++ b/src/pages/TestLogin.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import styled from 'styled-components'; import { SurveyTemplate } from '@/components/domain/survey'; -import { Button } from '@/components/base'; +import { Button, Modal } from '@/components/base'; import { Title } from '@/lib/styles/styledComponents'; import { palette } from '@/lib/styles/palette'; import { LoginForm } from '@/components/testLogin'; @@ -9,10 +9,12 @@ import { LoginRequest } from '@/types/user'; import { postLogin } from '@/lib/api/login'; import Cookies from 'js-cookie'; import { useNavigate } from 'react-router-dom'; +import { useToggle } from '@/hooks/common'; const TestLogin = () => { const navigate = useNavigate(); const [isLogin, setLogin] = useState(false); + const [isErrorModal, onToggleErrorModal] = useToggle(); const onSubmitAuthCode = async (values: LoginRequest) => { try { const response = await postLogin(values); @@ -48,6 +50,19 @@ const TestLogin = () => { + {isErrorModal && ( + { + void 0; + }} + /> + )} ); }; From 9281424bff51aa0b947e51f8f27db6aa085f1d1f Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Wed, 20 Jul 2022 23:01:48 +0900 Subject: [PATCH 15/17] =?UTF-8?q?refactor:=20api=EC=97=90=EC=84=A0=20try?= =?UTF-8?q?=20catch=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/api/meeting.ts | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/lib/api/meeting.ts b/src/lib/api/meeting.ts index 38f48f4..e174bc1 100644 --- a/src/lib/api/meeting.ts +++ b/src/lib/api/meeting.ts @@ -3,19 +3,16 @@ import { Meeting } from '@/types/meeting'; import { AxiosResponse } from 'axios'; export const postMeetingSurvey = async (payload: Meeting) => { - try { - const res = await apiClient.post('/meeting/survey', payload); - return res.data; - } catch (e) { - alert(e.message); - } + const res = await apiClient.post('/meeting/survey', payload); + return res.data; }; export const getMeetingSurvey = async () => { - try { - const res = await apiClient.get('/meeting/survey'); - return res.data; - } catch (e) { - alert(e.message); - } + const res = await apiClient.get('/meeting/survey'); + return res.data; +}; + +export const postReMathcingMettingSurvey = async () => { + const res = await apiClient.post('/meeting/survey/rematch'); + return res.data; }; From 3aba636b81172fa8e392fd1a52f95734484c54df Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Wed, 20 Jul 2022 23:02:06 +0900 Subject: [PATCH 16/17] =?UTF-8?q?comment:=20=EC=A3=BC=EC=84=9D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/api/login.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/api/login.ts b/src/lib/api/login.ts index 6c85c6e..2820a2e 100644 --- a/src/lib/api/login.ts +++ b/src/lib/api/login.ts @@ -2,7 +2,7 @@ import apiClient from './index'; import { LoginResponse, LoginRequest } from '@/types/user'; /* @desc - 임시 아이디 비번: test4 + 임시 아이디 비번: test1 */ export const postLogin = async (payload: LoginRequest): Promise => { From 8bb90969737df971f5a3d9b8c405eed017940451 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Wed, 20 Jul 2022 23:04:12 +0900 Subject: [PATCH 17/17] =?UTF-8?q?feat:=20dating/rematch=20post=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 --- src/lib/api/dating.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/lib/api/dating.ts b/src/lib/api/dating.ts index 6a62438..8b2bdd7 100644 --- a/src/lib/api/dating.ts +++ b/src/lib/api/dating.ts @@ -11,3 +11,8 @@ export const getDatingSurvey = async () => { const res = await apiClient.get('/dating/survey'); return res.data; }; + +export const postReMatchDatingSurvey = async () => { + const res = await apiClient.post('/dating/survey/rematch'); + return res.data; +};