feat: add front page
This commit is contained in:
Huh Hyeongjun
parent
b2670f0578
commit
b461b32aa8
|
|
@ -1,10 +1,10 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
<title>map3d</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
12
src/App.tsx
12
src/App.tsx
|
|
@ -1,12 +0,0 @@
|
|||
import { css } from "@emotion/react";
|
||||
import { Space } from "./space/Space";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div css={css({ height: "100%", width: "100%" })}>
|
||||
<Space />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import { css } from "@emotion/react";
|
||||
import React from "react";
|
||||
|
||||
export function FullscreenModal({
|
||||
children,
|
||||
isOpen = false,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
isOpen?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
css={css({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "fixed",
|
||||
zIndex: 999,
|
||||
backgroundColor: "#ffffffc9",
|
||||
backdropFilter: "blur(12px)",
|
||||
display: isOpen ? "flex" : "none",
|
||||
})}
|
||||
>
|
||||
<div
|
||||
css={css({
|
||||
padding: "2rem",
|
||||
width: "100%",
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { css } from "@emotion/react";
|
||||
|
||||
export function Column({
|
||||
children,
|
||||
gap = "0.25rem",
|
||||
justify = "unset",
|
||||
height = "auto",
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
gap?: string;
|
||||
justify?: string;
|
||||
height?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
css={css({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: gap,
|
||||
justifyContent: justify,
|
||||
height: height,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { css } from "@emotion/react";
|
||||
import { Properties } from "csstype";
|
||||
|
||||
export function Row({
|
||||
children,
|
||||
gap = "0.25rem",
|
||||
justify = "unset",
|
||||
overflow = "visible",
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
gap?: string;
|
||||
justify?: string;
|
||||
overflow?: Properties["overflow"];
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
css={css({
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: gap,
|
||||
justifyContent: justify,
|
||||
overflow: overflow,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { css } from "@emotion/react";
|
||||
import { DESC_COLOR } from "@/theme/color";
|
||||
|
||||
export function Description({ children }: { children?: React.ReactNode }) {
|
||||
return (
|
||||
<p
|
||||
css={css({
|
||||
margin: 0,
|
||||
color: DESC_COLOR,
|
||||
fontSize: "1rem",
|
||||
fontWeight: "400",
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { css } from "@emotion/react";
|
||||
import { SUBTITLE_COLOR } from "@/theme/color";
|
||||
|
||||
export function Title({ children }: { children?: React.ReactNode }) {
|
||||
return (
|
||||
<p
|
||||
css={css({
|
||||
margin: 0,
|
||||
color: SUBTITLE_COLOR,
|
||||
fontSize: "1.125rem",
|
||||
fontWeight: "600",
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +1,20 @@
|
|||
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-family: "Pretendard Variable", Pretendard, -apple-system,
|
||||
BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
|
||||
"Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "Pretendard Variable", Pretendard, -apple-system,
|
||||
BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
|
||||
"Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { createRoot } from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./App.tsx";
|
||||
import App from "./ui/App.tsx";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(<App />);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
export const BORDER_COLOR = "#ededf290";
|
||||
export const SUBTITLE_COLOR = "#5b5d63";
|
||||
export const DESC_COLOR = "#8f8f96";
|
||||
export const ACTION_ICON_COLOR = "#5b5d63";
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { css } from "@emotion/react";
|
||||
import { Space } from "../space/Space";
|
||||
import { FullscreenModal } from "../components/FullscreenModal";
|
||||
import { Title } from "@/components/text/Title";
|
||||
import { Description } from "@/components/text/Description";
|
||||
import { Column } from "@/components/flex/Column";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div css={css({ height: "100%", width: "100%" })}>
|
||||
<FullscreenModal isOpen={true}>
|
||||
<Column gap="0.5rem">
|
||||
<Title>Generate 3d map</Title>
|
||||
<Description>
|
||||
Tools to create 3D maps based on maps and export them in 3D format
|
||||
</Description>
|
||||
</Column>
|
||||
</FullscreenModal>
|
||||
<Space />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
Loading…
Reference in New Issue