diff --git a/index.html b/index.html index e4b78ea..455df7c 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,10 @@ - + - Vite + React + TS + map3d
diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 38bac2b..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { css } from "@emotion/react"; -import { Space } from "./space/Space"; - -function App() { - return ( -
- -
- ); -} - -export default App; diff --git a/src/components/FullscreenModal.tsx b/src/components/FullscreenModal.tsx new file mode 100644 index 0000000..f1bf46d --- /dev/null +++ b/src/components/FullscreenModal.tsx @@ -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 ( +
+
+ {children} +
+
+ ); +} diff --git a/src/components/flex/Column.tsx b/src/components/flex/Column.tsx new file mode 100644 index 0000000..aedfd47 --- /dev/null +++ b/src/components/flex/Column.tsx @@ -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 ( +
+ {children} +
+ ); +} diff --git a/src/components/flex/Row.tsx b/src/components/flex/Row.tsx new file mode 100644 index 0000000..57b9643 --- /dev/null +++ b/src/components/flex/Row.tsx @@ -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 ( +
+ {children} +
+ ); +} diff --git a/src/components/text/Description.tsx b/src/components/text/Description.tsx new file mode 100644 index 0000000..e921a3f --- /dev/null +++ b/src/components/text/Description.tsx @@ -0,0 +1,17 @@ +import { css } from "@emotion/react"; +import { DESC_COLOR } from "@/theme/color"; + +export function Description({ children }: { children?: React.ReactNode }) { + return ( +

+ {children} +

+ ); +} diff --git a/src/components/text/Title.tsx b/src/components/text/Title.tsx new file mode 100644 index 0000000..6963942 --- /dev/null +++ b/src/components/text/Title.tsx @@ -0,0 +1,17 @@ +import { css } from "@emotion/react"; +import { SUBTITLE_COLOR } from "@/theme/color"; + +export function Title({ children }: { children?: React.ReactNode }) { + return ( +

+ {children} +

+ ); +} diff --git a/src/index.css b/src/index.css index 0a758bf..460faa6 100644 --- a/src/index.css +++ b/src/index.css @@ -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; } diff --git a/src/main.tsx b/src/main.tsx index c983b84..bb533e4 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -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(); diff --git a/src/theme/color.ts b/src/theme/color.ts new file mode 100644 index 0000000..e3ee11a --- /dev/null +++ b/src/theme/color.ts @@ -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"; diff --git a/src/ui/App.tsx b/src/ui/App.tsx new file mode 100644 index 0000000..86d436a --- /dev/null +++ b/src/ui/App.tsx @@ -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 ( +
+ + + Generate 3d map + + Tools to create 3D maps based on maps and export them in 3D format + + + + +
+ ); +} + +export default App;