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

apps/client/src/features/memo-search-modal/memo-search-list-item/memo-search-list-item.tsx → apps/client/src/features/memo-search-modal/components/memo-search-list-item/memo-search-list-item.tsx

@@ -1,30 +1,21 @@
 import { Icon } from '@cds/icon';
 import { Tag } from '@cds/ui';
 
-import { TagDisplayInfo } from '@shared/types/tag';
 import { formatTodayTimeOrDate } from '@shared/utils/format-date';
 
+import { MemoSearchItemData } from '../../types';
+
 import * as styles from './memo-search-list-item.css';
 
 const MAX_TAG_COUNT = 4;
 
 interface MemoSearchListItemProps {
-  memoId: number;
-  title: string;
-  content: string;
-  openedAt: string;
-  tags?: TagDisplayInfo[];
+  memo: MemoSearchItemData;
   onClickMemo: (memoId: number) => void;
 }
 
-const MemoSearchListItem = ({
-  memoId,
-  title,
-  content,
-  openedAt,
-  tags = [],
-  onClickMemo,
-}: MemoSearchListItemProps) => {
+const MemoSearchListItem = ({ memo, onClickMemo }: MemoSearchListItemProps) => {
+  const { memoId, title, content, openedAt, tags = [] } = memo;
   const visibleTags = tags.slice(0, MAX_TAG_COUNT);
 
   const handleClickMemo = () => {
@@ -40,7 +31,7 @@ const MemoSearchListItem = ({
         onClick={handleClickMemo}
         aria-label={`${title} 메모 상세 보기`}
       />
-      <div className={styles.header}>
+      <div className={styles.header} aria-hidden="true">
         <div className={styles.mainInfo}>
           <div className={styles.titleGroup}>
             <Icon
@@ -66,7 +57,9 @@ const MemoSearchListItem = ({
           {formatTodayTimeOrDate(openedAt)}
         </time>
       </div>
-      <p className={styles.content}>{content}</p>
+      <p className={styles.content} aria-hidden="true">
+        {content}
+      </p>
     </article>
   );
 };

apps/client/src/features/memo-search-modal/index.ts

@@ -0,0 +1 @@
+export { default as MemoSearchModal } from './memo-search-modal';

apps/client/src/features/memo-search-modal/memo-search-modal.css.ts

@@ -0,0 +1,70 @@
+import { style } from '@vanilla-extract/css';
+
+import { themeVars } from '@cds/ui';
+
+export const content = style({
+  overflow: 'hidden',
+  width: '82rem',
+  height: '62rem',
+  border: `1px solid ${themeVars.color.grey400}`,
+  borderRadius: '16px',
+  boxShadow: '0 0 24px 8px rgba(0, 0, 0, 0.08)',
+});
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  height: '100%',
+  backgroundColor: themeVars.color.white,
+});
+
+export const body = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.4rem',
+  flex: 1,
+  minHeight: 0,
+  padding: '1.8rem 0.8rem 1.8rem 2rem',
+});
+
+export const sectionTitle = style({
+  padding: '0 1.4rem',
+  ...themeVars.fontStyles.body_m_14,
+  color: themeVars.color.grey600,
+});
+
+export const list = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.4rem',
+  flex: 1,
+  minHeight: 0,
+  overflowY: 'auto',
+  paddingRight: '1.2rem',
+  paddingLeft: '0.4rem',
+  scrollbarWidth: 'thin',
+  scrollbarColor: `${themeVars.color.grey300} transparent`,
+
+  selectors: {
+    '&::-webkit-scrollbar': {
+      width: '0.8rem',
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: 'transparent',
+    },
+    '&::-webkit-scrollbar-thumb': {
+      border: 'none',
+      borderRadius: '999px',
+      backgroundColor: themeVars.color.grey300,
+      backgroundClip: 'border-box',
+    },
+  },
+});
+
+export const emptyText = style({
+  ...themeVars.fontStyles.body_m_14,
+  padding: '4rem 0',
+  color: themeVars.color.grey500,
+  textAlign: 'center',
+});

apps/client/src/features/memo-search-modal/memo-search-modal.tsx

@@ -0,0 +1,75 @@
+import { Modal } from '@cds/ui';
+
+import MemoSearchListItem from './components/memo-search-list-item/memo-search-list-item';
+import SearchBar from './components/search-bar/search-bar';
+import { MemoSearchItemData } from './types';
+
+import * as styles from './memo-search-modal.css';
+
+const getSearchResultSectionTitle = (count: number) => {
+  return `검색 결과(${count}개)`;
+};
+
+interface MemoSearchModalProps {
+  open: boolean;
+  searchValue: string;
+  recentMemos: MemoSearchItemData[];
+  searchResultMemos?: MemoSearchItemData[];
+  onOpenChange: (open: boolean) => void;
+  onChangeSearchValue: (value: string) => void;
+  onSearch: (value: string) => void;
+  onClickMemo: (memoId: number) => void;
+}
+
+const MemoSearchModal = ({
+  open,
+  searchValue,
+  recentMemos,
+  searchResultMemos,
+  onOpenChange,
+  onChangeSearchValue,
+  onSearch,
+  onClickMemo,
+}: MemoSearchModalProps) => {
+  const isSearchResult = searchResultMemos !== undefined;
+  const memos = searchResultMemos ?? recentMemos;
+  const resultCount = searchResultMemos?.length ?? 0;
+  const sectionTitle = isSearchResult
+    ? getSearchResultSectionTitle(resultCount)
+    : '최근 열람한 메모';
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <Modal.Content className={styles.content} ariaLabel="메모 검색">
+        <div className={styles.container}>
+          <SearchBar
+            value={searchValue}
+            onChange={onChangeSearchValue}
+            onSearch={onSearch}
+          />
+          <div className={styles.body}>
+            {memos.length > 0 ? (
+              <>
+                <span className={styles.sectionTitle}>{sectionTitle}</span>
+                <div className={styles.list}>
+                  {memos.map((memo) => (
+                    <MemoSearchListItem
+                      key={memo.memoId}
+                      memo={memo}
+                      onClickMemo={onClickMemo}
+                    />
+                  ))}
+                </div>
+              </>
+            ) : (
+              // TODO: empty view 컴포넌트 디자인 확정되는 대로 교체 예정
+              <p className={styles.emptyText}>표시할 메모가 없습니다.</p>
+            )}
+          </div>
+        </div>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default MemoSearchModal;

apps/client/src/features/memo-search-modal/types.ts

@@ -0,0 +1,9 @@
+import { TagDisplayInfo } from '@shared/types/tag';
+
+export interface MemoSearchItemData {
+  memoId: number;
+  title: string;
+  content: string;
+  openedAt: string;
+  tags?: TagDisplayInfo[];
+}