diff --git a/src/components/admin/adminInquiry/AdminInquiryAnswer.styled.ts b/src/components/admin/adminInquiry/AdminInquiryAnswer.styled.ts index e482d45e..6db9df7a 100644 --- a/src/components/admin/adminInquiry/AdminInquiryAnswer.styled.ts +++ b/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)``; diff --git a/src/components/admin/adminInquiry/AdminInquiryAnswer.tsx b/src/components/admin/adminInquiry/AdminInquiryAnswer.tsx index 4d4d486c..b327fc64 100644 --- a/src/components/admin/adminInquiry/AdminInquiryAnswer.tsx +++ b/src/components/admin/adminInquiry/AdminInquiryAnswer.tsx @@ -15,7 +15,7 @@ export default function AdminInquiryAnswer() { useOutletContext(); const [answer, setAnswer] = useState(''); - const selectButton: LinkType = answer === null ? '작성하기' : '수정하기'; + const selectButton: LinkType = answerData === null ? '작성하기' : '수정하기'; useEffect(() => { if (answerData === null) { diff --git a/src/components/admin/adminInquiry/AdminInquiryAnswerWrite.styled.ts b/src/components/admin/adminInquiry/AdminInquiryAnswerWrite.styled.ts index 477ee130..8fa52357 100644 --- a/src/components/admin/adminInquiry/AdminInquiryAnswerWrite.styled.ts +++ b/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; diff --git a/src/components/admin/adminInquiry/AdminInquiryAnswerWrite.tsx b/src/components/admin/adminInquiry/AdminInquiryAnswerWrite.tsx index 979901b4..fc38e43a 100644 --- a/src/components/admin/adminInquiry/AdminInquiryAnswerWrite.tsx +++ b/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 ( @@ -94,7 +101,7 @@ export default function AdminInquiryAnswerWrite() { value={answer} ref={inputRef} onChange={handleChangeAnswer} - > + /> {message} diff --git a/src/components/admin/adminInquiry/AdminInquiryDetailContent.styled.ts b/src/components/admin/adminInquiry/AdminInquiryDetailContent.styled.ts index 83fafc18..9294684e 100644 --- a/src/components/admin/adminInquiry/AdminInquiryDetailContent.styled.ts +++ b/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``; diff --git a/src/components/common/admin/sidebar/AdminSidebar.styled.ts b/src/components/common/admin/sidebar/AdminSidebar.styled.ts index 70bd5356..8b779351 100644 --- a/src/components/common/admin/sidebar/AdminSidebar.styled.ts +++ b/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}; `; diff --git a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts index b9312cf9..4c1273c2 100644 --- a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts +++ b/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; diff --git a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx index e7a5168b..832d042a 100644 --- a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx +++ b/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(null); + + const handleChangeAnswerRef = () => { + if (answerRef && answerRef.current) { + answerRef.current.style.height = 'auto'; + answerRef.current.style.height = `${answerRef.current.scrollHeight}px`; + } + }; return ( @@ -29,7 +40,11 @@ export default function Inquiry({ list, no }: InquiryProps) { {no} {`[${list.category}]`} {list.title} - {list.state ? '답변완료' : '확인중'} + + + {list.state ? '답변완료' : '확인중'} + + {isOpen && ( @@ -56,6 +71,17 @@ export default function Inquiry({ list, no }: InquiryProps) { )} + {answer && ( + + + + + + + {answer} + + + )} {isImageOpen.isImageOpen && ( { 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) {