[Feature] 마인더 프로필 페이지 구현 및 상담사 카드 오류 수정

src/api/get.ts

@@ -56,6 +56,9 @@ export const getLetterRecentType = async (letterId: string | undefined) =>
 export const getReviewsCustomer = async (params: any) =>
   await getInstance('/reviews/customers', params);
 
+export const getReviews = async (counselorId: number, params: any) =>
+  await getPublicInstance(`/reviews/${counselorId}`, params);
+
 // Conuselor Controller
 export const getMyInfo = async () => await getInstance('counselors/my-info');
 export const getProfiles = async () => await getInstance('counselors/profiles');
@@ -64,7 +67,9 @@ export const getCounselorConsults = async (
   counselorId: string | undefined,
   params: any,
 ) => await getInstance(`/counselors/consults/${counselorId}`, params);
-
+//마인더 프로필 페이지 마인더 프로필 조회
+export const getCounselors = async (counselorId: string | undefined) =>
+  await getPublicInstance(`/counselors/${counselorId}`);
 // SearchWord Controller
 export const getSearchWords = async () => await getInstance('/searchWords');
 

src/api/patch.ts

@@ -1,4 +1,4 @@
-import { patchInstance } from './axios';
+import { patchInstance, patchPublicInstance } from './axios';
 //Admin Controller
 //admin 미결제 상담 승인
 export const patchAdminsUnpaidConsults = async (consultId: number) =>
