Feat(client): SuggestedMemoList 컴포넌트 구현 by jm8468 · Pull Request #273 · TEAM-CLUSTAR/CLUSTAR-CLIENT

jm8468 · 2026-07-30T16:53:55Z

📌 Summary

[Feat] suggested-memo-list 컴포넌트 구현 #236

메모 화면에서 클릭 시 열고 닫히는 "AI 추천 메모" 드롭다운(SuggestedMemoList) 컴포넌트를 신규 구현.

📚 Tasks

SuggestedMemoItem 컴포넌트 구현
Icon 컴포넌트에 shrink style 추가
SuggestedMemoList 컴포넌트 구현

🔍 Describe

apps/client/src/shared/components/ai-prompt/components/suggested-memo-list/에 SuggestedMemoList/SuggestedMemoItem 신규 추가
- chevron 버튼 클릭으로 열고 닫히는 토글 방식 드롭다운. 열리면 chevron 아이콘이 180도 회전
- 드롭다운 패널은 position: absolute + zIndex(디자인 토큰)로 다른 콘텐츠 위에 뜨도록 구현
- memos에 isDisabled 필드를 포함해 외부(상위 컴포넌트)에서 이미 선택된 메모의 비활성 상태를 주입하는 구조로 설계 -> 선택 상태의 단일 소스를 상위에 둠
- 최대 3개까지만 노출(MAX_SUGGESTED_MEMO_COUNT)
packages/cds-icon의 Icon 컴포넌트에 flexShrink: 0 추가
- flex 컨테이너 안에서 아이콘이 형제 요소에 밀려 가로만 찌그러지던 문제 수정 (SVG는 width/height가 속성으로 고정되어 있어 aspect-ratio로는 해결 불가하고 flex-shrink 억제가 근본 원인 해결책)
- 요거는 추후 className 쪽으로 옮겨야 합니다! TODO에 적어뒀어요

- 추후 cn으로 변경 필요

github-actions · 2026-07-30T16:54:56Z

🎨 Storybook 배포 완료

PR 작성자: @jm8468

🔗 배포된 Storybook 보기

twossu

스프린트하면서 기존 ai-prompt에서 ai-panel로 네이밍이 변경될 것이어서 지연님이 작업하신 pr에서 폴더 구조를 잡아주셨는데 참고해서 위치 변동하고 머지하면 좋을 것 같아요! 저도 지금 ai-panel에서 다 작업중이었거던여희헤희헤🧎‍♂️🧎🧎‍♀️🐺

twossu · 2026-08-01T13:34:39Z

지금까지 컴포넌트 하나당 파일 하나로 분리해온 걸로 알고 있는데 여기서는 SuggestedMemoItem을 SuggestedMemoList랑 같은 파일에 둔 의도가 있으실까욥! 어차피 List 안에서만 쓰이는 컴포넌트이기는 한데 궁금하옵니다1!

저도 궁금하옵니다!

SuggestedMemoIte이 현재는 SuggestedMemoList 내부에서만 사용되긴 하지만, 지금까지 컴포넌트 단위로 *.tsx / *.css.ts를 분리해온 패턴을 생각하면 item도 파일을 분리하는 편이 더 일관적일 것 같아요!

특히 SuggestedMemoItem도 props, disabled 상태, 선택 버튼, hover 스타일을 따로 가지고 있어서 단순한 JSX 조각이라기보다는 하나의 하위 컴포넌트에 가까워 보여요!

나중에 item 쪽 상태나 스타일이 더 늘어날 가능성도 있어서, 아래처럼 분리하면 파일 역할이 더 명확해질 것 같습니당

suggested-memo-list/ ├── suggested-memo-list.tsx ├── suggested-memo-list.css.ts ├── suggested-memo-item.tsx └── suggested-memo-item.css.ts

저는 응집도 측면에서 접근했어요.

SuggestedMemoItem은 SuggestedMemoList 밖에서 재사용 되지 않아요
-> memoTitle, isSelected, onSelectMemo props가 SuggestedMemoTypes와 SuggestedMemoList의 맥락에 의존하고 있어요.

즉, SuggestedMemoTypes가 바뀌면 SuggestedMemoItem의 props도 함께 바뀌어야 해요
-> 함께 수정되는 코드이므로 응집도 면에서 함께 두는 편이 좋아요

