화면 좌우 맞추기

This commit is contained in:
kjs 2025-11-24 12:02:23 +09:00
parent 0c94c4cd5e
commit ddb1d4cf60
5 changed files with 504 additions and 478 deletions

View File

@ -9,7 +9,7 @@ import { Badge } from "@/components/ui/badge";
*/ */
export default function MainPage() { export default function MainPage() {
return ( return (
<div className="space-y-6 px-4 pt-10"> <div className="space-y-6 p-4">
{/* 메인 컨텐츠 */} {/* 메인 컨텐츠 */}
{/* Welcome Message */} {/* Welcome Message */}
<Card> <Card>

View File

@ -1,6 +1,6 @@
export default function MainHomePage() { export default function MainHomePage() {
return ( return (
<div className="space-y-6 px-4 pt-10"> <div className="space-y-6 p-4">
{/* 대시보드 컨텐츠 */} {/* 대시보드 컨텐츠 */}
<div className="rounded-lg border bg-background p-6 shadow-sm"> <div className="rounded-lg border bg-background p-6 shadow-sm">
<h3 className="mb-4 text-lg font-semibold">WACE !</h3> <h3 className="mb-4 text-lg font-semibold">WACE !</h3>

File diff suppressed because it is too large Load Diff

View File

@ -470,7 +470,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
{/* 가운데 컨텐츠 영역 - 스크롤 가능 */} {/* 가운데 컨텐츠 영역 - 스크롤 가능 */}
<main className="h-[calc(100vh-3.5rem)] min-w-0 flex-1 overflow-auto bg-white"> <main className="h-[calc(100vh-3.5rem)] min-w-0 flex-1 overflow-auto bg-white">
<div className="h-full w-full p-4">{children}</div> {children}
</main> </main>
</div> </div>

View File

@ -35,9 +35,9 @@ export const ResponsiveDesignerContainer: React.FC<ResponsiveDesignerContainerPr
switch (viewMode) { switch (viewMode) {
case "fit": case "fit":
// 컨테이너에 맞춰 비율 유지하며 조정 (여백 허용) // 컨테이너에 맞춰 비율 유지하며 조정 (좌우 여백 16px씩 유지)
const scaleX = (containerSize.width - 40) / designWidth; const scaleX = (containerSize.width - 32) / designWidth;
const scaleY = (containerSize.height - 40) / designHeight; const scaleY = (containerSize.height - 64) / designHeight;
return Math.min(scaleX, scaleY, 2); // 최대 2배까지 허용 return Math.min(scaleX, scaleY, 2); // 최대 2배까지 허용
case "custom": case "custom":
@ -154,7 +154,7 @@ export const ResponsiveDesignerContainer: React.FC<ResponsiveDesignerContainerPr
{/* 디자인 영역 */} {/* 디자인 영역 */}
<div <div
ref={containerRef} ref={containerRef}
className="flex-1 overflow-auto p-8" className="flex-1 overflow-auto px-4 py-8"
style={{ style={{
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",