Merge pull request #234 from YAPP-Github/dev

Release 1.2.0
YAPP-Github · Jul 31, 2022 · f2f62d8 · f2f62d8
2 parents 56ed179 + ec2d44b
commit f2f62d8
Show file tree

Hide file tree

Showing 23 changed files with 227 additions and 95 deletions.
diff --git a/src/components/authMail/AuthCodeForm.tsx b/src/components/authMail/AuthCodeForm.tsx
@@ -5,6 +5,7 @@ import useForm, { InitialValues } from '@/hooks/common/useForm';
 import useAuthNumber from '@/hooks/common/useAuthNumber';
 import styled from 'styled-components';
 import { useToggle } from '@/hooks/common';
+import { palette } from '@/lib/styles/palette';
 
 interface AuthCodeFormProps {
   email: string;
@@ -48,9 +49,16 @@ const AuthCodeForm = ({ email, onCheckAuthCode }: AuthCodeFormProps) => {
 
   return (
     <>
-      <form onSubmit={handleSubmit}>
+      <FormWrapper onSubmit={handleSubmit}>
         <InputsWrapper>
-          <Input isFocus={!!email} name="authCode" placeholder="인증번호" maxLength={8} onChange={handleChange} />
+          <Input
+            isFocus={!!email}
+            name="authCode"
+            placeholder="인증번호"
+            backgroundColor={palette.backgroundColor}
+            maxLength={8}
+            onChange={handleChange}
+          />
           {errors.email && <ErrorMessage>{errors.email}</ErrorMessage>}
           <StyledButton disabled={!!errors.authCode}>확인</StyledButton>
           {email && (
@@ -59,7 +67,7 @@ const AuthCodeForm = ({ email, onCheckAuthCode }: AuthCodeFormProps) => {
             </CountDownWrapper>
           )}
         </InputsWrapper>
-      </form>
+      </FormWrapper>
       {isErrorModal && (
         <Modal
           width={200}
@@ -77,6 +85,10 @@ const AuthCodeForm = ({ email, onCheckAuthCode }: AuthCodeFormProps) => {
   );
 };
 
+const FormWrapper = styled.form`
+  margin-top: 20px;
+`;
+
 const CountDownWrapper = styled.span`
   position: absolute;
   top: 15px;

diff --git a/src/components/authMail/EmailForm.tsx b/src/components/authMail/EmailForm.tsx
@@ -4,6 +4,7 @@ import { InputsWrapper, StyledButton, ErrorMessage } from '@/pages/AuthMail';
 import useForm, { InitialValues } from '@/hooks/common/useForm';
 import { checkForm } from '@/utils/validations';
 import { useToggle } from '@/hooks/common';
+import { palette } from '@/lib/styles/palette';
 
 interface EmailFormProps {
   onSubmitAuthCode: (email: string) => void;
@@ -41,7 +42,14 @@ const EmailForm = ({ onSubmitAuthCode }: EmailFormProps) => {
     <>
       <form onSubmit={handleSubmit}>
         <InputsWrapper>
-          <Input isFocus={onFocus} name="email" placeholder="이메일" maxLength={50} onChange={handleChange} />
+          <Input
+            isFocus={onFocus}
+            name="email"
+            placeholder="이메일"
+            backgroundColor={palette.backgroundColor}
+            maxLength={50}
+            onChange={handleChange}
+          />
           {errors.email && <ErrorMessage>{errors.email}</ErrorMessage>}
           <StyledButton disabled={!!errors.email}>인증번호 보내기</StyledButton>
         </InputsWrapper>

diff --git a/src/components/base/Input.tsx b/src/components/base/Input.tsx
@@ -14,6 +14,7 @@ interface InputStyle {
    * STANDARD, FILLED,
    */
   variant?: InputVariantKeyTypes;
+  backgroundColor?: string;
 }
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, InputStyle {
@@ -45,6 +46,7 @@ const InputStyled = styled.input<InputProps>`
   line-height: 18px;
   letter-spacing: -0.02em;
   color: ${palette.black};
+  background-color: ${({ backgroundColor }) => backgroundColor ?? ''};
   outline: none;
   transition: all 0.2s linear;
   ::placeholder {

diff --git a/src/components/base/SimpleRangeSlider.tsx b/src/components/base/SimpleRangeSlider.tsx
@@ -39,7 +39,9 @@ const SimpleRangeSlider = ({ min, max, initValue, isStep5 = false, onChange }: S
         range.current.style.width = `${maxPercent}%`;
       }
       if (sign.current) {
-        sign.current.style.left = `calc(${maxPercent}% - ${sign.current.clientWidth / 2}px${maxPercent > 90 ? ' - 40px' : ''})`;
+        sign.current.style.left = `calc(${maxPercent}% - ${sign.current.clientWidth / 2}px${
+          (maxPercent > 70 ? ' - 10px' : '') || (maxPercent < 30 ? ' + 10px' : '')
+        })`;
       }
     }
   }, [maxVal, getPercent]);
@@ -120,7 +122,7 @@ const SliderInput = styled.input<{ zIndex: number }>`
 `;
 
 const TrackWrapper = styled.div`
-  width: 100%;
+  width: 90%;
   position: relative;
 `;
 

diff --git a/src/components/domain/landing/LandingContainer.tsx b/src/components/domain/landing/LandingContainer.tsx
@@ -3,7 +3,7 @@ import { StringLogo, RadiousLogo } from '@/assets/img';
 import { Button } from '@/components/base';
 import { palette } from '@/lib/styles/palette';
 import styled from 'styled-components';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useLoginState } from '@/atoms/userState';
 import { goKakaoLogin } from '@/utils/goKakaoLogin';
 import Cookies from 'js-cookie';
@@ -35,9 +35,6 @@ 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>
@@ -96,6 +93,7 @@ const BtnBox = styled.div`
   align-items: center;
   flex-direction: column;
   flex: 1 1 8%;
+  margin-bottom: 42px;
 `;
 const LandingBtn = styled(Button)`
   margin: 4px;

diff --git a/src/components/domain/survey/SearchSelector.tsx b/src/components/domain/survey/SearchSelector.tsx
@@ -27,7 +27,7 @@ const SearchSelector = ({ placeholder, searchData, selectedResults, setSelectedR
   useEffect(() => {
     const result = selectedResults.flatMap((id) => searchData.filter((item) => item.id === id)).map(({ name }) => name);
     setSelectedSchools(result);
-  }, []);
+  }, [selectedResults, searchData]);
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;

diff --git a/src/components/header/DatingInfoBox.tsx b/src/components/header/DatingInfoBox.tsx
@@ -108,16 +108,16 @@ const DatingInfoBox = () => {
           <InfoEle>
             <Link to={`/updating/dating/${Path.MyDepartmentCharacter}`}>{conversionCharacter(characteristic)}</Link>
           </InfoEle>
-          <FlexEle>
-            <Link to={`/updating/dating/${Path.DomesticAreasSurvey}`}>
+          <Link to={`/updating/dating/${Path.DomesticAreasSurvey}`}>
+            <FlexEle>
               {domesticAreas?.map((area, index) => (
                 <div key={area + domesticAreas}>
                   {addComma(index)}
                   {conversionDomesticArea(area)}
                 </div>
               ))}
-            </Link>
-          </FlexEle>
+            </FlexEle>
+          </Link>
           <InfoEle>
             <Link to={`/updating/dating/${Path.AbroadAreasSurvey}`}>해외 지역 :{abroadAreas.length === 0 ? '없음' : abroadAreas}</Link>
           </InfoEle>
@@ -132,39 +132,43 @@ const DatingInfoBox = () => {
               {preferAge[0]}~{preferAge[1]}살
             </Link>
           </InfoEle>
-          <FlexEle>
-            <Link to={`/updating/dating/${Path.PreferBodyDateCountSurvey}`}>
+
+          <Link to={`/updating/dating/${Path.PreferBodyDateCountSurvey}`}>
+            <FlexEle>
               {preferBodies?.map((body, index) => (
                 <div key={body + preferBodies}>
                   {addComma(index)}
                   {conversionBody(body)}
                 </div>
               ))}
-            </Link>
-          </FlexEle>
-          <FlexEle>
-            <Link to={`/updating/dating/${Path.PreferDepartmentCharacterSurvey}`}>
+            </FlexEle>
+          </Link>
+
+          <Link to={`/updating/dating/${Path.PreferDepartmentCharacterSurvey}`}>
+            <FlexEle>
               {preferCharacteristics?.map((charator, index) => (
                 <div key={charator + preferCharacteristics}>
                   {addComma(index)}
                   {conversionCharacter(charator)}
                 </div>
               ))}
-            </Link>
-          </FlexEle>
+            </FlexEle>
+          </Link>
           <InfoEle>
             <Link to={`/updating/dating/${Path.PreferBodyDateCountSurvey}`}>{conversionDateCount(preferDateCount)}</Link>
           </InfoEle>
-          <FlexEle>
-            <Link to={`/updating/dating/${Path.PreferDepartmentCharacterSurvey}`}>
+
+          <Link to={`/updating/dating/${Path.PreferDepartmentCharacterSurvey}`}>
+            <FlexEle>
               {preferDepartments?.map((department, index) => (
                 <div key={department + preferDepartments}>
                   {addComma(index)}
                   {conversionDepartment(department)}
                 </div>
               ))}
-            </Link>
-          </FlexEle>
+            </FlexEle>
+          </Link>
+
           <InfoEle>
             <Link to={`/updating/dating/${Path.PreferAgeHeightSurvey}`}>
               {preferHeight[0]}~{preferHeight[1]}cm
@@ -209,20 +213,22 @@ export const InfoBox = styled.ul`
 `;
 
 export const InfoEle = styled.li`
-  max-width: 200px;
+  max-width: 150px;
   position: relative;
+  display: inline-block;
   height: 23px;
   line-height: 14px;
   background-color: ${({ theme }) => theme.palette.grayLight};
   border-radius: 4px;
   padding: 4px 10px;
   font-size: 12px;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 `;
 
 export const FlexEle = styled(InfoEle)`
   display: flex;
+  flex-wrap: nowrap;
 `;
 
 export default DatingInfoBox;

diff --git a/src/components/header/MeetingInfoBox.tsx b/src/components/header/MeetingInfoBox.tsx
@@ -77,16 +77,16 @@ function MeetingInfoBox() {
           <InfoEle>
             <Link to={`/updating/meeting/${Path.TypeOfMeeting}`}>{conversionTypeOfMeeting(typeOfMeeting)}</Link>
           </InfoEle>
-          <FlexEle>
-            <Link to={`/updating/meeting/${Path.OurDepartmentsAverageHeightSurvey}`}>
+          <Link to={`/updating/meeting/${Path.OurDepartmentsAverageHeightSurvey}`}>
+            <FlexEle>
               {ourDepartments?.map((department, index) => (
                 <div key={department + ourDepartments}>
                   {addComma(index)}
                   {conversionDepartment(department)}
                 </div>
               ))}
-            </Link>
-          </FlexEle>
+            </FlexEle>
+          </Link>
           <InfoEle>
             <Link to={`/updating/meeting/${Path.GenderAverageAgeSurvey}`}>평균나이 : {averageAge}살</Link>
           </InfoEle>
@@ -96,16 +96,16 @@ function MeetingInfoBox() {
           <InfoEle>
             <Link to={`/updating/meeting/${Path.PlaySurvey}`}>{conversionPlay(play)}</Link>
           </InfoEle>
-          <FlexEle>
-            <Link to={`/updating/meeting/${Path.DomesticAreasSurvey}`}>
+          <Link to={`/updating/meeting/${Path.DomesticAreasSurvey}`}>
+            <FlexEle>
               {domesticAreas?.map((area, index) => (
                 <div key={area + domesticAreas}>
                   {addComma(index)}
                   {conversionDomesticArea(area)}
                 </div>
               ))}
-            </Link>
-          </FlexEle>
+            </FlexEle>
+          </Link>
           {mindSet && (
             <InfoEle>
               <Link to={`/updating/meeting/${Path.MindsetSurvey}`}>{conversionMindset(mindSet)} </Link>
@@ -122,16 +122,18 @@ function MeetingInfoBox() {
               {preferAge[0]}~{preferAge[1]}살
             </Link>
           </InfoEle>
-          <FlexEle>
-            <Link to={`/updating/meeting/${Path.PreferDepartmentsSurvey}`}>
+
+          <Link to={`/updating/meeting/${Path.PreferDepartmentsSurvey}`}>
+            <FlexEle>
               {preferDepartments?.map((department, index) => (
                 <div key={department + preferDepartments}>
                   {addComma(index)}
                   {conversionDepartment(department)}
                 </div>
               ))}
-            </Link>
-          </FlexEle>
+            </FlexEle>
+          </Link>
+
           <InfoEle>
             <Link to={`/updating/meeting/${Path.PreferAgeHeightSurvey}`}>
               {preferHeight[0]}~{preferHeight[1]}cm

diff --git a/src/hooks/survey/useUpdateSurvey.ts b/src/hooks/survey/useUpdateSurvey.ts
@@ -1,3 +1,4 @@
+import { patchDatingSurvey } from '@/lib/api/dating';
 import { patchMeetingSurvey } from '@/lib/api/meeting';
 import { Dating } from '@/types/dating';
 import { Meeting } from '@/types/meeting';
@@ -21,7 +22,7 @@ const useUpdateSurvey = () => {
   };
   const onUpdateDatingSurvey = async (data: Partial<Dating>) => {
     try {
-      await patchMeetingSurvey(data);
+      await patchDatingSurvey(data);
     } catch (error) {
       console.log(error);
     }

diff --git a/src/lib/api/dating.ts b/src/lib/api/dating.ts
@@ -17,6 +17,11 @@ export const postDatingSurvey = async (payload: Dating) => {
   return res.data;
 };
 
+export const patchDatingSurvey = async (payload: Partial<Dating>) => {
+  const res = await apiClient.patch('/dating/survey', payload);
+  return res.data;
+};
+
 export const getDatingSurvey = async () => {
   const res = await apiClient.get<Dating>('/dating/survey');
   return res.data;

diff --git a/src/pages/AbroadAreasSurvey.tsx b/src/pages/AbroadAreasSurvey.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { useMatch } from 'react-router-dom';
+import { useMatch, useNavigate } from 'react-router-dom';
 import { useDatingNavigate, useMeetingNavigate } from '@/hooks/common/useNavigate';
 import { SurveyTemplate } from '@/components/domain/survey';
 import Path from '@/router/Path';
@@ -8,9 +8,12 @@ import SearchSelector from '@/components/domain/survey/SearchSelector';
 import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
 import useAboardAreaLoad from '@/hooks/survey/useAboardAreaLoad';
 import { LAST_MEETING_STEP, LAST_DATING_STEP } from '@/components/domain/survey/SurveyTemplate';
+import useUpdateSurvey from '@/hooks/survey/useUpdateSurvey';
 
 const AbroadAreasSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
+  const navigate = useNavigate();
+  const { isUpdate, onUpdateDatingSurvey, onUpdateMeetingSurvey } = useUpdateSurvey();
   const { area } = useAboardAreaLoad();
   const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
@@ -19,14 +22,20 @@ const AbroadAreasSurvey = () => {
   const [abroadAreasDating, setAbroadAreasDating] = useState<number[]>(initDatingState.abroadAreas);
 
   const handleNextClick = () => {
-    if (initMeetingState) {
-      matchMeeting ? setMeetingData({ ...initMeetingState, abroadAreas }) : setDatingData({ ...initDatingState, abroadAreas: abroadAreasDating });
+    if (isUpdate) {
+      matchMeeting
+        ? onUpdateMeetingSurvey({ ...initMeetingState, abroadAreas })
+        : onUpdateDatingSurvey({ ...initDatingState, abroadAreas: abroadAreasDating });
+      navigate(Path.MatchingDating);
+    } else {
+      if (initMeetingState) {
+        matchMeeting ? setMeetingData({ ...initMeetingState, abroadAreas }) : setDatingData({ ...initDatingState, abroadAreas: abroadAreasDating });
+      }
+      meetingNavigate(Path.ChannelSurvey);
     }
-
-    meetingNavigate(Path.ChannelSurvey);
   };
 
-  const checkDisabled = useMemo(() => (matchMeeting ? abroadAreas.length === 0 : abroadAreasDating.length === 0), []);
+  const checkDisabled = useMemo(() => (matchMeeting ? abroadAreas.length === 0 : abroadAreasDating.length === 0), [matchMeeting, abroadAreasDating]);
 
   return (
     <SurveyTemplate