From 9ce840f091f54fd53c033b823ead1cef5acddfc6 Mon Sep 17 00:00:00 2001
From: Goder <goder0101@gmail.com>
Date: Sun, 18 Oct 2026 11:47:44 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Fix:=20=EB=A7=81=ED=81=AC=20=EB=B6=99?=
 =?UTF-8?q?=EC=97=AC=EB=84=A3=EA=B8=B0=EC=99=80=20=EB=A9=94=ED=83=80?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20=EB=8F=99=EC=9E=91=20?=
 =?UTF-8?q?=EB=B3=B4=EC=99=84=20(#603)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 붙여넣기 확정 시 중복을 즉시 확인하고 메타 수집 실패와 제목 길이를 일관되게 처리
---
 CHANGELOG.md                                  |   5 +
 package.json                                  |   1 +
 .../AddLink/LinkThumbnailTitleSection.tsx     |  12 +-
 .../hooks/useAddLinkForm.browser.spec.tsx     | 187 ++++++++++++++++++
 .../AddLink/hooks/useAddLinkForm.ts           | 106 ++++++++--
 .../AddLink/hooks/useDuplicateCheck.ts        |  43 ++--
 .../components/MenuSection/AddLink/index.tsx  |   8 +-
 src/hooks/useLinkMetaScrape.ts                |  56 ++++--
 vitest.browser.config.ts                      |  27 +++
 9 files changed, 378 insertions(+), 67 deletions(-)
 create mode 100644 src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useAddLinkForm.browser.spec.tsx
 create mode 100644 vitest.browser.config.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c007a62..90d09ff5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- 링크 추가에서 URL을 붙여넣으면 즉시 중복을 확인하고, 메타정보 수집 실패는 토스트와 제목 입력 안내로 표시하도록 수정했습니다.
+- 자동 수집한 제목을 100자로 제한하고, 사용자가 수정하거나 지운 제목을 자동 수집 결과가 덮어쓰지 않도록 수정했습니다. 변경 전 URL의 늦은 응답도 무시합니다.
+
 ## [v0.1.3] - 26.10.06
 
 ### Changed
diff --git a/package.json b/package.json
index 74eac5a7..70b052fb 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "format": "prettier --plugin=@trivago/prettier-plugin-sort-imports --config .prettierrc --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "chromatic": "node scripts/run-chromatic.js",
     "test:unit": "vitest run --config vitest.unit.config.ts",
+    "test:browser": "vitest run --config vitest.browser.config.ts",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui"
   },
