From f17eedadcca392f1483f76a11835ca3b035369c9 Mon Sep 17 00:00:00 2001
From: 6-keem <6ukeem@gmail.com>
Date: Wed, 20 Aug 2025 01:33:07 +0900
Subject: [PATCH] feat: connect APIs

---
 .../connection-wizard/wizard-modal.tsx        |  19 +-
 .../components/erd/table-detail-sidebar.tsx   |  18 +-
 .../src/components/layout/side-bar.tsx        |   7 +-
 .../erd/db-schema-panel/annotation-item.tsx   |  38 +++
 .../db-schema-panel/annotation-sidebar.tsx    |  71 ++++
 .../erd/db-schema-panel/annotation.types.ts   |  15 +
 src/renderer/src/erd/erd-page.tsx             | 135 +++++++-
 src/renderer/src/erd/erd.type.ts              | 318 ++++++++++++++++++
 8 files changed, 602 insertions(+), 19 deletions(-)
 create mode 100644 src/renderer/src/erd/db-schema-panel/annotation-item.tsx
 create mode 100644 src/renderer/src/erd/db-schema-panel/annotation-sidebar.tsx
 create mode 100644 src/renderer/src/erd/db-schema-panel/annotation.types.ts

diff --git a/src/renderer/src/components/connection-wizard/wizard-modal.tsx b/src/renderer/src/components/connection-wizard/wizard-modal.tsx
index cccfec0..7b4215f 100644
--- a/src/renderer/src/components/connection-wizard/wizard-modal.tsx
+++ b/src/renderer/src/components/connection-wizard/wizard-modal.tsx
@@ -151,17 +151,32 @@ export function ConnectionWizard(): JSX.Element {
     api
       .post('/api/user/db/create/profile', filteredPayload)
       .then((response) => {
-        const id = response.data.id as number
+        const id = response.data.id as string
         setConnectionDetail((prev) => ({
           ...prev,
           id: id
         }))
+        createAnnotation(id)
       })
       .catch(() => {
         toast.error('데이터베이스 연결 생성 중 오류가 발생했습니다.')
       })
+      .finally(() => {
+        // NOTE: 페이지 새로고침 -> 저장된거 불러오도록
+        window.location.reload()
+        onClose()
+      })
+  }
 
