From ed7eb504ddee3591a7fbe1d6126897f1a6a19299 Mon Sep 17 00:00:00 2001
From: onlinekkabchi <onlinekkabchi@gmail.com>
Date: Sat, 25 Mar 2023 20:48:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[#76]=20flag=20list,=20note=20list=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80,=20type,=20defaultProps=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/front/package.json               |  5 +++--
 FE/front/src/App.css                |  4 ++--
 FE/front/src/App.tsx                |  8 +++++---
 FE/front/src/component/FlagList.tsx | 11 +++++++++++
 FE/front/src/component/Flags.tsx    | 15 +++++++++++++++
 FE/front/src/component/Header.tsx   | 20 ++++++++++++++++++++
 FE/front/src/component/Home.tsx     |  8 ++++----
 FE/front/src/component/NoteList.tsx | 11 +++++++++++
 FE/front/src/styles/style.css       | 20 ++++++++++++++++++++
 FE/front/src/styles/style.css.map   |  1 +
 FE/front/src/styles/style.scss      | 15 +++++++++++++++
 11 files changed, 107 insertions(+), 11 deletions(-)
 create mode 100644 FE/front/src/component/FlagList.tsx
 create mode 100644 FE/front/src/component/Flags.tsx
 create mode 100644 FE/front/src/component/Header.tsx
 create mode 100644 FE/front/src/component/NoteList.tsx
 create mode 100644 FE/front/src/styles/style.css
 create mode 100644 FE/front/src/styles/style.css.map
 create mode 100644 FE/front/src/styles/style.scss

diff --git a/FE/front/package.json b/FE/front/package.json
index 73d7b57..2b52bcc 100644
--- a/FE/front/package.json
+++ b/FE/front/package.json
@@ -4,9 +4,10 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0 --port 4000",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "style": "sass --watch ./src/styles/style.scss ./src/styles/style.css"
   },
   "dependencies": {
     "react": "^18.2.0",
diff --git a/FE/front/src/App.css b/FE/front/src/App.css
index b9d355d..0c87001 100644
--- a/FE/front/src/App.css
+++ b/FE/front/src/App.css
@@ -1,9 +1,9 @@
-#root {
+/* #root {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
-}
+} */
 
 .logo {
   height: 6em;
diff --git a/FE/front/src/App.tsx b/FE/front/src/App.tsx
index 2f184c6..a794fe8 100644
--- a/FE/front/src/App.tsx
+++ b/FE/front/src/App.tsx
@@ -1,12 +1,14 @@
 import "./App.css";
+import "./styles/style.css";
+import Header from "./component/Header";
 import Home from "./component/Home";
 
 function App() {
   return (
-    <div className="App">
-      <p>app</p>
+    <>
+      <Header />
       <Home />
-    </div>
+    </>
   );
 }
 
diff --git a/FE/front/src/component/FlagList.tsx b/FE/front/src/component/FlagList.tsx
new file mode 100644
index 0000000..ba25ed6
--- /dev/null
+++ b/FE/front/src/component/FlagList.tsx
@@ -0,0 +1,11 @@
+type FlagListProps = {
+  name: string;
+};
+
+FlagList.defaultProps = {
+  name: "",
+};
+
+function FlagList({ name }: FlagListProps) {
+  return <></>;
+}
diff --git a/FE/front/src/component/Flags.tsx b/FE/front/src/component/Flags.tsx
new file mode 100644
index 0000000..0cd2cb0
--- /dev/null
+++ b/FE/front/src/component/Flags.tsx
@@ -0,0 +1,15 @@
+type FlagProps = {
+  name: string;
+};
+
+Flag.defaultProps = {
+  name: "",
+};
+
+function Flag({ name }: FlagProps) {
+  return <li>{name}</li>;
+}
+
+export default function Flags() {
+  return <ul>flags</ul>;
+}
diff --git a/FE/front/src/component/Header.tsx b/FE/front/src/component/Header.tsx
new file mode 100644
index 0000000..1533f34
--- /dev/null
+++ b/FE/front/src/component/Header.tsx
@@ -0,0 +1,20 @@
+import Flags from "./Flags";
+
+type HeaderProps = {
+  name: string;
+};
+
+Header.defaultProps = {
+  name: "",
+};
+
+function Header({ name }: HeaderProps) {
+  return (
+    <header>
+      header
+      <Flags />
+    </header>
+  );
+}
+
+export default Header;
diff --git a/FE/front/src/component/Home.tsx b/FE/front/src/component/Home.tsx
index 12a77a6..403dcb8 100644
--- a/FE/front/src/component/Home.tsx
+++ b/FE/front/src/component/Home.tsx
@@ -2,12 +2,12 @@ type HomeProps = {
   name: string;
 };
 
-function Home({ name }: HomeProps) {
-  return <div>Hello, {name}</div>;
-}
-
 Home.defaultProps = {
   name: "",
 };
 
+function Home({ name }: HomeProps) {
+  return <main>Hello, {name}</main>;
+}
+
 export default Home;
diff --git a/FE/front/src/component/NoteList.tsx b/FE/front/src/component/NoteList.tsx
new file mode 100644
index 0000000..73b0ee3
--- /dev/null
+++ b/FE/front/src/component/NoteList.tsx
@@ -0,0 +1,11 @@
+type NoteListProps = {
+  name: string;
+};
+
+NoteList.defaultProps = {
+  name: "",
+};
+
+function NoteList({ name }: NoteListProps) {
+  return <></>;
+}
diff --git a/FE/front/src/styles/style.css b/FE/front/src/styles/style.css
new file mode 100644
index 0000000..067127c
--- /dev/null
+++ b/FE/front/src/styles/style.css
@@ -0,0 +1,20 @@
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: #fffdee;
+}
+
+header {
+  background-color: blanchedalmond;
+}
+
+main {
+  background-color: brown;
+}
+
+/*# sourceMappingURL=style.css.map */
diff --git a/FE/front/src/styles/style.css.map b/FE/front/src/styles/style.css.map
new file mode 100644
index 0000000..899c3b2
--- /dev/null
+++ b/FE/front/src/styles/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE","file":"style.css"}
\ No newline at end of file
diff --git a/FE/front/src/styles/style.scss b/FE/front/src/styles/style.scss
new file mode 100644
index 0000000..31b0cac
--- /dev/null
+++ b/FE/front/src/styles/style.scss
@@ -0,0 +1,15 @@
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+body {
+  background-color: #fffdee;
+}
+header {
+  background-color: blanchedalmond;
+}
+main {
+  background-color: brown;
+}