Merge pull request #16 from WebCreatorX/feature/sidebar

feat: 좌측 사이드바 구현 (main: 컴포넌트 추가 기능)

Author: Nago730

.gitignore

@@ -46,4 +46,6 @@ next-env.d.ts
 # 앱별 빌드 결과물 무시
 apps/*/out
 apps/*/.next
-apps/*/dist
+apps/*/dist
+
+docs

apps/editor/package.json

@@ -13,9 +13,12 @@
   },
   "dependencies": {
     "@repo/ui": "workspace:*",
+    "@repo/utils": "workspace:*",
     "@tanstack/react-query": "^5.90.8",
+    "class-variance-authority": "^0.7.1",
     "immer": "^11.1.3",
     "json-server": "^1.0.0-beta.3",
+    "lucide-react": "^0.563.0",
     "next": "15.5.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",

apps/editor/src/app/editor/page.tsx

@@ -1,6 +1,7 @@
 import getNodesFromDB from "@/actions/editor/getNodesFromDB";
 import Canvas from "@/components/editor/Canvas";
 import EditorStoreInitializer from "@/components/editor/EditorStoreInitializer";
+import { LeftSidebar } from "@/widgets/left-sidebar";
 import { RuntimeProvider } from "@repo/ui/context/runtimeContext";
 
 export default async function EditorPage() {
@@ -14,7 +15,8 @@ export default async function EditorPage() {
       <EditorStoreInitializer initialNodes={nodes}>
         {/* 다른 에디터 관련 컴포넌트들은 이곳에서 렌더링 됩니다!(사이드바,매니패스트 수정 컴포넌트 등등...) */}
         <RuntimeProvider>
-          <div className="relative h-full w-full border-2">
+          <div className="flex h-full w-full border-2">
+            <LeftSidebar />
             <Canvas />
           </div>
         </RuntimeProvider>

apps/editor/src/entities/component/model/useComponentDefaults.ts

@@ -0,0 +1,52 @@
+// 타입별 기본값 관리 (캐싱)
+// 첫 요청 시 서버에 컴포넌트 기본값 요청
+// 두 번째 요청부터는 캐시에서 가져오기
+import { useState, useCallback } from 'react';
+// 일단 클라이언트에 컴포넌트 기본값이 저장되어있다고 가정. 추후에 서버에서 받을 땐 변경 필요
+import { COMPONENT_DEFAULTS, type ComponentDefaults } from '@/shared/lib/component-defaults';
+import { WcxNode } from "@repo/ui/types/nodes";
+
+// WcxNode에서 type 필드만 가져오기
+type ComponentType = WcxNode["type"];
+
+
+interface UseComponentDefaultsReturn {
+  getDefaults: (type: ComponentType) => Promise<ComponentDefaults>;
+  isLoading: boolean;
+  cache: Map<ComponentType, ComponentDefaults>;
+}
+
+export function useComponentDefaults(): UseComponentDefaultsReturn {
+  const [cache] = useState(new Map<ComponentType, ComponentDefaults>());
+  const [isLoading, setIsLoading] = useState(false);
+
+  const getDefaults = useCallback(async (type: ComponentType): Promise<ComponentDefaults> => {
+    // 캐시 확인
+    if (cache.has(type)) {
+      return cache.get(type)!;
+    }
+
+    setIsLoading(true);
+
+    try {
+      // 현재는 로컬 상수 사용, 나중에 서버 요청으로 변경 가능
+      const defaults = COMPONENT_DEFAULTS[type];
+
+      // 나중에 서버에서 가져오도록 개선할 때:
+      // const defaults = await componentApi.fetchDefaults(type);
+
+      // 캐시에 저장
+      cache.set(type, defaults);
+
+      return defaults;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [cache]);
+
+  return {
+    getDefaults,
+    isLoading,
+    cache,
+  };
+}

apps/editor/src/entities/component/model/useCreateComponentRecord.ts

@@ -0,0 +1,41 @@
+// DB에 컴포넌트 레코드 생성하도록 서버에 요청하는 훅
+// pageId, type, parentId, position 등 컴포넌트 레코드 생성에 필요한 데이터를 전달 후 DB에 저장된 레코드 id, created_at이 추가된 응답값을 받음
+// 질문: parentId는 필요한가? 왜냐하면 컴포넌트가 추가될 때는 항상 페이지의 root에 추가되는 것이므로 parentId는 필요하지 않을 것 같음
+// 이전에 root에 추가하도록 milo와 얘기나눴음
+import { useState } from 'react';
+// 일단 componentApi는 mock 응답으로 구현됨
+import { componentApi } from '@/shared/api/components';
+import type { ComponentRecordRequest, ComponentRecordResponse } from '@/shared/types/component';
+
+interface UseCreateComponentRecordReturn {
+  createRecord: (data: ComponentRecordRequest) => Promise<ComponentRecordResponse>;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export function useCreateComponentRecord(): UseCreateComponentRecordReturn {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const createRecord = async (data: ComponentRecordRequest): Promise<ComponentRecordResponse> => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await componentApi.createRecord(data);
+      return response;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Unknown error');
+      setError(error);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    createRecord,
+    isLoading,
+    error,
+  };
+}

apps/editor/src/entities/modal/index.ts

@@ -0,0 +1 @@
+export * from './model/store';

apps/editor/src/entities/modal/model/store.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+
+interface Modal {
+  id: string;
+  name: string;
+}
+
+interface ModalState {
+  modals: Modal[];
+  activeModalId: string | null;
+  selectModal: (id: string) => void;
+  createModal: () => void;
+}
+
+export const useModalStore = create<ModalState>((set) => ({
+  modals: [
+    { id: 'm1', name: '로그인 팝업' },
+    { id: 'm2', name: '공지사항' },
+  ],
+  activeModalId: null,
+  selectModal: (id: string) => set({ activeModalId: id }),
+  createModal: () => alert('새 모달 생성 모드 진입'),
+}));

apps/editor/src/entities/page/index.ts

@@ -0,0 +1 @@
+export * from './model/store';

apps/editor/src/entities/page/model/store.ts

@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+
+interface Page {
+  id: string;
+  name: string;
+}
+
+interface PageState {
+  pages: Page[];
+  activePageId: string;
+  selectPage: (id: string) => void;
+}
+
+export const usePageStore = create<PageState>((set) => ({
+  pages: [
+    { id: '1', name: '메인 페이지' },
+    { id: '2', name: '상품 상세' },
+    { id: '3', name: '이벤트' },
+  ],
+  activePageId: '1',
+  selectPage: (id: string) => set({ activePageId: id }),
+}));

apps/editor/src/entities/section/index.ts

@@ -0,0 +1 @@
+export * from './model/store';