[4-3] 거래 입력 메모 자동완성 구현 (#113)

* 거래 입력 메모 자동완성 기능 추가 (#57)

* 리뷰 반영: 최근 메모 요청 레이스 가드 및 조회 컬럼 최적화

Author: sscoderati

apps/api/src/transactions/transactions.controller.ts

@@ -48,6 +48,16 @@ export class TransactionsController {
     return await this.transactionsService.findRecentCategories(ledgerId, user.userId, type);
   }
 
+  @Get('recent-memos')
+  @ApiOperation({ summary: '카테고리별 최근 메모 자동완성 목록 조회' })
+  async recentMemos(
+    @CurrentUser() user: AuthUser,
+    @Param('ledgerId', ParseIntPipe) ledgerId: number,
+    @Query('categoryId', ParseIntPipe) categoryId: number,
+  ) {
+    return await this.transactionsService.findRecentMemos(ledgerId, user.userId, categoryId);
+  }
+
   @Post()
   @ApiOperation({ summary: '거래 생성' })
   async create(

apps/api/src/transactions/transactions.service.ts

@@ -182,6 +182,34 @@ export class TransactionsService {
     return categoryIds.map((id) => map.get(id)).filter(Boolean);
   }
 
+  async findRecentMemos(ledgerId: number, userId: number, categoryId: number) {
+    await this.assertMembership(ledgerId, userId);
+
+    const txs = await this.db.query.transactions.findMany({
+      where: and(
+        eq(transactions.householdLedgerId, ledgerId),
+        eq(transactions.categoryId, categoryId),
+      ),
+      columns: { memo: true },
+      orderBy: (table) => [desc(table.transactionDate), desc(table.id)],
+      limit: 50,
+    });
+
+    const uniqueMemos: string[] = [];
+    const seen = new Set<string>();
+
+    for (const tx of txs) {
+      const trimmedMemo = tx.memo?.trim();
+      if (!trimmedMemo) continue;
+      if (seen.has(trimmedMemo)) continue;
+      seen.add(trimmedMemo);
+      uniqueMemos.push(trimmedMemo);
+      if (uniqueMemos.length >= 8) break;
+    }
+
+    return uniqueMemos;
+  }
+
   async create(ledgerId: number, userId: number, dto: CreateTransactionDto) {
     await this.assertMembership(ledgerId, userId);
 

apps/web/src/routes/transactions.tsx

@@ -180,6 +180,7 @@ function TransactionsPage() {
   const [detailTransaction, setDetailTransaction] = useState<Transaction | null>(null)
   const [swipedTxId, setSwipedTxId] = useState<number | null>(null)
   const touchStartX = useRef<number | null>(null)
+  const recentMemosRequestId = useRef(0)
 
   const [searchOpen, setSearchOpen] = useState(false)
   const [searchKeyword, setSearchKeyword] = useState('')
@@ -195,6 +196,7 @@ function TransactionsPage() {
   const [schedules, setSchedules] = useState<Schedule[]>([])
   const [installments, setInstallments] = useState<Installment[]>([])
   const [recentCategories, setRecentCategories] = useState<Category[]>([])
+  const [recentMemos, setRecentMemos] = useState<string[]>([])
 
   const goPrevMonth = () => {
     const current = new Date(selectedYear, selectedMonth - 1, 1)
@@ -296,6 +298,25 @@ function TransactionsPage() {
     setRecentCategories(Array.isArray(payload) ? payload : (payload.data ?? []))
   }, [ledgerId, tab])
 
+  const fetchRecentMemos = useCallback(async () => {
+    const requestId = recentMemosRequestId.current + 1
+    recentMemosRequestId.current = requestId
+    setRecentMemos([])
+
+    if (!ledgerId || tab === 'TRANSFER' || !categoryId) {
+      return
+    }
+
+    const response = await apiFetch(
+      `/api/ledgers/${ledgerId}/transactions/recent-memos?categoryId=${encodeURIComponent(categoryId)}`,
+    )
+    if (!response.ok) return
+
+    const payload = (await response.json()) as { data?: string[] } | string[]
+    if (requestId !== recentMemosRequestId.current) return
+    setRecentMemos(Array.isArray(payload) ? payload : (payload.data ?? []))
+  }, [categoryId, ledgerId, tab])
+
   useEffect(() => {
     void fetchTransactions()
     void fetchMetadata()
@@ -311,6 +332,11 @@ function TransactionsPage() {
     void fetchRecentCategories()
   }, [entryOpen, fetchRecentCategories, tab])
 
+  useEffect(() => {
+    if (!entryOpen) return
+    void fetchRecentMemos()
+  }, [entryOpen, fetchRecentMemos])
+
   useEffect(() => {
     setCalendarDateSheetOpen(false)
     setSelectedCalendarDate(null)
@@ -361,6 +387,7 @@ function TransactionsPage() {
     setIsFixed(false)
     setTab('EXPENSE')
     setEditingTransactionId(null)
+    setRecentMemos([])
   }
 
   const openCreate = () => {
@@ -550,6 +577,13 @@ function TransactionsPage() {
 
   const monthLabel = `${selectedYear}년 ${selectedMonth}월`
   const categoryOptions = categories.filter((item) => item.type === tab)
+  const memoSuggestions = useMemo(() => {
+    const keyword = memo.trim().toLowerCase()
+    if (!keyword || !categoryId || tab === 'TRANSFER') return []
+    return recentMemos
+      .filter((item) => item.toLowerCase().includes(keyword) && item.toLowerCase() !== keyword)
+      .slice(0, 5)
+  }, [categoryId, memo, recentMemos, tab])
   const accountNameById = useMemo(() => new Map(accounts.map((a) => [a.id, a.name])), [accounts])
   const installmentById = useMemo(() => new Map(installments.map((item) => [item.id, item])), [installments])
   const categoryNameById = useMemo(
@@ -1930,13 +1964,30 @@ function TransactionsPage() {
                 </select>
               ) : null}
 
-              <input
-                value={memo}
-                onChange={(e) => setMemo(e.target.value)}
-                placeholder="메모 (선택)"
-                className="rounded-md border px-3 py-2 text-sm"
-                aria-label="메모"
-              />
+              <div className="relative">
+                <input
+                  value={memo}
+                  onChange={(e) => setMemo(e.target.value)}
+                  placeholder="메모 (선택)"
+                  className="w-full rounded-md border px-3 py-2 text-sm"
+                  aria-label="메모"
+                  autoComplete="off"
+                />
+                {memoSuggestions.length > 0 ? (
+                  <div className="absolute left-0 right-0 top-[calc(100%+4px)] z-10 rounded-md border bg-popover shadow-sm">
+                    {memoSuggestions.map((suggestion) => (
+                      <button
+                        key={suggestion}
+                        type="button"
+                        onClick={() => setMemo(suggestion)}
+                        className="w-full px-3 py-2 text-left text-sm hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                      >
+                        {suggestion}
+                      </button>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
 
               <label className="flex items-center gap-2 text-sm">
                 <input type="checkbox" checked={isFixed} onChange={(e) => setIsFixed(e.target.checked)} />

memories/task.md

@@ -521,14 +521,15 @@
 - **의존성:** 1-8, 4-1
 
 ### [4-3] 거래 입력 자동완성
-- **상태:** 대기
+- **상태:** 완료
 - **범위:** `apps/web`
 - **설명:** 거래 입력 바텀시트 memo 필드에 동일 카테고리 최근 거래 memo 기반 자동완성 제안. 카테고리 선택 후 memo 입력 시 드롭다운으로 최근 memo 목록 표시.
+- **진행 메모 (2026-03-31):** `apps/api/src/transactions`에 `GET /api/ledgers/:ledgerId/transactions/recent-memos?categoryId=...`를 추가해 카테고리별 최근 메모(중복 제거, 최신순 최대 8개)를 조회하도록 반영. `apps/web/src/routes/transactions.tsx` 거래 입력 시트의 memo 입력 아래 자동완성 드롭다운을 연결해 항목 선택 시 자동 채움되도록 구현.
 - **참조:** product-planning §3-3
 - **완료 조건:**
-  - 카테고리 선택 후 memo 입력 시 자동완성 드롭다운 표시
-  - 드롭다운 항목 선택 시 memo 자동 채움
-  - 최근 거래 없으면 드롭다운 미표시
+  - 카테고리 선택 후 memo 입력 시 자동완성 드롭다운 표시 ✓
+  - 드롭다운 항목 선택 시 memo 자동 채움 ✓
+  - 최근 거래 없으면 드롭다운 미표시 ✓
 - **의존성:** 1-14
 
 ### [4-4] 회계기준일 집계 적용