feat: [#76] flag list, note list 추가, type, defaultProps 설정

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",

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;

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>
+    </>
   );
 }
 

FE/front/src/component/FlagList.tsx

@@ -0,0 +1,11 @@
+type FlagListProps = {
+  name: string;
+};
+
+FlagList.defaultProps = {
+  name: "",
+};
+
+function FlagList({ name }: FlagListProps) {
+  return <></>;
+}

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

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;

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;

FE/front/src/component/NoteList.tsx

@@ -0,0 +1,11 @@
+type NoteListProps = {
+  name: string;
+};
+
+NoteList.defaultProps = {
+  name: "",
+};
+
+function NoteList({ name }: NoteListProps) {
+  return <></>;
+}

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