Add design option, button and text component (#3)

* [add] desgin option

* [add] button template and style

* [add] text template and style

* [add] styled components

* [modify] apply font-family

* [modify] update styled-components code

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 };

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";
+}

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 (
+    <>
+      <BoardButton>이것은 Button노드</BoardButton>
+    </>
+  );
+};
+
+export default Button;

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 (
+    <>
+      <BoardText>
+        <BoardTextLabel>
+          <span>label</span>
+        </BoardTextLabel>
+        <BoardTextValue>
+          <span>value</span>
+        </BoardTextValue>
+      </BoardText>
+    </>
+  );
+};
+
+export default Text;

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 (
     <>
       <div>Hello Dashboard</div>
+      <Button />
+      <Text />
     </>
   );
 };