Skip to content

Commit e444e57

Browse files
Nago730Nago730
committed
๐Ÿ›fix: CI ๋นŒ๋“œ์˜ค๋ฅ˜ ์ˆ˜์ •
1 parent f2eca7c commit e444e57

File tree

12 files changed

+218
-25
lines changed

12 files changed

+218
-25
lines changed

โ€Žapps/editor/src/app/editor/page.tsxโ€Ž

Lines changed: 196 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,206 @@ import { RuntimeProvider } from "@repo/ui/context/runtimeContext";
77

88
export default async function EditorPage() {
99
const pageId = 201; //๋ชฉ๋ฐ์ดํ„ฐ์ž…๋‹ˆ๋‹ค.
10-
//์„œ๋ฒ„ ์•ก์…˜ ํ•จ์ˆ˜(nodes๋ฐ์ดํ„ฐ ํŒจ์นญํ•จ์ˆ˜)
11-
const nodes = await getNodesFromDB(pageId);
10+
// ์ค‘์ฒฉ ๊ตฌ์กฐ ์‹คํ—˜์„ ์œ„ํ•œ ํ…Œ์ŠคํŠธ ๋ฐ์ดํ„ฐ
11+
// ๋ ˆ์ด์–ด ๊ธฐ๋Šฅ์„ ํ…Œ์ŠคํŠธํ•˜๊ธฐ ์œ„ํ•œ ๋ณต์žกํ•œ ์ค‘์ฒฉ ๊ตฌ์กฐ ๋ฐ์ดํ„ฐ
12+
const nodes: any[] = [
13+
{
14+
id: "root-container",
15+
type: "Stack",
16+
page_id: pageId,
17+
parent_id: null,
18+
position: 1,
19+
style: {
20+
display: "flex",
21+
flexDirection: "column",
22+
backgroundColor: "#ffffff",
23+
padding: "0px",
24+
gap: "0px",
25+
borderRadius: "0px",
26+
position: "absolute",
27+
overflow: "hidden",
28+
border: "1px solid #e5e7eb",
29+
boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
30+
},
31+
layout: {
32+
x: 50, y: 50, width: 800, height: 600, zIndex: 1,
33+
widthMode: "fixed", heightMode: "fixed",
34+
widthUnit: "px", heightUnit: "px"
35+
}
36+
},
37+
// --- Navigation Bar ---
38+
{
39+
id: "navbar",
40+
type: "Stack",
41+
page_id: pageId,
42+
parent_id: "root-container",
43+
position: 1,
44+
style: {
45+
display: "flex",
46+
flexDirection: "row",
47+
alignItems: "center",
48+
justifyContent: "space-between",
49+
padding: "0 24px",
50+
height: "64px",
51+
backgroundColor: "#ffffff",
52+
borderBottom: "1px solid #f3f4f6",
53+
},
54+
layout: {
55+
x: 0, y: 0, width: "100%", height: 64, zIndex: 1,
56+
widthMode: "fill", heightMode: "fixed",
57+
widthUnit: "%", heightUnit: "px"
58+
}
59+
},
60+
{
61+
id: "logo",
62+
type: "Text",
63+
page_id: pageId,
64+
parent_id: "navbar",
65+
position: 1,
66+
props: { text: "WCX Editor", level: "h4" },
67+
style: { fontWeight: "900", color: "#111827", fontSize: "18px" },
68+
layout: { x: 0, y: 0, width: "auto", height: "auto", zIndex: 1, widthMode: "fit", heightMode: "fit", widthUnit: "px", heightUnit: "px" }
69+
},
70+
{
71+
id: "nav-links",
72+
type: "Stack",
73+
page_id: pageId,
74+
parent_id: "navbar",
75+
position: 2,
76+
style: { display: "flex", flexDirection: "row", gap: "20px", alignItems: "center" },
77+
layout: { x: 0, y: 0, width: "auto", height: "auto", zIndex: 1, widthMode: "fit", heightMode: "fit", widthUnit: "px", heightUnit: "px" }
78+
},
79+
{
80+
id: "link-home",
81+
type: "Text",
82+
page_id: pageId,
83+
parent_id: "nav-links",
84+
position: 1,
85+
props: { text: "Home", level: "h6" },
86+
style: { color: "#4b5563", fontSize: "14px" },
87+
layout: { x: 0, y: 0, width: "auto", height: "auto", zIndex: 1, widthMode: "fit", heightMode: "fit", widthUnit: "px", heightUnit: "px" }
88+
},
89+
{
90+
id: "link-about",
91+
type: "Text",
92+
page_id: pageId,
93+
parent_id: "nav-links",
94+
position: 2,
95+
props: { text: "About", level: "h6" },
96+
style: { color: "#4b5563", fontSize: "14px" },
97+
layout: { x: 0, y: 0, width: "auto", height: "auto", zIndex: 1, widthMode: "fit", heightMode: "fit", widthUnit: "px", heightUnit: "px" }
98+
},
99+
// --- Hero Section ---
100+
{
101+
id: "hero-section",
102+
type: "Stack",
103+
page_id: pageId,
104+
parent_id: "root-container",
105+
position: 2,
106+
style: {
107+
display: "flex",
108+
flexDirection: "column",
109+
alignItems: "center",
110+
justifyContent: "center",
111+
flex: 1,
112+
padding: "60px 20px",
113+
backgroundColor: "#f9fafb",
114+
textAlign: "center"
115+
},
116+
layout: {
117+
x: 0, y: 0, width: "100%", height: "auto", zIndex: 1,
118+
widthMode: "fill", heightMode: "fill",
119+
widthUnit: "%", heightUnit: "px"
120+
}
121+
},
122+
{
123+
id: "hero-title",
124+
type: "Heading",
125+
page_id: pageId,
126+
parent_id: "hero-section",
127+
position: 1,
128+
props: { text: "Build Your Web App Faster", level: "h1" },
129+
style: { color: "#111827", fontWeight: "800", marginBottom: "16px", fontSize: "36px" },
130+
layout: { x: 0, y: 0, width: "auto", height: "auto", zIndex: 1, widthMode: "fit", heightMode: "fit", widthUnit: "px", heightUnit: "px" }
131+
},
132+
{
133+
id: "hero-desc",
134+
type: "Text",
135+
page_id: pageId,
136+
parent_id: "hero-section",
137+
position: 2,
138+
props: { text: "The most powerful no-code editor for modern web developers.", level: "h5" },
139+
style: { color: "#6b7280", maxWidth: "500px", marginBottom: "32px" },
140+
layout: { x: 0, y: 0, width: "auto", height: "auto", zIndex: 1, widthMode: "fit", heightMode: "fit", widthUnit: "px", heightUnit: "px" }
141+
},
142+
{
143+
id: "hero-cta-container",
144+
type: "Stack",
145+
page_id: pageId,
146+
parent_id: "hero-section",
147+
position: 3,
148+
style: { display: "flex", flexDirection: "row", gap: "12px" },
149+
layout: { x: 0, y: 0, width: "auto", height: "auto", zIndex: 1, widthMode: "fit", heightMode: "fit", widthUnit: "px", heightUnit: "px" }
150+
},
151+
{
152+
id: "btn-primary",
153+
type: "Button",
154+
page_id: pageId,
155+
parent_id: "hero-cta-container",
156+
position: 1,
157+
props: { text: "Get Started" },
158+
style: { backgroundColor: "#000000", color: "#ffffff", padding: "12px 24px", borderRadius: "8px", fontWeight: "600" },
159+
layout: { x: 0, y: 0, width: "auto", height: "auto", zIndex: 1, widthMode: "fit", heightMode: "fit", widthUnit: "px", heightUnit: "px" }
160+
},
161+
{
162+
id: "btn-secondary",
163+
type: "Button",
164+
page_id: pageId,
165+
parent_id: "hero-cta-container",
166+
position: 2,
167+
props: { text: "View Demo" },
168+
style: { backgroundColor: "#ffffff", color: "#000000", padding: "12px 24px", borderRadius: "8px", border: "1px solid #e5e7eb", fontWeight: "600" },
169+
layout: { x: 0, y: 0, width: "auto", height: "auto", zIndex: 1, widthMode: "fit", heightMode: "fit", widthUnit: "px", heightUnit: "px" }
170+
},
171+
// --- Footer ---
172+
{
173+
id: "footer",
174+
type: "Stack",
175+
page_id: pageId,
176+
parent_id: "root-container",
177+
position: 3,
178+
style: {
179+
display: "flex",
180+
flexDirection: "row",
181+
alignItems: "center",
182+
justifyContent: "center",
183+
padding: "20px",
184+
backgroundColor: "#ffffff",
185+
borderTop: "1px solid #f3f4f6"
186+
},
187+
layout: {
188+
x: 0, y: 0, width: "100%", height: 60, zIndex: 1,
189+
widthMode: "fill", heightMode: "fixed",
190+
widthUnit: "%", heightUnit: "px"
191+
}
192+
},
193+
{
194+
id: "footer-text",
195+
type: "Text",
196+
page_id: pageId,
197+
parent_id: "footer",
198+
position: 1,
199+
props: { text: "ยฉ 2024 WebCreatorX. All rights reserved.", level: "h6" },
200+
style: { color: "#9ca3af", fontSize: "12px" },
201+
layout: { x: 0, y: 0, width: "auto", height: "auto", zIndex: 1, widthMode: "fit", heightMode: "fit", widthUnit: "px", heightUnit: "px" }
202+
}
203+
];
12204

13205
return (
14-
<div className="flex h-screen w-screen flex-col gap-10">
15-
<h1 className="text-3xl text-amber-700">์—๋””ํ„ฐ ํŽ˜์ด์ง€ ์ž…๋‹ˆ๋‹ค.</h1>
206+
<div className="flex h-screen w-screen flex-col">
16207
<EditorStoreInitializer initialNodes={nodes}>
17-
{/* ๋‹ค๋ฅธ ์—๋””ํ„ฐ ๊ด€๋ จ ์ปดํฌ๋„ŒํŠธ๋“ค์€ ์ด๊ณณ์—์„œ ๋ Œ๋”๋ง ๋ฉ๋‹ˆ๋‹ค!(์‚ฌ์ด๋“œ๋ฐ”,๋งค๋‹ˆํŒจ์ŠคํŠธ ์ˆ˜์ • ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋“ฑ...) */}
18208
<RuntimeProvider>
19-
<div className="flex h-full w-full border-2">
209+
<div className="flex h-full w-full border-2 overflow-hidden">
20210
<LeftSidebar />
21211
<Canvas />
22212
<RightSidebar />

โ€Žapps/editor/src/entities/section/model/store.tsโ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ interface SectionState {
1010
selectSection: (id: string) => void;
1111
}
1212

13-
export const useSectionStore = create<SectionState>((set) => ({
13+
export const useSectionStore = create<SectionState>(() => ({
1414
sections: [
1515
{ id: 's1', name: 'ํžˆ์–ด๋กœ ์„น์…˜' },
1616
{ id: 's2', name: 'ํŠน์ง• ์†Œ๊ฐœ' },

โ€Žapps/editor/src/stores/useEditorStore.tsโ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ const useEditorStore = create(
128128

129129
// 1. ์ตœ์ƒ์œ„ ์†์„ฑ ์—…๋ฐ์ดํŠธ (type ๋“ฑ)
130130
// (์ฃผ์˜: ๊ฐ์ฒด ํƒ€์ž…์ธ style, props, layout์„ ํ†ต์งธ๋กœ ๋ฎ์–ด์“ฐ์ง€ ์•Š๋„๋ก ๋ณ„๋„ ์ฒ˜๋ฆฌ)
131-
const { style, props, layout, ...rest } = updates;
131+
const { style, props, layout: _layout, ...rest } = updates;
132132
Object.assign(targetNode, rest);
133133

134134
// 2. ํ•˜์œ„ ๊ฐ์ฒด ๋ณ‘ํ•ฉ ์—…๋ฐ์ดํŠธ

โ€Žapps/editor/src/widgets/left-sidebar/ui/sub-panels/LayerPanel.tsxโ€Ž

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,16 @@ import {
1111
Component,
1212
ChevronRight,
1313
ChevronDown,
14-
Layers
14+
Layers,
15+
LucideIcon
1516
} from 'lucide-react';
1617
import { useState } from 'react';
1718
import { WcxNode } from '@repo/ui/types/nodes';
1819

1920
/**
2021
* ๋…ธ๋“œ ํƒ€์ž…๋ณ„ ์•„์ด์ฝ˜ ๋งคํ•‘
2122
*/
22-
const NODE_TYPE_ICONS: Record<string, any> = {
23+
const NODE_TYPE_ICONS: Record<string, LucideIcon> = {
2324
Text: Type,
2425
Image: ImageIcon,
2526
Heading: Heading1,
@@ -62,9 +63,9 @@ const LayerItem = ({ node, nodes, selectedId, onSelect, depth }: LayerItemProps)
6263
*/
6364
const getNodeName = () => {
6465
if ('props' in node) {
65-
const props = node.props as any;
66-
if (props.text) return props.text;
67-
if (props.alt) return props.alt;
66+
const props = node.props as Record<string, unknown>;
67+
if (props.text) return props.text as string;
68+
if (props.alt) return props.alt as string;
6869
}
6970
return node.type;
7071
};

โ€Žapps/editor/src/widgets/right-sidebar/ui/RightSidebar.tsxโ€Ž

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import PropertySection from "./sections/PropertySection";
1212
import { WcxNode } from "@repo/ui/types/nodes";
1313

1414
// ๋…ธ๋“œ ํƒ€์ž…๋ณ„ Content ํŒจ๋„ ๋งคํ•‘
15+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
1516
const CONTENT_PANEL: Partial<Record<WcxNode["type"], React.ComponentType<{ node: any }>>> = {
1617
Text: TextPanel,
1718
Heading: TextPanel,

โ€Žapps/editor/src/widgets/right-sidebar/ui/panels/ButtonPanel.tsxโ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface ButtonPanelProps {
1313
export default function ButtonPanel({ node }: ButtonPanelProps) {
1414
const updateNode = useUpdateNode();
1515

16-
const handlePropChange = (key: string, value: any) => {
16+
const handlePropChange = (key: string, value: string | number | boolean | object) => {
1717
updateNode(node.id, { props: { ...node.props, [key]: value } });
1818
};
1919

โ€Žapps/editor/src/widgets/right-sidebar/ui/panels/ImagePanel.tsxโ€Ž

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ export default function ImagePanel({ node }: ImagePanelProps) {
1717
<div className="flex flex-col gap-5">
1818
<SidebarItem label="Alt Text">
1919
<TextInput
20-
value={(node.props as any).alt || ""}
20+
value={(node.props as { alt?: string }).alt || ""}
2121
onChange={(val) =>
2222
updateNode(node.id, { props: { ...node.props, alt: val } })
2323
}
2424
placeholder="Image description..."
2525
/>
2626
</SidebarItem>
2727
<LayoutSection node={node} />
28-
</div>
28+
</div >
2929
);
3030
}

โ€Žapps/editor/src/widgets/right-sidebar/ui/panels/TextPanel.tsxโ€Ž

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ interface TextPanelProps {
1818
export default function TextPanel({ node }: TextPanelProps) {
1919
const updateNode = useUpdateNode();
2020

21-
const handlePropChange = (key: string, value: any) => {
21+
const handlePropChange = (key: string, value: string | number | boolean | object) => {
2222
updateNode(node.id, { props: { ...node.props, [key]: value } });
2323
};
2424

25-
const handleStyleChange = (key: string, value: any) => {
25+
const handleStyleChange = (key: string, value: string | number | boolean | object) => {
2626
updateNode(node.id, { style: { ...node.style, [key]: value } });
2727
};
2828

โ€Žapps/editor/src/widgets/right-sidebar/ui/sections/LayoutSection.tsxโ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ interface LayoutSectionProps {
1616
export default function LayoutSection({ node }: LayoutSectionProps) {
1717
const updateNode = useUpdateNode();
1818

19-
const handleStyleChange = (key: string, value: any) => {
19+
const handleStyleChange = (key: string, value: string | number) => {
2020
updateNode(node.id, { style: { ...node.style, [key]: value } });
2121
};
2222

โ€Žapps/editor/src/widgets/right-sidebar/ui/sections/PositionSection.tsxโ€Ž

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ export default function PositionSection({ node }: PositionSectionProps) {
1717
const updateNodeLayout = useUpdateNodeLayout();
1818
const positionType = (node.style.position as PositionType) || "relative";
1919

20-
const handleStyleChange = (key: string, value: any) => {
20+
const handleStyleChange = (key: string, value: string | number | undefined) => {
2121
updateNode(node.id, { style: { ...node.style, [key]: value } });
2222
};
2323

24-
const handleLayoutChange = (key: string, value: any) => {
24+
const handleLayoutChange = (key: string, value: string | number) => {
2525
updateNodeLayout(node.id, { [key]: value });
2626
};
2727

0 commit comments

Comments
ย (0)