@@ -16,7 +16,7 @@ export const patchAdminsPendingProfiles = async (
 //Counselor Controller
 //카테고리/들준마 상담사 리스트 반환
 export const patchCounselors = async (sortType: string, body: any) =>
-  await patchInstance(`/counselors?sortType=${sortType}`, body);
+  await patchPublicInstance(`/counselors?sortType=${sortType}`, body);
 //LetterMessage Controller
 //Message 최초 생성
 export const patchLetterMessage = async (body: any) =>

src/components/Buyer/BuyerCounselorProfile/CounselorInfo.tsx

@@ -2,30 +2,65 @@ import styled from 'styled-components';
 import { Grey1, Grey3, Grey6 } from 'styles/color';
 import { Body3 } from 'styles/font';
 import { consultTypeList } from 'utils/constant';
+import { convertTimeToString } from 'utils/convertTimeToString';
+import { ConsultTimes } from 'utils/type';
 interface CounselorInfoProps {
-  consultType: number;
+  consultType: string[];
   letterPrice: number;
   chattingPrice: number;
+  consultTimes: ConsultTimes;
 }
 export const CounselorInfo = ({
   consultType,
   letterPrice,
   chattingPrice,
+  consultTimes,
 }: CounselorInfoProps) => {
-  const availableConsult = consultTypeList[consultType];
   return (
     <Wrapper>
       <div className="row1">
         <Body3 color={Grey3}>상담 방식</Body3>
-        <Body3 color={Grey1}>{availableConsult}</Body3>
+        <Body3 color={Grey1}>{consultType.join(', ')}</Body3>
       </div>
       <div className="row2">
         <Body3 color={Grey3}>상담 시간</Body3>
-        <Body3 color={Grey1}>
-          월-금 21:00-24:00
-          <br />
-          토-일 09:00-22:00
-        </Body3>
+        <div>
+          {consultTimes.MON !== undefined && consultTimes.MON.length !== 0 ? (
+            <Body3 color={Grey1}>
+              월 {convertTimeToString(consultTimes.MON)}
+            </Body3>
+          ) : null}
+          {consultTimes.TUE !== undefined && consultTimes.TUE.length !== 0 ? (
+            <Body3 color={Grey1}>
+              화 {convertTimeToString(consultTimes.TUE)}
+            </Body3>
+          ) : null}
+          {consultTimes.WED !== undefined && consultTimes.WED.length !== 0 ? (
+            <Body3 color={Grey1}>
+              수 {convertTimeToString(consultTimes.WED)}
+            </Body3>
+          ) : null}
+          {consultTimes.THU !== undefined && consultTimes.THU.length !== 0 ? (
+            <Body3 color={Grey1}>
+              목 {convertTimeToString(consultTimes.THU)}
+            </Body3>
+          ) : null}
+          {consultTimes.FRI !== undefined && consultTimes.FRI.length !== 0 ? (
+            <Body3 color={Grey1}>
+              금 {convertTimeToString(consultTimes.FRI)}
+            </Body3>
+          ) : null}
+          {consultTimes.SAT !== undefined && consultTimes.SAT.length !== 0 ? (
+            <Body3 color={Grey1}>
+              토 {convertTimeToString(consultTimes.SAT)}
+            </Body3>
+          ) : null}
+          {consultTimes.SUN !== undefined && consultTimes.SUN.length !== 0 ? (
+            <Body3 color={Grey1}>
+              일 {convertTimeToString(consultTimes.SUN)}
+            </Body3>
+          ) : null}
+        </div>
       </div>
       <div className="row3">
         <Body3 color={Grey3}>상담료</Body3>

src/components/Buyer/BuyerCounselorProfile/CounselorProfileCard.tsx

@@ -4,58 +4,64 @@ import { Body3, Caption2, Heading } from 'styles/font';
 import { Characters } from 'utils/Characters';
 import { ReactComponent as Heart } from 'assets/icons/icon-heart2.svg';
 import { TagA2Cartegory } from '../../Common/TagA2Cartegory';
+import { CartegoryState } from 'utils/type';
 interface CounselorProfileCardProps {
   nickname: string;
   level: number;
   rating: number;
   reviewNumber: number;
-  tagList: CartegoryStateArray;
-  iconNumber: number;
+  tagList: CartegoryState[];
+  consultStyle: number;
 }
 export const CounselorProfileCard = ({
   nickname,
   level,
   rating,
   reviewNumber,
   tagList,
-  iconNumber,
+  consultStyle,
 }: CounselorProfileCardProps) => {
   //여기 dummy data 나중에는 page에서 props로 뿌리는게 나을듯함
 
   return (
     <Wrapper>
-      <div className="col1">
-        <div className="row1">
-          <Heading>{nickname}</Heading>
-          <LevelTag>
-            <Caption2 color={White}>Lv {level}</Caption2>
-          </LevelTag>
+      <CardWrapper>
+        <div className="col1">
+          <div className="row1">
+            <Heading>{nickname}</Heading>
+            <LevelTag>
+              <Caption2 color={White}>Lv {level}</Caption2>
+            </LevelTag>
+          </div>
+          <div className="row2">
+            <HeartIcon />
+            <Body3 color={Grey2} padding="0.04rem 0 0 0">
+              {rating + ' (' + reviewNumber + ')'}
+            </Body3>
+          </div>
+          <div className="row3">
+            {tagList.map((value) => {
+              return <TagA2Cartegory tagType={value} bgColorType={3} />;
+            })}
+          </div>
         </div>
-        <div className="row2">
-          <HeartIcon />
-          <Body3 color={Grey2} padding="0.04rem 0 0 0">
-            {rating + ' (' + reviewNumber + ')'}
-          </Body3>
+        <div className="col2">
+          <Characters number={consultStyle} width="7.6rem" height="7rem" />
         </div>
-        <div className="row3">
-          {tagList.map((value) => {
-            return <TagA2Cartegory tagType={value} bgColorType={3} />;
-          })}
-        </div>
-      </div>
-      <div className="col2">
-        <Characters number={iconNumber} width="7.6rem" height="7rem" />
-      </div>
+      </CardWrapper>
     </Wrapper>
   );
 };
-
 const Wrapper = styled.div`
   display: flex;
-  justify-content: center;
-  gap: 6.8rem;
+  flex-direction: column;
+  align-items: center;
+`;
+const CardWrapper = styled.div`
+  display: flex;
+  width: 33.5rem;
+  justify-content: space-between;
   padding: 1.6rem 2rem;
-  padding-bottom: 1.6rem;
   border-bottom: 1px solid ${Grey6};
   .col1 {
     display: flex;

src/components/Buyer/BuyerCounselorProfile/CounselorReview.tsx

@@ -1,40 +1,87 @@
+import { getReviews } from 'api/get';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { Grey1, Grey4, Grey6 } from 'styles/color';
-import { Body1, Body2, Body3 } from 'styles/font';
+import { Body1, Body2, Body3, Heading } from 'styles/font';
 import { HeartRate } from 'utils/HeartRate';
+import { Review } from 'utils/type';
+import { ReactComponent as Empty } from 'assets/icons/graphic-noting.svg';
+import { useRecoilState } from 'recoil';
+import { isLoadingState } from 'utils/atom';
+import { LoadingSpinner } from 'utils/LoadingSpinner';
 interface CounselorReviewProps {
-  reviewList: Review[];
+  counselorId: number;
 }
-export const CounselorReview = ({ reviewList }: CounselorReviewProps) => {
-  return (
-    <Wrapper>
-      <Body1 color={Grey4} margin="0 0 1.2rem 0">
-        상담 후기
-      </Body1>
-
-      {reviewList.map((value) => {
-        return (
-          <ReviewCard>
-            <div className="row1">
-              <Body1 color={Grey1}>{value.name}</Body1>
-              <Body3 color={Grey1}>{value.time}</Body3>
-            </div>
-            <div className="row2">
-              <HeartRate rating={value.rating}></HeartRate>
-            </div>
-            <div className="row3">
-              <Body2>{value.comment}</Body2>
-            </div>
-          </ReviewCard>
-        );
-      })}
-    </Wrapper>
-  );
+export const CounselorReview = ({ counselorId }: CounselorReviewProps) => {
+  const navigate = useNavigate();
+  const [reviews, setReviews] = useState<Review[]>([]);
+  const [isLoading, setIsLoading] = useRecoilState(isLoadingState);
+  useEffect(() => {
+    const fetchReviewData = async () => {
+      setIsLoading(true);
+      const params = {
+        cursorId: 0,
+      };
+      const res: any = await getReviews(counselorId, { params });
+      if (res.status === 200) {
+        setReviews(res.data);
+      } else if (res.response.status === 404) {
+        alert('존재하지 않는 상담사의 리뷰 요청입니다.');
+        navigate('/buyer');
+      }
+      console.log(isLoading);
+      setIsLoading(false);
+    };
+    fetchReviewData();
+  }, []);
+  if (isLoading) {
+    return (
+      <>
+        <LoadingSpinner />
+      </>
+    );
+  } else {
+    if (reviews.length === 0) {
+      return (
+        <EmptyWrapper>
+          <EmptyIcon />
+          <Heading>아직 후기가 없어요.</Heading>
+        </EmptyWrapper>
+      );
+    } else {
+      return (
+        <Wrapper>
+          {reviews.map((value) => {
+            return (
+              <ReviewCard>
+                <div className="row1">
+                  <Body1 color={Grey1}>{value.nickname}</Body1>
+                  <Body3 color={Grey1}>{value.updateAt}</Body3>
+                </div>
+                <div className="row2">
+                  <HeartRate rating={value.rating}></HeartRate>
+                </div>
+                <div className="row3">
+                  <Body2>{value.comment}</Body2>
+                </div>
+              </ReviewCard>
+            );
+          })}
+        </Wrapper>
+      );
+    }
+  }
 };
 const Wrapper = styled.div`
   padding: 1.2rem 2rem 2rem 2rem;
   margin-bottom: 5.2rem;
 `;
+const EmptyWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
 const ReviewCard = styled.div`
   padding: 1.6rem;
   border-radius: 1.2rem;
@@ -49,3 +96,7 @@ const ReviewCard = styled.div`
     align-items: center;
   }
 `;
+const EmptyIcon = styled(Empty)`
+  margin-top: 5vh;
+  padding: 4.7rem 4.413rem 4.603rem 4.5rem;
+`;

src/components/Buyer/Common/ReadyConsultCard.tsx

@@ -55,18 +55,8 @@ export const ReadyConsultCard = ({
     const newStates = [...bookmarkStates];
     newStates[index] = !newStates[index];
     setBookmarkStates(newStates);
-    console.log(consultTimes);
   };
-  const [timeData, setTimeData] = useState<string | null[]>([
-    null,
-    null,
-    null,
-    null,
-    null,
-    null,
-    null,
-  ]);
-  useEffect(() => {}, []);
+
   return (
     <Wrapper>
       <UpperWrapper
@@ -123,7 +113,7 @@ export const ReadyConsultCard = ({
         <ToggleWrapper>
           <div className="row1">
             <Body3 color={Grey3}>상담 방식</Body3>
-            <Body3 color={Grey1}>{consultType}</Body3>
+            <Body3 color={Grey1}>{consultType.join(', ')}</Body3>
           </div>
           <div className="row2">
             <Body3 color={Grey3}>상담가능 시간</Body3>
@@ -174,10 +164,18 @@ export const ReadyConsultCard = ({
           </div>
           <div className="row3">
             <Body3 color={Grey3}>상담료</Body3>
-            <Body3 color={Grey1}>
-              편지 1건 {letterPrice.toLocaleString()}원<br />
-              실시간 30분당 {chattingPrice.toLocaleString()}원
-            </Body3>
+            <div>
+              {letterPrice !== undefined ? (
+                <Body3 color={Grey1}>
+                  편지 1건 {letterPrice.toLocaleString()}원
+                </Body3>
+              ) : null}
+              {chattingPrice !== undefined ? (
+                <Body3 color={Grey1}>
+                  채팅 30분당 {chattingPrice.toLocaleString()}원
+                </Body3>
+              ) : null}
+            </div>
           </div>
         </ToggleWrapper>
       ) : null}