만약 별도의 파일로 쪼갠다고 가정하면 재사용성의 이점은 없고, 파일 탐색 비용이 늘어나게 돼요.

https://github.com/TEAM-CLUSTAR/CLUSTAR-CLIENT/blob/develop/apps/client/src/shared/components/memo-list-view/components/memo-list/memo-card-grid.tsx
여기서도 파일 하나에 컴포넌트 2개가 있어요!

https://frontend-fundamentals.com/code-quality/code/examples/submit-button.html
내용 자체는 이 코멘트와 다르지만 응집도 측면도 생각해보게 하는 것 같습니당
저는 만약 ViewerSubmitButton()과 AdminSubmitButton()이 서로 다른 파일에 있었다면 응집도는 어떻게 되며, 디버깅 난이도는 어떻게 변화할까라는 생각을 해봤어요.

나중에 item 쪽 상태나 스타일이 더 늘어날 가능성도 있어서, 아래처럼 분리하면 파일 역할이 더 명확해질 것 같습니당

이 부분은 정말 그렇게 해야할 때가 왔을 때 하는 편이 좋다고 생각했어요.
많은 경험을 통해 직관적으로 이 컴포넌트가 재사용될 것 같으며, 미래에 이 컴포넌트의 코드가 길어질지 예상이 간다면 하는 것이 좋다고 조언을 들었었어요.
예상을 잘못해서 섣부르게 분리하게 되면 응집도가 떨어지거나 컴포넌트를 추적하는 비용이 높아질 수 있기 때문이에요.

저는 이 컴포넌트가 미래에 더 상태값이 많아지고 코드가 길어질지 예측하지 못해서 우선 함께 두었어요.
분리해야 한다면 해당 컴포넌트만 잘라서 옮기면 되기 때문에, 나중에 변경해도 큰 리소스가 들지 않는다고 판단했습니다!

twossu · 2026-08-01T14:25:34Z

+          type="button"
+          className={styles.chevronButton({ isOpen })}
+          aria-expanded={isOpen}
+          onClick={() => setIsOpen((prev) => !prev)}


버튼 말고도 아코디언의 외부를 클릭하면 닫히는 로직도 있으면 UX적으로 편할 것 같다는 생각이 들긴했는데 기획분들하고 추가할지 상의해보면 좋을 것 같아요!!!

저도 chevron 버튼뿐 아니라 header 전체를 클릭했을 때 열리고 닫히는 편이 더 편하다고 생각합니당

드롭다운 외부 클릭 시 드롭다운이 닫히는 로직 추가에 대한 질문

header 클릭해도 열고 닫히는 기능 추가에 대한 질문

디자인과 기획분들 얘기 듣고 반영해볼게요~!

jyeon03

수고하셨습니다요!!

컴포넌트 파일 위치 관련해서 해당 PR 참고하시면 좋을 것 같습니다~~

jyeon03 · 2026-08-02T17:00:31Z

+  padding: '1.2rem',
+  borderRadius: '8px',
+  width: '44rem',
+  animation: `${fadeIn} 0.2s ease-out`,


드롭다운이 열릴 때는 fadeIn이 적용되어 부드럽게 나타나는데, 닫힐 때는 조금 딱딱하게 사라지는 느낌이 있는 것 같아요!! 닫힐때도 비슷한 애니메이션 추가하는 건 어떨까용???

jyeon03 · 2026-08-02T17:02:30Z

저도 궁금하옵니다!

SuggestedMemoIte이 현재는 SuggestedMemoList 내부에서만 사용되긴 하지만, 지금까지 컴포넌트 단위로 *.tsx / *.css.ts를 분리해온 패턴을 생각하면 item도 파일을 분리하는 편이 더 일관적일 것 같아요!

특히 SuggestedMemoItem도 props, disabled 상태, 선택 버튼, hover 스타일을 따로 가지고 있어서 단순한 JSX 조각이라기보다는 하나의 하위 컴포넌트에 가까워 보여요!

나중에 item 쪽 상태나 스타일이 더 늘어날 가능성도 있어서, 아래처럼 분리하면 파일 역할이 더 명확해질 것 같습니당

