[Hotfix] 신고하기 모달을 편지, 공개 상담 페이지에 추가

src/components/Buyer/BuyerOpenConsultDetail/CommentCard.tsx

@@ -35,6 +35,7 @@ interface CommentCardProps {
   setIsPickPopup: React.Dispatch<React.SetStateAction<boolean>>;
   setPickedCommentId: React.Dispatch<React.SetStateAction<string>>;
   isEndConsult: boolean | undefined;
+  handleMoreButtonClick: () => void;
 }
 
 //
@@ -47,6 +48,7 @@ function CommentCard({
   setPickedCommentId,
   setIsPickPopup,
   isEndConsult,
+  handleMoreButtonClick,
 }: CommentCardProps) {
   const navigate = useNavigate();
 
@@ -125,7 +127,7 @@ function CommentCard({
           <Circle />
           <Caption2>{item.updatedAt}</Caption2>
         </Flex>
-        <SettingIcon style={{ padding: '0 0.4rem' }} />
+        <MoreButton onClick={handleMoreButtonClick} />
       </Flex>
       <Body3 color={Grey1}>{formattedMessage(item.content)}</Body3>
       <Flex justify="flex-end" width="100%">
@@ -196,6 +198,11 @@ const SelectButton = styled.button`
   background-color: ${LightGreen};
 `;
 
+const MoreButton = styled(SettingIcon)`
+  cursor: pointer;
+  padding: 0.4rem;
+`;
+
 const LikeButton = styled.div`
   display: flex;
   border-radius: 0.8rem;

src/components/Buyer/BuyerOpenConsultDetail/CommentListSection.tsx

@@ -10,6 +10,8 @@ import CommentCard from './CommentCard';
 import { Green, LightGreen, White } from 'styles/color';
 import { Flex } from 'components/Common/Flex';
 import { Caption1 } from 'styles/font';
+import { useShowComplainttModal } from 'hooks/useShowComplaintModal';
+import { ComplaintModal } from 'components/Seller/Common/ComplaintModal';
 
 //
 //
@@ -29,6 +31,13 @@ function CommentListSection() {
   // 선택한 댓글 아이디 (좋아요, 채택)
   const [pickedCommentId, setPickedCommentId] = useState<string>('');
 
+  const { isComplaintModalOpen, handleBackDropClick, handleMoreButtonClick } =
+    useShowComplainttModal();
+
+  const handleComplaintButtonClick = () => {
+    window.open(process.env.REACT_APP_TEMP_CUSTOMER_SERVICE_URL);
+  };
+
   /**
    *
    */
@@ -55,6 +64,7 @@ function CommentListSection() {
         isEndConsult={isEndConsult}
         setIsPickPopup={setIsPickPopup}
         setPickedCommentId={setPickedCommentId}
+        handleMoreButtonClick={handleMoreButtonClick}
       />
     ));
   };
@@ -108,6 +118,14 @@ function CommentListSection() {
           />
         </>
       )}
+      {isComplaintModalOpen && (
+        <>
+          <BackDrop onClick={handleBackDropClick} />
+          <ComplaintModal
+            handleComplaintButtonClick={handleComplaintButtonClick}
+          />
+        </>
+      )}
 
       <CommentListSectionWrapper>
         {renderCommentCards()}

src/components/Seller/Common/ComplaintModal.tsx

@@ -0,0 +1,76 @@
+import styled, { keyframes } from 'styled-components';
+import { ReactComponent as Bar } from 'assets/icons/icon-modal-bar.svg';
+import { White } from 'styles/color';
+import { Button } from 'components/Common/Button';
+import { APP_WIDTH } from 'styles/AppStyle';
+
+///
+///
+///
+
+interface ComplaintModalProps {
+  handleComplaintButtonClick: () => void;
+}
+
+///
+///
+///
+
+export const ComplaintModal = ({
+  handleComplaintButtonClick,
+}: ComplaintModalProps) => {
+  return (
+    <ReportModalWrapper>
+      <div className="bar-wrapper">
+        <BarIcon />
+      </div>
+      <div className="content-wrapper">
+        <Button
+          text="신고하기"
+          width="100%"
+          height="5.2rem"
+          onClick={handleComplaintButtonClick}
+        />
+      </div>
+    </ReportModalWrapper>
+  );
+};
+
+const slideUp = keyframes`
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+`;
+
+const ReportModalWrapper = styled.div`
+  position: fixed;
+  background-color: ${White};
+  border-radius: 2rem 2rem 0 0;
+  box-shadow: 0 -0.2rem 1rem 0 rgba(0, 0, 0, 0.1);
+  bottom: 0;
+  width: 100%;
+  z-index: 10000;
+  animation: ${slideUp} 0.3s ease-out;
+
+  @media (min-width: 768px) {
+    width: ${APP_WIDTH};
+  }
+
+  .bar-wrapper {
+    height: 1.9rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  .content-wrapper {
+    padding: 0.4rem 2rem 0.8rem 2rem;
+    box-sizing: border-box;
+  }
+`;
+
+const BarIcon = styled(Bar)`
+  margin-top: 0.8rem;
+`;

src/components/Seller/SellerChat/ChatReportModal.tsx

@@ -19,7 +19,9 @@ export const ChatReportModal = () => {
           text="신고하기"
           width="100%"
           height="5.2rem"
-          onClick={() => {}}
+          onClick={() => {
+            window.open(process.env.REACT_APP_TEMP_CUSTOMER_SERVICE_URL);
+          }}
         />
       </div>
     </ChatReportModalWrapper>
@@ -43,7 +45,7 @@ const ChatReportModalWrapper = styled.div`
     display: flex;
     justify-content: center;
   }
-  z-index: 100;
+  z-index: 10000;
   .content-wrapper {
     padding: 0.4rem 2rem 0.8rem 2rem;
     box-sizing: border-box;

src/components/Seller/SellerLetter/LetterHeader.tsx

@@ -7,10 +7,27 @@ import { Heading } from 'styles/font';
 import { useEffect, useState } from 'react';
 import { getLettersNickname } from 'api/get';
 
-export const LetterHeader = () => {
+//
+//
+//
+
+interface LetterHeaderProps {
+  onMoreButtonClick: () => void;
+}
+
+//
+//
+//
+
+export const LetterHeader = ({ onMoreButtonClick }: LetterHeaderProps) => {
   const navigate = useNavigate();
   const { consultid } = useParams();
+
   const [name, setName] = useState('');
+
+  //
+  //
+  //
   useEffect(() => {
     const fetchNameData = async () => {
       const res: any = await getLettersNickname(consultid);
@@ -25,7 +42,13 @@ export const LetterHeader = () => {
       }
     };
     fetchNameData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  //
+  //
+  //
+
   return (
     <LetterHeaderWrapper>
       <LeftArrow
@@ -34,10 +57,11 @@ export const LetterHeader = () => {
         }}
       />
       <Heading>{name}</Heading>
-      <Option onClick={() => {}} />
+      <Option onClick={onMoreButtonClick} />
     </LetterHeaderWrapper>
   );
 };
+
 const LetterHeaderWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -54,6 +78,8 @@ const LetterHeaderWrapper = styled.div`
 const LeftArrow = styled(LeftArrowIcon)`
   cursor: pointer;
 `;
+
 const Option = styled(OptionIcon)`
   cursor: pointer;
+  padding: 0.4rem 0;
 `;

src/hooks/useShowComplaintModal.ts

@@ -0,0 +1,18 @@
+import { useRecoilState } from 'recoil';
+import { isComplaintModalOpenState } from 'utils/atom';
+
+export const useShowComplainttModal = () => {
+  const [isComplaintModalOpen, setIsComplaintModalOpen] = useRecoilState(
+    isComplaintModalOpenState,
+  );
+
+  const handleMoreButtonClick = () => {
+    setIsComplaintModalOpen(true);
+  };
+
+  const handleBackDropClick = () => {
+    setIsComplaintModalOpen(false);
+  };
+
+  return { isComplaintModalOpen, handleBackDropClick, handleMoreButtonClick };
+};

src/pages/Buyer/BuyerLetter.tsx

@@ -8,6 +8,9 @@ import { ReactComponent as More } from 'assets/icons/icon-more-review-card.svg';
 import { LetterMainSection } from 'components/Buyer/BuyerLetter/LetterMainSection';
 import { LetterTags } from 'components/Buyer/BuyerLetter/LetterTags';
 import { BackIcon, HeaderWrapper } from 'components/Buyer/Common/Header';
+import { BackDrop } from 'components/Common/BackDrop';
+import { ComplaintModal } from 'components/Seller/Common/ComplaintModal';
+import { useShowComplainttModal } from 'hooks/useShowComplaintModal';
 import { useLayoutEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
@@ -45,6 +48,8 @@ export const BuyerLetter = () => {
   const [deadline, setDeadline] = useState<string>('');
   //로딩 state
   const [isLoading, setIsLoading] = useRecoilState<boolean>(isLoadingState);
+  const { isComplaintModalOpen, handleBackDropClick, handleMoreButtonClick } =
+    useShowComplainttModal();
   //상대 이름 state
   const [opponentNickname, setOpponentNickname] = useState<string>('');
 
@@ -172,6 +177,10 @@ export const BuyerLetter = () => {
   //
   //
 
+  const handleComplaintButtonClick = () => {
+    window.open(process.env.REACT_APP_TEMP_CUSTOMER_SERVICE_URL);
+  };
+
   if (isLoading) {
     return (
       <>
@@ -208,8 +217,16 @@ export const BuyerLetter = () => {
           />
           {/* params로 넘어온 id에 해당하는 상담이름 */}
           <Heading color={Grey1}>{opponentNickname}</Heading>
-          <MoreIcon />
+          <MoreIcon onClick={handleMoreButtonClick} />
         </HeaderWrapper>
+        {isComplaintModalOpen && (
+          <>
+            <BackDrop onClick={handleBackDropClick} />
+            <ComplaintModal
+              handleComplaintButtonClick={handleComplaintButtonClick}
+            />
+          </>
+        )}
         <LetterTags
           tagStatus={tagStatus}
           setTagStatus={setTagStatus}

src/pages/Seller/SellerConsult.tsx

@@ -14,7 +14,6 @@ export const SellerConsult = () => {
         }}
       />
       <TabA1 isBuyer={false} initState={2} />
-
       <SellerConsultSection />
     </>
   );