From f957a79916f7ca7cc3a46d07a94dd23f0d0724d6 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 23 Jul 2022 16:23:21 +0900 Subject: [PATCH 01/28] =?UTF-8?q?feat:=20max=20=EC=84=A0=ED=83=9D=EC=A0=81?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20in=20SearchSelector?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/domain/survey/SearchSelector.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/domain/survey/SearchSelector.tsx b/src/components/domain/survey/SearchSelector.tsx index d63e1e8..e8e4090 100644 --- a/src/components/domain/survey/SearchSelector.tsx +++ b/src/components/domain/survey/SearchSelector.tsx @@ -12,9 +12,11 @@ interface SearchSelectorProps { searchData: SearchData[]; selectedResults: number[]; setSelectedResults: React.Dispatch>; - max: number; + max?: number; } +const defaultMax = 4; + const SearchSelector = ({ placeholder, searchData, selectedResults, setSelectedResults, max }: SearchSelectorProps) => { const inputRef = useRef(null); @@ -33,7 +35,7 @@ const SearchSelector = ({ placeholder, searchData, selectedResults, setSelectedR const noMatchData = !searchData.map(({ id }) => id).includes(id); const existSelected = selectedResults.includes(id); - const overMaxLimit = selectedResults.length >= max; + const overMaxLimit = selectedResults.length >= (max ?? defaultMax); if (noMatchData || existSelected || overMaxLimit) return; setSelectedResults((prev) => [...prev, id]); From 5e191b15c49d8467620803d8ca0928e76f51a27a Mon Sep 17 00:00:00 2001 From: choisohyun Date: Sat, 23 Jul 2022 16:49:14 +0900 Subject: [PATCH 02/28] =?UTF-8?q?fix:=20server=20url=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 2 +- .env.production | 2 +- src/lib/api/dating.ts | 10 ++++++++++ src/lib/api/email.ts | 9 +++++++++ src/lib/api/login.ts | 7 ++++++- src/pages/AuthMail.tsx | 9 +-------- src/types/area.ts | 4 ++++ src/types/meeting.ts | 2 +- src/types/user.ts | 12 +++++++++--- 9 files changed, 42 insertions(+), 15 deletions(-) create mode 100644 src/lib/api/email.ts create mode 100644 src/types/area.ts diff --git a/.env.development b/.env.development index d09b8e4..99d03a8 100644 --- a/.env.development +++ b/.env.development @@ -1,4 +1,4 @@ VITE_KAKAO_JAVASCRIPT_KEY=02e0caae3e4116da61d734a06528cd86 VITE_KAKAO_RESTAPI_KEY=09bebf5106adf50d6a204a7ac2c22779 VITE_KAKAO_OPEN_URL=https://kauth.kakao.com/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&response_type=code&prompt=login -VITE_SERVER_URL=http://49.50.175.112:8080 \ No newline at end of file +VITE_SERVER_URL=http://49.50.175.112:8080/api \ No newline at end of file diff --git a/.env.production b/.env.production index aa18d9d..cfbec19 100644 --- a/.env.production +++ b/.env.production @@ -1,4 +1,4 @@ VITE_KAKAO_JAVASCRIPT_KEY=02e0caae3e4116da61d734a06528cd86 VITE_KAKAO_RESTAPI_KEY=09bebf5106adf50d6a204a7ac2c22779 VITE_KAKAO_OPEN_URL=https://kauth.kakao.com/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&response_type=code&prompt=login -VITE_SERVER_URL=http://49.50.175.112:8080 +VITE_SERVER_URL=http://49.50.175.112:8080/api diff --git a/src/lib/api/dating.ts b/src/lib/api/dating.ts index 8b2bdd7..8c95d10 100644 --- a/src/lib/api/dating.ts +++ b/src/lib/api/dating.ts @@ -2,6 +2,11 @@ import apiClient from './index'; import { Dating } from '@/types/dating'; import { AxiosResponse } from 'axios'; +export const getDatingMatching = async () => { + const res = await apiClient.get('/dating/matching'); + return res.data; +}; + export const postDatingSurvey = async (payload: Dating) => { const res = await apiClient.post('/dating/survey', payload); return res.data; @@ -12,6 +17,11 @@ export const getDatingSurvey = async () => { return res.data; }; +export const putDatingSurvey = async (payload: Dating) => { + const res = await apiClient.put('/dating/survey', payload); + return res.data; +}; + export const postReMatchDatingSurvey = async () => { const res = await apiClient.post('/dating/survey/rematch'); return res.data; diff --git a/src/lib/api/email.ts b/src/lib/api/email.ts new file mode 100644 index 0000000..3738fec --- /dev/null +++ b/src/lib/api/email.ts @@ -0,0 +1,9 @@ +import client from '@/lib/api/index'; + +export const postEmail = async (email: string) => { + await client.post(`/api/email`, { email }); +}; + +export const putEmail = async (authCode: string) => { + await client.put(`/api/email`, { authCode }); +}; diff --git a/src/lib/api/login.ts b/src/lib/api/login.ts index faca56a..471ed2f 100644 --- a/src/lib/api/login.ts +++ b/src/lib/api/login.ts @@ -1,5 +1,5 @@ import apiClient from './index'; -import { LoginResponse, LoginRequest } from '@/types/user'; +import { LoginResponse, LoginRequest, KakaoIdResponse } from '@/types/user'; /* @desc 임시 아이디 비번: test1 @@ -15,3 +15,8 @@ export const postLogin = async (payload: LoginRequest): Promise { + const res = await apiClient.get('/id'); + return res.data; +}; diff --git a/src/pages/AuthMail.tsx b/src/pages/AuthMail.tsx index 2f37634..c87775d 100644 --- a/src/pages/AuthMail.tsx +++ b/src/pages/AuthMail.tsx @@ -8,20 +8,13 @@ import { EmailForm, AuthCodeForm } from '@/components/authMail'; import { Link } from 'react-router-dom'; import client from '@/lib/api'; import { useToggle } from '@/hooks/common'; +import { postEmail, putEmail } from '@/lib/api/email'; const AuthMail = () => { const [cantMoveNext, setCantMoveNext] = useState(true); const [email, setEmail] = useState(''); const [isErrorModal, onToggleErrorModal] = useToggle(); - const postEmail = async (email: string) => { - await client.post(`/api/email`, { email }); - }; - - const putEmail = async (authCode: string) => { - await client.put(`/api/email`, { authCode }); - }; - const onSubmitAuthCode = async (email: string) => { try { await postEmail(email); diff --git a/src/types/area.ts b/src/types/area.ts new file mode 100644 index 0000000..5e040d6 --- /dev/null +++ b/src/types/area.ts @@ -0,0 +1,4 @@ +export interface AreaResponse { + id: number; + name: string; +} diff --git a/src/types/meeting.ts b/src/types/meeting.ts index af9bf49..6cf6705 100644 --- a/src/types/meeting.ts +++ b/src/types/meeting.ts @@ -13,7 +13,7 @@ export interface Meeting { averageAge: number; ourUniversities: number[]; ourDepartments: Departments[]; - averageHeight: number; // @FIXME: number[] -> number + averageHeight: number; avoidUniversities: number[]; preferUniversities: number[]; preferAge: number[]; diff --git a/src/types/user.ts b/src/types/user.ts index 42dfdf2..1a58765 100644 --- a/src/types/user.ts +++ b/src/types/user.ts @@ -1,10 +1,16 @@ export interface LoginRequest { - password: 'string' | ''; - userName: 'string' | ''; + password: string | ''; + userName: string | ''; } export interface LoginResponse { - accessToken: 'string'; + accessToken: string; +} + +export interface KakaoIdResponse { + app_id: number; + expires_in: number; + id: number; } type MatchStatus = 'WAITING' | 'MATCHED' | 'FAILED' | 'DONE' | 'PAID'; From 664840acbfd78098ddf7d157b1c55c70c33ac86b Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 23 Jul 2022 16:58:47 +0900 Subject: [PATCH 03/28] =?UTF-8?q?feat:=20MBTI=20=EC=98=B5=EC=85=98=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=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/domain/survey/UnitSelector.tsx | 106 ++++++++++++++++++ src/components/domain/survey/index.ts | 2 + src/pages/MyMbtiHeight.tsx | 6 +- src/pages/OurUniversitiesSurvey.tsx | 2 +- 4 files changed, 113 insertions(+), 3 deletions(-) create mode 100644 src/components/domain/survey/UnitSelector.tsx diff --git a/src/components/domain/survey/UnitSelector.tsx b/src/components/domain/survey/UnitSelector.tsx new file mode 100644 index 0000000..d9349d0 --- /dev/null +++ b/src/components/domain/survey/UnitSelector.tsx @@ -0,0 +1,106 @@ +import React, { ChangeEvent, useRef } from 'react'; +import styled from 'styled-components'; +import { DeleteIcon, SearchIcon } from '@/assets/img'; + +interface UnitSelectorProps { + placeholder: string; + searchData: string[]; + selectedResult: string; + setSelectedResult: React.Dispatch>; +} + +const UnitSelector = ({ placeholder, searchData, selectedResult, setSelectedResult }: UnitSelectorProps) => { + const inputRef = useRef(null); + + const handleInputChange = (e: ChangeEvent) => { + const { value } = e.target; + + setSelectedResult(value); + }; + + const handleDeleteClick = () => { + setSelectedResult(''); + }; + + const resetClick = () => { + if (inputRef.current) { + inputRef.current.value = ''; + } + }; + + return ( + <> + + + + {searchData.map((data) => ( + + + + {selectedResult && ( + + + {selectedResult} + + + + )} + + ); +}; + +const SearchWrapper = styled.div` + position: relative; + margin: 45px 0 18px; +`; + +const SearchInput = styled.input` + height: 38px; + width: 100%; + font-size: 14px; + background-color: ${({ theme }) => theme.palette.grayLight}; + border-radius: 100px; + padding: 10px 0 10px 40px; + outline: none; + + &::-webkit-calendar-picker-indicator { + display: none; + } +`; + +const Icon = styled.span<{ icon: string }>` + position: absolute; + background: url(${({ icon }) => icon}) no-repeat; + background-size: contain; + width: 16px; + height: 16px; +`; + +const SearchIconWrapper = styled(Icon)` + top: 11px; + left: 12px; +`; + +const DeleteIconWrapper = styled(Icon)` + top: 8px; + right: 10px; +`; + +const ResultWrapper = styled.ul` + display: flex; + flex-wrap: wrap; + gap: 8px; +`; + +const Result = styled.li` + position: relative; + min-height: 32px; + background-color: ${({ theme }) => theme.palette.grayLight}; + border-radius: 100px; + padding: 7px 33px 7px 14px; + font-size: 14px; +`; + +export default UnitSelector; diff --git a/src/components/domain/survey/index.ts b/src/components/domain/survey/index.ts index 9ca4765..7f035c1 100644 --- a/src/components/domain/survey/index.ts +++ b/src/components/domain/survey/index.ts @@ -3,3 +3,5 @@ export { default as ChooseTwoBox } from './ChooseTwoBox'; export { default as AgeBox } from './AgeBox'; export { default as HeightBox } from './HeightBox'; export { default as SurveyTemplate } from './SurveyTemplate'; +export { default as SearchSelector } from './SearchSelector'; +export { default as UnitSelector } from './UnitSelector'; diff --git a/src/pages/MyMbtiHeight.tsx b/src/pages/MyMbtiHeight.tsx index decb466..01507ee 100644 --- a/src/pages/MyMbtiHeight.tsx +++ b/src/pages/MyMbtiHeight.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { SubTitle } from '@/lib/styles/styledComponents'; -import { SurveyTemplate } from '@/components/domain/survey'; +import { SurveyTemplate, UnitSelector } from '@/components/domain/survey'; import { Input } from '@/components/base'; import { palette } from '@/lib/styles/palette'; import Path from '@/router/Path'; @@ -41,6 +41,8 @@ const MyMbtiHeight = () => { datingNavigate(Path.MyBodySmoke); }; + const mbtis = ['ISTJ', 'ISFJ', 'INFJ', 'INTJ', 'ISTP', 'ISFP', 'INFP', 'INTP', 'ESTP', 'ESFP', 'ENFP', 'ENTP', 'ESTJ', 'ESFJ', 'ENFJ', 'ENTJ']; + return ( { 나의 MBTI 알아보기 - + 본인의 키를 알려주세요. {heightError && '키는 220cm 이하여야 합니다.'} diff --git a/src/pages/OurUniversitiesSurvey.tsx b/src/pages/OurUniversitiesSurvey.tsx index 3ae7c78..f3f14ee 100644 --- a/src/pages/OurUniversitiesSurvey.tsx +++ b/src/pages/OurUniversitiesSurvey.tsx @@ -1,7 +1,7 @@ import React, { useMemo, useState } from 'react'; import { Title } from '@/lib/styles/styledComponents'; import { SurveyTemplate } from '@/components/domain/survey'; -import SearchSelector from '@/components/domain/survey/SearchSelector'; +import { SearchSelector } from '@/components/domain/survey'; import Path from '@/router/Path'; import { useMeetingNavigate } from '@/hooks/common/useNavigate'; import { useMeetingSessionState } from '@/hooks/common'; From 86821e895dc9bda87494b07f7802944cd907073f Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 23 Jul 2022 17:31:11 +0900 Subject: [PATCH 04/28] =?UTF-8?q?feat:=20=EB=AF=B8=ED=8C=85=20=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=20=EB=8F=84=EC=8B=9C=20=ED=95=84=EC=88=98=EA=B0=92?= =?UTF-8?q?=EC=9C=BC=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/pages/AbroadAreasSurvey.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/AbroadAreasSurvey.tsx b/src/pages/AbroadAreasSurvey.tsx index 2c19d46..47fc10d 100644 --- a/src/pages/AbroadAreasSurvey.tsx +++ b/src/pages/AbroadAreasSurvey.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { useMatch } from 'react-router-dom'; import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate'; import { SurveyTemplate } from '@/components/domain/survey'; @@ -25,9 +25,11 @@ const AbroadAreasSurvey = () => { meetingNavigate(Path.ChannelSurvey); }; + const checkDisabled = useMemo(() => (matchMeeting ? abroadAreas.length === 0 : abroadAreasDating.length === 0), []); + return ( Date: Sat, 23 Jul 2022 17:57:46 +0900 Subject: [PATCH 05/28] =?UTF-8?q?Refactor:=20=EC=82=AC=EC=9A=A9=EC=9E=90?= =?UTF-8?q?=EA=B0=80=20=EB=A7=A4=EB=89=B4=20=ED=86=A0=EA=B8=80=20=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EC=A0=84=EA=B9=8C=EC=A7=80=20api=20=ED=98=B8?= =?UTF-8?q?=EC=B6=9C=20=EB=B0=A9=EC=A7=80=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/header/MenuBlock.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx index f835312..87aa1ad 100644 --- a/src/components/header/MenuBlock.tsx +++ b/src/components/header/MenuBlock.tsx @@ -28,8 +28,8 @@ function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) {
{TempUserData.univ}
- - + {isMenu && } + {isMenu && } From 42961d8badc20f7a1d43a4b72b5f6fcbefdf8ff7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= Date: Sat, 23 Jul 2022 18:06:19 +0900 Subject: [PATCH 06/28] =?UTF-8?q?Chore:=20=EA=B8=B0=ED=9A=8D=EC=84=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20text=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/landing/LandingContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/domain/landing/LandingContainer.tsx b/src/components/domain/landing/LandingContainer.tsx index b53690f..fa06bee 100644 --- a/src/components/domain/landing/LandingContainer.tsx +++ b/src/components/domain/landing/LandingContainer.tsx @@ -51,7 +51,7 @@ function LandingContainer() { 시작하기 console.log('응답 수정')}> - 응답 수정하기 + 매칭 결과 확인 )} From 9afd20f5539d2f3654625dd2623ad861870371a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= Date: Sat, 23 Jul 2022 18:07:39 +0900 Subject: [PATCH 07/28] =?UTF-8?q?Chore:=20LandingBtn=20=EB=A7=81=ED=81=AC?= =?UTF-8?q?=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/landing/LandingContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/domain/landing/LandingContainer.tsx b/src/components/domain/landing/LandingContainer.tsx index fa06bee..d854d5e 100644 --- a/src/components/domain/landing/LandingContainer.tsx +++ b/src/components/domain/landing/LandingContainer.tsx @@ -50,7 +50,7 @@ function LandingContainer() { > 시작하기 - console.log('응답 수정')}> + navigate('/matching/meeting')}> 매칭 결과 확인 From 1aae40925570616434648217e37e551e2b36b5d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= Date: Sat, 23 Jul 2022 18:09:21 +0900 Subject: [PATCH 08/28] =?UTF-8?q?Refactor:=20LandingContainer=20=EC=93=B8?= =?UTF-8?q?=EB=AA=A8=EC=97=86=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domain/landing/LandingContainer.tsx | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/src/components/domain/landing/LandingContainer.tsx b/src/components/domain/landing/LandingContainer.tsx index d854d5e..f4debaf 100644 --- a/src/components/domain/landing/LandingContainer.tsx +++ b/src/components/domain/landing/LandingContainer.tsx @@ -1,14 +1,12 @@ import React from 'react'; import { StringLogo, RadiousLogo } from '@/assets/img'; -import { Button, Modal } from '@/components/base'; -import useToggle from '@/hooks/common/useToggle'; +import { Button } from '@/components/base'; import { palette } from '@/lib/styles/palette'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; import { useLoginState } from '@/atoms/userState'; function LandingContainer() { - const [isModal, onToggleModal] = useToggle(); const navigate = useNavigate(); const { isLogin } = useLoginState(); @@ -44,7 +42,6 @@ function LandingContainer() { fullWidth variant={'default'} onClick={() => { - // setIsLogin((prev) => !prev); navigate('/type-of-meeting'); }} > @@ -55,19 +52,6 @@ function LandingContainer() { )} - {isModal && ( - { - console.log('안녕하세요'); - }} - /> - )} ); } From 740159208f82d8b34d66ffd374193fcbb047a5c7 Mon Sep 17 00:00:00 2001 From: choisohyun Date: Sat, 23 Jul 2022 18:11:31 +0900 Subject: [PATCH 09/28] =?UTF-8?q?fix:=20api=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/api/dating.ts | 5 +++++ src/lib/api/email.ts | 4 ++-- src/lib/api/meeting.ts | 10 ++++++++++ src/pages/AuthMail.tsx | 1 - 4 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/lib/api/dating.ts b/src/lib/api/dating.ts index 8c95d10..1336f93 100644 --- a/src/lib/api/dating.ts +++ b/src/lib/api/dating.ts @@ -7,6 +7,11 @@ export const getDatingMatching = async () => { return res.data; }; +export const postDatingMatching = async () => { + const res = await apiClient.post('/dating/matching'); + return res.data; +}; + export const postDatingSurvey = async (payload: Dating) => { const res = await apiClient.post('/dating/survey', payload); return res.data; diff --git a/src/lib/api/email.ts b/src/lib/api/email.ts index 3738fec..1bfba29 100644 --- a/src/lib/api/email.ts +++ b/src/lib/api/email.ts @@ -1,9 +1,9 @@ import client from '@/lib/api/index'; export const postEmail = async (email: string) => { - await client.post(`/api/email`, { email }); + await client.post(`/email`, { email }); }; export const putEmail = async (authCode: string) => { - await client.put(`/api/email`, { authCode }); + await client.put(`/email`, { authCode }); }; diff --git a/src/lib/api/meeting.ts b/src/lib/api/meeting.ts index dde4dd8..1c23385 100644 --- a/src/lib/api/meeting.ts +++ b/src/lib/api/meeting.ts @@ -16,3 +16,13 @@ export const postReMatchMettingSurvey = async () => { const res = await apiClient.post('/meeting/survey/rematch'); return res.data; }; + +export const postMeetingMatching = async () => { + const res = await apiClient.post('/meeting/matching'); + return res.data; +}; + +export const getMeetingMatching = async () => { + const res = await apiClient.get('/meeting/matching'); + return res.data; +}; diff --git a/src/pages/AuthMail.tsx b/src/pages/AuthMail.tsx index c87775d..5a20156 100644 --- a/src/pages/AuthMail.tsx +++ b/src/pages/AuthMail.tsx @@ -6,7 +6,6 @@ import { Title } from '@/lib/styles/styledComponents'; 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'; import { postEmail, putEmail } from '@/lib/api/email'; From ac1590fa5789a5a173870ba2e3bb55b1b3efdaa7 Mon Sep 17 00:00:00 2001 From: choisohyun Date: Sat, 23 Jul 2022 18:12:06 +0900 Subject: [PATCH 10/28] =?UTF-8?q?feat:=20=EC=88=98=EB=8F=99=20=EB=A7=A4?= =?UTF-8?q?=EC=B9=AD=20api=20=EC=97=B0=EA=B2=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domain/matching/MatchingTemplete.tsx | 113 ++++++++++++------ .../domain/matching/buttons/WaitingButton.tsx | 9 +- 2 files changed, 84 insertions(+), 38 deletions(-) diff --git a/src/components/domain/matching/MatchingTemplete.tsx b/src/components/domain/matching/MatchingTemplete.tsx index 907bc36..5e74464 100644 --- a/src/components/domain/matching/MatchingTemplete.tsx +++ b/src/components/domain/matching/MatchingTemplete.tsx @@ -1,6 +1,6 @@ import React, { ReactNode, useEffect, useState } from 'react'; import styled from 'styled-components'; -import { Button } from '@/components/base'; +import { Button, Modal } from '@/components/base'; import { useLocation, useNavigate } from 'react-router-dom'; import { Title } from '@/lib/styles/styledComponents'; import CompleteButton from './buttons/CompleteButton'; @@ -10,6 +10,9 @@ import WaitingButton from './buttons/WaitingButton'; import SuccessButton from './buttons/SuccessButton'; import Path from '@/router/Path'; import { Status } from '@/pages/MatchingPage'; +import { getMeetingMatching, postMeetingMatching } from '@/lib/api/meeting'; +import { getDatingMatching, postDatingMatching } from '@/lib/api/dating'; +import { useToggle } from '@/hooks/common'; interface MatchingTemplateProps { children: ReactNode; @@ -21,47 +24,89 @@ const MatchingTemplete = ({ children, btnName, title, handleStatus }: MatchingTe const location = useLocation(); const [type, setType] = useState('meeting'); const navigate = useNavigate(); + const [isErrorModal, onToggleErrorModal] = useToggle(); + const [errorMessage, setErrorMessage] = useState(''); useEffect(() => { location.pathname.includes('meeting') ? setType('meeting') : setType('dating'); }, [location.pathname]); + const requestRandomMatching = async () => { + try { + type === 'meeting' ? await postMeetingMatching() : await postDatingMatching(); + await fetchMatchingResult(); + } catch (e) { + setErrorMessage(() => (e as Error).message.toString()); + onToggleErrorModal(); + } + }; + + const fetchMatchingResult = async () => { + try { + const response = type === 'meeting' ? await getMeetingMatching() : await getDatingMatching(); + if (response?.message) { + setErrorMessage(() => response.message.toString()); + onToggleErrorModal(); + } else { + handleStatus('pay'); + } + } catch (e) { + setErrorMessage(() => (e as Error).message.toString()); + onToggleErrorModal(); + } + }; + return ( - - {title} - - navigate(Path.MatchingMeeting)} - size="medium" - variant={type === 'meeting' ? 'default' : 'gray'} - fontWeight={type === 'dating' ? 700 : 400} - > - 미팅 - - navigate(Path.MatchingDating)} - size="medium" - variant={type === 'dating' ? 'default' : 'gray'} - fontWeight={type === 'dating' ? 700 : 400} - > - 소개팅 - - -
{children}
- + <> + + {title} - { - { - none: , - waiting: , - success: , - pay: , - end: , - }[btnName] - } + navigate(Path.MatchingMeeting)} + size="medium" + variant={type === 'meeting' ? 'default' : 'gray'} + fontWeight={type === 'dating' ? 700 : 400} + > + 미팅 + + navigate(Path.MatchingDating)} + size="medium" + variant={type === 'dating' ? 'default' : 'gray'} + fontWeight={type === 'dating' ? 700 : 400} + > + 소개팅 + - - +
{children}
+ + + { + { + none: , + waiting: , + success: , + pay: , + end: , + }[btnName] + } + + + + {isErrorModal && ( + { + void 0; + }} + /> + )} + ); }; diff --git a/src/components/domain/matching/buttons/WaitingButton.tsx b/src/components/domain/matching/buttons/WaitingButton.tsx index fa8eefe..a35195d 100644 --- a/src/components/domain/matching/buttons/WaitingButton.tsx +++ b/src/components/domain/matching/buttons/WaitingButton.tsx @@ -1,10 +1,11 @@ import { Button } from '@/components/base'; import React from 'react'; -function WaitingButton() { - const handleClick = () => { - console.log('asd'); - }; +interface WaitingButtonProps { + handleClick: () => Promise; +} + +function WaitingButton({ handleClick }: WaitingButtonProps) { return ( - - + {!disabledFooter && ( + + + + + )} ); From 5380cfc46c485a39ea1246577ca6036b5f246e9c Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 23 Jul 2022 19:55:30 +0900 Subject: [PATCH 13/28] =?UTF-8?q?feat:=20=EC=97=86=EC=9D=84=20=EC=8B=9C=20?= =?UTF-8?q?other=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/AvoidUniversitiesSurvey.tsx | 2 +- src/pages/OurUniversitiesSurvey.tsx | 2 +- src/pages/PreferUniversitiesSurvey.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/AvoidUniversitiesSurvey.tsx b/src/pages/AvoidUniversitiesSurvey.tsx index 1bea504..12ba011 100644 --- a/src/pages/AvoidUniversitiesSurvey.tsx +++ b/src/pages/AvoidUniversitiesSurvey.tsx @@ -46,7 +46,7 @@ const AvoidUniversitiesSurvey = () => { 모두 입력해주세요. { 모두 입력해주세요. { 모두 입력해주세요. Date: Sat, 23 Jul 2022 20:13:31 +0900 Subject: [PATCH 14/28] =?UTF-8?q?mybody,=20mydatecount=20=EB=B0=94?= =?UTF-8?q?=ED=85=80=20=EC=84=B9=EC=85=98=20=EB=A7=88=EC=A7=84=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/pages/MyBodySmoke.tsx | 13 ++++++++++--- src/pages/MyDateCount.tsx | 13 ++++++++++--- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/src/pages/MyBodySmoke.tsx b/src/pages/MyBodySmoke.tsx index 6d3e941..fa97505 100644 --- a/src/pages/MyBodySmoke.tsx +++ b/src/pages/MyBodySmoke.tsx @@ -6,6 +6,7 @@ import { SMOKE_ITEMS } from '@/types/constants/smoke'; import { MYBODY_ITEMS } from '@/types/constants/body'; import { useDatingSessionState } from '@/hooks/common'; import { type Body } from '@/types/dating'; +import styled from 'styled-components'; const MyBodySmoke = () => { const datingNavigate = useDatingNavigate(); @@ -38,11 +39,17 @@ const MyBodySmoke = () => { 본인의 체형을 선택해주세요 - - 혹시 흡연자이신가요? - + + + 혹시 흡연자이신가요? + + ); }; +const BottomWrapper = styled.div` + margin-top: 46px; +`; + export default MyBodySmoke; diff --git a/src/pages/MyDateCount.tsx b/src/pages/MyDateCount.tsx index 8223760..38df637 100644 --- a/src/pages/MyDateCount.tsx +++ b/src/pages/MyDateCount.tsx @@ -6,6 +6,7 @@ import { MY_DOUNT_ITEMS } from '@/types/constants/dcount'; import { SMOKEOK_ITEMS } from '@/types/constants/smoke'; import { useDatingSessionState } from '@/hooks/common'; import { type DateCount } from '@/types/dating'; +import styled from 'styled-components'; const MyDateCount = () => { const datingNavigate = useDatingNavigate(); @@ -38,11 +39,17 @@ const MyDateCount = () => { 본인의 연애 횟수를 선택해주세요. - - 상대가 흡연자여도 괜찮나요? - + + + 상대가 흡연자여도 괜찮나요? + + ); }; +const BottomWrapper = styled.div` + margin-top: 46px; +`; + export default MyDateCount; From 94e921bc7561e889c85ef4f8db59af303274edde Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 23 Jul 2022 20:13:58 +0900 Subject: [PATCH 15/28] =?UTF-8?q?feat:=20=EB=AA=A8=ED=83=9C=EC=86=94?= =?UTF-8?q?=EB=A1=9C=20->=200=ED=9A=8C=20=EC=9D=B4=EB=A6=84=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/types/constants/dcount.ts | 2 +- src/utils/converson/conversionDateCount.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/types/constants/dcount.ts b/src/types/constants/dcount.ts index b614de8..a78b815 100644 --- a/src/types/constants/dcount.ts +++ b/src/types/constants/dcount.ts @@ -33,7 +33,7 @@ export const MY_DOUNT_ITEMS: Readonly[] = [ export const PREFER_DCOUNT_ITEMS = [ { id: 'ZERO', - text: '모태솔로', + text: '0회', name: 'preferDateCount ', }, { diff --git a/src/utils/converson/conversionDateCount.ts b/src/utils/converson/conversionDateCount.ts index 045bab2..16c2a91 100644 --- a/src/utils/converson/conversionDateCount.ts +++ b/src/utils/converson/conversionDateCount.ts @@ -2,6 +2,6 @@ * @description 들어온 DateCount를 적절한 단어로 변경 */ export const conversionDateCount = (dateCount: string) => { - return { ZERO: '모태솔로', ONETWO: '1~2회', THREEFOUR: '3~4회', FIVE: '5회 이상' }[dateCount]; + return { ZERO: '0회', ONETWO: '1~2회', THREEFOUR: '3~4회', FIVE: '5회 이상' }[dateCount]; }; ``; From 28169af4cf2891d3d18c17e8a7d52fea8b570c5f Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 23 Jul 2022 20:18:49 +0900 Subject: [PATCH 16/28] =?UTF-8?q?feat:=20=EC=95=BD=EA=B4=80=EB=8F=99?= =?UTF-8?q?=EC=9D=98=2019=EC=84=B8=20=ED=95=84=EC=88=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 --- src/hooks/agreement/useAgreementCheck.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/agreement/useAgreementCheck.ts b/src/hooks/agreement/useAgreementCheck.ts index 19f5721..3f9d386 100644 --- a/src/hooks/agreement/useAgreementCheck.ts +++ b/src/hooks/agreement/useAgreementCheck.ts @@ -4,7 +4,7 @@ const useAgreementCheck = () => { const [checkedList, setCheckedList] = useState([ { name: 'over19', - text: '만 19세 이상입니다', + text: '(필수) 만 19세 이상입니다', checked: false, }, { From cb91c5445dfadf4d53ed4ccbc11af30cd5607491 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 23 Jul 2022 20:19:28 +0900 Subject: [PATCH 17/28] =?UTF-8?q?fix:=20=EB=8F=84=EC=8B=9C=20->=20?= =?UTF-8?q?=EB=8F=84=EC=8B=9C=EB=AA=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/AbroadAreasSurvey.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/AbroadAreasSurvey.tsx b/src/pages/AbroadAreasSurvey.tsx index 47fc10d..3d9d0a3 100644 --- a/src/pages/AbroadAreasSurvey.tsx +++ b/src/pages/AbroadAreasSurvey.tsx @@ -37,7 +37,7 @@ const AbroadAreasSurvey = () => { handleNextClick={handleNextClick} > - <strong>미팅이 가능한 지역(도시)</strong>을<br /> + <strong>미팅이 가능한 지역(도시명)</strong>을<br /> 모두 알려주세요. Date: Sat, 23 Jul 2022 20:31:38 +0900 Subject: [PATCH 18/28] =?UTF-8?q?feat:=20=EB=A7=A4=EC=9D=BC=EB=B0=A4=2011?= =?UTF-8?q?=EC=8B=9C=20->=2010=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/domain/matching/WaitingBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/domain/matching/WaitingBox.tsx b/src/components/domain/matching/WaitingBox.tsx index 10a50f3..5bd44d0 100644 --- a/src/components/domain/matching/WaitingBox.tsx +++ b/src/components/domain/matching/WaitingBox.tsx @@ -7,7 +7,7 @@ function WaitingBox() { <> - 매칭은 매일밤 11시에 이루어집니다. + 매칭은 매일밤 10시에 이루어집니다.
매칭이 되면 카톡과 이메일로 링크를 보내드릴게요. From 1f473a85d83bc3f6ad0c9060e00ac421d35657b4 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 23 Jul 2022 20:39:00 +0900 Subject: [PATCH 19/28] =?UTF-8?q?feat:=20(=EC=97=86=EC=9D=84=20=EC=8B=9C?= =?UTF-8?q?=20'=EA=B8=B0=ED=83=80'=20=EC=9E=85=EB=A0=A5=20),=20=ED=95=99?= =?UTF-8?q?=EA=B5=90=20=EC=B6=94=EA=B0=80=ED=95=98=EA=B8=B0=20=EB=AC=B8?= =?UTF-8?q?=EA=B5=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/OurUniversitiesSurvey.tsx | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/pages/OurUniversitiesSurvey.tsx b/src/pages/OurUniversitiesSurvey.tsx index 739c8c3..66d7a29 100644 --- a/src/pages/OurUniversitiesSurvey.tsx +++ b/src/pages/OurUniversitiesSurvey.tsx @@ -6,6 +6,8 @@ import Path from '@/router/Path'; import { useMeetingNavigate } from '@/hooks/common/useNavigate'; import { useMeetingSessionState } from '@/hooks/common'; import useUnivLoad from '@/hooks/survey/useUnivLoad'; +import styled from 'styled-components'; +import { palette } from '@/lib/styles/palette'; const OurUniversitiesSurvey = () => { const meetingNavigate = useMeetingNavigate(); @@ -49,14 +51,37 @@ const OurUniversitiesSurvey = () => { 모두 입력해주세요. + + 학교가 없다고 나오나요?{' '} + + 학교 추가하기 + + ); }; +const Anchor = styled.a` + font-weight: 700; + text-decoration: underline; + color: ${palette.primary}; + margin-bottom: 30px; +`; + +const Info = styled.span` + position: absolute; + bottom: 200px; + font-size: 12px; + font-weight: 300; +`; + export default OurUniversitiesSurvey; From 84c0ba46467fa7d2928894d451b15d02c746420b Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 23 Jul 2022 20:55:39 +0900 Subject: [PATCH 20/28] =?UTF-8?q?feat:=20logout=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/Logout.png | Bin 0 -> 604 bytes src/assets/img/index.ts | 1 + src/components/header/MenuBlock.tsx | 55 ++++++++++++++++++++++++---- src/lib/api/login.ts | 6 +++ 4 files changed, 55 insertions(+), 7 deletions(-) create mode 100644 src/assets/img/Logout.png diff --git a/src/assets/img/Logout.png b/src/assets/img/Logout.png new file mode 100644 index 0000000000000000000000000000000000000000..cb9544f923b9e99bd33e81aa53bad1214bbc1b08 GIT binary patch literal 604 zcmV-i0;BzjP) z0#OjhXJyMg7#0Xor~U`2vmLfoK?(Zht)Od!P-p4Vt-9DLitwZh5fQEHLM?Qyzo1)( z4xWNKSmuwuFI*7Wm4$rI4t`-6-5K1E^XARIl}e@33K1Q{W{8izVfk9EmPw^jA5IB! z8{h$E5(l+ftq|P4EXz0W*W?1hDqzN9u?ylPRC`B~qzSjUkN$y%5Vm9zAT(zd?%gde zq!RIXJRb-I47WJ0oO^}{hr_3pO63-Nz8?^N*a>VN zzqjcbA`*$P6VeO)QM#`CapN;A$sDSXR20P$+L#>xNdTl(Rkhf4Ay3h60DN5sfNsZx zRDuEEpXY1<93}P6IClse03X+!0GPNh2LSfqR$)s3xO2+k4#6fPoRLT*p4@V{L*VAW zhZ)PV#&EFtbjlIZm>A6))oN9Bi;J2QS@cGT1`N?tLkL@Jcf7(BG!JpoI40#J?2URr qWMD_IG;t6bvI>9#-aYQ!a()1HZpB7#iR``r0000 void; @@ -18,20 +20,47 @@ const TempUserData = { }; function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) { + const [isErrorModal, onToggleErrorModal] = useToggle(); + const handleLogout = async () => { + try { + await postLogout(); + } catch (e) { + onToggleErrorModal(); + } + }; + return ( <> - - -
{TempUserData.email}
-
{TempUserData.univ}
- + + + +
{TempUserData.email}
+
{TempUserData.univ}
+ + + + + + {isErrorModal && ( + { + void 0; + }} + /> + )} ); } @@ -79,9 +108,14 @@ const NavBarBlock = styled.section<{ isMenu: boolean }>` `; const SidebarHeader = styled.div` display: flex; + justify-content: space-between; margin-bottom: 20px; `; +const UserInfo = styled.div` + display: flex; +`; + const SiteLogo = styled.img` width: 45px; border-radius: 100%; @@ -100,4 +134,11 @@ const UserBox = styled.div` } `; +const LogoutButton = styled.button` + img { + width: 14px; + height: 14px; + } +`; + export default MenuBlock; diff --git a/src/lib/api/login.ts b/src/lib/api/login.ts index 471ed2f..92f79c8 100644 --- a/src/lib/api/login.ts +++ b/src/lib/api/login.ts @@ -20,3 +20,9 @@ export const getKakaoId = async () => { const res = await apiClient.get('/id'); return res.data; }; + +/* @FIXME: 나중에 user.ts로 바꾸기 */ +export const postLogout = async () => { + const res = await apiClient.post('/logout'); + return res.data; +}; From cb8db477983869af1d65b86ed8beab048bd2a49e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=B8?= Date: Sat, 23 Jul 2022 21:03:39 +0900 Subject: [PATCH 21/28] =?UTF-8?q?Feat:=20=EB=B0=94=EB=80=90=20=EB=B0=B1?= =?UTF-8?q?=EC=97=94=EB=93=9C=20=EC=A3=BC=EC=86=8C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 2 +- .env.production | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.env.development b/.env.development index 99d03a8..a1c87cf 100644 --- a/.env.development +++ b/.env.development @@ -1,4 +1,4 @@ VITE_KAKAO_JAVASCRIPT_KEY=02e0caae3e4116da61d734a06528cd86 VITE_KAKAO_RESTAPI_KEY=09bebf5106adf50d6a204a7ac2c22779 VITE_KAKAO_OPEN_URL=https://kauth.kakao.com/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&response_type=code&prompt=login -VITE_SERVER_URL=http://49.50.175.112:8080/api \ No newline at end of file +VITE_SERVER_URL=https://lonessum.com/api \ No newline at end of file diff --git a/.env.production b/.env.production index cfbec19..658cb1b 100644 --- a/.env.production +++ b/.env.production @@ -1,4 +1,4 @@ VITE_KAKAO_JAVASCRIPT_KEY=02e0caae3e4116da61d734a06528cd86 VITE_KAKAO_RESTAPI_KEY=09bebf5106adf50d6a204a7ac2c22779 VITE_KAKAO_OPEN_URL=https://kauth.kakao.com/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&response_type=code&prompt=login -VITE_SERVER_URL=http://49.50.175.112:8080/api +VITE_SERVER_URL=https://lonessum.com/api From b92e7c68d6884ccc9150ca045e44a9eb7dc705c6 Mon Sep 17 00:00:00 2001 From: choisohyun Date: Sat, 23 Jul 2022 21:06:54 +0900 Subject: [PATCH 22/28] =?UTF-8?q?feat:=20=EB=A7=A4=EC=B9=AD=20=EA=B2=B0?= =?UTF-8?q?=EA=B3=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../matching/{EndBox.tsx => DatingEndBox.tsx} | 50 ++----- .../domain/matching/MeetingEndBox.tsx | 130 ++++++++++++++++++ 2 files changed, 143 insertions(+), 37 deletions(-) rename src/components/domain/matching/{EndBox.tsx => DatingEndBox.tsx} (73%) create mode 100644 src/components/domain/matching/MeetingEndBox.tsx diff --git a/src/components/domain/matching/EndBox.tsx b/src/components/domain/matching/DatingEndBox.tsx similarity index 73% rename from src/components/domain/matching/EndBox.tsx rename to src/components/domain/matching/DatingEndBox.tsx index 1215b95..a10a9b5 100644 --- a/src/components/domain/matching/EndBox.tsx +++ b/src/components/domain/matching/DatingEndBox.tsx @@ -1,36 +1,14 @@ -import React from 'react'; import { palette } from '@/lib/styles/palette'; import { schools } from '@/mock/schools'; -import { Meeting } from '@/types/meeting'; import styled from 'styled-components'; import KakaoCopyBox from './KakaoCopyBox'; import { conversionDepartment, conversionDomesticArea, conversionMindset, conversionPlay } from '@/utils/converson'; import { addComma } from '@/utils/addComma'; import { addCommaTail } from '@/utils/addCommaTail'; +import { DatingPartnerSurvey } from '@/types/dating'; +import { memo } from 'react'; -const TempData: Meeting = { - averageHeight: 175, - averageAge: 22, - ourUniversities: [1, 2, 11], - ourDepartments: ['ATHLETIC', 'SCIENCE'], - abroadAreas: [1, 2, 3], - domesticAreas: [], - mindset: 'ALL', - play: 'ALL', - typeOfMeeting: 'ONE', - gender: 'FEMALE', - avoidUniversities: [1, 2, 3, 4], - preferUniversities: [5, 6, 7, 8], - preferAge: [20, 25], - preferHeight: [170, 180], - preferDepartments: ['ATHLETIC', 'SCIENCE'], - isAbroad: false, - channel: 'FRIEND', - agreement: false, - kakaoId: 'asd321', -}; -function EndBox() { - const { kakaoId, averageAge, averageHeight, mindset, ourDepartments, ourUniversities, play } = TempData; +function DatingEndBox({ areas, averageAge, averageHeight, departments, kakaoId, mindset, play, universities }: DatingPartnerSurvey) { return (
@@ -45,7 +23,7 @@ function EndBox() { 학교 - {ourUniversities.map((univ, index) => ( + {ourUniversities.map((univ: string, index: number) => (

{schools[univ].name} {addCommaTail(ourUniversities.length, index)} @@ -67,15 +45,14 @@ function EndBox() { 지역 - {TempData.abroadAreas && - TempData.abroadAreas.map((area, index) => ( -

- {addComma(index)} - {area} -
- ))} + {abroadAreas?.map((area, index) => ( +
+ {addComma(index)} + {area} +
+ ))} - {TempData.domesticAreas?.map((area, index) => ( + {domesticAreas?.map((area, index) => ( {addComma(index)} {conversionDomesticArea(area)}, @@ -106,7 +83,7 @@ function EndBox() { } const MatchingInfoBox = styled.div` width: 100%; - padding: 20px 0px 5px 20px; + padding: 20px 0 5px 20px; background-color: ${palette.grayLight}; border-radius: 4px; font-size: 12px; @@ -126,7 +103,6 @@ const InfoText = styled.div` padding-top: 2px; line-height: 16px; text-align: left; - padding: 2px 0 10px 6px; `; const InfoFlexText = styled(InfoText)` display: flex; @@ -151,4 +127,4 @@ const EtcEle = styled.a` align-items: center; cursor: pointer; `; -export default React.memo(EndBox); +export default memo(DatingEndBox); diff --git a/src/components/domain/matching/MeetingEndBox.tsx b/src/components/domain/matching/MeetingEndBox.tsx new file mode 100644 index 0000000..a10a9b5 --- /dev/null +++ b/src/components/domain/matching/MeetingEndBox.tsx @@ -0,0 +1,130 @@ +import { palette } from '@/lib/styles/palette'; +import { schools } from '@/mock/schools'; +import styled from 'styled-components'; +import KakaoCopyBox from './KakaoCopyBox'; +import { conversionDepartment, conversionDomesticArea, conversionMindset, conversionPlay } from '@/utils/converson'; +import { addComma } from '@/utils/addComma'; +import { addCommaTail } from '@/utils/addCommaTail'; +import { DatingPartnerSurvey } from '@/types/dating'; +import { memo } from 'react'; + +function DatingEndBox({ areas, averageAge, averageHeight, departments, kakaoId, mindset, play, universities }: DatingPartnerSurvey) { + return ( +
+ + + 평균나이 + {averageAge} + + + 평균키 + {averageHeight} + + + 학교 + + {ourUniversities.map((univ: string, index: number) => ( +

+ {schools[univ].name} + {addCommaTail(ourUniversities.length, index)} +

+ ))} + + + + 학과 + + {ourDepartments.map((department, index) => ( +

+ {addComma(index)} + {conversionDepartment(department)} +

+ ))} + + + + 지역 + + {abroadAreas?.map((area, index) => ( +
+ {addComma(index)} + {area} +
+ ))} + + {domesticAreas?.map((area, index) => ( + + {addComma(index)} + {conversionDomesticArea(area)}, + + ))} + + + 마인드셋 + {conversionMindset(mindset)} + + + 술게임 + {conversionPlay(play)} + + + + + + 후기작성 + + | + + 신고하기 + + +
+ ); +} +const MatchingInfoBox = styled.div` + width: 100%; + padding: 20px 0 5px 20px; + background-color: ${palette.grayLight}; + border-radius: 4px; + font-size: 12px; + margin-bottom: 8px; +`; + +const InfoLabel = styled.div` + font-weight: 700; + padding: 2px 2px 10px 6px; + min-width: 60px; + text-align: left; + line-height: 16px; +`; + +const InfoText = styled.div` + font-weight: 400; + padding-top: 2px; + line-height: 16px; + text-align: left; +`; +const InfoFlexText = styled(InfoText)` + display: flex; +`; + +const FlexLine = styled.div` + display: flex; + justify-content: left; +`; +const EtcBox = styled.div` + display: flex; + justify-content: center; + align-items: center; + color: ${palette.explanationColor}; +`; +const EtcEle = styled.a` + font-size: 12px; + display: flex; + width: 100%; + height: 28px; + justify-content: center; + align-items: center; + cursor: pointer; +`; +export default memo(DatingEndBox); From 22339c457542708fa0e5935af551f01e15cef204 Mon Sep 17 00:00:00 2001 From: choisohyun Date: Sat, 23 Jul 2022 21:07:24 +0900 Subject: [PATCH 23/28] =?UTF-8?q?feat:=20=EB=9E=9C=EB=8D=A4=EB=A7=A4?= =?UTF-8?q?=EC=B9=AD=20partner=20survery=20=ED=83=80=EC=9E=85=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 | 4 ++-- src/lib/api/meeting.ts | 4 ++-- src/types/dating.ts | 22 +++++++++++++++++++++- src/types/meeting.ts | 20 ++++++++++++++++++++ 4 files changed, 45 insertions(+), 5 deletions(-) diff --git a/src/lib/api/dating.ts b/src/lib/api/dating.ts index 1336f93..4fada72 100644 --- a/src/lib/api/dating.ts +++ b/src/lib/api/dating.ts @@ -1,9 +1,9 @@ import apiClient from './index'; -import { Dating } from '@/types/dating'; +import { Dating, DatingMatchingResultResponse } from '@/types/dating'; import { AxiosResponse } from 'axios'; export const getDatingMatching = async () => { - const res = await apiClient.get('/dating/matching'); + const res = await apiClient.get('/dating/matching'); return res.data; }; diff --git a/src/lib/api/meeting.ts b/src/lib/api/meeting.ts index 1c23385..3efc04d 100644 --- a/src/lib/api/meeting.ts +++ b/src/lib/api/meeting.ts @@ -1,5 +1,5 @@ import apiClient from './index'; -import { Meeting } from '@/types/meeting'; +import { Meeting, MeetingMatchingResultResponse } from '@/types/meeting'; import { AxiosResponse } from 'axios'; export const postMeetingSurvey = async (payload: Meeting) => { @@ -23,6 +23,6 @@ export const postMeetingMatching = async () => { }; export const getMeetingMatching = async () => { - const res = await apiClient.get('/meeting/matching'); + const res = await apiClient.get('/meeting/matching'); return res.data; }; diff --git a/src/types/dating.ts b/src/types/dating.ts index d410d50..914d4a1 100644 --- a/src/types/dating.ts +++ b/src/types/dating.ts @@ -1,4 +1,4 @@ -import { type Gender, Departments, DomesticAreas, Channel } from './meeting'; +import { type Gender, Departments, DomesticAreas, Channel, Play, MindSet, TypeOfMeeting } from './meeting'; export type Characteristic = 'VERY_QUIET' | 'A_LITTLE_QUIET' | 'VERY_ACTIVE' | 'A_LITTLE_ACTIVE'; export type Body = 'SKINNY' | 'SLIM' | 'MUSCULAR' | 'CHUBBY'; @@ -30,3 +30,23 @@ export interface Dating { agreement: boolean; kakaoId: string; } + +export interface DatingMatchingResultResponse { + code: number; + message: string; + partnerSurvey: DatingPartnerSurvey; +} + +export interface DatingPartnerSurvey { + age: number; + areas: string[]; + body: Body | ''; + characteristic: Characteristic | ''; + dateCount: TypeOfMeeting | ''; + department: Departments | ''; + height: number; + isSmoke: boolean; + kakaoId: string; + university: string; + payDeadline: string; +} diff --git a/src/types/meeting.ts b/src/types/meeting.ts index 6cf6705..bef9efa 100644 --- a/src/types/meeting.ts +++ b/src/types/meeting.ts @@ -1,3 +1,5 @@ +import { Body, Characteristic } from '@/types/dating'; + export type Gender = 'MALE' | 'FEMALE'; export type TypeOfMeeting = 'ONE' | 'TWO' | 'THREE' | 'FOUR'; export type Departments = 'LIBERAL' | 'SCIENCE' | 'ART' | 'ATHLETIC'; @@ -28,3 +30,21 @@ export interface Meeting { agreement: boolean; kakaoId: string; } + +export interface MeetingMatchingResultResponse { + code: number; + message: string; + partnerSurvey: MeetingPartnerSurvey; +} + +export interface MeetingPartnerSurvey { + areas: string[]; + averageAge: number; + averageHeight: number; + departments: Departments[]; + kakaoId: string; + mindset: MindSet | ''; + play: Play | ''; + universities: string; + payDeadline: string; +} From d3889fa1d37e924b46a5a4ca1272c6ffe0ada5bc Mon Sep 17 00:00:00 2001 From: choisohyun Date: Sat, 23 Jul 2022 21:08:03 +0900 Subject: [PATCH 24/28] =?UTF-8?q?feat:=20=EB=A7=A4=EC=B9=AD=20=EA=B2=B0?= =?UTF-8?q?=EA=B3=BC=20api=20=EA=B0=92=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domain/matching/CompleteBox.tsx | 8 ++- .../domain/matching/DatingEndBox.tsx | 67 +++++++------------ .../domain/matching/MatchingTemplete.tsx | 46 +++++++++++-- .../domain/matching/MeetingEndBox.tsx | 24 ++----- src/components/domain/matching/SuccessBox.tsx | 9 ++- src/pages/MatchingPage.tsx | 47 +++++++++---- 6 files changed, 116 insertions(+), 85 deletions(-) diff --git a/src/components/domain/matching/CompleteBox.tsx b/src/components/domain/matching/CompleteBox.tsx index 57f8d78..31ebd14 100644 --- a/src/components/domain/matching/CompleteBox.tsx +++ b/src/components/domain/matching/CompleteBox.tsx @@ -2,12 +2,16 @@ import { Complete } from '@/assets/img'; import React from 'react'; import { MatchingImg, StringEle } from './WaitingBox'; -function CompleteBox() { +interface CompleteBoxProps { + date: string; +} + +function CompleteBox({ date }: CompleteBoxProps) { return ( <> - 양쪽 결제 확인 후 5월 23일 오후 10시에 + 결제 확인 후 {date}에
카톡 아이디가 전달됩니다. diff --git a/src/components/domain/matching/DatingEndBox.tsx b/src/components/domain/matching/DatingEndBox.tsx index a10a9b5..8281dfb 100644 --- a/src/components/domain/matching/DatingEndBox.tsx +++ b/src/components/domain/matching/DatingEndBox.tsx @@ -1,71 +1,52 @@ import { palette } from '@/lib/styles/palette'; -import { schools } from '@/mock/schools'; import styled from 'styled-components'; import KakaoCopyBox from './KakaoCopyBox'; -import { conversionDepartment, conversionDomesticArea, conversionMindset, conversionPlay } from '@/utils/converson'; -import { addComma } from '@/utils/addComma'; -import { addCommaTail } from '@/utils/addCommaTail'; import { DatingPartnerSurvey } from '@/types/dating'; import { memo } from 'react'; -function DatingEndBox({ areas, averageAge, averageHeight, departments, kakaoId, mindset, play, universities }: DatingPartnerSurvey) { +function DatingEndBox({ age, areas, body, characteristic, dateCount, department, height, isSmoke, kakaoId, university }: DatingPartnerSurvey) { return (
- 평균나이 - {averageAge} + 나이 + {age} - 평균키 - {averageHeight} + 키 + {height} 학교 - - {ourUniversities.map((univ: string, index: number) => ( -

- {schools[univ].name} - {addCommaTail(ourUniversities.length, index)} -

- ))} - + {university} 학과 - - {ourDepartments.map((department, index) => ( -

- {addComma(index)} - {conversionDepartment(department)} -

- ))} - + {department} + + + 성격 + {characteristic} + + + 학과 + {department} 지역 - - {abroadAreas?.map((area, index) => ( -
- {addComma(index)} - {area} -
- ))} - - {domesticAreas?.map((area, index) => ( - - {addComma(index)} - {conversionDomesticArea(area)}, - - ))} + {areas.join(',')} + + + 체형 + {body} - 마인드셋 - {conversionMindset(mindset)} + 흡연자 유무 + {isSmoke ? '네' : '아니오'} - 술게임 - {conversionPlay(play)} + 연애 횟수 + {dateCount} diff --git a/src/components/domain/matching/MatchingTemplete.tsx b/src/components/domain/matching/MatchingTemplete.tsx index 5e74464..ede5ca8 100644 --- a/src/components/domain/matching/MatchingTemplete.tsx +++ b/src/components/domain/matching/MatchingTemplete.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, useEffect, useState } from 'react'; +import { ReactNode, useEffect, useState } from 'react'; import styled from 'styled-components'; import { Button, Modal } from '@/components/base'; import { useLocation, useNavigate } from 'react-router-dom'; @@ -13,19 +13,49 @@ import { Status } from '@/pages/MatchingPage'; import { getMeetingMatching, postMeetingMatching } from '@/lib/api/meeting'; import { getDatingMatching, postDatingMatching } from '@/lib/api/dating'; import { useToggle } from '@/hooks/common'; +import { MeetingPartnerSurvey } from '@/types/meeting'; +import { DatingPartnerSurvey } from '@/types/dating'; interface MatchingTemplateProps { - children: ReactNode; + meeting: (matchingResult: MeetingPartnerSurvey) => ReactNode; + dating: (matchingResult: DatingPartnerSurvey) => ReactNode; title: ReactNode; btnName: string; handleStatus: (status: Status) => void; } -const MatchingTemplete = ({ children, btnName, title, handleStatus }: MatchingTemplateProps) => { + +const initMeetingSurvey: MeetingPartnerSurvey = { + areas: [], + averageAge: 0, + averageHeight: 0, + departments: [], + kakaoId: '', + mindset: '', + play: '', + universities: '', +}; + +const initDatingSurvey: DatingPartnerSurvey = { + age: 0, + areas: [], + body: '', + characteristic: '', + dateCount: '', + department: '', + height: 0, + isSmoke: false, + kakaoId: '', + university: '', +}; + +const MatchingTemplete = ({ meeting, dating, btnName, title, handleStatus }: MatchingTemplateProps) => { const location = useLocation(); const [type, setType] = useState('meeting'); const navigate = useNavigate(); const [isErrorModal, onToggleErrorModal] = useToggle(); const [errorMessage, setErrorMessage] = useState(''); + const [meetingMatchingResult, setMeetingMatchingResult] = useState(initMeetingSurvey); + const [datingMatchingResult, setDatingMatchingResult] = useState(initDatingSurvey); useEffect(() => { location.pathname.includes('meeting') ? setType('meeting') : setType('dating'); @@ -44,11 +74,14 @@ const MatchingTemplete = ({ children, btnName, title, handleStatus }: MatchingTe const fetchMatchingResult = async () => { try { const response = type === 'meeting' ? await getMeetingMatching() : await getDatingMatching(); - if (response?.message) { + if (!response?.partnerSurvey) { setErrorMessage(() => response.message.toString()); onToggleErrorModal(); } else { - handleStatus('pay'); + handleStatus('success'); + type === 'meeting' + ? setMeetingMatchingResult(response.partnerSurvey as MeetingPartnerSurvey) + : setDatingMatchingResult(response.partnerSurvey as DatingPartnerSurvey); } } catch (e) { setErrorMessage(() => (e as Error).message.toString()); @@ -78,7 +111,8 @@ const MatchingTemplete = ({ children, btnName, title, handleStatus }: MatchingTe 소개팅 -
{children}
+ {type === 'meeting' && <>{meeting(meetingMatchingResult)}} + {type === 'dating' && <>{dating(datingMatchingResult)}} { diff --git a/src/components/domain/matching/MeetingEndBox.tsx b/src/components/domain/matching/MeetingEndBox.tsx index a10a9b5..7bf3793 100644 --- a/src/components/domain/matching/MeetingEndBox.tsx +++ b/src/components/domain/matching/MeetingEndBox.tsx @@ -7,8 +7,9 @@ import { addComma } from '@/utils/addComma'; import { addCommaTail } from '@/utils/addCommaTail'; import { DatingPartnerSurvey } from '@/types/dating'; import { memo } from 'react'; +import { Departments, MeetingPartnerSurvey, MindSet, Play } from '@/types/meeting'; -function DatingEndBox({ areas, averageAge, averageHeight, departments, kakaoId, mindset, play, universities }: DatingPartnerSurvey) { +function MeetingEndBox({ areas, averageAge, averageHeight, departments, kakaoId, mindset, play, universities }: MeetingPartnerSurvey) { return (
@@ -22,19 +23,12 @@ function DatingEndBox({ areas, averageAge, averageHeight, departments, kakaoId, 학교 - - {ourUniversities.map((univ: string, index: number) => ( -

- {schools[univ].name} - {addCommaTail(ourUniversities.length, index)} -

- ))} - + {universities} 학과 - {ourDepartments.map((department, index) => ( + {departments.map((department, index) => (

{addComma(index)} {conversionDepartment(department)} @@ -45,19 +39,13 @@ function DatingEndBox({ areas, averageAge, averageHeight, departments, kakaoId, 지역 - {abroadAreas?.map((area, index) => ( + {areas?.map((area, index) => (

{addComma(index)} {area}
))} - {domesticAreas?.map((area, index) => ( - - {addComma(index)} - {conversionDomesticArea(area)}, - - ))} 마인드셋 @@ -127,4 +115,4 @@ const EtcEle = styled.a` align-items: center; cursor: pointer; `; -export default memo(DatingEndBox); +export default memo(MeetingEndBox); diff --git a/src/components/domain/matching/SuccessBox.tsx b/src/components/domain/matching/SuccessBox.tsx index b6c9dbd..1ad3807 100644 --- a/src/components/domain/matching/SuccessBox.tsx +++ b/src/components/domain/matching/SuccessBox.tsx @@ -1,13 +1,16 @@ import { MatchingSuccess } from '@/assets/img'; -import React from 'react'; import { MarginTopEle, MatchingImg, StringEle } from './WaitingBox'; -function SuccessBox() { +interface SuccessBoxProps { + payDeadline: string; +} + +function SuccessBox({ payDeadline }: SuccessBoxProps) { return ( <> - 5월 3일 22시까지 1,0000원을 결제해주시면 + {payDeadline}까지 10,000원을 결제해주시면
카톡 아이디가 전달됩니다. diff --git a/src/pages/MatchingPage.tsx b/src/pages/MatchingPage.tsx index 6562db6..9cdbe34 100644 --- a/src/pages/MatchingPage.tsx +++ b/src/pages/MatchingPage.tsx @@ -1,5 +1,4 @@ import CompleteBox from '@/components/domain/matching/CompleteBox'; -import EndBox from '@/components/domain/matching/EndBox'; import MatchingStateTitle from '@/components/domain/matching/MatchingStateTitle'; import MatchingTemplete from '@/components/domain/matching/MatchingTemplete'; import SuccessBox from '@/components/domain/matching/SuccessBox'; @@ -7,6 +6,10 @@ import WaitingBox from '@/components/domain/matching/WaitingBox'; import { Contents } from '@/lib/styles/styledComponents'; import React, { useState } from 'react'; import styled from 'styled-components'; +import { MeetingPartnerSurvey } from '@/types/meeting'; +import { DatingPartnerSurvey } from '@/types/dating'; +import MeetingEndBox from '@/components/domain/matching/MeetingEndBox'; +import DatingEndBox from '@/components/domain/matching/DatingEndBox'; export type Status = 'none' | 'waiting' | 'success' | 'pay' | 'end'; @@ -17,19 +20,37 @@ const MatchingPage = () => { return ( <> - - - { + ( + { - none: <>, - waiting: , - success: , - pay: , - end: , - }[status] - } - - + { + none: <>, + waiting: , + success: , + pay: , + end: , + }[status] + } + + )} + dating={(matchingResult: DatingPartnerSurvey) => ( + + { + { + none: <>, + waiting: , + success: , + pay: , + end: , + }[status] + } + + )} + > ); }; From 1344954948360c9da701af089aec1412051847e0 Mon Sep 17 00:00:00 2001 From: Jiyoung Kim Date: Sat, 23 Jul 2022 21:13:57 +0900 Subject: [PATCH 25/28] =?UTF-8?q?feat:=20=ED=83=88=ED=87=B4=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/header/MenuBlock.tsx | 44 +++++++++++++++++++++++++++-- src/lib/api/login.ts | 5 ++++ 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/src/components/header/MenuBlock.tsx b/src/components/header/MenuBlock.tsx index 61322dc..8e647bd 100644 --- a/src/components/header/MenuBlock.tsx +++ b/src/components/header/MenuBlock.tsx @@ -1,10 +1,10 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Logo, Logout } from '@/assets/img'; import { palette } from '@/lib/styles/palette'; import styled from 'styled-components'; import DatingInfoBox from './DatingInfoBox'; import MeetingInfoBox from './MeetingInfoBox'; -import { postLogout } from '@/lib/api/login'; +import { postLogout, postWithdrawal } from '@/lib/api/login'; import { useToggle } from '@/hooks/common'; import { Modal } from '../base'; interface MenuBlockProps { @@ -20,7 +20,10 @@ const TempUserData = { }; function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) { + const [isModal, onToggleModal] = useToggle(); + const [isConfirm, setConfirm] = useState(false); const [isErrorModal, onToggleErrorModal] = useToggle(); + const handleLogout = async () => { try { await postLogout(); @@ -29,6 +32,22 @@ function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) { } }; + const handleWithdrawal = async () => { + try { + if (isConfirm) { + await postWithdrawal(); + } + } catch (e) { + onToggleErrorModal(); + } + }; + + useEffect(() => { + if (isConfirm) { + handleWithdrawal(); + } + }, [isConfirm]); + return ( <> @@ -46,8 +65,21 @@ function MenuBlock({ isMenu, onToggleMenu }: MenuBlockProps) { + 탈퇴하기 + {isModal && ( + setConfirm(true)} + /> + )} {isErrorModal && ( { const res = await apiClient.post('/logout'); return res.data; }; + +export const postWithdrawal = async () => { + const res = await apiClient.post('/withdrawal'); + return res.data; +}; From 7d0f4282f9affdc506fe030394e1bc9e9674085a Mon Sep 17 00:00:00 2001 From: choisohyun Date: Sat, 23 Jul 2022 21:35:40 +0900 Subject: [PATCH 26/28] =?UTF-8?q?feat:=20useCountdown=20hook=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/components/authMail/AuthCodeForm.tsx | 4 +- src/hooks/common/index.ts | 1 + src/hooks/common/useAuthNumber.ts | 38 +++++++++++++++++++ src/hooks/common/useCountdown.ts | 47 +++++++++++++----------- src/hooks/common/useDateLabel.ts | 11 ++++++ 5 files changed, 78 insertions(+), 23 deletions(-) create mode 100644 src/hooks/common/useAuthNumber.ts create mode 100644 src/hooks/common/useDateLabel.ts diff --git a/src/components/authMail/AuthCodeForm.tsx b/src/components/authMail/AuthCodeForm.tsx index f863f22..de90f22 100644 --- a/src/components/authMail/AuthCodeForm.tsx +++ b/src/components/authMail/AuthCodeForm.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; 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 useAuthNumber from '@/hooks/common/useAuthNumber'; import styled from 'styled-components'; import { useToggle } from '@/hooks/common'; @@ -12,7 +12,7 @@ interface AuthCodeFormProps { } const AuthCodeForm = ({ email, onCheckAuthCode }: AuthCodeFormProps) => { - const { minutes, seconds, setTarget } = useCountdown(0); + const { minutes, seconds, setTarget } = useAuthNumber(0); const [isErrorModal, onToggleErrorModal] = useToggle(); const { values, errors, handleSubmit, handleChange } = useForm({ initialValues: { diff --git a/src/hooks/common/index.ts b/src/hooks/common/index.ts index 3652b60..e8d768f 100644 --- a/src/hooks/common/index.ts +++ b/src/hooks/common/index.ts @@ -1,5 +1,6 @@ export { default as useForm } from './useForm'; export { default as useCountdown } from './useCountdown'; +export { default as useAuthNumber } from './useAuthNumber'; export { default as useToggle } from './useToggle'; export { default as useSesstionStorage } from './useSesstionStorage'; export { default as useMeetingSessionState } from './useMeetingSessionState'; diff --git a/src/hooks/common/useAuthNumber.ts b/src/hooks/common/useAuthNumber.ts new file mode 100644 index 0000000..88e044c --- /dev/null +++ b/src/hooks/common/useAuthNumber.ts @@ -0,0 +1,38 @@ +import { useState, useEffect } from 'react'; + +function useAuthNumber(targetSeconds: number) { + const [target, setTarget] = useState(targetSeconds); + const [minutes, setMinutes] = useState('0'); + const [seconds, setSeconds] = useState('00'); + + useEffect(() => { + // @NOTE: 비동기라 1개씩 차이나서 0이 아닌 1 이상일 때만 interval + if (target > 1) { + const intervalId = setInterval(() => { + setTarget((prev) => prev - 1); + }, 1000); + return () => clearInterval(intervalId); + } + }, [target]); + + useEffect(() => { + const handleCountDown = (target: number) => { + const minutes = Math.floor(target / 60); + const seconds = Math.floor(target % 60); + setMinutes(String(minutes)); + setSeconds(getLiteralTime(seconds)); + }; + handleCountDown(target - 1); + }, [target]); + return { minutes, seconds, setTarget }; +} + +const getLiteralTime = (time: number) => { + if (time >= 10) { + return String(time); + } + + return `0${time}`; +}; + +export default useAuthNumber; diff --git a/src/hooks/common/useCountdown.ts b/src/hooks/common/useCountdown.ts index ac73fa6..81e0b77 100644 --- a/src/hooks/common/useCountdown.ts +++ b/src/hooks/common/useCountdown.ts @@ -1,32 +1,37 @@ import { useState, useEffect } from 'react'; -function useCountdown(targetSeconds: number) { - const [target, setTarget] = useState(targetSeconds); - const [minutes, setMinutes] = useState('0'); - const [seconds, setSeconds] = useState('00'); +function useCountdown(targetString: string) { + const [DDHHMMSS, setDDHHMMSS] = useState<[string, string, string, string]>(['00', '00', '00', '00']); useEffect(() => { - // @NOTE: 비동기라 1개씩 차이나서 0이 아닌 1 이상일 때만 interval - if (target > 1) { - const intervalId = setInterval(() => { - setTarget((prev) => prev - 1); - }, 1000); - return () => clearInterval(intervalId); - } - }, [target]); + const handleCountDown = () => { + const currentDate = new Date(); + const targetDate = new Date(targetString).getTime(); + const gap = targetDate - currentDate.getTime(); + if (gap >= 0) { + const gapDays = Math.floor(gap / DAY); + const gapHours = Math.floor((gap % DAY) / HOURS); + const gapMinutes = Math.floor((gap % HOURS) / MINUTES); + const gapSeconds = Math.floor((gap % MINUTES) / SECONDS); - useEffect(() => { - const handleCountDown = (target: number) => { - const minutes = Math.floor(target / 60); - const seconds = Math.floor(target % 60); - setMinutes(String(minutes)); - setSeconds(getLiteralTime(seconds)); + setDDHHMMSS([getLiteralTime(gapDays), getLiteralTime(gapHours), getLiteralTime(gapMinutes), getLiteralTime(gapSeconds)]); + } }; - handleCountDown(target - 1); - }, [target]); - return { minutes, seconds, setTarget }; + + const intervalId = setInterval(() => { + handleCountDown(); + }, 1000); + + return () => clearInterval(intervalId); + }, [targetString]); + return DDHHMMSS; } +const SECONDS = 1000; +const MINUTES = SECONDS * 60; +const HOURS = MINUTES * 60; +const DAY = HOURS * 24; + const getLiteralTime = (time: number) => { if (time >= 10) { return String(time); diff --git a/src/hooks/common/useDateLabel.ts b/src/hooks/common/useDateLabel.ts new file mode 100644 index 0000000..fa31444 --- /dev/null +++ b/src/hooks/common/useDateLabel.ts @@ -0,0 +1,11 @@ +function useDateParser(date: string) { + const parseDate = new Date(date); + + const month = parseDate.getMonth() + 1; + const day = parseDate.getDate(); + const hour = parseDate.getHours() + 1; + + return `${month}월 ${day}일 ${hour}시`; +} + +export default useDateParser; From 65ecd7d0c4d6888f1345d6323c094b47d1d234a7 Mon Sep 17 00:00:00 2001 From: choisohyun Date: Sat, 23 Jul 2022 21:35:57 +0900 Subject: [PATCH 27/28] =?UTF-8?q?feat:=20useDateLabel=20hook=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/hooks/common/useDateLabel.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/common/useDateLabel.ts b/src/hooks/common/useDateLabel.ts index fa31444..fc53caf 100644 --- a/src/hooks/common/useDateLabel.ts +++ b/src/hooks/common/useDateLabel.ts @@ -1,4 +1,4 @@ -function useDateParser(date: string) { +function useDateLabel(date: string) { const parseDate = new Date(date); const month = parseDate.getMonth() + 1; @@ -8,4 +8,4 @@ function useDateParser(date: string) { return `${month}월 ${day}일 ${hour}시`; } -export default useDateParser; +export default useDateLabel; From c546b76defc66a919da7d647e211f27481d88bf2 Mon Sep 17 00:00:00 2001 From: choisohyun Date: Sat, 23 Jul 2022 21:36:19 +0900 Subject: [PATCH 28/28] =?UTF-8?q?feat:=20=EC=8B=9C=EA=B0=84=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=A7=A4=EC=B9=AD=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/domain/matching/CompleteBox.tsx | 5 ++++- src/components/domain/matching/DatingEndBox.tsx | 7 ++++--- src/components/domain/matching/SuccessBox.tsx | 11 +++++++++-- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/components/domain/matching/CompleteBox.tsx b/src/components/domain/matching/CompleteBox.tsx index 31ebd14..4ffc5fb 100644 --- a/src/components/domain/matching/CompleteBox.tsx +++ b/src/components/domain/matching/CompleteBox.tsx @@ -1,17 +1,20 @@ import { Complete } from '@/assets/img'; import React from 'react'; import { MatchingImg, StringEle } from './WaitingBox'; +import useDateLabel from '@/hooks/common/useDateLabel'; interface CompleteBoxProps { date: string; } function CompleteBox({ date }: CompleteBoxProps) { + const dateLabel = useDateLabel(date); + return ( <> - 결제 확인 후 {date}에 + 결제 확인 후 {dateLabel}에
카톡 아이디가 전달됩니다. diff --git a/src/components/domain/matching/DatingEndBox.tsx b/src/components/domain/matching/DatingEndBox.tsx index 8281dfb..2451dda 100644 --- a/src/components/domain/matching/DatingEndBox.tsx +++ b/src/components/domain/matching/DatingEndBox.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import KakaoCopyBox from './KakaoCopyBox'; import { DatingPartnerSurvey } from '@/types/dating'; import { memo } from 'react'; +import { conversionBody, conversionCharacter, conversionDateCount } from '@/utils/converson'; function DatingEndBox({ age, areas, body, characteristic, dateCount, department, height, isSmoke, kakaoId, university }: DatingPartnerSurvey) { return ( @@ -26,7 +27,7 @@ function DatingEndBox({ age, areas, body, characteristic, dateCount, department, 성격 - {characteristic} + {conversionCharacter(characteristic)} 학과 @@ -38,7 +39,7 @@ function DatingEndBox({ age, areas, body, characteristic, dateCount, department, 체형 - {body} + {conversionBody(body)} 흡연자 유무 @@ -46,7 +47,7 @@ function DatingEndBox({ age, areas, body, characteristic, dateCount, department, 연애 횟수 - {dateCount} + {conversionDateCount(dateCount)} diff --git a/src/components/domain/matching/SuccessBox.tsx b/src/components/domain/matching/SuccessBox.tsx index 1ad3807..a5fe0be 100644 --- a/src/components/domain/matching/SuccessBox.tsx +++ b/src/components/domain/matching/SuccessBox.tsx @@ -1,21 +1,28 @@ import { MatchingSuccess } from '@/assets/img'; import { MarginTopEle, MatchingImg, StringEle } from './WaitingBox'; +import { useCountdown } from '@/hooks/common'; +import useDateLabel from '@/hooks/common/useDateLabel'; interface SuccessBoxProps { payDeadline: string; } function SuccessBox({ payDeadline }: SuccessBoxProps) { + const [days, hours, minutes, seconds] = useCountdown(payDeadline); + const dateLabel = useDateLabel(payDeadline); + return ( <> - {payDeadline}까지 10,000원을 결제해주시면 + {dateLabel}까지 10,000원을 결제해주시면
카톡 아이디가 전달됩니다. - 남은 시간: 1일 01시가 12분 33초 + + 남은 시간: {days}일 {hours}시간 {minutes}분 {seconds}초 + );