Merge pull request #84 from sharemindteam/leekyuho

[fix] 상담 결제하기 연동 및 회원가입 이메일 maxlength 수정

src/Router.tsx

@@ -78,7 +78,7 @@ const Router = () => {
       <Route path="/buyer/categorySearch" element={<BuyerCategoryResult />} />
       <Route path="/buyer/search/result" element={<BuyerSearchResult />} />
       <Route path="/buyer/consultRequest" element={<BuyerConsultRequest />} />
-      <Route path="/buyer/paymentDetail" element={<BuyerPaymentDetail />} />
+      <Route path="/buyer/paymentDetail/:id" element={<BuyerPaymentDetail />} />
       <Route path="/buyer/paymentComplete" element={<BuyerPaymentComplete />} />
       <Route path="/buyer/counselors" element={<BuyerAvailCounselor />} />
       <Route path="/buyer/mypage" element={<BuyerMypage />} />

src/components/Buyer/BuyerCounselorProfile/CounselorFooter.tsx

@@ -6,9 +6,13 @@ import { useEffect, useState } from 'react';
 import { White } from 'styles/color';
 import { useNavigate } from 'react-router-dom';
 interface CounselorFooterProps {
+  counselorId: number;
   isBookmarked: boolean;
 }
-export const CounselorFooter = ({ isBookmarked }: CounselorFooterProps) => {
+export const CounselorFooter = ({
+  isBookmarked,
+  counselorId,
+}: CounselorFooterProps) => {
   const navigate = useNavigate();
   const [bookmarkToggle, setBookmarkToggle] = useState<boolean>();
   useEffect(() => {
@@ -33,7 +37,9 @@ export const CounselorFooter = ({ isBookmarked }: CounselorFooterProps) => {
         text="상담 신청하기"
         width="26rem"
         height="5.2rem"
-        onClick={() => navigate('/buyer/consultRequest')}
+        onClick={() =>
+          navigate('/buyer/consultRequest', { state: { counselorId } })
+        }
       />
     </Wrapper>
   );

src/components/Buyer/BuyerSignup/SignupVerifyEmail.tsx

@@ -190,7 +190,7 @@ export const SignupVerifyEmail = ({
                 width="33.5rem"
                 height="4.8rem"
                 isBoxSizing={true}
-                maxLength={23}
+                maxLength={27}
                 textIndent="1rem"
               />
               <VerifyButton

src/pages/Buyer/BuyerConsultRequest.tsx

@@ -2,7 +2,7 @@ import { postConsults } from 'api/post';
 import { BackIcon, HeaderWrapper } from 'components/Buyer/Common/Header';
 import { Button } from 'components/Common/Button';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { Green, Grey1, Grey2, Grey6, LightGreen } from 'styles/color';
 import { Body2, Heading } from 'styles/font';
@@ -22,40 +22,11 @@ export const BuyerConsultRequest = () => {
   const [letterFocus, setLetterFocus] = useState<boolean>(false);
   const [chatFocus, setChatFocus] = useState<boolean>(false);
   const [buttonAcitve, setButtonAcitve] = useState<boolean>(false);
+  const location = useLocation();
+  const { state } = location;
+  const counselorId: boolean = state?.counselorId;
   const handleNextClick = () => {
-    navigate('/buyer/paymentDetail', { state: { letterFocus } });
-    // let consultType = '';
-    // if (letterFocus) {
-    //   consultType = 'Letter';
-    // } else {
-    //   consultType = 'Chat';
-    // }
-    // const body = {
-    //   counselorId: 1,
-    //   consultTypeName: consultType,
-    // };
-    // try {
-    //   const res: any = await postConsults(body);
-
-    //   if (res.status === 201) {
-    //     const consultData: ConsultDataType = {
-    //       consultId: res.data.consultId,
-    //       nickname: res.data.nickname,
-    //       level: res.data.level,
-    //       ratingAverage: res.data.ratingAverage,
-    //       totalReview: res.data.totalReview,
-    //       consultCategories: res.data.consultCategories,
-    //       consultStyle: res.data.consultStyle,
-    //       consultType: res.data.consultType,
-    //       cost: res.data.cost,
-    //     };
-    //     navigate('/buyer/paymentDetail', { state: { consultData } });
-    //   } else if (res.response.status === 404) {
-    //     alert('상담 유형이 존재하지 않습니다.');
-    //   }
-    // } catch (e) {
-    //   alert(e);
-    // }
+    navigate(`/buyer/paymentDetail/${counselorId}`, { state: { letterFocus } });
   };
   useEffect(() => {
     if (!(letterFocus === false && chatFocus === false)) {

src/pages/Buyer/BuyerCounselorProfile.tsx

@@ -7,14 +7,17 @@ import {
   CounselorProfileNav,
   CounselorReview,
 } from 'components/Buyer/BuyerCounselorProfile';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
+import { profileCounselorIdState } from 'utils/atom';
 import { counselorDummyData as dummy } from 'utils/buyerDummy';
 import { reviewDummy } from 'utils/buyerDummy';
 import { CartegoryState } from 'utils/type';
 export const BuyerCounselorProfile = () => {
   const { id } = useParams();
+
   //Nav 버튼 toggle
   const [isInfo, setIsInfo] = useState<boolean>(true);
   if (id !== undefined) {
@@ -50,7 +53,10 @@ export const BuyerCounselorProfile = () => {
             <CounselorReview reviewList={reviewDummy} />
           )}
         </Body>
-        <CounselorFooter isBookmarked={dummy[1].isBookmarked} />
+        <CounselorFooter
+          counselorId={counselorId}
+          isBookmarked={dummy[1].isBookmarked}
+        />
       </Wrapper>
     );
   } else {

src/pages/Buyer/BuyerPaymentDetail.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { Green, Grey1, Grey3, Grey6, LightGreen, White } from 'styles/color';
 import { Body1, Body3, Heading } from 'styles/font';
 import { ReactComponent as Heart } from 'assets/icons/icon-payment-detail-heart.svg';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { getCounselorConsults } from 'api/get';
 import { AppendCategoryType } from 'utils/AppendCategoryType';
@@ -25,6 +25,7 @@ interface ConsultInfo {
 export const BuyerPaymentDetail = () => {
   const navigate = useNavigate();
   const [buttonSelect, setButtonSelect] = useState<number>(0);
+  const { id } = useParams();
   const location = useLocation();
   const { state } = location;
   const letterFocus: boolean = state?.letterFocus;
@@ -48,9 +49,10 @@ export const BuyerPaymentDetail = () => {
     }
     const body = {
       //나중에 recoil로 관리// persist
-      counselorId: 2,
+      counselorId: id,
       consultTypeName: consultType,
     };
+
     try {
       const res: any = await postConsults(body);
       if (res.status === 201) {
@@ -83,7 +85,7 @@ export const BuyerPaymentDetail = () => {
         consultType: consultType,
       };
       // 나중에 counselor Id 로 변경
-      const res: any = await getCounselorConsults('2', { params });
+      const res: any = await getCounselorConsults(id, { params });
       if (res.status === 200) {
         setConsultData(res.data);
       } else if (res.responsen.status === 400) {

src/pages/Seller/SellerPwChange.tsx

@@ -3,18 +3,11 @@ import PwInput from 'components/Buyer/Common/PwInput';
 import { SignupValidIcon } from 'components/Buyer/Common/SignupValidIcon';
 import { Button } from 'components/Common/Button';
 import { useInput } from 'hooks/useInput';
-import { SetStateAction, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import {
-  ErrorColor,
-  Grey1,
-  Grey3,
-  Grey4,
-  Grey6,
-  SafeColor,
-} from 'styles/color';
-import { Body1, Body2, Caption2, Heading } from 'styles/font';
+import { ErrorColor, Grey1, Grey3, Grey4, SafeColor } from 'styles/color';
+import { Body1, Caption2, Heading } from 'styles/font';
 import { passwordLengthValid, passwordTypeValid } from 'utils/signupValidCheck';
 
 export const SellerPwChange = () => {