Merge pull request #168 from YAPP-Github/dev

Release 0.1.7

.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
+VITE_SERVER_URL=https://lonessum.com/api

.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=https://lonessum.com/api

src/assets/img/index.ts

@@ -11,3 +11,4 @@ export { default as Waiting } from './Waiting.png';
 export { default as Complete } from './Complete.png';
 export { default as CopyIcon } from './CopyIcon.png';
 export { default as TripleLineMenu } from './TripleLineMenu.png';
+export { default as Logout } from './Logout.png';

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: {

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,30 +42,16 @@ function LandingContainer() {
             fullWidth
             variant={'default'}
             onClick={() => {
-              // setIsLogin((prev) => !prev);
               navigate('/type-of-meeting');
             }}
           >
             시작하기
           </LandingBtn>
-          <LandingBtn size="medium" fontWeight={700} fullWidth variant={'grayBlack'} onClick={() => console.log('응답 수정')}>
-            응답 수정하기
+          <LandingBtn size="medium" fontWeight={700} fullWidth variant={'grayBlack'} onClick={() => navigate('/matching/meeting')}>
+            매칭 결과 확인
           </LandingBtn>
         </BtnBox>
       )}
-      {isModal && (
-        <Modal
-          width={200}
-          height={140}
-          bottonName="확인"
-          title="런칭 준비중입니다!"
-          text="조금만 더 기다려주세요 😔"
-          onToggleModal={onToggleModal}
-          onClick={() => {
-            console.log('안녕하세요');
-          }}
-        />
-      )}
     </Container>
   );
 }

src/components/domain/matching/CompleteBox.tsx

@@ -1,13 +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);
 
-function CompleteBox() {
   return (
     <>
       <MatchingImg src={Complete} alt="매칭 완료 이미지" />
       <StringEle>
-        <strong>양쪽 결제 확인 후 5월 23일 오후 10시에</strong>
+        <strong>결제 확인 후 {dateLabel}에</strong>
         <br />
         카톡 아이디가 전달됩니다.
       </StringEle>

src/components/domain/matching/DatingEndBox.tsx

@@ -0,0 +1,112 @@
+import { palette } from '@/lib/styles/palette';
+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 (
+    <div>
+      <MatchingInfoBox>
+        <FlexLine>
+          <InfoLabel>나이</InfoLabel>
+          <InfoText>{age}</InfoText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>키</InfoLabel>
+          <InfoText>{height}</InfoText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>학교</InfoLabel>
+          <InfoText>{university}</InfoText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>학과</InfoLabel>
+          <InfoFlexText>{department}</InfoFlexText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>성격</InfoLabel>
+          <InfoText>{conversionCharacter(characteristic)}</InfoText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>학과</InfoLabel>
+          <InfoFlexText>{department}</InfoFlexText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>지역</InfoLabel>
+          <InfoText>{areas.join(',')}</InfoText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>체형</InfoLabel>
+          <InfoText>{conversionBody(body)}</InfoText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>흡연자 유무</InfoLabel>
+          <InfoText>{isSmoke ? '네' : '아니오'}</InfoText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>연애 횟수</InfoLabel>
+          <InfoText>{conversionDateCount(dateCount)}</InfoText>
+        </FlexLine>
+      </MatchingInfoBox>
+      <KakaoCopyBox kakaoId={kakaoId} />
+      <EtcBox>
+        <EtcEle href="https://docs.google.com/forms/d/e/1FAIpQLSeSnI-tB9acPtCepl-FM8cCTF-uezGOJ5SjwFOdQ6DT92xjmQ/viewform" target="_blank">
+          후기작성
+        </EtcEle>
+        |
+        <EtcEle href="https://docs.google.com/forms/d/e/1FAIpQLSfTSBwk6bb0ywTBoHu4cZM1gV8DN0OjMB4jVFvdzbYDrjnJdg/viewform" target="_blank">
+          신고하기
+        </EtcEle>
+      </EtcBox>
+    </div>
+  );
+}
+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);