Feat(client): 메모 검색 모달 구현

[jyeon03]

📌 Summary

• [Feat] SearchModal 구현 #285

• 메모 검색 모달 UI를 구현했습니당!
• feat/memo-search-list-item/#271 위에서 작업한 Stack PR입니다. 검색 모달 내부에서 MemoSearchListItem 컴포넌트를 사용해야 해서, 해당 브랜치의 변경사항을 기반으로 작업했습니다.

📚 Tasks

• SearchBar를 memo-search-modal feature 하위로 이동
• 검색 모달 하위 컴포넌트 폴더 구조 정리
• MemoSearchModal 컴포넌트 구현

🔍 Describe

1. Stack PR 구조

메모 검색 리스트 아이템 컴포넌트가 먼저 필요해서 feat/memo-search-list-item/#271 브랜치 위에서 작업했습니다.

feat/tag-component-redesign/#241
└── feat/memo-search-list-item/#271
    └── feat/search-modal/#285

2. 폴더 구조

검색 모달은 하나의 기능 단위라고 판단해서 features/memo-search-modal 하위에 배치했습니다.

• SearchBar, MemoSearchListItem은 검색 모달 내부에서 조합되는 세부 UI라 components/ 폴더 아래로 정리했습니다.
  최상위 조립 컴포넌트인 MemoSearchModal은 폴더 바로 아래에 두고, 외부에서는 index.ts를 통해 import할 수 있도록 했습니다.

features/
└── memo-search-modal/
    ├── index.ts
    ├── memo-search-modal.tsx
    ├── memo-search-modal.css.ts
    ├── types.ts
    └── components/
        ├── search-bar/
        │   ├── search-bar.tsx
        │   ├── search-bar.css.ts
        │   └── search-bar.test.tsx
        └── memo-search-list-item/
            ├── memo-search-list-item.tsx
            └── memo-search-list-item.css.ts

3. 검색 전 / 검색 후 상태 처리

• 검색 전에는 최근 열람한 메모를 보여줍니다.

recentMemos

• 검색 완료 후에는 검색 결과 메모를 보여줍니다.

searchResultMemos

• searchResultMemos가 undefined이면 검색 전 상태로 보고, 배열이면 검색 완료 상태로 판단하도록 했습니다.

const isSearchResult = searchResultMemos !== undefined;
const memos = searchResultMemos ?? recentMemos;

4. 검색 결과 개수 계산

서버 검색 API 응답에서 별도의 count 값을 내려주지 않기 때문에, 검색 결과 개수는 searchResultMemos.length 기준으로 계산하도록 했어요!

const resultCount = searchResultMemos?.length ?? 0;

5. Props 역할

MemoSearchModal은 아직 API 연동 전이라, 상태와 이벤트 처리는 상위 컴포넌트에서 제어할 수 있도록 구성했습니다.

• open: 모달 열림 여부
• searchValue: 검색바 입력값
• recentMemos: 검색 전 보여줄 최근 열람 메모 목록
• searchResultMemos: 검색 완료 후 보여줄 검색 결과 목록
• onOpenChange: 모달 열림/닫힘 상태 변경
• onChangeSearchValue: 검색어 입력값 변경
• onSearch: Enter로 검색을 확정했을 때 호출
• onClickMemo: 메모 아이템 클릭 시 호출

6. Empty 상태

• 현재 empty 상태는 임시 텍스트로만 처리해두었습니다.

// TODO: empty view 컴포넌트 디자인 확정되는 대로 교체 예정

검색 결과 없음 / 최근 메모 없음 상태는 다른 모달에서도 공통으로 쓰일 수 있는 UI라, 추후 별도 shared 컴포넌트 작업에서 교체할 예정입니다.

👀 To Reviewer

• MemoSearchModal props 구조가 검색 전/후 상태를 표현하기에 적절한지 확인 부탁드립니다.
• searchResultMemos === undefined를 검색 전 상태로 판단하는 방식이 괜찮은지 확인 부탁드립니다.
• empty 상태는 추후 공통 컴포넌트 작업에서 교체 예정입니다.

📸 Screenshot

2026-08-18.4.43.24.mov

[github-actions]

🎨 Storybook 배포 완료

PR 작성자: @jyeon03

🔗 배포된 Storybook 보기

[twossu]

저는 empty뷰를 정말 새까맣게 잊고있었네요

MemoSearchModal props 구조가 검색 전/후 상태를 표현하기에 적절한지 확인 부탁드립니다.

recentMemos와 searchResultMemos를 나눠 받는 부분에서 감탄하고 갑니다. 저는 처음엔 어차피 화면에 보이는 건 하나의 리스트니까 props도 하나로 합치면 되지 않을까 싶었는데 그렇게 합치면 어떤 리스트를 보여줄지 판단하는 로직을 상위 컴포넌트에서 처리해야 해서 오히려 좋지 않을 것 같아요. 상태를 이렇게 분리해서 받는 방식이 이번에 처음 봤는데 감탄하고갑니다.

[twossu]

Suggested change

	padding: '1.8rem 0.8rem 1.8rem 2rem',
	padding: '1.8rem 2rem'

body에 상하좌우 동일하게 패딩 넣고 list에서 패딩 설정하지 않아도 될 것 같은데 나눠서 스타일 적용한것이 궁금합니da🎃

[twossu]

isSearchResult, resultCount는 sectionTitle에만 쓰이니 인라인으로 처리해도 좋을 것 같아엽떡
⚰️🦇🧛🏼

Suggested change

	const sectionTitle = isSearchResult
	? getSearchResultSectionTitle(resultCount)
	: '최근 열람한 메모';
	const sectionTitle = searchResultMemos
	? getSearchResultSectionTitle(searchResultMemos.length)
	: '최근 열람한 메모';