suggested-memo-list/ ├── suggested-memo-list.tsx ├── suggested-memo-list.css.ts ├── suggested-memo-item.tsx └── suggested-memo-item.css.ts

jyeon03 · 2026-08-02T17:19:32Z

+          type="button"
+          className={styles.chevronButton({ isOpen })}
+          aria-expanded={isOpen}
+          onClick={() => setIsOpen((prev) => !prev)}


저도 chevron 버튼뿐 아니라 header 전체를 클릭했을 때 열리고 닫히는 편이 더 편하다고 생각합니당

- 백엔드에서 추천 메모는 최대 3개만 보내도록 관리해요. - 해당 정책에 대한 책임 원천은 백엔드에 있어서 프론트 코드에서는 관련 코드를 제거해요.

jm8468 · 2026-08-03T09:54:52Z

@twossu @jyeon03
폴더를 옮겼는데, 혹시 reference-memos 폴더에 들어갈 다른 컴포넌트나 기능이 있을까요?
reference-memos에 suggested-memo-list만 들어간다면 reference-memos는 폴더 depth만 늘린다고 생각해서요!

저도 reference-memos에 suggested-memo-list만 들어가는 거라면 reference-memos 없이 suggested-memo 폴더 하나로 평탄화하면 좋을 것 같습니다!

ai-panel/ └── suggested-memo/ ├── suggested-memo.tsx ├── suggested-memo.css.ts ├── suggested-memo-item.tsx └── suggested-memo-item.css.ts

jm8468 added 3 commits July 30, 2026 16:07

feat: SuggestedMemoItem 컴포넌트 구현

a184192

feat: Icon 컴포넌트에 shrink style 추가

96222ba

- 추후 cn으로 변경 필요

feat: SuggestedMemoList 컴포넌트 구현

e7041c5

jm8468 requested a review from a team as a code owner July 30, 2026 16:53

jm8468 requested review from jogpfls, jyeon03 and twossu and removed request for a team July 30, 2026 16:53

jm8468 linked an issue Jul 30, 2026 that may be closed by this pull request

[Feat] suggested-memo-list 컴포넌트 구현 #236

Open

github-actions Bot assigned jm8468 Jul 30, 2026

github-actions Bot added ✨ Feat 새로운 기능 추가 🦄 임서준 웹 37기 임서준 labels Jul 30, 2026

jm8468 changed the title ~~Feat/suggested memo list/#236~~ feat(app): SuggestedMemoList 컴포넌트 구현 Jul 30, 2026

jm8468 changed the title ~~feat(app): SuggestedMemoList 컴포넌트 구현~~ Feat(client): SuggestedMemoList 컴포넌트 구현 Jul 30, 2026

twossu reviewed Aug 1, 2026

View reviewed changes

jyeon03 reviewed Aug 2, 2026

View reviewed changes

jm8468 added 7 commits August 3, 2026 17:31

refactor: isDisabled -> isSelected로 변경

25ad7b8

fix: aria-label이 명시적인 의미를 가지도록 개선

91bb257

refactor: 정책을 드러내기 위한 코드 제거

94aa7e9

- 백엔드에서 추천 메모는 최대 3개만 보내도록 관리해요. - 해당 정책에 대한 책임 원천은 백엔드에 있어서 프론트 코드에서는 관련 코드를 제거해요.

refactor: aria-label에 추천 추가

a002be0

refactor: 추천 메모가 없을 때의 렌더링 책임을 상위 컴포넌트로 이동

b195959

refactor: suggested-memo-list의 폴더 위치 이동

da80bfa

chore: 숨은 정책을 드러내기 위한 주석 추가

13671b7

jm8468 commented Aug 3, 2026

View reviewed changes

jm8468 mentioned this pull request Aug 3, 2026

Refactor(client): PromptInput 컴포넌트 리디자인 적용 #272

Open

Uh oh!

Conversation

jm8468 commented Jul 30, 2026

Uh oh!

github-actions Bot commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Storybook 배포 완료

Uh oh!

twossu left a comment

Choose a reason for hiding this comment

Uh oh!

twossu Aug 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jyeon03 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Jul 30, 2026 •

edited

Loading

twossu Aug 1, 2026 •

edited

Loading