diff --git a/src/components/Common/AppContainer.tsx b/src/components/Common/AppContainer.tsx index e716c9f6..ddaa6fc6 100644 --- 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(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 index 0801be32..251543fb 100644 --- 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( [], ); + 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 ( @@ -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 index 45371239..69344d5b 100644 --- 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(undefined); + + // + // + // useEffect(() => { const fetchOneConsult = async () => { try { @@ -22,6 +31,11 @@ function MainQuestionSection() { }; fetchOneConsult(); }, [consultid]); + + // + // + // + return ( @@ -58,18 +72,23 @@ function MainQuestionSection() { ); } + +// +// +// + 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};