유저 활동기록 문의하기 답변완료시 ui 수정 ( #issue 338 ) #342
Conversation
|
""" Walkthrough이 변경사항은 사용자 마이페이지 활동기록의 문의 UI를 개선하고, 문의 답변 관련 컴포넌트의 스타일 및 동작을 수정합니다. 주요 변경점에는 문의 답변 상태 표시, 답변 내용 표시 구조 추가, textarea 높이 자동 조절, 스타일 세부 조정 등이 포함됩니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant InquiryComponent
participant StyledComponents
User->>InquiryComponent: 문의 목록에서 문의 클릭
InquiryComponent->>InquiryComponent: isOpen 상태 변경
InquiryComponent->>StyledComponents: 문의 상태 및 답변 여부에 따라 스타일 적용
InquiryComponent->>InquiryComponent: 답변 textarea 렌더 및 높이 자동 조절
InquiryComponent->>User: 문의 및 답변 내용 표시
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx (2)
24-32: 미사용 코드를 제거하거나 사용 목적을 명확히 하세요.
answerRef와handleChangeAnswerRef함수가 정의되었지만 실제로 사용되지 않고 있습니다. 만약 향후 사용 계획이 있다면 주석으로 설명하고, 그렇지 않다면 제거하세요.또한 옵셔널 체이닝을 사용하여 안전성을 높이세요:
const handleChangeAnswerRef = () => { - if (answerRef && answerRef.current) { + if (answerRef.current) { answerRef.current.style.height = 'auto'; answerRef.current.style.height = `${answerRef.current.scrollHeight}px`; } };🧰 Tools
🪛 Biome (1.9.4)
[error] 28-28: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
43-47: 불필요한 삼항 연산자를 단순화하세요.조건식을 더 간단하게 표현할 수 있습니다.
- <S.InquiryStateSpan $isCompletedAnswer={list.state ? true : false}> + <S.InquiryStateSpan $isCompletedAnswer={!!list.state}>🧰 Tools
🪛 Biome (1.9.4)
[error] 44-44: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/components/admin/adminInquiry/AdminInquiryAnswer.styled.ts(1 hunks)src/components/admin/adminInquiry/AdminInquiryAnswer.tsx(1 hunks)src/components/admin/adminInquiry/AdminInquiryAnswerWrite.styled.ts(1 hunks)src/components/admin/adminInquiry/AdminInquiryAnswerWrite.tsx(2 hunks)src/components/admin/adminInquiry/AdminInquiryDetailContent.styled.ts(1 hunks)src/components/common/admin/sidebar/AdminSidebar.styled.ts(1 hunks)src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts(3 hunks)src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx(4 hunks)src/hooks/admin/useAdminInquiry.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/hooks/admin/useAdminInquiry.ts (1)
src/constants/admin/adminModal.ts (1)
ADMIN_MODAL_MESSAGE(1-8)
🪛 Biome (1.9.4)
src/components/admin/adminInquiry/AdminInquiryAnswerWrite.tsx
[error] 49-49: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx
[error] 28-28: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 44-44: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (14)
src/components/common/admin/sidebar/AdminSidebar.styled.ts (1)
20-20: 사이드바 높이 설정이 올바르게 적용되었습니다.사이드바가 전체 높이를 차지하도록 하는 변경사항이 적절하게 구현되었습니다. 기존의
position: fixed스타일과 잘 조화됩니다.src/components/admin/adminInquiry/AdminInquiryAnswer.styled.ts (1)
13-15: 문의 답변 컨테이너 간격 조정이 적절합니다.하단 여백을 추가하여 UI 레이아웃을 개선하는 변경사항입니다. 다른 관련 컴포넌트들과 일관된 간격을 유지합니다.
src/components/admin/adminInquiry/AdminInquiryAnswer.tsx (1)
18-18: 버튼 라벨 로직이 더 명확하고 안정적으로 개선되었습니다.로컬 상태 대신 props의
answerData를 직접 확인하여 '작성하기'/'수정하기' 버튼을 결정하는 것이 더 신뢰성 있는 접근입니다. 데이터의 원본 소스를 기반으로 UI를 결정하는 올바른 패턴입니다.src/components/admin/adminInquiry/AdminInquiryAnswerWrite.styled.ts (2)
18-20: 컨테이너 하단 여백이 일관되게 적용되었습니다.다른 문의 관련 컴포넌트들과 동일한
margin-bottom: 5rem;적용으로 일관된 UI 간격을 유지합니다.
43-47: textarea 리사이징 제한 제거가 적절합니다.
resize: none;속성을 제거하여 사용자가 textarea 크기를 조절할 수 있게 하거나, 자동 크기 조절 기능과 연동되도록 개선된 것으로 보입니다. 사용자 경험 향상에 도움이 됩니다.src/components/admin/adminInquiry/AdminInquiryDetailContent.styled.ts (1)
48-49: 스타일링 개선이 적절합니다.
white-space: pre-line과overflow: hidden속성 추가로 문의 내용의 줄바꿈이 제대로 표시되고 컨테이너 밖으로 내용이 넘치는 것을 방지합니다.src/components/admin/adminInquiry/AdminInquiryAnswerWrite.tsx (1)
104-104: JSX 구문 정리가 적절합니다.자체 닫힘 태그로 변경한 것이 좋습니다.
src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx (2)
1-1: React 명시적 임포트가 좋습니다.React와 필요한 훅들을 명시적으로 임포트한 것이 좋습니다.
74-84: 답변 내용 표시 로직이 잘 구현되었습니다.조건부 렌더링을 통한 답변 내용 표시와 새로운 UI 컴포넌트들의 구성이 적절합니다.
src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts (5)
1-1: LGTM! css 헬퍼 추가가 적절합니다.조건부 스타일링을 위해
css헬퍼를 import에 추가한 것이 올바른 변경사항입니다.
28-40: 조건부 스타일링이 잘 구현되었습니다.
$isCompletedAnswerprop을 기반으로 한 조건부 스타일링이 올바르게 구현되었습니다. 테마 색상을 일관성 있게 사용하고 있어 좋습니다.
72-74: LGTM! 답변 컨텐츠 컨테이너 스타일링이 적절합니다.적절한 여백을 제공하는 간단하고 깔끔한 구현입니다.
76-80: LGTM! Flex 레이아웃이 잘 구성되었습니다.gap과 margin을 사용한 flex 레이아웃이 답변 컨텐츠 구조화에 적절합니다.
90-94: LGTM! 줄바꿈 지원이 잘 구현되었습니다.
white-space: pre-line속성을 통해 PR 목표에 명시된 줄바꿈 지원이 올바르게 구현되었습니다. 폰트 스타일링도 적절합니다.
| useEffect(() => { | ||
| if (inputRef && inputRef.current) { | ||
| inputRef.current.style.height = 'auto'; | ||
| inputRef.current.style.height = `${inputRef.current.scrollHeight}px`; | ||
| } | ||
| }, [answer]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
텍스트에어리어 높이 자동 조절 로직을 개선하세요.
자동 높이 조절 기능은 좋지만 몇 가지 개선이 필요합니다:
- 옵셔널 체이닝을 사용하여 안전성을 높이세요
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.
| export const InquiryAnswerIconWrapper = styled.div` | ||
| align-items: start; | ||
| svg { | ||
| width: 1rem; | ||
| height: 1rem; | ||
| } | ||
| `; |
There was a problem hiding this comment.
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.
| 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.
There was a problem hiding this comment.
🧩 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.
구현내용
유저 활동기록 문의하기 답변완료시 ui 수정
content 개행 받아올 수 있게 수정 사이드바 높이 100%로 수정
연관이슈
close #338
Summary by CodeRabbit
신규 기능
버그 수정
개선 및 스타일
기타