From a5e1c1de354e4ad0d7e80662ab0ad4d05787f058 Mon Sep 17 00:00:00 2001
From: altair823 <kimth0734@gmail.com>
Date: Sun, 10 May 2026 23:36:07 +0900
Subject: [PATCH] =?UTF-8?q?feat(sync-help):=20SyncSection=20=EB=8F=84?=
 =?UTF-8?q?=EC=9B=80=EB=A7=90=20=EB=B2=84=ED=8A=BC=20+=20SyncHelpModal=20m?=
 =?UTF-8?q?ount=20+=20ConflictModal=20onOpenHelp=20wiring?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../inbox/components/settings/SyncSection.tsx       | 13 +++++++++++++
 tests/unit/SyncSection.test.tsx                     |  8 ++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/renderer/inbox/components/settings/SyncSection.tsx b/src/renderer/inbox/components/settings/SyncSection.tsx
index ae0a6b6..5507708 100644
--- a/src/renderer/inbox/components/settings/SyncSection.tsx
+++ b/src/renderer/inbox/components/settings/SyncSection.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { inboxApi } from '../../api.js';
 import type { SyncStatusSnapshot } from '@shared/types';
 import { ConflictModal } from '../ConflictModal.js';
+import { SyncHelpModal, type SyncHelpAnchor } from '../SyncHelpModal.js';
 
 export function SyncSection(): React.ReactElement {
   const [url, setUrl] = useState('');
@@ -12,6 +13,7 @@ export function SyncSection(): React.ReactElement {
   const [busy, setBusy] = useState<'save' | 'test' | 'sync' | null>(null);
   const [feedback, setFeedback] = useState<string | null>(null);
   const [showConflict, setShowConflict] = useState(false);
+  const [showHelp, setShowHelp] = useState<{ open: boolean; anchor?: SyncHelpAnchor }>({ open: false });
 
   useEffect(() => {
     void (async () => {
@@ -78,6 +80,9 @@ export function SyncSection(): React.ReactElement {
         <button onClick={() => { void onTestConnection(); }} disabled={busy !== null || url.trim() === ''} style={btnStyle()}>
           {busy === 'test' ? '확인 중…' : '연결 테스트'}
         </button>
+        <button onClick={() => setShowHelp({ open: true })} disabled={busy !== null} style={btnStyle()}>
+          도움말
+        </button>
       </div>
 
       {feedback !== null && (
@@ -129,10 +134,18 @@ export function SyncSection(): React.ReactElement {
               onResolved={async () => {
                 setStatus(await inboxApi.getSyncStatus());
               }}
+              onOpenHelp={(anchor) => setShowHelp({ open: true, anchor })}
             />
           )}
         </>
       )}
+
+      {showHelp.open && (
+        <SyncHelpModal
+          onClose={() => setShowHelp({ open: false })}
+          initialAnchor={showHelp.anchor}
+        />
+      )}
     </section>
   );
 }
diff --git a/tests/unit/SyncSection.test.tsx b/tests/unit/SyncSection.test.tsx
index 8ecaba1..0c70021 100644
--- a/tests/unit/SyncSection.test.tsx
+++ b/tests/unit/SyncSection.test.tsx
@@ -72,4 +72,12 @@ describe('SyncSection', () => {
       expect(mockSetAuto).toHaveBeenCalledWith(false);
     });
   });
+
+  it('도움말 버튼 클릭 → SyncHelpModal open', async () => {
+    render(<SyncSection />);
+    await waitFor(() => screen.getByRole('button', { name: /저장/ }));
+    fireEvent.click(screen.getByRole('button', { name: /^도움말$/ }));
+    await waitFor(() => screen.getByRole('heading', { name: /동기화 도움말/ }));
+    expect(screen.getByRole('heading', { name: /동기화 도움말/ })).toBeInTheDocument();
+  });
 });