diff --git a/dashboard/src/assets/DesignOption.js b/dashboard/src/assets/DesignOption.js new file mode 100644 index 00000000..50a92066 --- /dev/null +++ b/dashboard/src/assets/DesignOption.js @@ -0,0 +1,42 @@ +const mainColor = { + blue: "#1153FC", + orange: "#FF7E42", + pink: "#FD5988", + purple: "#8443F6", + green: "#08C792", +}; + +const gradientColor = { + blue: "#5F86FE", + orange: "#FEBF7D", + pink: "#F8A899", + purple: "#7793FE", + green: "#2AFEB7", +}; + +const bgColor = { + light: "#F3F3F9", +}; + +const groupColor = { + dark: "#3B465E", + light: "#FFFFFF", +}; + +const fontColor = { + dark: "#F3F2F2", + light: "#737373", +}; + +const fontSize = { + xs: "12px", + sm: "14px", + md: "16px", + lg: "20px", + xl: "32px", + xxl: "48px", +}; + +// const fontWeight = {}; + +export { mainColor, gradientColor, bgColor, groupColor, fontColor, fontSize }; diff --git a/dashboard/src/assets/fonts/Pretendard-Black.woff b/dashboard/src/assets/fonts/Pretendard-Black.woff new file mode 100644 index 00000000..20b0641b Binary files /dev/null and b/dashboard/src/assets/fonts/Pretendard-Black.woff differ diff --git a/dashboard/src/assets/fonts/Pretendard-Bold.woff b/dashboard/src/assets/fonts/Pretendard-Bold.woff new file mode 100644 index 00000000..bfc573c4 Binary files /dev/null and b/dashboard/src/assets/fonts/Pretendard-Bold.woff differ diff --git a/dashboard/src/assets/fonts/Pretendard-ExtraBold.woff b/dashboard/src/assets/fonts/Pretendard-ExtraBold.woff new file mode 100644 index 00000000..14a61abd Binary files /dev/null and b/dashboard/src/assets/fonts/Pretendard-ExtraBold.woff differ diff --git a/dashboard/src/assets/fonts/Pretendard-ExtraLight.woff b/dashboard/src/assets/fonts/Pretendard-ExtraLight.woff new file mode 100644 index 00000000..a7af8a24 Binary files /dev/null and b/dashboard/src/assets/fonts/Pretendard-ExtraLight.woff differ diff --git a/dashboard/src/assets/fonts/Pretendard-Light.woff b/dashboard/src/assets/fonts/Pretendard-Light.woff new file mode 100644 index 00000000..6e00ad2d Binary files /dev/null and b/dashboard/src/assets/fonts/Pretendard-Light.woff differ diff --git a/dashboard/src/assets/fonts/Pretendard-Medium.woff b/dashboard/src/assets/fonts/Pretendard-Medium.woff new file mode 100644 index 00000000..71b13eb5 Binary files /dev/null and b/dashboard/src/assets/fonts/Pretendard-Medium.woff differ diff --git a/dashboard/src/assets/fonts/Pretendard-Regular.woff b/dashboard/src/assets/fonts/Pretendard-Regular.woff new file mode 100644 index 00000000..741be57b Binary files /dev/null and b/dashboard/src/assets/fonts/Pretendard-Regular.woff differ diff --git a/dashboard/src/assets/fonts/Pretendard-SemiBold.woff b/dashboard/src/assets/fonts/Pretendard-SemiBold.woff new file mode 100644 index 00000000..7bf28607 Binary files /dev/null and b/dashboard/src/assets/fonts/Pretendard-SemiBold.woff differ diff --git a/dashboard/src/assets/fonts/Pretendard-Thin.woff b/dashboard/src/assets/fonts/Pretendard-Thin.woff new file mode 100644 index 00000000..665fe440 Binary files /dev/null and b/dashboard/src/assets/fonts/Pretendard-Thin.woff differ diff --git a/dashboard/src/components/App.css b/dashboard/src/components/App.css new file mode 100644 index 00000000..c7224fe8 --- /dev/null +++ b/dashboard/src/components/App.css @@ -0,0 +1,33 @@ +@font-face { + font-family: "Pretendard-Light"; + src: url("../assets/fonts/Pretendard-Light.woff"); +} + +@font-face { + font-family: "Pretendard-Regular"; + src: url("../assets/fonts/Pretendard-Regular.woff"); +} + +@font-face { + font-family: "Pretendard-Medium"; + src: url("../assets/fonts/Pretendard-Medium.woff"); +} + +@font-face { + font-family: "Pretendard-SemiBold"; + src: url("../assets/fonts/Pretendard-SemiBold.woff"); +} + +@font-face { + font-family: "Pretendard-Bold"; + src: url("../assets/fonts/Pretendard-Bold.woff"); +} + +@font-face { + font-family: "Pretendard-ExtraBold"; + src: url("../assets/fonts/Pretendard-ExtraBold.woff"); +} + +body { + font-family: "Pretendard-Regular"; +} \ No newline at end of file diff --git a/dashboard/src/components/Button.js b/dashboard/src/components/Button.js new file mode 100644 index 00000000..581e92c9 --- /dev/null +++ b/dashboard/src/components/Button.js @@ -0,0 +1,33 @@ +import React from "react"; +import styled from "styled-components"; +import { mainColor, gradientColor, fontSize } from "../assets/DesignOption"; + +// FIXME: button shape: square, rounded-square, pill, circle +// border-radius - sq: 0px, rdsq: 5px, pill: height/2, circle: 100% +const height = 48; // FIXME: 추후 그리드 사이즈에 맞게 바뀔것, width도 마찬가지 + +const BoardButton = styled.button` + background: linear-gradient( + 91.29deg, + ${mainColor.blue} 0%, + ${gradientColor.blue} 100% + ); + width: 200px; + height: ${height}px; + font-size: ${fontSize.md}; + font-family: "Pretendard-Medium"; + color: white; + padding: 0.25em 1em; + border: 0px; + border-radius: ${height / 2}px; +`; + +const Button = () => { + return ( + <> + 이것은 Button노드 + + ); +}; + +export default Button; diff --git a/dashboard/src/components/Text.js b/dashboard/src/components/Text.js new file mode 100644 index 00000000..a2240f9a --- /dev/null +++ b/dashboard/src/components/Text.js @@ -0,0 +1,54 @@ +import React from "react"; +import styled from "styled-components"; +import { fontSize, fontColor } from "../assets/DesignOption"; + +// FIXME: mode에 따른 색상변경 있음 +// FIXME: Layout에 따른 배치 변경 있음 +const flexOption = [ + ["row", "flex-start"], + ["row", "flex-end"], + ["row", "space-between"], + ["row", "space-evenly"], + ["column", "center"], +]; + +const height = 48; // FIXME: 추후 그리드 사이즈에 맞게 바뀔것, width도 마찬가지 + +const BoardText = styled.div` + display: flex; + flex-direction: ${flexOption[3][0]}; + justify-content: ${flexOption[3][1]}; + align-items: center; + width: 200px; + height: ${height}px; + font-size: ${fontSize.md}; + color: ${fontColor.light}; + padding: 0; + margin: 0; +`; + +const BoardTextLabel = styled.div` + margin: 0px 10px; +`; + +const BoardTextValue = styled.div` + margin: 0px 10px; + font-family: "Pretendard-Bold"; +`; + +const Text = () => { + return ( + <> + + + label + + + value + + + + ); +}; + +export default Text; diff --git a/dashboard/src/components/app.js b/dashboard/src/components/app.js index 8a153d5d..78ccfd8e 100644 --- a/dashboard/src/components/app.js +++ b/dashboard/src/components/app.js @@ -1,6 +1,8 @@ import React, { useEffect } from "react"; - +import Button from "./Button"; +import Text from "./Text"; import { initlaizeSocket, disconnectSocket } from "../utils/socket"; +import "./App.css"; const App = () => { useEffect(() => { @@ -14,6 +16,8 @@ const App = () => { return ( <>
Hello Dashboard
+