Merge pull request #342 from devpalsPlus/feat/#338

유저 활동기록 문의하기 답변완료시 ui 수정 ( #issue 338 )

Author: YouD0313

src/components/admin/adminInquiry/AdminInquiryAnswer.styled.ts

@@ -10,7 +10,9 @@ import { SendButton } from '../../user/customerService/inquiry/Inquiry.styled';
 
 export const InquiryAnswerContentContainer = styled(
   AdminInquiryContentContainer
-)``;
+)`
+  margin-bottom: 5rem;
+`;
 
 export const InquiryAnswerContentWrapper = styled(AdminInquiryContentWrapper)``;
 

src/components/admin/adminInquiry/AdminInquiryAnswer.tsx

@@ -15,7 +15,7 @@ export default function AdminInquiryAnswer() {
     useOutletContext();
 
   const [answer, setAnswer] = useState<string>('');
-  const selectButton: LinkType = answer === null ? '작성하기' : '수정하기';
+  const selectButton: LinkType = answerData === null ? '작성하기' : '수정하기';
 
   useEffect(() => {
     if (answerData === null) {

src/components/admin/adminInquiry/AdminInquiryAnswerWrite.styled.ts

@@ -15,7 +15,9 @@ export const SpinnerWrapper = styled(SpinnerWrapperStyled)``;
 
 export const InquiryAnswerContentContainer = styled(
   AdminInquiryContentContainer
-)``;
+)`
+  margin-bottom: 5rem;
+`;
 
 export const InquiryAnswerWriteWrapper = styled(AdminInquiryContentWrapper)``;
 
@@ -39,7 +41,6 @@ export const InquiryAnswerWriteButton = styled(InquiryAnswerButton)`
 export const InquiryAnswerWriteButtonSpan = styled.span``;
 
 export const InquiryAnswerWrite = styled(InquiryContent)`
-  resize: none;
   border: 1px solid ${({ theme }) => theme.color.placeholder};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   padding: 1rem;

src/components/admin/adminInquiry/AdminInquiryAnswerWrite.tsx

@@ -45,6 +45,13 @@ export default function AdminInquiryAnswerWrite() {
     }
   }, [answerData]);
 
+  useEffect(() => {
+    if (inputRef && inputRef.current) {
+      inputRef.current.style.height = 'auto';
+      inputRef.current.style.height = `${inputRef.current.scrollHeight}px`;
+    }
+  }, [answer]);
+
   if (isLoading) {
     return (
       <S.SpinnerWrapper $isAdmin={true}>
@@ -94,7 +101,7 @@ export default function AdminInquiryAnswerWrite() {
           value={answer}
           ref={inputRef}
           onChange={handleChangeAnswer}
-        ></S.InquiryAnswerWrite>
+        />
       </S.InquiryAnswerWriteWrapper>
       <Modal isOpen={isOpen} onClose={handleModalClose}>
         {message}

src/components/admin/adminInquiry/AdminInquiryDetailContent.styled.ts

@@ -45,6 +45,8 @@ export const InquiryDeleteButton = styled(SendButton)`
 export const InquiryContent = styled.div`
   font-size: 1.1rem;
   width: 100%;
+  white-space: pre-line;
+  overflow: hidden;
 `;
 
 export const InquiryFileImgBlowUpButton = styled.button``;

src/components/common/admin/sidebar/AdminSidebar.styled.ts

@@ -17,6 +17,7 @@ export const SidebarContainer = styled.section`
   position: fixed;
   padding: 1rem;
   width: 15rem;
+  height: 100%;
   border-right: 1px solid ${({ theme }) => theme.color.grey};
 `;
 

src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   width: 100%;
@@ -25,6 +25,20 @@ export const InquiryState = styled.div`
   text-align: center;
 `;
 
+export const InquiryStateSpan = styled.span<{ $isCompletedAnswer: boolean }>`
+  width: fit-content;
+  color: ${({ $isCompletedAnswer, theme }) =>
+    $isCompletedAnswer ? theme.color.white : theme.color.green};
+
+  ${({ $isCompletedAnswer }) =>
+    $isCompletedAnswer &&
+    css`
+      background: ${({ theme }) => theme.color.navy};
+      border-radius: ${({ theme }) => theme.borderRadius.small};
+      padding: 0.2rem;
+    `}
+`;
+
 export const InquiryContentWrapper = styled.div`
   margin: 0.5rem 0;
   background: ${({ theme }) => theme.color.white};
@@ -55,6 +69,30 @@ export const MessageWrapper = styled.div`
   font-size: 0.8rem;
 `;
 
+export const InquiryAnswerContentContainer = styled.div`
+  margin-top: 1rem;
+`;
+
+export const InquiryAnswerContentWrapper = styled.div`
+  margin-top: 2rem;
+  display: flex;
+  gap: 0.5rem;
+`;
+
+export const InquiryAnswerIconWrapper = styled.div`
+  align-items: start;
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+
+export const InquiryAnswerContent = styled.div`
+  font-weight: 400;
+  font-size: 1.1rem;
+  white-space: pre-line;
+`;
+
 export const ModalImgContainer = styled.div`
   position: fixed;
   top: 0;

src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx

@@ -1,7 +1,9 @@
-import { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import type { MyInquiries } from '../../../../../../models/activityLog';
 import * as S from './Inquiry.styled';
 import { My_INQUIRIES_MESSAGE } from '../../../../../../constants/user/customerService';
+import ContentBorder from '../../../../../common/contentBorder/ContentBorder';
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
 
 interface InquiryProps {
   list: MyInquiries;
@@ -19,6 +21,15 @@ export default function Inquiry({ list, no }: InquiryProps) {
     isImageOpen: false,
     url: '',
   });
+  const answer = list.answer || '';
+  const answerRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleChangeAnswerRef = () => {
+    if (answerRef && answerRef.current) {
+      answerRef.current.style.height = 'auto';
+      answerRef.current.style.height = `${answerRef.current.scrollHeight}px`;
+    }
+  };
 
   return (
     <S.Container>
@@ -29,7 +40,11 @@ export default function Inquiry({ list, no }: InquiryProps) {
         <S.InquiryNumber>{no}</S.InquiryNumber>
         <S.InquiryCategory>{`[${list.category}]`}</S.InquiryCategory>
         <S.InquiryTitle>{list.title}</S.InquiryTitle>
-        <S.InquiryState>{list.state ? '답변완료' : '확인중'}</S.InquiryState>
+        <S.InquiryState>
+          <S.InquiryStateSpan $isCompletedAnswer={list.state ? true : false}>
+            {list.state ? '답변완료' : '확인중'}
+          </S.InquiryStateSpan>
+        </S.InquiryState>
       </S.InquiryTitleWrapper>
       {isOpen && (
         <S.InquiryContentWrapper>
@@ -56,6 +71,17 @@ export default function Inquiry({ list, no }: InquiryProps) {
               </S.MessageWrapper>
             </S.InquiryImgContainer>
           )}
+          {answer && (
+            <S.InquiryAnswerContentContainer>
+              <ContentBorder />
+              <S.InquiryAnswerContentWrapper>
+                <S.InquiryAnswerIconWrapper>
+                  <ChevronRightIcon />
+                </S.InquiryAnswerIconWrapper>
+                <S.InquiryAnswerContent>{answer}</S.InquiryAnswerContent>
+              </S.InquiryAnswerContentWrapper>
+            </S.InquiryAnswerContentContainer>
+          )}
           {isImageOpen.isImageOpen && (
             <S.ModalImgContainer>
               <S.ModalImgWrapper

src/hooks/admin/useAdminInquiry.ts

@@ -27,22 +27,19 @@ export const useAdminInquiry = ({
   const handleButtonState = (state: State, isDeleteApi: boolean = false) => {
     switch (state) {
       case 'success':
-        {
-          if (!isDeleteApi) {
-            handleModalOpen(ADMIN_MODAL_MESSAGE.writeSuccess);
+        if (!isDeleteApi) {
+          handleModalOpen(ADMIN_MODAL_MESSAGE.writeSuccess);
+        } else {
+          handleConfirm?.();
+          handleModalOpen(ADMIN_MODAL_MESSAGE.writeDeleteSuccess);
+        }
+        setTimeout(() => {
+          if (id) {
+            return navigate(`/admin/inquiries/detail/${id}`);
           } else {
-            handleConfirm?.();
-            handleModalOpen(ADMIN_MODAL_MESSAGE.writeDeleteSuccess);
+            return navigate(-1);
           }
-          const timer = setTimeout(() => {
-            if (id) {
-              return navigate(`/admin/inquiries/detail/${id}`);
-            } else {
-              return navigate(-1);
-            }
-          }, 1000);
-          clearTimeout(timer);
-        }
+        }, 1000);
         break;
       case 'fail':
         if (!isDeleteApi) {