From e72fcd0ab139b954580c7170e839eb84cdeb8a1c Mon Sep 17 00:00:00 2001
From: zio <admin@zioinfo.co.kr>
Date: Mon, 1 Jun 2026 22:12:59 +0900
Subject: [PATCH] feat: add frontend/src/components/FolderTree.tsx

---
 frontend/src/components/FolderTree.tsx | 30 ++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 frontend/src/components/FolderTree.tsx

diff --git a/frontend/src/components/FolderTree.tsx b/frontend/src/components/FolderTree.tsx
new file mode 100644
index 00000000..0568ba3e
--- /dev/null
+++ b/frontend/src/components/FolderTree.tsx
@@ -0,0 +1,30 @@
+import { useMailStore } from '../store/mailStore'
+
+const FOLDER_ICONS: Record<string, string> = {
+  'INBOX': '📥', '받은메함': '📥',
+  'Sent': '📤', '보낸메함': '📤',
+  'Drafts': '📝', '임시보관함': '📝',
+  'Trash': '🗑️', '휴지통': '🗑️',
+  'Junk': '⚠️', 'Spam': '⚠️', '스팸': '⚠️',
+}
+
+export default function FolderTree() {
+  const { folders, currentFolder, setCurrentFolder } = useMailStore()
+
+  return (
+    <nav className="folder-tree">
+      <div className="folder-tree-title">폴더</div>
+      {folders.map(f => (
+        <button
+          key={f.name}
+          className={`folder-item ${currentFolder === f.name ? 'active' : ''}`}
+          onClick={() => setCurrentFolder(f.name)}
+        >
+          <span className="folder-icon">{FOLDER_ICONS[f.name] || FOLDER_ICONS[f.display] || '📁'}</span>
+          <span className="folder-name">{f.display}</span>
+          {f.unread > 0 && <span className="folder-badge">{f.unread}</span>}
+        </button>
+      ))}
+    </nav>
+  )
+}