feat: fix minder open consult detail page layout (#294)

sharemindteam · Jun 13, 2024 · 709d519 · 709d519
1 parent f8e752e
commit 709d519
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 7 deletions.
diff --git a/src/components/Common/AppContainer.tsx b/src/components/Common/AppContainer.tsx
@@ -21,11 +21,13 @@ interface AppContainerProps {
 export const AppContainer = ({ children }: AppContainerProps) => {
   useViewResize();
   const scrollLock = useRecoilValue<boolean>(scrollLockState);
+
   var { pathname, search } = useLocation();
-  var { pathname, search } = useLocation();
+
   const [isGray, setIsGray] = useState(false);
 
-  const isOpenConsultWithNumber = /^\/open-consult\/\d+$/.test(pathname);
+  const isOpenConsultDetailPage =
+    /^(\/open-consult\/\d+|\/minder\/open-consult\/\d+)$/.test(pathname);
 
   const isGreyBackground =
     pathname === '/minder/mypage/viewProfile' ||
@@ -35,7 +37,7 @@ export const AppContainer = ({ children }: AppContainerProps) => {
     pathname === '/review' ||
     pathname === '/paymentDetail' ||
     pathname.includes('/chat/') ||
-    (pathname.includes('/open-consult') && !isOpenConsultWithNumber) ||
+    (pathname.includes('/open-consult') && !isOpenConsultDetailPage) ||
     (pathname.includes('/consult') && search.includes('type=open-consult'));
 
   //

diff --git a/src/components/Seller/SellerOpenConsult/CommentListSection.tsx b/src/components/Seller/SellerOpenConsult/CommentListSection.tsx
@@ -8,6 +8,7 @@ import {
   Grey6,
   LightGreen,
   LightRed,
+  White,
 } from 'styles/color';
 import { Body1, Body3, Caption1, Caption2 } from 'styles/font';
 import { ReactComponent as HeartIcon } from 'assets/icons/icon-heart1.svg';
@@ -21,6 +22,10 @@ import { useRecoilValue } from 'recoil';
 import { consultStyleToCharNum } from 'utils/convertStringToCharNum';
 import { formattedMessage } from 'utils/formattedMessage';
 
+//
+//
+//
+
 export interface commentApiObject {
   commentId: string;
   nickName: string;
@@ -33,13 +38,23 @@ export interface commentApiObject {
   isChosen: boolean;
 }
 
+//
+//
+//
+
 function CommentListSection() {
+  const navigate = useNavigate();
+
   const { consultid } = useParams();
   const [commentCardList, setCommentCardList] = useState<commentApiObject[]>(
     [],
   );
+
   const isSendPopupOpen = useRecoilValue(isSendPopupOpenState);
-  const navigate = useNavigate();
+
+  //
+  //
+  //
   useEffect(() => {
     const fetchCommentList = async () => {
       try {
@@ -55,7 +70,13 @@ function CommentListSection() {
       }
     };
     fetchCommentList();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [consultid, isSendPopupOpen]);
+
+  //
+  //
+  //
+
   return (
     <CommentListSectionWrapper>
       <CommentGuide $isGreen={commentCardList.length !== 5}>
@@ -95,12 +116,15 @@ function CommentListSection() {
   );
 }
 
+//
+//
+//
+
 const CommentListSectionWrapper = styled.section`
   padding: 1.2rem 2rem;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
-  background-color: white;
 `;
 
 const CommentGuide = styled.div<{ $isGreen: boolean }>`
@@ -134,7 +158,7 @@ const CommentCard = styled.div`
 const LikeButton = styled.div`
   display: flex;
   border-radius: 0.8rem;
-  background-color: white;
+  background-color: ${White};
   padding: 0.8rem 1.15rem;
   align-items: center;
   align-self: flex-end;

diff --git a/src/components/Seller/SellerOpenConsult/MainQuestionSection.tsx b/src/components/Seller/SellerOpenConsult/MainQuestionSection.tsx
@@ -8,9 +8,18 @@ import { getCounselorsOneConsult } from 'api/get';
 import { useParams } from 'react-router-dom';
 import { openConsultApiObject } from 'pages/Buyer/BuyerConsult';
 import { formattedMessage } from 'utils/formattedMessage';
+
+//
+//
+//
+
 function MainQuestionSection() {
   const { consultid } = useParams();
   const [card, setCard] = useState<openConsultApiObject | undefined>(undefined);
+
+  //
+  //
+  //
   useEffect(() => {
     const fetchOneConsult = async () => {
       try {
@@ -22,6 +31,11 @@ function MainQuestionSection() {
     };
     fetchOneConsult();
   }, [consultid]);
+
+  //
+  //
+  //
+
   return (
     <MainQuestionWrapper>
       <MainQuestionText>
@@ -58,18 +72,23 @@ function MainQuestionSection() {
     </MainQuestionWrapper>
   );
 }
+
+//
+//
+//
+
 const MainQuestionWrapper = styled.section`
   display: flex;
   padding: 1.2rem 2rem;
   flex-direction: column;
   gap: 1.2rem;
+  background-color: ${Grey6};
   border-bottom: 1px solid ${Grey6};
 `;
 
 const MainQuestionText = styled.div`
   width: 100%;
   position: relative;
-  background-color: ${Grey6};
   padding: 1.6rem;
   box-sizing: border-box;
   background-color: ${White};