Merge pull request #5 from sprint5-part2-team9/이현승

이현승

src/components/Header.jsx

@@ -1,10 +1,21 @@
 // Header.jsx
+import styles from './Header.module.scss';
+import { Link } from 'react-router-dom';
+
 function Header() {
   return (
-    <header>
-      <h1>Header</h1>
+    <header className={styles.header}>
+      <nav className={styles.frame}>
+        <Link to="/">
+          <h1 className={`${styles.title}`}>Rolling</h1>
+        </Link>
+        <Link to="/post">
+          <button type="button">롤링 페이퍼 만들기</button>
+        </Link>
+      </nav>
     </header>
   );
 }
+//위 버튼은 컴포넌트 스타일을 적용할 것임
 
 export default Header;

src/components/Header.module.scss

@@ -0,0 +1,36 @@
+@import url(../global.scss);
+
+$headerH: 65px;
+
+.header {
+  display: flex;
+  padding: 12px 24px;
+  border-bottom: 1px solid #ededed;
+  justify-content: center;
+  height: $headerH;
+}
+
+.frame {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1248px;
+  width: 100%;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  color: #4a494f;
+  font-family: Poppins;
+  font-size: 19.971px;
+  line-height: normal;
+  &::before {
+    content: '';
+    background-image: url('../assets/Rolling_icon.png');
+    display: inline-block;
+    width: 27.818px;
+    height: 27.658px;
+    margin-right: 8px;
+  }
+}

src/index.js

@@ -1,8 +1,8 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />

src/reset.scss

@@ -3,6 +3,9 @@
    License: none (public domain)
 */
 
+* {
+  box-sizing: border-box;
+}
 html,
 body,
 div,
@@ -89,6 +92,7 @@ video {
   border: 0;
   font-size: 100%;
   vertical-align: baseline;
+  text-decoration: none;
 }
 /* HTML5 display-role reset for older browsers */
 article,
@@ -119,7 +123,7 @@ blockquote:before,
 blockquote:after,
 q:before,
 q:after {
-  content: "";
+  content: '';
   content: none;
 }
 table {