Merge pull request #330 from sharemindteam/feat/payment_info_325

[Feat] 결제 안내 페이지 레이아웃 수정
sharemindteam · Jul 1, 2024 · 58a579f · 58a579f
2 parents 69fd0b1 + 2a2d878
commit 58a579f
Show file tree

Hide file tree

Showing 5 changed files with 203 additions and 335 deletions.
diff --git a/src/components/Buyer/BuyerPaymentDetail/PaymentDetailInfo.tsx b/src/components/Buyer/BuyerPaymentDetail/PaymentDetailInfo.tsx
@@ -1,25 +1,34 @@
 import styled from 'styled-components';
-import { Green, Grey2, Grey3, White } from 'styles/color';
-import { Body1, Body3, Caption2, Heading } from 'styles/font';
+import { Grey1, Grey3, White } from 'styles/color';
+import { Body1, Body3, 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';
+import { ReactComponent as HeartIcon } from 'assets/open-consult/open-consult-heart.svg';
+import { Flex } from 'components/Common/Flex';
+
+//
+//
+//
+
 interface PaymentDetailInfoProps {
   nickname: string;
   level: number;
   rating: number;
   reviewNumber: number;
-  tagList: CartegoryState[];
-  iconNumber: number;
+  totalConsult: number;
+  consultStyle: number | undefined;
 }
+
+//
+//
+//
+
 export const PaymentDetailInfo = ({
   nickname,
   level,
   rating,
   reviewNumber,
-  tagList,
-  iconNumber,
+  totalConsult,
+  consultStyle,
 }: PaymentDetailInfoProps) => {
   return (
     <Wrapper>
@@ -32,29 +41,29 @@ export const PaymentDetailInfo = ({
         <div className="col1">
           <div className="row1">
             <Heading>{nickname}</Heading>
-            <LevelTag>
-              <Caption2 color={White}>Lv {level}</Caption2>
-            </LevelTag>
+            <Body3>Lv {level}</Body3>
           </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} />;
-            })}
+            <Body3 color={Grey1}>{'상담 ' + totalConsult + '회'}</Body3>
+            <Divider />
+            <Body3 color={Grey1}>{'후기 ' + reviewNumber + '개'}</Body3>
+            <Divider />
+            <Flex gap="0.2rem">
+              <HeartIcon />
+              <Body3 color={Grey1} padding="0.04rem 0 0 0">
+                {rating}
+              </Body3>
+            </Flex>
           </div>
         </div>
         <div className="col2">
-          <Characters number={iconNumber} width="7.6rem" height="7rem" />
+          <Characters number={consultStyle} width="7.6rem" height="7rem" />
         </div>
       </CardWrapper>
     </Wrapper>
   );
 };
+
 const Wrapper = styled.div`
   background-color: ${White};
   width: 100%;
@@ -67,40 +76,41 @@ const Wrapper = styled.div`
     width: 33.5rem;
   }
 `;
+
 const CardWrapper = styled.div`
   display: flex;
   justify-content: space-between;
+  align-items: center;
   box-sizing: border-box;
-  padding: 1.6rem 0 2.4rem 0;
+  padding: 2rem 0 2rem 0;
   width: 33.5rem;
+
   .col1 {
     display: flex;
     flex-direction: column;
   }
+
   .row1 {
     display: flex;
     align-items: center;
     gap: 1.2rem;
     margin-bottom: 1.05rem;
   }
+
   .row2 {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    margin-bottom: 0.8rem;
+    gap: 0.8rem;
   }
+
   .row3 {
     display: flex;
     gap: 0.8rem;
   }
 `;
 
-const LevelTag = styled.div`
-  background-color: ${Green};
-  padding: 0.4rem 1.2rem;
-  border-radius: 0.8rem;
-`;
-const HeartIcon = styled(Heart)`
-  width: 1.9rem;
-  height: 1.8rem;
+const Divider = styled.div`
+  width: 0.1rem;
+  height: 1.5rem;
+  background-color: ${Grey3};
 `;
diff --git a/src/components/Buyer/Common/ReadyConsultCard.tsx b/src/components/Buyer/Common/ReadyConsultCard.tsx
@@ -112,7 +112,7 @@ export const ReadyConsultCard = ({
         <Body1 style={{ textAlign: 'left' }}>{introduction}</Body1>
         <Space height="1.5rem" />
         <TagWrapper>
-          {tagList.map((value: any, index) => {
+          {tagList.map((value: any) => {
             return (
               <TagA2Cartegory key={value} tagType={value} bgColorType={1} />
             );

diff --git a/src/components/Common/AppContainer.tsx b/src/components/Common/AppContainer.tsx
@@ -30,16 +30,19 @@ export const AppContainer = ({ children }: AppContainerProps) => {
   const isOpenConsultDetailPage =
     /^(\/open-consult\/\d+|\/minder\/open-consult\/\d+)$/.test(pathname);
 
+  const isPaymentDetailPage = /^\/paymentDetail\/\d+$/.test(pathname);
+
   const isGreyBackground =
     pathname === '/minder/mypage/viewProfile' ||
     pathname === '/minder/mypage' ||
     pathname === '/minder/mypage/modifyProfile' ||
     pathname === '/mypage' ||
     pathname === '/review' ||
-    pathname === '/paymentDetail' ||
+    pathname === '/openPaymentDetail' ||
     pathname.includes('/chat/') ||
     (pathname.includes('/open-consult') && !isOpenConsultDetailPage) ||
-    (pathname.includes('/consult') && search.includes('type=open-consult'));
+    (pathname.includes('/consult') && search.includes('type=open-consult')) ||
+    isPaymentDetailPage;
 
   //
   //