diff --git a/src/components/layout/SideNavigation/components/MenuSection/AddLink/LinkThumbnailTitleSection.tsx b/src/components/layout/SideNavigation/components/MenuSection/AddLink/LinkThumbnailTitleSection.tsx
index cfc0918e..00b8bddb 100644
--- a/src/components/layout/SideNavigation/components/MenuSection/AddLink/LinkThumbnailTitleSection.tsx
+++ b/src/components/layout/SideNavigation/components/MenuSection/AddLink/LinkThumbnailTitleSection.tsx
@@ -12,6 +12,8 @@ import { AddLinkForm } from './hooks/useAddLinkForm';
 interface Props {
   control: Control<AddLinkForm>;
   errors: FieldErrors<AddLinkForm>;
+  hasEditedTitle: boolean;
+  onTitleChange: (value: string) => void;
   metaLoading: boolean;
   isValidUrl: boolean;
   shouldDisableDetails: boolean;
@@ -21,6 +23,8 @@ interface Props {
 export default function LinkThumbnailTitleSection({
   control,
   errors,
+  hasEditedTitle,
+  onTitleChange,
   metaLoading,
   isValidUrl,
   shouldDisableDetails,
@@ -65,15 +69,19 @@ export default function LinkThumbnailTitleSection({
                 maxHeightLines={2}
                 showMax={isTitleFocused}
                 onFocus={() => setIsTitleFocused(true)}
+                onBlur={() => {
+                  setIsTitleFocused(false);
+                  field.onBlur();
+                }}
                 maxLength={MAX_TITLE_LENGTH}
                 isLoading={metaLoading && isValidUrl}
                 disabled={shouldDisableDetails}
                 value={field.value ?? ''}
-                onChange={e => field.onChange(e)}
+                onChange={e => onTitleChange(e.target.value)}
               />
             )}
           />
-          {errors.title && !shouldDisableDetails && (
+          {hasEditedTitle && !isTitleFocused && errors.title && !shouldDisableDetails && (
             <span className="text-red500 text-xs">{errors.title.message as string}</span>
           )}
         </div>
diff --git a/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useAddLinkForm.browser.spec.tsx b/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useAddLinkForm.browser.spec.tsx
new file mode 100644
index 00000000..4e4456d2
--- /dev/null
+++ b/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useAddLinkForm.browser.spec.tsx
@@ -0,0 +1,187 @@
+import { StrictMode, act } from 'react';
+import { type Root, createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useAddLinkForm } from './useAddLinkForm';
+import { useDuplicateCheck } from './useDuplicateCheck';
+
+const mocks = vi.hoisted(() => ({ scrape: vi.fn(), duplicate: vi.fn(), toast: vi.fn() }));
+vi.mock('@/hooks/usePostLinkMetaScrape', () => ({
+  usePostLinkMetaScrape: () => ({ mutateAsync: mocks.scrape, status: 'idle', reset: vi.fn() }),
+}));
+vi.mock('@/hooks/useCheckDuplicateLink', () => ({
+  useDuplicateLinkMutation: () => ({ mutate: mocks.duplicate }),
+}));
+vi.mock('@/apis/linkApi', () => ({ fetchLink: vi.fn() }));
+vi.mock('@/stores/toastStore', () => ({ showToast: mocks.toast }));
+
+let form: ReturnType<typeof useAddLinkForm>;
+function FormHarness() {
+  form = useAddLinkForm();
+  useDuplicateCheck(form.trimmedUrl, form.isValidUrl);
+  return (
+    <>
+      <textarea
+        {...form.form.register('url')}
+        id="url-input"
+        value={form.urlValue}
+        onChange={event => form.handleUrlChange(event.target.value)}
+        onBlur={form.handleUrlBlur}
+        onPaste={form.handleUrlPaste}
+      />
+      <textarea
+        {...form.form.register('title')}
+        id="title-input"
+        value={form.titleValue}
+        onChange={event => form.handleTitleChange(event.target.value)}
+      />
+      <textarea {...form.form.register('memo')} id="memo-input" />
+    </>
+  );
+}
+
+const input = (id: string) => document.getElementById(id) as HTMLTextAreaElement;
+async function type(id: string, value: string) {
+  await act(async () => {
+    const element = input(id);
+    Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!.call(
+      element,
+      value
+    );
+    element.dispatchEvent(new Event('input', { bubbles: true }));
+  });
+}
+async function paste(text: string) {
+  await act(async () => {
+    const clipboardData = new DataTransfer();
+    clipboardData.setData('text/plain', text);
+    input('url-input').dispatchEvent(
+      new ClipboardEvent('paste', { bubbles: true, cancelable: true, clipboardData })
+    );
+  });
+}
+const advance = async (ms = 550) =>
+  act(async () => {
+    await vi.advanceTimersByTimeAsync(ms);
+  });
+const metadata = (title = '자동 제목') => ({
+  title,
+  description: '',
+  image: 'https://example.com/image.png',
+  url: 'https://example.com',
+});
+
+describe('웹 링크 입력 QA', () => {
+  let root: Root;
+  let container: HTMLDivElement;
+  beforeEach(async () => {
+    vi.useFakeTimers();
+    vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
+    mocks.scrape.mockReset().mockResolvedValue(metadata());
+    mocks.duplicate.mockReset();
+    mocks.toast.mockReset();
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+    await act(async () =>
+      root.render(
+        <StrictMode>
+          <FormHarness />
+        </StrictMode>
+      )
+    );
+  });
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('타이핑을 멈춰도 중복 조회하지 않고 붙여넣기는 즉시 조회한다', async () => {
+    await type('url-input', 'example.com');
+    await advance(1000);
+    expect(mocks.duplicate).not.toHaveBeenCalled();
+    input('url-input').select();
+    await paste('naver.com');
+    expect(form.urlValue).toBe('https://naver.com');
+    expect(mocks.duplicate).toHaveBeenCalledTimes(1);
+    expect(mocks.duplicate.mock.calls[0][0]).toBe('https://naver.com');
+    await act(async () => form.handleUrlBlur());
+    expect(mocks.duplicate).toHaveBeenCalledTimes(1);
+  });
+
+  it('붙여넣기는 선택 영역을 치환한 전체 URL로 판정한다', async () => {
+    await type('url-input', 'https://example.com/path');
+    input('url-input').setSelectionRange(8, 19);
+    await paste('naver.com');
+    expect(form.urlValue).toBe('https://naver.com/path');
+    expect(mocks.duplicate.mock.calls[0][0]).toBe('https://naver.com/path');
+  });
+
+  it.each(['request', 'missing-title'])(
+    '메타 실패(%s)는 토스트와 제목 포커스로 안내한다',
+    async reason => {
+      if (reason === 'request') mocks.scrape.mockRejectedValueOnce(new Error('test failure'));
+      else mocks.scrape.mockResolvedValueOnce(metadata(''));
+      await paste('example.com');
+      await advance();
+      await advance(32);
+      expect(mocks.toast).toHaveBeenCalledTimes(1);
+      expect(mocks.toast.mock.calls[0][0].message).toBe(
+        '링크 정보를 불러오지 못했습니다. 제목을 직접 입력해 주세요.'
+      );
+      expect(document.activeElement).toBe(input('title-input'));
+      expect(form.hasEditedTitle).toBe(false);
+      if (reason === 'missing-title') expect(form.previewImageUrl).toBe(metadata().image);
+    }
+  );
+
+  it('메모를 선택한 사용자의 포커스를 실패 응답이 빼앗지 않는다', async () => {
+    mocks.scrape.mockResolvedValueOnce(metadata(''));
+    await paste('example.com');
+    input('memo-input').focus();
+    await advance();
+    await advance(32);
+    expect(document.activeElement).toBe(input('memo-input'));
+  });
+
+  it('100자를 넘는 자동 제목은 잘라서 유효한 폼 값으로 채운다', async () => {
+    mocks.scrape.mockResolvedValueOnce(metadata('가'.repeat(130)));
+    await paste('example.com');
+    await advance();
+    expect(form.titleValue).toHaveLength(100);
+    let valid = false;
+    await act(async () => {
+      valid = await form.form.trigger();
+    });
+    expect(valid).toBe(true);
+  });
+
+  it('사용자가 제목을 지운 이력은 자동 수집이 덮어쓰지 않는다', async () => {
+    await type('title-input', '직접 입력');
+    await type('title-input', '');
+    await paste('example.com');
+    await advance();
+    expect(form.hasEditedTitle).toBe(true);
+    expect(form.titleValue).toBe('');
+  });
+
+  it('URL 변경 후 도착한 이전 메타 응답은 반영하지 않는다', async () => {
+    let resolve!: (data: ReturnType<typeof metadata>) => void;
+    mocks.scrape.mockReturnValueOnce(
+      new Promise(done => {
+        resolve = done;
+      })
+    );
+    await paste('example.com');
+    await advance();
+    await type('url-input', '입력 중');
+    await act(async () => resolve(metadata('오래된 제목')));
+    expect(form.titleValue).toBe('');
+    expect(form.metaData).toBeNull();
+    expect(mocks.toast).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useAddLinkForm.ts b/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useAddLinkForm.ts
index 8b539cb3..807d01ee 100644
--- a/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useAddLinkForm.ts
+++ b/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useAddLinkForm.ts
@@ -1,7 +1,9 @@
 import { useLinkMetaScrape } from '@/hooks/useLinkMetaScrape';
+import { MAX_TITLE_LENGTH } from '@/lib/constants/link';
 import { EMPTY_URL_MESSAGE, INVALID_URL_MESSAGE, normalizeUrlInput } from '@/lib/url/normalizeUrl';
+import { showToast } from '@/stores/toastStore';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { type ClipboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -17,7 +19,7 @@ const addLinkSchema = z.object({
     }
     return result.url;
   }),
-  title: z.string().trim().min(1, { message: '제목을 입력해 주세요.' }),
+  title: z.string().trim().min(1, { message: '제목을 입력해 주세요.' }).max(MAX_TITLE_LENGTH),
   memo: z.string().optional(),
 });
 
@@ -36,6 +38,7 @@ export function useAddLinkForm() {
     setValue,
     setError,
     getValues,
+    setFocus,
     formState: { dirtyFields },
   } = form;
 
@@ -43,6 +46,7 @@ export function useAddLinkForm() {
   const titleValue = useWatch({ control, name: 'title' });
   const memoValue = useWatch({ control, name: 'memo' });
   const [validatedUrl, setValidatedUrl] = useState('');
+  const [hasEditedTitle, setHasEditedTitle] = useState(false);
   const hasEditedUrlRef = useRef(false);
 
   const handleUrlChange = useCallback(
@@ -55,38 +59,97 @@ export function useAddLinkForm() {
     [clearErrors, setValue]
   );
 
-  const handleUrlBlur = useCallback(() => {
-    const result = normalizeUrlInput(getValues('url'));
+  const commitUrl = useCallback(
+    (value: string) => {
+      const result = normalizeUrlInput(value);
 
-    if (!result.success) {
-      setValidatedUrl('');
-      if (result.reason === 'empty' && !hasEditedUrlRef.current) {
-        clearErrors('url');
+      if (!result.success) {
+        setValidatedUrl('');
+        if (result.reason === 'empty' && !hasEditedUrlRef.current) {
+          clearErrors('url');
+          return;
+        }
+        setError('url', {
+          type: 'manual',
+          message: result.reason === 'empty' ? EMPTY_URL_MESSAGE : INVALID_URL_MESSAGE,
+        });
         return;
       }
-      setError('url', {
-        type: 'manual',
-        message: result.reason === 'empty' ? EMPTY_URL_MESSAGE : INVALID_URL_MESSAGE,
-      });
-      return;
-    }
 
-    setValue('url', result.url, { shouldDirty: true, shouldValidate: true });
-    setValidatedUrl(result.url);
-    clearErrors('url');
-  }, [clearErrors, getValues, setError, setValue]);
+      setValue('url', result.url, { shouldDirty: true, shouldValidate: true });
+      setValidatedUrl(result.url);
+      clearErrors('url');
+    },
+    [clearErrors, setError, setValue]
+  );
+
+  const handleUrlBlur = useCallback(() => commitUrl(getValues('url')), [commitUrl, getValues]);
+
+  const handleUrlPaste = useCallback(
+    (event: ClipboardEvent<HTMLTextAreaElement>) => {
+      event.preventDefault();
+      const input = event.currentTarget;
+      const value =
+        input.value.slice(0, input.selectionStart) +
+        event.clipboardData.getData('text/plain') +
+        input.value.slice(input.selectionEnd);
+      handleUrlChange(value);
+      commitUrl(value);
+    },
+    [commitUrl, handleUrlChange]
+  );
+
+  const handleTitleChange = useCallback(
+    (value: string) => {
+      setHasEditedTitle(true);
+      clearErrors('title');
+      setValue('title', value.slice(0, MAX_TITLE_LENGTH), {
+        shouldDirty: true,
+        shouldValidate: false,
+      });
+    },
+    [clearErrors, setValue]
+  );
 
   const trimmedUrl = useMemo(() => validatedUrl.trim(), [validatedUrl]);
   const isValidUrl = Boolean(validatedUrl);
 
-  const { metaData, metaLoading, metaErrorMessage } = useLinkMetaScrape<AddLinkForm>({
+  const { metaData, metaLoading, metaErrorMessage, metaErrorUrl } = useLinkMetaScrape<AddLinkForm>({
     url: trimmedUrl,
     isValidUrl,
-    dirtyFields,
+    dirtyFields: { ...dirtyFields, title: hasEditedTitle },
     getValues,
     setValue,
   });
 
+  useEffect(() => {
+    if (
+      !metaErrorMessage ||
+      metaLoading ||
+      metaErrorUrl !== trimmedUrl ||
+      getValues('title').trim()
+    )
+      return;
+    showToast({
+      message: metaErrorMessage,
+      variant: 'error',
+      showIcon: true,
+      placement: 'modal-bottom',
+    });
+    const frame = requestAnimationFrame(() => {
+      const active = document.activeElement;
+      if (
+        !active ||
+        active === document.body ||
+        active.id === 'url-input' ||
+        active.id === 'title-input'
+      ) {
+        setFocus('title');
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [getValues, metaErrorMessage, metaErrorUrl, metaLoading, setFocus, trimmedUrl]);
+
   const shouldDisableDetails = !trimmedUrl || !isValidUrl || metaLoading;
   const previewImageUrl = metaData?.image?.trim()
     ? metaData.image
@@ -97,6 +160,9 @@ export function useAddLinkForm() {
     urlValue,
     handleUrlChange,
     handleUrlBlur,
+    handleUrlPaste,
+    handleTitleChange,
+    hasEditedTitle,
     trimmedUrl,
     isValidUrl,
     titleValue,
diff --git a/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useDuplicateCheck.ts b/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useDuplicateCheck.ts
index 31de7b71..09c544fd 100644
--- a/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useDuplicateCheck.ts
+++ b/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useDuplicateCheck.ts
@@ -29,33 +29,30 @@ export function useDuplicateCheck(
 
     let isCancelled = false; // fetchLink 호출 중 URL 변경시 취소 여부
 
-    const timeoutId = setTimeout(() => {
-      duplicateCheck.mutate(trimmedUrl, {
-        onSuccess: async ({ exists, linkId }) => {
-          if (isCancelled) return;
-          if (exists && linkId) {
-            setIsDuplicate(true);
-            setDuplicateLinkId(linkId);
-            // 기존 링크 정보 가져오기
-            try {
-              const link = await fetchLink(linkId);
-              if (isCancelled) return;
-              setDuplicateLinkData(link);
-            } catch {
-              setDuplicateLinkData(null);
-            }
-          } else {
-            setIsDuplicate(false);
-            setDuplicateLinkId(null);
-            setDuplicateLinkData(null);
+    duplicateCheck.mutate(trimmedUrl, {
+      onSuccess: async ({ exists, linkId }) => {
+        if (isCancelled) return;
+        if (exists && linkId) {
+          setIsDuplicate(true);
+          setDuplicateLinkId(linkId);
+          // 기존 링크 정보 가져오기
+          try {
+            const link = await fetchLink(linkId);
+            if (isCancelled) return;
+            setDuplicateLinkData(link);
+          } catch {
+            if (!isCancelled) setDuplicateLinkData(null);
           }
-        },
-      });
-    }, 500);
+        } else {
+          setIsDuplicate(false);
+          setDuplicateLinkId(null);
+          setDuplicateLinkData(null);
+        }
+      },
+    });
 
     return () => {
       isCancelled = true;
-      clearTimeout(timeoutId);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [trimmedUrl, isValidUrl]);
diff --git a/src/components/layout/SideNavigation/components/MenuSection/AddLink/index.tsx b/src/components/layout/SideNavigation/components/MenuSection/AddLink/index.tsx
index b8061687..b15c83ed 100644
--- a/src/components/layout/SideNavigation/components/MenuSection/AddLink/index.tsx
+++ b/src/components/layout/SideNavigation/components/MenuSection/AddLink/index.tsx
@@ -42,13 +42,15 @@ const AddLinkModal = () => {
     urlValue,
     handleUrlChange,
     handleUrlBlur,
+    handleUrlPaste,
+    handleTitleChange,
+    hasEditedTitle,
     trimmedUrl,
     isValidUrl,
     titleValue,
     memoValue,
     metaData,
     metaLoading,
-    metaErrorMessage,
     shouldDisableDetails,
     previewImageUrl,
   } = useAddLinkForm();
@@ -234,16 +236,18 @@ const AddLinkModal = () => {
                     placeholder="URL을 입력해 주세요."
                     onChange={handleUrlChange}
                     onBlur={handleUrlBlur}
+                    onPaste={handleUrlPaste}
                     errorMessage={errors.url?.message}
                   />
                 )}
               />
-              {metaErrorMessage && <span className="text-red500 text-xs">{metaErrorMessage}</span>}
             </div>
             <div className="flex flex-col gap-1">
               <LinkThumbnailTitleSection
                 control={control}
                 errors={errors}
+                hasEditedTitle={hasEditedTitle}
+                onTitleChange={handleTitleChange}
                 metaLoading={metaLoading}
                 isValidUrl={isValidUrl}
                 shouldDisableDetails={shouldDisableDetails}
diff --git a/src/hooks/useLinkMetaScrape.ts b/src/hooks/useLinkMetaScrape.ts
index 9948e5bc..cee17503 100644
--- a/src/hooks/useLinkMetaScrape.ts
+++ b/src/hooks/useLinkMetaScrape.ts
@@ -1,4 +1,5 @@
 import { usePostLinkMetaScrape } from '@/hooks/usePostLinkMetaScrape';
+import { MAX_TITLE_LENGTH } from '@/lib/constants/link';
 import { useEffect, useRef, useState } from 'react';
 import type {
   FieldValues,
@@ -8,7 +9,7 @@ import type {
   UseFormSetValue,
 } from 'react-hook-form';
 
-import { FetchError } from './util/api/error/errors';
+const META_FAILURE_MESSAGE = '링크 정보를 불러오지 못했습니다. 제목을 직접 입력해 주세요.';
 
 type MetaData = {
   title: string;
@@ -35,9 +36,14 @@ export function useLinkMetaScrape<T extends FieldValues & { title?: string; memo
   skipAutoFill,
 }: LinkMetaScrapeOptions<T>) {
   const metaScrape = usePostLinkMetaScrape();
+  const metaScrapeRef = useRef(metaScrape);
+  useEffect(() => {
+    metaScrapeRef.current = metaScrape;
+  }, [metaScrape]);
   const [metaData, setMetaData] = useState<MetaData | null>(null);
   const [metaLoading, setMetaLoading] = useState(false);
   const [metaErrorMessage, setMetaErrorMessage] = useState<string | null>(null);
+  const [metaErrorUrl, setMetaErrorUrl] = useState<string | null>(null);
   const lastScrapedUrl = useRef<string | null>(null);
   const metaRequestId = useRef(0);
   const titlePath = 'title' as Path<T>;
@@ -60,8 +66,8 @@ export function useLinkMetaScrape<T extends FieldValues & { title?: string; memo
   useEffect(() => {
     if (!url || !isValidUrl) {
       metaRequestId.current += 1;
-      if (metaScrape.status !== 'idle') {
-        metaScrape.reset();
+      if (metaScrapeRef.current.status !== 'idle') {
+        metaScrapeRef.current.reset();
       }
       if (metaLoading) {
         setMetaLoading(false);
@@ -71,9 +77,10 @@ export function useLinkMetaScrape<T extends FieldValues & { title?: string; memo
       }
       if (metaErrorMessage) {
         setMetaErrorMessage(null);
+        setMetaErrorUrl(null);
       }
       if (!dirtyTitleRef.current && !skipAutoFillRef.current) {
-        setValue(titlePath, '' as PathValue<T, typeof titlePath>, { shouldValidate: true });
+        setValue(titlePath, '' as PathValue<T, typeof titlePath>, { shouldValidate: false });
       }
       if (!dirtyMemoRef.current && !skipAutoFillRef.current) {
         setValue(memoPath, '' as PathValue<T, typeof memoPath>, { shouldValidate: true });
@@ -89,30 +96,39 @@ export function useLinkMetaScrape<T extends FieldValues & { title?: string; memo
     }
     if (metaErrorMessage) {
       setMetaErrorMessage(null);
+      setMetaErrorUrl(null);
     }
-    if (!dirtyFields.title && getValues(titlePath)) {
-      setValue(titlePath, '' as PathValue<T, typeof titlePath>, { shouldValidate: true });
+    if (!dirtyTitleRef.current && getValues(titlePath)) {
+      setValue(titlePath, '' as PathValue<T, typeof titlePath>, { shouldValidate: false });
     }
-    if (!dirtyFields.memo && getValues(memoPath)) {
+    if (!dirtyMemoRef.current && getValues(memoPath)) {
       setValue(memoPath, '' as PathValue<T, typeof memoPath>, { shouldValidate: true });
     }
     metaRequestId.current += 1;
     const requestId = metaRequestId.current;
-    lastScrapedUrl.current = url;
     if (!metaLoading) {
       setMetaLoading(true);
     }
     const timeoutId = setTimeout(() => {
-      metaScrape
+      lastScrapedUrl.current = url;
+      metaScrapeRef.current
         .mutateAsync(url)
         .then(data => {
           if (requestId !== metaRequestId.current) return;
           setMetaData(data);
           setMetaLoading(false);
+          if (!data.title?.trim()) {
+            setMetaErrorMessage(META_FAILURE_MESSAGE);
+            setMetaErrorUrl(url);
+          }
           if (!dirtyTitleRef.current && !skipAutoFillRef.current) {
-            setValue(titlePath, (data.title ?? '') as PathValue<T, typeof titlePath>, {
-              shouldValidate: true,
-            });
+            setValue(
+              titlePath,
+              (data.title ?? '').slice(0, MAX_TITLE_LENGTH) as PathValue<T, typeof titlePath>,
+              {
+                shouldValidate: Boolean(data.title?.trim()),
+              }
+            );
           }
           if (!dirtyMemoRef.current && !skipAutoFillRef.current && getValues(memoPath)) {
             // skipAutoFill 조건 추가
@@ -126,18 +142,18 @@ export function useLinkMetaScrape<T extends FieldValues & { title?: string; memo
           if (process.env.NODE_ENV !== 'production') {
             console.error('[meta-scrape] failed', error);
           }
-          if (error instanceof FetchError) {
-            setMetaErrorMessage(
-              `메타 정보를 가져오지 못했습니다. (status: ${error.status ?? 'unknown'})`
-            );
-          }
+          setMetaErrorMessage(META_FAILURE_MESSAGE);
+          setMetaErrorUrl(url);
           setMetaLoading(false);
         });
     }, 500);
 
-    return () => clearTimeout(timeoutId);
+    return () => {
+      clearTimeout(timeoutId);
+      metaRequestId.current += 1;
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [url, isValidUrl, setValue, getValues, dirtyFields.title, dirtyFields.memo]);
+  }, [url, isValidUrl, setValue, getValues, titlePath, memoPath]);
 
-  return { metaData, metaLoading, metaErrorMessage };
+  return { metaData, metaLoading, metaErrorMessage, metaErrorUrl };
 }
diff --git a/vitest.browser.config.ts b/vitest.browser.config.ts
new file mode 100644
index 00000000..42d32e73
--- /dev/null
+++ b/vitest.browser.config.ts
@@ -0,0 +1,27 @@
+import { playwright } from '@vitest/browser-playwright';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  resolve: { alias: { '@': path.resolve(path.dirname(fileURLToPath(import.meta.url)), 'src') } },
+  esbuild: { jsx: 'automatic' },
+  optimizeDeps: {
+    include: [
+      'react',
+      'react-dom/client',
+      'react/jsx-dev-runtime',
+      '@tanstack/react-query',
+      'zustand',
+    ],
+  },
+  test: {
+    include: ['src/**/*.browser.spec.tsx'],
+    browser: {
+      enabled: true,
+      headless: true,
+      provider: playwright(),
+      instances: [{ browser: 'chromium' }],
+    },
+  },
+});

From 555a20c53661b8ec882287acda722c565395ccab Mon Sep 17 00:00:00 2001
From: Goder <goder0101@gmail.com>
Date: Sun, 18 Oct 2026 12:43:42 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20URL=20=EC=9E=AC=EC=9E=85=EB=A0=A5=20?=
 =?UTF-8?q?=EB=A1=9C=EB=94=A9=EA=B3=BC=20=EC=A4=91=EB=B3=B5=20=EC=A0=9C?=
 =?UTF-8?q?=EB=AA=A9=20=EB=8D=AE=EC=96=B4=EC=93=B0=EA=B8=B0=20=EB=B0=A9?=
 =?UTF-8?q?=EC=A7=80=20(#603)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  1 +
 .../hooks/useAddLinkForm.browser.spec.tsx     | 98 ++++++++++++++++++-
 .../AddLink/hooks/useDuplicateLinkPrefill.ts  | 29 ++++++
 .../components/MenuSection/AddLink/index.tsx  | 18 +---
 src/hooks/useLinkMetaScrape.ts                |  5 -
 5 files changed, 128 insertions(+), 23 deletions(-)
 create mode 100644 src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useDuplicateLinkPrefill.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 90d09ff5..ad002918 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - 링크 추가에서 URL을 붙여넣으면 즉시 중복을 확인하고, 메타정보 수집 실패는 토스트와 제목 입력 안내로 표시하도록 수정했습니다.
 - 자동 수집한 제목을 100자로 제한하고, 사용자가 수정하거나 지운 제목을 자동 수집 결과가 덮어쓰지 않도록 수정했습니다. 변경 전 URL의 늦은 응답도 무시합니다.
+- URL을 빠르게 변경한 뒤 되돌려도 메타정보 수집을 완료하며, 늦게 도착한 중복 링크 정보가 사용자가 지운 제목을 다시 채우지 않도록 수정했습니다.
 
 ## [v0.1.3] - 26.10.06
 
diff --git a/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useAddLinkForm.browser.spec.tsx b/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useAddLinkForm.browser.spec.tsx
index 4e4456d2..def22295 100644
--- a/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useAddLinkForm.browser.spec.tsx
+++ b/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useAddLinkForm.browser.spec.tsx
@@ -1,24 +1,38 @@
+import type { Link } from '@/types/link';
 import { StrictMode, act } from 'react';
 import { type Root, createRoot } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { useAddLinkForm } from './useAddLinkForm';
 import { useDuplicateCheck } from './useDuplicateCheck';
+import { useDuplicateLinkPrefill } from './useDuplicateLinkPrefill';
 
-const mocks = vi.hoisted(() => ({ scrape: vi.fn(), duplicate: vi.fn(), toast: vi.fn() }));
+const mocks = vi.hoisted(() => ({
+  scrape: vi.fn(),
+  duplicate: vi.fn(),
+  fetchLink: vi.fn(),
+  toast: vi.fn(),
+}));
 vi.mock('@/hooks/usePostLinkMetaScrape', () => ({
   usePostLinkMetaScrape: () => ({ mutateAsync: mocks.scrape, status: 'idle', reset: vi.fn() }),
 }));
 vi.mock('@/hooks/useCheckDuplicateLink', () => ({
   useDuplicateLinkMutation: () => ({ mutate: mocks.duplicate }),
 }));
-vi.mock('@/apis/linkApi', () => ({ fetchLink: vi.fn() }));
+vi.mock('@/apis/linkApi', () => ({ fetchLink: mocks.fetchLink }));
 vi.mock('@/stores/toastStore', () => ({ showToast: mocks.toast }));
 
 let form: ReturnType<typeof useAddLinkForm>;
 function FormHarness() {
   form = useAddLinkForm();
-  useDuplicateCheck(form.trimmedUrl, form.isValidUrl);
+  const duplicate = useDuplicateCheck(form.trimmedUrl, form.isValidUrl);
+  useDuplicateLinkPrefill(
+    form.form,
+    duplicate.isDuplicate,
+    duplicate.duplicateLinkData,
+    form.metaLoading,
+    form.hasEditedTitle
+  );
   return (
     <>
       <textarea
@@ -79,6 +93,7 @@ describe('웹 링크 입력 QA', () => {
     vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
     mocks.scrape.mockReset().mockResolvedValue(metadata());
     mocks.duplicate.mockReset();
+    mocks.fetchLink.mockReset();
     mocks.toast.mockReset();
     vi.spyOn(console, 'error').mockImplementation(() => {});
     container = document.createElement('div');
@@ -184,4 +199,81 @@ describe('웹 링크 입력 QA', () => {
     expect(form.metaData).toBeNull();
     expect(mocks.toast).not.toHaveBeenCalled();
   });
+
+  it('다른 URL의 수집 대기 중 이전 URL로 돌아와도 로딩을 완료한다', async () => {
+    await paste('example.com');
+    await advance();
+    expect(form.titleValue).toBe('자동 제목');
+    input('url-input').select();
+    await paste('naver.com');
+    await advance(100);
+    input('url-input').select();
+    await paste('example.com');
+    await advance();
+    expect(form.metaLoading).toBe(false);
+    expect(form.shouldDisableDetails).toBe(false);
+    expect(form.titleValue).toBe('자동 제목');
+    expect(mocks.scrape.mock.calls.map(([url]) => url)).toEqual([
+      'https://example.com',
+      'https://example.com',
+    ]);
+  });
+
+  it('늦은 중복 상세 응답도 사용자가 지운 제목은 유지하고 메모만 채운다', async () => {
+    let resolve!: (link: Link) => void;
+    mocks.fetchLink.mockReturnValueOnce(
+      new Promise<Link>(done => {
+        resolve = done;
+      })
+    );
+    mocks.duplicate.mockImplementation((_url, options) => {
+      void options.onSuccess({ exists: true, linkId: 'existing' });
+    });
+    await paste('example.com');
+    await advance();
+    await type('title-input', '직접 입력');
+    await type('title-input', '');
+    expect(form.form.formState.dirtyFields.title).toBeUndefined();
+    await act(async () =>
+      resolve({
+        id: 'existing',
+        url: 'https://example.com',
+        title: '기존 제목',
+        memo: '기존 메모',
+        summary: '',
+        createdAt: '',
+        updatedAt: '',
+      })
+    );
+    expect(form.titleValue).toBe('');
+    expect(form.memoValue).toBe('기존 메모');
+  });
+
+  it('메모를 수정했어도 편집하지 않은 제목은 기존 링크에서 채운다', async () => {
+    let resolve!: (link: Link) => void;
+    mocks.fetchLink.mockReturnValueOnce(
+      new Promise<Link>(done => {
+        resolve = done;
+      })
+    );
+    mocks.duplicate.mockImplementation((_url, options) => {
+      void options.onSuccess({ exists: true, linkId: 'existing' });
+    });
+    await paste('example.com');
+    await advance();
+    await type('memo-input', '직접 작성한 메모');
+    await act(async () =>
+      resolve({
+        id: 'existing',
+        url: 'https://example.com',
+        title: '기존 제목',
+        memo: '기존 메모',
+        summary: '',
+        createdAt: '',
+        updatedAt: '',
+      })
+    );
+    expect(form.titleValue).toBe('기존 제목');
+    expect(form.memoValue).toBe('직접 작성한 메모');
+  });
 });
diff --git a/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useDuplicateLinkPrefill.ts b/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useDuplicateLinkPrefill.ts
new file mode 100644
index 00000000..27d3d62d
--- /dev/null
+++ b/src/components/layout/SideNavigation/components/MenuSection/AddLink/hooks/useDuplicateLinkPrefill.ts
@@ -0,0 +1,29 @@
+import type { Link } from '@/types/link';
+import { useEffect } from 'react';
+import type { UseFormReturn } from 'react-hook-form';
+
+import type { AddLinkForm } from './useAddLinkForm';
+
+export function useDuplicateLinkPrefill(
+  form: UseFormReturn<AddLinkForm>,
+  isDuplicate: boolean,
+  duplicateLinkData: Link | null,
+  metaLoading: boolean,
+  hasEditedTitle: boolean
+) {
+  useEffect(() => {
+    if (!isDuplicate || !duplicateLinkData || metaLoading) return;
+    if (!hasEditedTitle) {
+      form.setValue('title', duplicateLinkData.title, {
+        shouldValidate: true,
+        shouldDirty: false,
+      });
+    }
+    if (!form.formState.dirtyFields.memo) {
+      form.setValue('memo', duplicateLinkData.memo ?? '', {
+        shouldValidate: true,
+        shouldDirty: false,
+      });
+    }
+  }, [isDuplicate, duplicateLinkData, metaLoading, form, hasEditedTitle]);
+}
diff --git a/src/components/layout/SideNavigation/components/MenuSection/AddLink/index.tsx b/src/components/layout/SideNavigation/components/MenuSection/AddLink/index.tsx
index b15c83ed..4ecd1d50 100644
--- a/src/components/layout/SideNavigation/components/MenuSection/AddLink/index.tsx
+++ b/src/components/layout/SideNavigation/components/MenuSection/AddLink/index.tsx
@@ -15,7 +15,7 @@ import type { Link } from '@/types/link';
 import { useQueryClient } from '@tanstack/react-query';
 import clsx from 'clsx';
 import { useRouter } from 'next/navigation';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Controller } from 'react-hook-form';
 
 import AddLinkUrlInput from './AddLinkUrlInput';
@@ -25,6 +25,7 @@ import LinkThumbnailTitleSection from './LinkThumbnailTitleSection';
 import { useAddLinkForm } from './hooks/useAddLinkForm';
 import { useCreateLinkError } from './hooks/useCreateLinkError';
 import { useDuplicateCheck } from './hooks/useDuplicateCheck';
+import { useDuplicateLinkPrefill } from './hooks/useDuplicateLinkPrefill';
 
 const AddLinkModal = () => {
   const { close } = useModalStore();
@@ -66,20 +67,7 @@ const AddLinkModal = () => {
     formState: { errors },
   } = form;
 
-  // 중복 감지 시 기존 링크 정보로 title/memo 채우기
-  useEffect(() => {
-    if (!isDuplicate || !duplicateLinkData || metaLoading) return;
-    const { title, memo } = form.formState.dirtyFields;
-    if (title || memo) return;
-    form.setValue('title', duplicateLinkData.title, {
-      shouldValidate: true,
-      shouldDirty: false,
-    });
-    form.setValue('memo', duplicateLinkData.memo ?? '', {
-      shouldValidate: true,
-      shouldDirty: false,
-    });
-  }, [isDuplicate, duplicateLinkData, metaLoading, form]);
+  useDuplicateLinkPrefill(form, isDuplicate, duplicateLinkData, metaLoading, hasEditedTitle);
 
   const handleCreateSuccess = useCallback(
     (createdLink: { id: EntityId }) => {
diff --git a/src/hooks/useLinkMetaScrape.ts b/src/hooks/useLinkMetaScrape.ts
index cee17503..acd171df 100644
--- a/src/hooks/useLinkMetaScrape.ts
+++ b/src/hooks/useLinkMetaScrape.ts
@@ -44,7 +44,6 @@ export function useLinkMetaScrape<T extends FieldValues & { title?: string; memo
   const [metaLoading, setMetaLoading] = useState(false);
   const [metaErrorMessage, setMetaErrorMessage] = useState<string | null>(null);
   const [metaErrorUrl, setMetaErrorUrl] = useState<string | null>(null);
-  const lastScrapedUrl = useRef<string | null>(null);
   const metaRequestId = useRef(0);
   const titlePath = 'title' as Path<T>;
   const memoPath = 'memo' as Path<T>;
@@ -85,12 +84,9 @@ export function useLinkMetaScrape<T extends FieldValues & { title?: string; memo
       if (!dirtyMemoRef.current && !skipAutoFillRef.current) {
         setValue(memoPath, '' as PathValue<T, typeof memoPath>, { shouldValidate: true });
       }
-      lastScrapedUrl.current = null;
       return;
     }
 
-    if (url === lastScrapedUrl.current) return;
-
     if (metaData !== null) {
       setMetaData(null);
     }
@@ -110,7 +106,6 @@ export function useLinkMetaScrape<T extends FieldValues & { title?: string; memo
       setMetaLoading(true);
     }
     const timeoutId = setTimeout(() => {
-      lastScrapedUrl.current = url;
       metaScrapeRef.current
         .mutateAsync(url)
         .then(data => {