Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
YouD0313 merged 3 commits into from
Jun 9, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1786a5c
feat: 활동기록 > 내 문의글 > 관리자 답변완료시 ui 수정
YouD0313 Jun 9, 2025
3398240
desing: content 개행 받아올 수 있게 수정, 사이드바 높이 100% 수정
YouD0313 Jun 9, 2025
8487c8d
refactor: 리뷰반영
YouD0313 Jun 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/admin/adminInquiry/AdminInquiryAnswer.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)``;

Expand Down
2 changes: 1 addition & 1 deletion src/components/admin/adminInquiry/AdminInquiryAnswer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
5 changes: 3 additions & 2 deletions src/components/admin/adminInquiry/AdminInquiryAnswerWrite.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ export const SpinnerWrapper = styled(SpinnerWrapperStyled)``;

export const InquiryAnswerContentContainer = styled(
AdminInquiryContentContainer
)``;
)`
margin-bottom: 5rem;
`;

export const InquiryAnswerWriteWrapper = styled(AdminInquiryContentWrapper)``;

Expand All @@ -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;
Expand Down
9 changes: 8 additions & 1 deletion src/components/admin/adminInquiry/AdminInquiryAnswerWrite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Comment on lines +48 to +53
Copy link

@coderabbitai coderabbitai bot Jun 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

텍스트에어리어 높이 자동 조절 로직을 개선하세요.

자동 높이 조절 기능은 좋지만 몇 가지 개선이 필요합니다:

  1. 옵셔널 체이닝을 사용하여 안전성을 높이세요
  2. handleChangeAnswer 함수와 코드 중복이 있습니다

다음과 같이 수정하세요:

  useEffect(() => {
-    if (inputRef && inputRef.current) {
+    if (inputRef.current) {
      inputRef.current.style.height = 'auto';
      inputRef.current.style.height = `${inputRef.current.scrollHeight}px`;
    }
  }, [answer]);

그리고 높이 조절 로직을 별도 함수로 분리하여 중복을 제거하는 것을 권장합니다:

const adjustTextareaHeight = () => {
  if (inputRef.current) {
    inputRef.current.style.height = 'auto';
    inputRef.current.style.height = `${inputRef.current.scrollHeight}px`;
  }
};
🧰 Tools
🪛 Biome (1.9.4)

[error] 49-49: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

🤖 Prompt for AI Agents 
In src/components/admin/adminInquiry/AdminInquiryAnswerWrite.tsx around lines 48
to 53, the textarea auto height adjustment logic should be improved by using
optional chaining for safer access to inputRef.current and by extracting the
height adjustment code into a separate function to avoid duplication with
handleChangeAnswer. Create a function like adjustTextareaHeight that sets the
height to 'auto' and then to the scrollHeight, and call this function both in
the useEffect and in handleChangeAnswer to centralize and reuse the logic.


if (isLoading) {
return (
<S.SpinnerWrapper $isAdmin={true}>
Expand Down Expand Up @@ -94,7 +101,7 @@ export default function AdminInquiryAnswerWrite() {
value={answer}
ref={inputRef}
onChange={handleChangeAnswer}
></S.InquiryAnswerWrite>
/>
</S.InquiryAnswerWriteWrapper>
<Modal isOpen={isOpen} onClose={handleModalClose}>
{message}
Expand Down
2 changes: 2 additions & 0 deletions src/components/admin/adminInquiry/AdminInquiryDetailContent.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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``;
Expand Down
1 change: 1 addition & 0 deletions src/components/common/admin/sidebar/AdminSidebar.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
`;

Expand Down
40 changes: 39 additions & 1 deletion src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled, { css } from 'styled-components';

export const Container = styled.div`
width: 100%;
Expand All @@ -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};
Expand Down Expand Up @@ -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;
}
`;
Comment on lines +82 to +88
Copy link

@coderabbitai coderabbitai bot Jun 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

display: flex 속성을 추가해야 합니다.

align-items: start를 사용하고 있지만 display: flex가 없어 align-items가 작동하지 않습니다.

다음 diff를 적용하여 수정하세요:

 export const InquiryAnswerIconWrapper = styled.div`
+  display: flex;
   align-items: start;
   svg {
     width: 1rem;
     height: 1rem;
   }
 `;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const InquiryAnswerIconWrapper = styled.div`
align-items: start;
svg {
width: 1rem;
height: 1rem;
}
`;
export const InquiryAnswerIconWrapper = styled.div`
display: flex;
align-items: start;
svg {
width: 1rem;
height: 1rem;
}
`;
🤖 Prompt for AI Agents 
In src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts
lines 82 to 88, the InquiryAnswerIconWrapper styled component uses align-items:
start without display: flex, so align-items has no effect. Add display: flex to
the InquiryAnswerIconWrapper styles to enable the flex container behavior and
make align-items work as intended.

Copy link
Collaborator Author

@YouD0313 YouD0313 Jun 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

부모에 이미 있잖아

Copy link

@coderabbitai coderabbitai bot Jun 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

@YouD0313 부모 컨테이너에 display: flex가 있는 것은 맞지만, InquiryAnswerIconWrapper 자체에서 align-items: start를 사용하려면 해당 요소도 flex 컨테이너가 되어야 합니다.

부모의 display: flex는 InquiryAnswerIconWrapper를 flex 아이템으로 만들지만, 그 내부 콘텐츠(SVG 아이콘)를 정렬하려면 InquiryAnswerIconWrapper 자체도 flex 컨테이너여야 합니다.

실제 사용 방식을 확인해보겠습니다.

🏁 Script executed:

# Check how InquiryAnswerIconWrapper is used in the TSX file
cat src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx | grep -A 10 -B 5 "InquiryAnswerIconWrapper"

Length of output: 801

@YouD0313 맞습니다! 다시 확인해보니 InquiryAnswerIconWrapper는 단일 아이콘만 포함하고 있고, 부모 컨테이너인 InquiryAnswerContentWrapper에서 이미 flex 레이아웃을 처리하고 있네요.

이 경우 InquiryAnswerIconWrapper의 align-items: start는 실제로 불필요할 수 있습니다. 아이콘과 텍스트의 정렬은 부모 컨테이너의 flex 속성으로 충분히 제어되기 때문입니다.

제 이전 제안이 틀렸습니다. 죄송합니다!

🐰💭

    /|   /|  
   ( :v:  ) 
    |(_)|
✏️ Learnings added 
Learnt from: YouD0313
PR: devpalsPlus/frontend#342
File: src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts:82-88
Timestamp: 2025-06-09T14:42:43.429Z
Learning: InquiryAnswerIconWrapper는 단일 ChevronRightIcon만 포함하며, 부모 InquiryAnswerContentWrapper가 이미 display: flex로 레이아웃을 제어하고 있어서 align-items: start 속성이 불필요할 수 있음

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.


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;
Expand Down
30 changes: 28 additions & 2 deletions src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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
Expand Down
25 changes: 11 additions & 14 deletions src/hooks/admin/useAdminInquiry.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down