Merge pull request #113 from YAPP-Github/dev

Release 0.1.2

.env.development

@@ -1,3 +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

package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@types/styled-components": "^5.1.25",
+    "axios": "^0.27.2",
+    "qs": "^6.11.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
@@ -19,6 +21,7 @@
   },
   "devDependencies": {
     "@honkhonk/vite-plugin-svgr": "^1.1.0",
+    "@types/qs": "^6.9.7",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.23.0",

src/assets/img/index.ts

@@ -10,3 +10,4 @@ export { default as MatchingSuccess } from './MatchingSuccess.png';
 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';

src/atoms/datingState.ts

@@ -35,7 +35,7 @@ const INITIAL_DATING_STATE: Dating = {
 };
 
 const datingState = atom<Dating>({
-  key: 'dating/datingState',
+  key: 'datingState',
   default: INITIAL_DATING_STATE,
   effects_UNSTABLE: [persistAtom],
 });

src/atoms/meetingState.ts

@@ -29,7 +29,7 @@ const INITIAL_MEETING_STATE: Meeting = {
   kakaoId: '',
 };
 
-const meetingState = atom<Meeting>({
+export const meetingState = atom<Meeting>({
   key: 'meetingState',
   default: INITIAL_MEETING_STATE,
   effects_UNSTABLE: [persistAtom],

src/components/base/CheckBox.tsx

@@ -4,19 +4,24 @@ import styled from 'styled-components';
 
 interface CheckBoxProps extends React.InputHTMLAttributes<HTMLInputElement> {
   text: string;
-
+  isMulti?: boolean;
   /**
    * important: 전체동의에서 쓸것, true일시 글씨크기,fontweight커짐
    */
   impotrant?: boolean;
 }
 
-function CheckBox({ text, impotrant = false, ...rest }: CheckBoxProps) {
-  return (
+function CheckBox({ isMulti = true, text, impotrant = false, ...rest }: CheckBoxProps) {
+  return isMulti ? (
     <StyledLabel htmlFor={text}>
       <StyledInput type="checkbox" id={text} name={text} {...rest} />
       <StyleText impotrant={impotrant}>{text}</StyleText>
     </StyledLabel>
+  ) : (
+    <StyledLabel htmlFor={text}>
+      <StyledInput type="radio" id={text} name={text} {...rest} />
+      <StyleText impotrant={impotrant}>{text}</StyleText>
+    </StyledLabel>
   );
 }
 

src/components/base/Input.tsx

@@ -31,7 +31,6 @@ const Input = ({ width = '100%', height = '38px', focusColor = palette.primary,
 
   useEffect(() => {
     if (inputRef.current && isFocus) {
-      console.log(isFocus, 'isFocus');
       inputRef.current.focus();
     }
   }, [isFocus]);

src/components/domain/landing/LandingContainer.tsx

@@ -20,6 +20,8 @@ function LandingContainer() {
 
     const loginUrl = import.meta.env.VITE_KAKAO_OPEN_URL.replace('{clientId}', clientId).replace('{redirectUri}', redirectUri);
     window.location.href = loginUrl;
+    // const code = new URL(window.location.href).searchParams.get('code');
+    // console.log(code);
   };
 
   return (
@@ -50,9 +52,9 @@ function LandingContainer() {
           >
             시작하기
           </LandingBtn>
-          {/*<LandingBtn size="medium" fontWeight={700} fullWidth variant={'grayBlack'} onClick={() => setIsLogin((prev) => !prev)}>*/}
-          {/*  응답 수정하기*/}
-          {/*</LandingBtn>*/}
+          <LandingBtn size="medium" fontWeight={700} fullWidth variant={'grayBlack'} onClick={() => setIsLogin((prev) => !prev)}>
+            응답 수정하기
+          </LandingBtn>
         </BtnBox>
       )}
       {isModal && (

src/components/domain/matching/EndBox.tsx

@@ -4,10 +4,12 @@ import { schools } from '@/mock/schools';
 import { Meeting } from '@/types/meeting';
 import styled from 'styled-components';
 import KakaoCopyBox from './KakaoCopyBox';
-import AddCommaFunction from '@/hooks/common/AddCommaFunction';
+import { conversionDepartment, conversionDomesticArea, conversionMindset, conversionPlay } from '@/utils/converson';
+import { addComma } from '@/utils/addComma';
+import { addCommaTail } from '@/utils/addCommaTail';
 
 const TempData: Meeting = {
-  averageHeight: [170, 175],
+  averageHeight: 175,
   averageAge: 22,
   ourUniversities: [1, 2, 11],
   ourDepartments: ['ATHLETIC', 'SCIENCE'],
@@ -29,7 +31,6 @@ const TempData: Meeting = {
 };
 function EndBox() {
   const { kakaoId, averageAge, averageHeight, mindset, ourDepartments, ourUniversities, play } = TempData;
-  const { addComma, addTailComma } = AddCommaFunction();
   return (
     <div>
       <MatchingInfoBox>
@@ -39,17 +40,15 @@ function EndBox() {
         </FlexLine>
         <FlexLine>
           <InfoLabel>평균키</InfoLabel>
-          <InfoText>
-            {averageHeight[0]} ~ {averageHeight[1]}
-          </InfoText>
+          <InfoText>{averageHeight}</InfoText>
         </FlexLine>
         <FlexLine>
           <InfoLabel>학교</InfoLabel>
           <InfoText>
             {ourUniversities.map((univ, index) => (
               <p key={univ}>
                 {schools[univ].name}
-                {addTailComma(ourUniversities.length, index)}
+                {addCommaTail(ourUniversities.length, index)}
               </p>
             ))}
           </InfoText>
@@ -60,7 +59,7 @@ function EndBox() {
             {ourDepartments.map((department, index) => (
               <p key={`${department}_${index}`}>
                 {addComma(index)}
-                {{ LIBERAL: '문과', SCIENCE: '이과', ATHLETIC: '체육', ART: '예술' }[department]}
+                {conversionDepartment(department)}
               </p>
             ))}
           </InfoFlexText>
@@ -79,17 +78,17 @@ function EndBox() {
           {TempData.domesticAreas?.map((area, index) => (
             <InfoFlexText key={`${area}_${index}`}>
               {addComma(index)}
-              {{ ICN: '인천', SNW: '서북', SNE: '동북', SSW: '서남', SSE: '동서', GN: '경기 북부', GS: '경기 남부' }[area]},
+              {conversionDomesticArea(area)},
             </InfoFlexText>
           ))}
         </FlexLine>
         <FlexLine>
           <InfoLabel>마인드셋</InfoLabel>
-          <InfoText>{{ ALL: '친구랑 노는, 설레는 둘 다', FRIEND: '친구랑 노는 느낌', LOVE: '설레는 느낌' }[mindset]}</InfoText>
+          <InfoText>{conversionMindset(mindset)}</InfoText>
         </FlexLine>
         <FlexLine>
           <InfoLabel>술게임</InfoLabel>
-          <InfoText>{{ ALL: '술게임, 얘기하면서 둘 다', GAME: '술게임 할래요!', TALK: '얘기하면서 놀래요.' }[play]}</InfoText>
+          <InfoText>{conversionPlay(play)}</InfoText>
         </FlexLine>
       </MatchingInfoBox>
       <KakaoCopyBox kakaoId={kakaoId} />

src/components/domain/matching/MatchingTemplete.tsx

@@ -1,48 +1,62 @@
-import React, { MouseEventHandler, ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button } from '@/components/base';
-import UserHeader from './UserHeader';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Title } from '@/lib/styles/styledComponents';
+import CompleteButton from './buttons/CompleteButton';
+import EndButton from './buttons/EndButton';
+import NoneButton from './buttons/NoneButton';
+import WaitingButton from './buttons/WaitingButton';
+import SuccessButton from './buttons/SuccessButton';
+import Path from '@/router/Path';
 
 interface MatchingTemplateProps {
   children: ReactNode;
-  handleClick?: MouseEventHandler<HTMLButtonElement>;
-  IsDisable: boolean;
   title: ReactNode;
   btnName: string;
 }
-const MatchingTemplete = ({ children, handleClick, IsDisable, btnName, title }: MatchingTemplateProps) => {
+const MatchingTemplete = ({ children, btnName, title }: MatchingTemplateProps) => {
   const location = useLocation();
   const [type, setType] = useState('meeting');
+  const navigate = useNavigate();
+
   useEffect(() => {
     location.pathname.includes('meeting') ? setType('meeting') : setType('dating');
   }, [location.pathname]);
 
   return (
     <TemplateBlock>
-      <UserHeader />
       <Title>{title}</Title>
       <ButtonWrapper>
-        <TypeButton onClick={handleClick} size="medium" variant={type === 'meeting' ? 'default' : 'gray'} fontWeight={type === 'dating' ? 700 : 400}>
+        <TypeButton
+          onClick={() => navigate(Path.MatchingMeeting)}
+          size="medium"
+          variant={type === 'meeting' ? 'default' : 'gray'}
+          fontWeight={type === 'dating' ? 700 : 400}
+        >
           미팅
         </TypeButton>
-        <TypeButton onClick={handleClick} size="medium" variant={type === 'dating' ? 'default' : 'gray'} fontWeight={type === 'dating' ? 700 : 400}>
+        <TypeButton
+          onClick={() => navigate(Path.MatchingDating)}
+          size="medium"
+          variant={type === 'dating' ? 'default' : 'gray'}
+          fontWeight={type === 'dating' ? 700 : 400}
+        >
           소개팅
         </TypeButton>
       </ButtonWrapper>
       <div>{children}</div>
       <NavigationWrapper>
         <ButtonWrapper>
-          <Button
-            onClick={handleClick}
-            size="medium"
-            disabled={IsDisable}
-            variant={IsDisable ? 'gray' : 'default'}
-            fontWeight={IsDisable ? 400 : 700}
-          >
-            {btnName}
-          </Button>
+          {
+            {
+              none: <NoneButton />,
+              waiting: <WaitingButton />,
+              success: <SuccessButton />,
+              pay: <CompleteButton />,
+              end: <EndButton />,
+            }[btnName]
+          }
         </ButtonWrapper>
       </NavigationWrapper>
     </TemplateBlock>
@@ -51,7 +65,7 @@ const MatchingTemplete = ({ children, handleClick, IsDisable, btnName, title }:
 
 const TemplateBlock = styled.section`
   position: relative;
-  height: 100%;
+  height: calc(100% - 56px);
   margin: 0 8px;
 `;
 

src/components/domain/matching/buttons/CompleteButton.tsx

@@ -0,0 +1,20 @@
+import { Button } from '@/components/base';
+import { palette } from '@/lib/styles/palette';
+import React from 'react';
+import styled from 'styled-components';
+
+function CompleteButton() {
+  return (
+    <ButtonStyled size="medium" variant="grayBlack">
+      이미 결제를 완료하였습니다.
+    </ButtonStyled>
+  );
+}
+
+const ButtonStyled = styled(Button)`
+  color: white;
+  font-weight: 700;
+  background-color: ${palette.disableColor};
+`;
+
+export default CompleteButton;

src/components/domain/matching/buttons/EndButton.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@/components/base';
+import React from 'react';
+
+function EndButton() {
+  const handleClick = () => {
+    console.log('asd');
+  };
+  return (
+    <Button onClick={handleClick} size="medium" variant={'kakao'}>
+      <strong>카카오페이</strong>로 간편하고 안전하게 결제
+    </Button>
+  );
+}
+
+export default EndButton;

src/components/domain/matching/buttons/NoneButton.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@/components/base';
+import React from 'react';
+
+function NoneButton() {
+  const handleClick = () => {
+    console.log('asd');
+  };
+  return (
+    <Button onClick={handleClick} size="medium" variant={'default'}>
+      설문하러 가기
+    </Button>
+  );
+}
+
+export default NoneButton;

src/components/domain/matching/buttons/SuccessButton.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@/components/base';
+import React from 'react';
+
+function SuccessButton() {
+  const handleClick = () => {
+    console.log('asd');
+  };
+  return (
+    <Button onClick={handleClick} size="medium" variant={'kakao'}>
+      <strong>카카오페이</strong>로 간편하고 안전하게 결제
+    </Button>
+  );
+}
+
+export default SuccessButton;

src/components/domain/matching/buttons/WaitingButton.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@/components/base';
+import React from 'react';
+
+function WaitingButton() {
+  const handleClick = () => {
+    console.log('asd');
+  };
+  return (
+    <Button onClick={handleClick} size="medium" variant={'default'}>
+      랜덤매칭
+    </Button>
+  );
+}
+
+export default WaitingButton;

src/components/domain/survey/AgeBox.tsx

@@ -7,7 +7,7 @@ import { OnChangeProps } from '@/components/base/SimpleRangeSlider';
 interface AgeBoxProps {
   ageOption?: number;
   setAgeOption?: React.Dispatch<React.SetStateAction<number>>;
-  multiAgeOption: number[];
+  multiAgeOption?: number[];
   setMultiAgeOption?: React.Dispatch<React.SetStateAction<number[]>>;
   children: React.ReactNode;
   isMulti?: boolean;

src/components/domain/survey/ChooseTwoBox.tsx

@@ -39,7 +39,6 @@ const ChooseTwoBox = ({ selectedOption, onChangeOption, children, items, size =
 
 const Container = styled.section`
   width: 100%;
-  margin-top: 67px;
 `;
 
 const ButtonWrapper = styled.div`