Merged
Conversation
|
🚀 storybook url: https://689bfce92a7bd08f5aa1edbe-gtinarkjdh.chromatic.com/ |
|
Caution Review failedPull request was closed or merged during review Walkthrough링크 상세 패널의 제목·메모 편집 UI를 통합·정리했습니다. 로컬 래퍼 컴포넌트( Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 2❌ Failed checks (2 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![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 (3)
src/components/wrappers/LinkCardDetailPanel/Sections/SummarySection.tsx (1)
134-140: 잘림 구현과 overflow 측정 기준을 같이 정리해 주세요.Line 134-140에서 잘림은 inline
maxHeight로 옮겼는데, overflow 측정은 아직line-clamp-5를 제거/복원하는 흐름을 유지하고 있습니다. 지금은scrollHeight덕분에 동작하더라도 구현이 둘로 갈라져 있어서 다음 수정 때 헷갈리기 쉽습니다. 측정 로직도 현재 방식에 맞춰 같이 정리해 두는 편이 좋겠습니다.♻️ 정리 예시
- const wasClamped = element.classList.contains('line-clamp-5'); - if (wasClamped) element.classList.remove('line-clamp-5'); - const fullHeight = element.scrollHeight; - - if (wasClamped) element.classList.add('line-clamp-5');🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/wrappers/LinkCardDetailPanel/Sections/SummarySection.tsx` around lines 134 - 140, 요약 영역의 잘림 스타일과 overflow 측정 로직이 분리되어 혼란을 초래하므로 한 가지 방식으로 통일하세요: inline maxHeight 스타일 (현재 조건부로 적용되는 maxHeight: `calc(1.6em * 5)` / overflow: 'hidden' 사용)로 잘림을 유지하고, 더 이상 class 토글(line-clamp-5 제거/복원) 흐름을 사용하지 않도록 정리합니다; 측정 로직은 SummarySection에서의 요소 참조를 이용해 기존 scrollHeight 비교 대신 maxHeight 값(또는 lineHeight * 5 계산 결과)과 clientHeight를 비교해 isExpandable/overflow 판단을 하도록 바꾸고, isExpanded 토글 동작은 이 통일된 판단 결과를 기반으로만 작동하게 수정하세요 (참조 식별자: isExpanded, line-clamp-5, maxHeight, scrollHeight, clientHeight).src/components/layout/SideNavigation/components/MenuSection/AddLink/LinkThumbnailTitleSection.tsx (1)
55-63: 제목 제한값은 상수로 맞춰 두는 편이 안전합니다.상세 패널 쪽은 이미
MAX_TITLE_LENGTH를 쓰고 있어서, 여기만100을 직접 두면 카운터와 실제 제한값이 나중에 쉽게 어긋날 수 있습니다.♻️ 제안
import Skeleton from '@/components/basics/Skeleton/Skeleton'; import Spinner from '@/components/basics/Spinner/Spinner'; import TextArea from '@/components/basics/TextArea/TextArea'; +import { MAX_TITLE_LENGTH } from '@/lib/constants/link'; import Image from 'next/image'; import { Control, Controller, FieldErrors } from 'react-hook-form'; @@ - maxLength={100} + maxLength={MAX_TITLE_LENGTH} showMax🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/layout/SideNavigation/components/MenuSection/AddLink/LinkThumbnailTitleSection.tsx` around lines 55 - 63, The TextArea in LinkThumbnailTitleSection is using a hardcoded maxLength of 100 which can drift from the shared MAX_TITLE_LENGTH constant used elsewhere; replace the literal 100 with the existing MAX_TITLE_LENGTH constant (import it if needed) and ensure the showMax/count UI still reads from MAX_TITLE_LENGTH so the input maxLength and displayed counter remain consistent (refer to TextArea component props and the MAX_TITLE_LENGTH symbol).src/components/layout/SideNavigation/components/MenuSection/AddLink/index.tsx (1)
203-211: 메모 제한값은 공용 상수를 재사용해 주세요.여기서
500을 직접 두면src/lib/constants/link.ts와 다시 어긋날 수 있습니다.showMax까지 붙은 만큼 카운터와maxlength는 같은 소스를 바라보는 편이 안전합니다.♻️ 제안
import Modal from '@/components/basics/Modal/Modal'; import TextArea from '@/components/basics/TextArea/TextArea'; import { usePostLinks } from '@/hooks/usePostLinks'; +import { MAX_MEMO_LENGTH } from '@/lib/constants/link'; import { useLinkStore } from '@/stores/linkStore'; @@ - maxLength={500} + maxLength={MAX_MEMO_LENGTH} showMax🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/layout/SideNavigation/components/MenuSection/AddLink/index.tsx` around lines 203 - 211, Replace the hardcoded 500 used in the TextArea props (maxLength on the TextArea with id "memo-input") with the shared constant exported from src/lib/constants/link.ts (import the constant, e.g. MEMO_MAX_LENGTH or the project’s equivalent) and use that single constant for both the maxLength prop and the showMax counter so the memo limit in the AddLink TextArea remains synchronized with the shared link constants.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/wrappers/LinkCardDetailPanel/Sections/MemoSection.tsx`:
- Around line 80-95: The div with className memoCard() currently enters edit
mode on focus which breaks keyboard navigation; remove the onFocus handler so
editing only starts on click or the onKeyDown Enter/Space handlers (leave
role="button", tabIndex={0} and the onKeyDown logic intact) — update the JSX for
the div (the element that sets role="button", tabIndex, onClick, onFocus,
onKeyDown) to drop onFocus={() => setIsEditing(true)}.
In `@src/components/wrappers/LinkCardDetailPanel/Sections/TitleSection.tsx`:
- Around line 68-74: TextArea is currently rendered without a
placeholder/aria-label so the shared TextArea falls back to the default
screen-reader string ("무엇이든 물어보세요"); update the TitleSection's TextArea usage
(the component rendering internalTitle, ref titleAreaRef, and MAX_TITLE_LENGTH)
to pass an explicit accessible label—either set aria-label="Link title" (or a
localized equivalent) or provide a meaningful placeholder prop that doubles as
the aria-label—so screen readers announce an appropriate label for the title
field.
In `@src/lib/constants/link.ts`:
- Line 2: The PR lowered MAX_MEMO_LENGTH to 500 which changes UX for existing
memos; restore the original MAX_MEMO_LENGTH constant (keep the prior larger
value) in src/lib/constants/link.ts and do not change memo validation limit, and
instead add a frontend character counter tied to MAX_MEMO_LENGTH (use the same
constant) so the UI shows currentLength / MAX_MEMO_LENGTH without enforcing a
stricter server-side limit; refer to MAX_MEMO_LENGTH when wiring the counter and
validation logic so behavior stays consistent.
---
Nitpick comments:
In
`@src/components/layout/SideNavigation/components/MenuSection/AddLink/index.tsx`:
- Around line 203-211: Replace the hardcoded 500 used in the TextArea props
(maxLength on the TextArea with id "memo-input") with the shared constant
exported from src/lib/constants/link.ts (import the constant, e.g.
MEMO_MAX_LENGTH or the project’s equivalent) and use that single constant for
both the maxLength prop and the showMax counter so the memo limit in the AddLink
TextArea remains synchronized with the shared link constants.
In
`@src/components/layout/SideNavigation/components/MenuSection/AddLink/LinkThumbnailTitleSection.tsx`:
- Around line 55-63: The TextArea in LinkThumbnailTitleSection is using a
hardcoded maxLength of 100 which can drift from the shared MAX_TITLE_LENGTH
constant used elsewhere; replace the literal 100 with the existing
MAX_TITLE_LENGTH constant (import it if needed) and ensure the showMax/count UI
still reads from MAX_TITLE_LENGTH so the input maxLength and displayed counter
remain consistent (refer to TextArea component props and the MAX_TITLE_LENGTH
symbol).
In `@src/components/wrappers/LinkCardDetailPanel/Sections/SummarySection.tsx`:
- Around line 134-140: 요약 영역의 잘림 스타일과 overflow 측정 로직이 분리되어 혼란을 초래하므로 한 가지 방식으로
통일하세요: inline maxHeight 스타일 (현재 조건부로 적용되는 maxHeight: `calc(1.6em * 5)` /
overflow: 'hidden' 사용)로 잘림을 유지하고, 더 이상 class 토글(line-clamp-5 제거/복원) 흐름을 사용하지 않도록
정리합니다; 측정 로직은 SummarySection에서의 요소 참조를 이용해 기존 scrollHeight 비교 대신 maxHeight 값(또는
lineHeight * 5 계산 결과)과 clientHeight를 비교해 isExpandable/overflow 판단을 하도록 바꾸고,
isExpanded 토글 동작은 이 통일된 판단 결과를 기반으로만 작동하게 수정하세요 (참조 식별자: isExpanded,
line-clamp-5, maxHeight, scrollHeight, clientHeight).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 2930d5c9-59b2-4fd8-bc45-89ba45bdf017
📒 Files selected for processing (10)
src/components/layout/SideNavigation/components/MenuSection/AddLink/LinkThumbnailTitleSection.tsxsrc/components/layout/SideNavigation/components/MenuSection/AddLink/index.tsxsrc/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel.style.tssrc/components/wrappers/LinkCardDetailPanel/Sections/MemoSection.tsxsrc/components/wrappers/LinkCardDetailPanel/Sections/SummarySection.tsxsrc/components/wrappers/LinkCardDetailPanel/Sections/TitleSection.tsxsrc/components/wrappers/LinkCardDetailPanel/TitleTextArea.tsxsrc/components/wrappers/MemoTextArea/MemoTextArea.tsxsrc/lib/constants/link.tssrc/stories/MemoTextArea.stories.tsx
💤 Files with no reviewable changes (3)
- src/components/wrappers/LinkCardDetailPanel/TitleTextArea.tsx
- src/components/wrappers/MemoTextArea/MemoTextArea.tsx
- src/stories/MemoTextArea.stories.tsx
Bangdayeon
force-pushed
the
design/#452-show-text-length-in-title-and-memo
branch
from
6141d04 to
9b908cb
Compare
|
🚀 storybook url: https://689bfce92a7bd08f5aa1edbe-jnnwdhmklp.chromatic.com/ |
Seong-Myeong
approved these changes
Mar 26, 2026
Bangdayeon
force-pushed
the
design/#452-show-text-length-in-title-and-memo
branch
from
9b908cb to
a7cb1f4
Compare
|
🚀 storybook url: https://689bfce92a7bd08f5aa1edbe-jmexrwqsok.chromatic.com/ |
Seong-Myeong
approved these changes
Mar 31, 2026
Seong-Myeong
approved these changes
Mar 31, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
관련 이슈
PR 설명
eom