-    onClose()
+  const createAnnotation = (db_profile_id: string): void => {
+    api
+      .post('/api/annotations/create', {
+        db_profile_id: db_profile_id
+      })
+      .then(() => {})
+      .catch(() => {
+        toast.error('어노테이션 생성 중 오류가 발생했습니다.')
+      })
   }
 
   return (
diff --git a/src/renderer/src/components/erd/table-detail-sidebar.tsx b/src/renderer/src/components/erd/table-detail-sidebar.tsx
index 4dc5f55..6ae0916 100644
--- a/src/renderer/src/components/erd/table-detail-sidebar.tsx
+++ b/src/renderer/src/components/erd/table-detail-sidebar.tsx
@@ -3,14 +3,13 @@ import {
   Table2,
   KeyRound,
   Link,
-  Square,
-  SquareDashedBottomIcon as SquareDashed,
   Database,
   Calendar,
   Hash,
   Type,
   Check,
-  LucideProps
+  LucideProps,
+  Diamond
 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
@@ -29,20 +28,20 @@ interface TableDetailSidebarProps {
 const constraintIcons = {
   primary: KeyRound,
   foreign: Link,
-  'not-null': Square,
-  nullable: SquareDashed,
+  'not-null': Diamond,
+  nullable: Diamond,
   unique: Hash,
   index: Database
 } as const
 
 // 제약 조건들 색상
 const constraintColors = {
-  primary: 'text-yellow-400 bg-yellow-400/10',
+  primary: 'text-purple-400 bg-purple-400/10',
   foreign: 'text-blue-400 bg-blue-400/10',
   'not-null': 'text-gray-400 bg-gray-400/10',
   nullable: 'text-gray-500 bg-gray-500/10',
   unique: 'text-green-400 bg-green-400/10',
-  index: 'text-purple-400 bg-purple-400/10'
+  index: 'text-yellow-400 bg-yellow-400/10'
 } as const
 
 // 제약 조건 표시
@@ -194,7 +193,10 @@ export function TableDetailSidebar({
                                       className={`flex items-center gap-1 px-2 py-1 rounded text-xs ${colorClass}`}
                                       title={label}
                                     >
-                                      <IconComponent className="w-3 h-3" />
+                                      <IconComponent
+                                        className="w-3 h-3"
+                                        fill={constraint === 'not-null' ? 'gray' : 'black'}
+                                      />
                                       <span>{label}</span>
                                     </div>
                                   )
diff --git a/src/renderer/src/components/layout/side-bar.tsx b/src/renderer/src/components/layout/side-bar.tsx
index 6b9016f..6753bfb 100644
--- a/src/renderer/src/components/layout/side-bar.tsx
+++ b/src/renderer/src/components/layout/side-bar.tsx
@@ -3,7 +3,7 @@ import AppIcon from '@renderer/assets/icon.svg'
 import { Database, Plus, Settings, Tag } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { NavItem } from '../workspace/types'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 const bottomNavItems: NavItem[] = [
   {
@@ -59,21 +59,24 @@ function NavButton({ item }: { item: NavItem }): React.JSX.Element {
 
 export function Sidebar(): React.JSX.Element {
   const navigate = useNavigate()
+  const location = useLocation()
 
   const topNavItems: NavItem[] = [
     {
       id: 'database',
       icon: Database,
-      active: true,
+      active: location.pathname === '/',
       onClick: (): void | Promise<void> => navigate('/')
     },
     {
       id: 'tags',
       icon: Tag,
+      active: location.pathname === '/erd',
       disabled: false,
       onClick: (): void | Promise<void> => navigate('/erd')
     } // TODO: DB 연결 후에 disabled: false
   ]
+
   return (
     <aside className="h-full flex flex-col bg-zinc-900 p-4 items-center gap-6">
       <img src={AppIcon} className="size-6" alt="QGenie" />
diff --git a/src/renderer/src/erd/db-schema-panel/annotation-item.tsx b/src/renderer/src/erd/db-schema-panel/annotation-item.tsx
new file mode 100644
index 0000000..c0b15a7
--- /dev/null
+++ b/src/renderer/src/erd/db-schema-panel/annotation-item.tsx
@@ -0,0 +1,38 @@
+import { DATABASES } from '@/components/connection-wizard/wizard.type'
+import { AnnotationItemProps } from './annotation.types'
+
+export default function AnnotationItem({
+  db,
+  index,
+  hasFocus,
+  onToggle
+}: AnnotationItemProps): React.JSX.Element {
+  const handleToggle = (): void => {
+    onToggle(index)
+  }
+  const dbItem = DATABASES.find((d) => d.id === db.type)
+
+  const text = db.view_name ? db.view_name : db.type
+
+  return (
+    <div className="flex flex-col justify-start items-start w-full">
+      <div
+        data-state="Default"
+        className={`w-full pl-2 pr-2 py-1 rounded inline-flex justify-start items-center gap-1 cursor-pointer ${hasFocus && 'bg-genie-600'} overflow-hidden`}
+        onClick={handleToggle}
+      >
+        <div className="size-6 p-0 flex items-center justify-center shrink-0">
+          <img src={dbItem?.icon} className="w-full h-full" />
+        </div>
+        <div className="flex gap-1 overflow-auto items-center truncate shrink-0">
+          <div className="justify-start h-4 content-center text-neutral-200 text-xs font-semibold font-['Pretendard'] leading-none">
+            {text}
+          </div>
+          <div className="justify-start h-4 content-center text-neutral-400 text-xs font-normal font-['Pretendard'] leading-none">
+            {db.host}:{db.port}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/src/erd/db-schema-panel/annotation-sidebar.tsx b/src/renderer/src/erd/db-schema-panel/annotation-sidebar.tsx
new file mode 100644
index 0000000..a9476a3
--- /dev/null
+++ b/src/renderer/src/erd/db-schema-panel/annotation-sidebar.tsx
@@ -0,0 +1,71 @@
+import { useState, useRef } from 'react'
+import AnnotationItem from './annotation-item'
+import { AnnotationNode } from './annotation.types'
+
+interface AnnotationSidebarProps {
+  dbList: AnnotationNode[]
+  selectedDB: AnnotationNode | null
+  setSelectedDB: (selectedNode: AnnotationNode) => void
+}
+
+export default function AnnotationSidebar({
+  dbList,
+  selectedDB,
+  setSelectedDB
+}: AnnotationSidebarProps): React.JSX.Element {
+  const [width, setWidth] = useState(220)
+  const isResizing = useRef(false)
+  const startX = useRef(0)
+  const startWidth = useRef(0)
+
+  const handleMouseDown = (e: React.MouseEvent): void => {
+    isResizing.current = true
+    startX.current = e.clientX
+    startWidth.current = width
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+  }
+
+  const handleMouseMove = (e: MouseEvent): void => {
+    if (!isResizing.current) return
+    const deltaX = e.clientX - startX.current
+    const newWidth = startWidth.current + deltaX
+    if (newWidth > 120 && newWidth < 500) {
+      setWidth(newWidth)
+    }
+  }
+
+  const handleMouseUp = (): void => {
+    isResizing.current = false
+    document.removeEventListener('mousemove', handleMouseMove)
+    document.removeEventListener('mouseup', handleMouseUp)
+  }
+
+  const handleToggle = (nodeId: number): void => {
+    setSelectedDB(dbList[nodeId])
+  }
+
+  return (
+    <div className="flex h-full">
+      <div
+        style={{ width, minWidth: 200, maxWidth: 500 }}
+        className="h-full p-3 bg-neutral-800 outline-1 flex-col justify-start items-start inline-flex select-none"
+      >
+        {dbList.map((db, index) => {
+          return (
+            <AnnotationItem
+              db={db}
+              hasFocus={selectedDB === db}
+              index={index}
+              onToggle={handleToggle}
+              key={db.id}
+            />
+          )
+        })}
+      </div>
+
+      <div onMouseDown={handleMouseDown} className="w-1 cursor-col-resize bg-genie-800" />
+    </div>
+  )
+}
diff --git a/src/renderer/src/erd/db-schema-panel/annotation.types.ts b/src/renderer/src/erd/db-schema-panel/annotation.types.ts
new file mode 100644
index 0000000..a7d8b68
--- /dev/null
+++ b/src/renderer/src/erd/db-schema-panel/annotation.types.ts
@@ -0,0 +1,15 @@
+export interface AnnotationNode {
+  id: string
+  type: 'mysql' | 'sqlite' | 'postgresql' | 'oracle' | 'mariadb'
+  host: string
+  port: number
+  name?: string
+  view_name?: string
+}
+
+export interface AnnotationItemProps {
+  db: AnnotationNode
+  index: number
+  hasFocus: boolean
+  onToggle: (nodeIndex: number) => void
+}
diff --git a/src/renderer/src/erd/erd-page.tsx b/src/renderer/src/erd/erd-page.tsx
index 957476b..9f1cda8 100644
--- a/src/renderer/src/erd/erd-page.tsx
+++ b/src/renderer/src/erd/erd-page.tsx
@@ -8,14 +8,22 @@ import {
   useNodesState,
   useEdgesState,
   useReactFlow,
-  ReactFlowProvider
+  ReactFlowProvider,
+  Node,
+  OnNodesChange
 } from '@xyflow/react'
 import '@xyflow/react/dist/style.css'
-import { useEffect, useCallback, useState } from 'react'
+import { useEffect, useCallback, useState, Dispatch, SetStateAction } from 'react'
 import { RelationshipEdge } from '@/components/erd/relationship-edge'
 import { CardinalityMarkers } from '@/components/erd/cardinarity-makers'
-import { initialEdges, initialNodes } from './erd.type'
+import { initialEdges } from './erd.type'
 import { Sidebar } from '@/components/layout/side-bar'
+import { api } from '@renderer/utils/api'
+import { toast } from 'sonner'
+import AnnotationSidebar from './db-schema-panel/annotation-sidebar'
+import { AnnotationNode } from './db-schema-panel/annotation.types'
+import { Button } from '@/components/ui/button'
+import { BadgePlus } from 'lucide-react'
 
 const nodeTypes = {
   table: TableNode
@@ -25,6 +33,12 @@ const edgeTypes = {
   relationship: RelationshipEdge
 }
 
+interface ErdContentProps {
+  nodes: Node[]
+  setNodes: Dispatch<SetStateAction<Node[]>>
+  onNodesChange: OnNodesChange<Node>
+}
+
 /**
  * ERD 페이지 컨텐트
  *
@@ -32,8 +46,7 @@ const edgeTypes = {
  *
  * @returns JSX.Element
  */
-function ErdContent(): React.JSX.Element {
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
+function ErdContent({ nodes, setNodes, onNodesChange }: ErdContentProps): React.JSX.Element {
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
   const [selectedTable, setSelectedTable] = useState<TableNodeData | null>(null)
   const [sidebarOpen, setSidebarOpen] = useState(false)
@@ -211,11 +224,119 @@ function ErdContent(): React.JSX.Element {
  * ReactFlowProvider로 전체 상태 공유
  */
 export default function ErdPage(): React.JSX.Element {
+  const [dbList, setDBList] = useState<AnnotationNode[]>([])
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
+  const [selectedDB, setSelectedDB] = useState<AnnotationNode | null>(null)
+
+  useEffect(() => {
+    api
+      .get(`/api/user/db/find/all`)
+      .then((response) => {
+        const connections = response.data
+
+        const list: AnnotationNode[] = []
+        connections.map((connection) => {
+          list.push({
+            id: connection.id,
+            name: connection.name,
+            type: connection.type,
+            host: connection.host,
+            port: connection.port,
+            view_name: connection.view_name
+          })
+        })
+
+        setDBList(list)
+
+        if (list.length !== 0) setSelectedDB(list[0])
+      })
+      .catch(() => {
+        toast.error('어노테이션 조회 중 오류가 발생했습니다.')
+      })
+  }, [])
+
+  useEffect(() => {
+    if (!selectedDB) return
+    api
+      .get(`/api/annotations/find/db/${selectedDB?.id}`)
+      .then((response) => {
+        // FIXME: 테스트
+        const annotation = response.data
+
+        // const annotation = TEST_ANNOTATION
+
+        const nodes: Node[] = annotation.tables.map((table, idx: number) => {
+          // 제약조건/인덱스 정리용 맵
+          const constraintMap: Record<string, string[]> = {}
+
+          // constraints -> columnName 기준으로 constraints 배열에 push
+          table.constraints?.forEach((c) => {
+            c.columns.forEach((col: string) => {
+              if (!constraintMap[col]) constraintMap[col] = []
+              if (c.type === 'PRIMARY KEY') constraintMap[col].push('primary')
+              if (c.type === 'UNIQUE') constraintMap[col].push('unique')
+            })
+          })
+
+          // columns -> Node의 data.columns 로 변환
+          const nodeColumns = table.columns.map((col) => {
+            const colConstraints = constraintMap[col.column_name] || []
+            if (!col.is_nullable) colConstraints.push('not-null')
+            else colConstraints.push('nullable')
+
+            return {
+              name: col.column_name,
+              type: col.data_type,
+              constraints: colConstraints,
+              description: col.description || undefined
+            }
+          })
+
+          return {
+            id: table.id,
+            type: 'table',
+            position: { x: 400, y: idx * 200 }, // 테이블별 y 위치 다르게
+            data: {
+              tableName: table.table_name,
+              columns: nodeColumns
+            }
+          }
+        })
+
+        setNodes(nodes)
+      })
+      .catch(() => {
+        toast.error('어노테이션 조회 중 오류가 발생했습니다.')
+      })
+  }, [selectedDB, setNodes])
+
   return (
     <ReactFlowProvider>
-      <div className="w-screen h-screen bg-zinc-900 flex overflow-hidden">
+      <div className="w-screen h-screen bg-zinc-900 flex overflow-hidden relative">
         <Sidebar />
-        <ErdContent />
+        <AnnotationSidebar dbList={dbList} selectedDB={selectedDB} setSelectedDB={setSelectedDB} />
+        <div className="flex-1 relative">
+          <ErdContent nodes={nodes} setNodes={setNodes} onNodesChange={onNodesChange} />
+
+          <Button
+            className="absolute bottom-12 left-1/2 -translate-x-1/2 px-6 py-4 text-white rounded-lg shadow-lg"
+            onClick={() => {
+              api
+                .post('/api/annotations/create', {
+                  db_profile_id: selectedDB?.id
+                })
+                .then(() => {
+                  toast.success('어노테이션 생성이 완료되었습니다. 🎉')
+                })
+                .catch(() => {
+                  toast.error('어노테이션 생성 중 오류가 발생했습니다.')
+                })
+            }}
+          >
+            <BadgePlus />
+            어노테이션 생성
+          </Button>
+        </div>
       </div>
     </ReactFlowProvider>
   )
diff --git a/src/renderer/src/erd/erd.type.ts b/src/renderer/src/erd/erd.type.ts
index 07d49ba..3f05957 100644
--- a/src/renderer/src/erd/erd.type.ts
+++ b/src/renderer/src/erd/erd.type.ts
@@ -273,3 +273,321 @@ export const initialEdges: Edge<RelationshipEdgeData>[] = [
     }
   }
 ]
+
+export const TEST_ANNOTATION = {
+  id: 'DB-ANNO-0A72DC38374B464BAD9481B8BB7696D7',
+  created_at: '2025-08-19T09:26:55.081164',
+  updated_at: '2025-08-19T09:26:55.081164',
+  db_profile_id: 'USER-DB-AD661F6F1D714124851DB65A8014F435',
+  database_name: 'postgres',
+  description: "Mock: 'postgres' 데이터베이스 전체에 대한 설명입니다.",
+  tables: [
+    {
+      id: 'TBL-ANNO-D8BFC65CDCF64691A1381C5DB20C7C7A',
+      created_at: '2025-08-19T09:26:55.081164',
+      updated_at: '2025-08-19T09:26:55.081164',
+      table_name: 'departments',
+      description: "Mock: 'departments' 테이블에 대한 설명입니다.",
+      columns: [
+        {
+          id: 'COL-ANNO-657A7E4819AC4B4984A02AB7D285CA2F',
+          column_name: 'department_id',
+          description: "Mock: 'department_id' 컬럼에 대한 설명입니다.",
+          data_type: 'int4',
+          is_nullable: false,
+          default_value: "nextval('departments_department_id_seq'::regclass)"
+        },
+        {
+          id: 'COL-ANNO-53945D0E42EE4820AB81A6E510FF1B40',
+          column_name: 'department_name',
+          description: "Mock: 'department_name' 컬럼에 대한 설명입니다.",
+          data_type: 'varchar',
+          is_nullable: false,
+          default_value: null
+        }
+      ],
+      constraints: [
+        {
+          name: 'departments_pkey',
+          type: 'PRIMARY KEY',
+          columns: ['department_id'],
+          description: "Mock: 제약조건 'departments_pkey' 설명."
+        },
+        {
+          name: 'departments_department_name_key',
+          type: 'UNIQUE',
+          columns: ['department_name'],
+          description: "Mock: 제약조건 'departments_department_name_key' 설명."
+        }
+      ],
+      indexes: [
+        {
+          name: 'departments_department_name_key',
+          columns: ['department_name'],
+          is_unique: true,
+          description: null
+        }
+      ]
+    },
+    {
+      id: 'TBL-ANNO-8DFD040F221A4F7C84A43CAB3F8C491A',
+      created_at: '2025-08-19T09:26:55.081164',
+      updated_at: '2025-08-19T09:26:55.081164',
+      table_name: 'employees',
+      description: "Mock: 'employees' 테이블에 대한 설명입니다.",
+      columns: [
+        {
+          id: 'COL-ANNO-A06CCEF601C64761833B6866AB865037',
+          column_name: 'employee_id',
+          description: "Mock: 'employee_id' 컬럼에 대한 설명입니다.",
+          data_type: 'int4',
+          is_nullable: false,
+          default_value: "nextval('employees_employee_id_seq'::regclass)"
+        },
+        {
+          id: 'COL-ANNO-13DE388E01434CA4868ACEF32F3362EB',
+          column_name: 'first_name',
+          description: "Mock: 'first_name' 컬럼에 대한 설명입니다.",
+          data_type: 'varchar',
+          is_nullable: false,
+          default_value: null
+        },
+        {
+          id: 'COL-ANNO-BE6734D969594C258536735B32EA3339',
+          column_name: 'last_name',
+          description: "Mock: 'last_name' 컬럼에 대한 설명입니다.",
+          data_type: 'varchar',
+          is_nullable: false,
+          default_value: null
+        },
+        {
+          id: 'COL-ANNO-CB73B121B389413D9ED90B2FEBCC8168',
+          column_name: 'email',
+          description: "Mock: 'email' 컬럼에 대한 설명입니다.",
+          data_type: 'varchar',
+          is_nullable: false,
+          default_value: null
+        },
+        {
+          id: 'COL-ANNO-427CE85032B840B682487F3EE707939E',
+          column_name: 'hire_date',
+          description: "Mock: 'hire_date' 컬럼에 대한 설명입니다.",
+          data_type: 'date',
+          is_nullable: true,
+          default_value: 'CURRENT_DATE'
+        },
+        {
+          id: 'COL-ANNO-6BCCA2CCADFD49CFB4FC74E1E0E3E5D2',
+          column_name: 'department_id',
+          description: "Mock: 'department_id' 컬럼에 대한 설명입니다.",
+          data_type: 'int4',
+          is_nullable: true,
+          default_value: null
+        }
+      ],
+      constraints: [
+        {
+          name: 'employees_pkey',
+          type: 'PRIMARY KEY',
+          columns: ['employee_id'],
+          description: "Mock: 제약조건 'employees_pkey' 설명."
+        },
+        {
+          name: 'employees_email_key',
+          type: 'UNIQUE',
+          columns: ['email'],
+          description: "Mock: 제약조건 'employees_email_key' 설명."
+        }
+      ],
+      indexes: [
+        {
+          name: 'employees_email_key',
+          columns: ['email'],
+          is_unique: true,
+          description: null
+        }
+      ]
+    },
+    {
+      id: 'TBL-ANNO-9A436FEB63BF44088EAB30F7FFA0067F',
+      created_at: '2025-08-19T09:26:55.081164',
+      updated_at: '2025-08-19T09:26:55.081164',
+      table_name: 'employee_projects',
+      description: "Mock: 'employee_projects' 테이블에 대한 설명입니다.",
+      columns: [
+        {
+          id: 'COL-ANNO-B5A1145E918A426BB51329C3C0751A8E',
+          column_name: 'employee_id',
+          description: "Mock: 'employee_id' 컬럼에 대한 설명입니다.",
+          data_type: 'int4',
+          is_nullable: false,
+          default_value: null
+        },
+        {
+          id: 'COL-ANNO-0C8536E5CCCE4A638B73B2401350B42A',
+          column_name: 'project_id',
+          description: "Mock: 'project_id' 컬럼에 대한 설명입니다.",
+          data_type: 'int4',
+          is_nullable: false,
+          default_value: null
+        }
+      ],
+      constraints: [
+        {
+          name: 'employee_projects_pkey',
+          type: 'PRIMARY KEY',
+          columns: ['project_id', 'employee_id'],
+          description: "Mock: 제약조건 'employee_projects_pkey' 설명."
+        }
+      ],
+      indexes: []
+    },
+    {
+      id: 'TBL-ANNO-5BD2B4DE7952493CA8F14BF4C6509651',
+      created_at: '2025-08-19T09:26:55.081164',
+      updated_at: '2025-08-19T09:26:55.081164',
+      table_name: 'projects',
+      description: "Mock: 'projects' 테이블에 대한 설명입니다.",
+      columns: [
+        {
+          id: 'COL-ANNO-A12E42F799024F218EE846147BF72147',
+          column_name: 'project_id',
+          description: "Mock: 'project_id' 컬럼에 대한 설명입니다.",
+          data_type: 'int4',
+          is_nullable: false,
+          default_value: "nextval('projects_project_id_seq'::regclass)"
+        },
+        {
+          id: 'COL-ANNO-2D43A840A84A4941A17BAC8F653432BA',
+          column_name: 'project_name',
+          description: "Mock: 'project_name' 컬럼에 대한 설명입니다.",
+          data_type: 'varchar',
+          is_nullable: false,
+          default_value: null
+        },
+        {
+          id: 'COL-ANNO-111DC6AD975B4CD4802C2B0D2C396FDC',
+          column_name: 'start_date',
+          description: "Mock: 'start_date' 컬럼에 대한 설명입니다.",
+          data_type: 'date',
+          is_nullable: true,
+          default_value: null
+        },
+        {
+          id: 'COL-ANNO-DB0C22BA62AC4780AD281E69A8222967',
+          column_name: 'end_date',
+          description: "Mock: 'end_date' 컬럼에 대한 설명입니다.",
+          data_type: 'date',
+          is_nullable: true,
+          default_value: null
+        }
+      ],
+      constraints: [
+        {
+          name: 'check_dates',
+          type: 'CHECK',
+          columns: [],
+          description: "Mock: 제약조건 'check_dates' 설명."
+        },
+        {
+          name: 'projects_pkey',
+          type: 'PRIMARY KEY',
+          columns: ['project_id'],
+          description: "Mock: 제약조건 'projects_pkey' 설명."
+        }
+      ],
+      indexes: []
+    },
+    {
+      id: 'TBL-ANNO-921D771572A84E78B0D8D1FFEF7F8E87',
+      created_at: '2025-08-19T09:26:55.081164',
+      updated_at: '2025-08-19T09:26:55.081164',
+      table_name: 'users',
+      description: "Mock: 'users' 테이블에 대한 설명입니다.",
+      columns: [
+        {
+          id: 'COL-ANNO-30907A95F1A64020964D8272421E50EE',
+          column_name: 'id',
+          description: "Mock: 'id' 컬럼에 대한 설명입니다.",
+          data_type: 'int4',
+          is_nullable: false,
+          default_value: "nextval('my_app.users_id_seq'::regclass)"
+        },
+        {
+          id: 'COL-ANNO-8159A0E058874BD39BDD037D73BC6DBD',
+          column_name: 'username',
+          description: "Mock: 'username' 컬럼에 대한 설명입니다.",
+          data_type: 'varchar',
+          is_nullable: false,
+          default_value: null
+        },
+        {
+          id: 'COL-ANNO-404DD23162DC4A6489EF1A8F041DF184',
+          column_name: 'email',
+          description: "Mock: 'email' 컬럼에 대한 설명입니다.",
+          data_type: 'varchar',
+          is_nullable: false,
+          default_value: null
+        },
+        {
+          id: 'COL-ANNO-0F04410B343C46A09FA554440BCC5B16',
+          column_name: 'full_name',
+          description: "Mock: 'full_name' 컬럼에 대한 설명입니다.",
+          data_type: 'varchar',
+          is_nullable: true,
+          default_value: null
+        },
+        {
+          id: 'COL-ANNO-CCD55E9B8FDC492484CCB16289EBA9F2',
+          column_name: 'created_at',
+          description: "Mock: 'created_at' 컬럼에 대한 설명입니다.",
+          data_type: 'timestamptz',
+          is_nullable: true,
+          default_value: 'CURRENT_TIMESTAMP'
+        },
+        {
+          id: 'COL-ANNO-BCB5ED8D1D244456B69B8D035E6267FD',
+          column_name: 'is_active',
+          description: "Mock: 'is_active' 컬럼에 대한 설명입니다.",
+          data_type: 'bool',
+          is_nullable: true,
+          default_value: 'true'
+        }
+      ],
+      constraints: [
+        {
+          name: 'users_pkey',
+          type: 'PRIMARY KEY',
+          columns: ['id'],
+          description: "Mock: 제약조건 'users_pkey' 설명."
+        },
+        {
+          name: 'users_username_key',
+          type: 'UNIQUE',
+          columns: ['username'],
+          description: "Mock: 제약조건 'users_username_key' 설명."
+        },
+        {
+          name: 'users_email_key',
+          type: 'UNIQUE',
+          columns: ['email'],
+          description: "Mock: 제약조건 'users_email_key' 설명."
+        }
+      ],
+      indexes: [
+        {
+          name: 'users_email_key',
+          columns: ['email'],
+          is_unique: true,
+          description: null
+        },
+        {
+          name: 'users_username_key',
+          columns: ['username'],
+          is_unique: true,
+          description: null
+        }
+      ]
+    }
+  ]
+}