[#3] bug: git 충돌 해결

package.json

@@ -12,6 +12,7 @@
     "@types/react-router-dom": "^5.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.24.0",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.11",
@@ -45,6 +46,7 @@
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.34",
-    "@types/three": "^0.165.0"
+    "@types/three": "^0.165.0",
+    "typescript": "^4.9.5"
   }
 }

src/components/Navbar.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Container } from "../styles/NavbarStyled";
+import logo from "../image/bangpro_logo.png";
+import { BsChatSquareHeartFill } from "react-icons/bs";
+import { BsCollectionFill } from "react-icons/bs";
+import { BsPersonFill } from "react-icons/bs";
+
+const Navbar = () => {
+    return (
+        <Container>
+            <div className="logoBox">
+                <img src={logo} alt="logo" className="logo"></img>
+            </div>
+            <div className="navBox">
+                <div className="nav1">
+                    <div>
+                        <BsChatSquareHeartFill />
+                    </div>
+                    <p>테마 추천</p>
+                </div>
+                <div className="nav2">
+                    <div>
+                        <BsCollectionFill />
+                    </div>
+                    <p>테마 정보</p>
+                </div>
+                <div className="nav3">
+                    <div>
+                        <BsPersonFill />
+                    </div>
+                    <p>마이페이지</p>
+                </div>
+            </div>
+        </Container>
+    );
+};
+export default Navbar;

src/image.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+    const value: string;
+    export default value;
+}

src/index.css

@@ -1,13 +1,14 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    margin-top: 10vh;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+        monospace;
 }

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
+import Navbar from "./components/Navbar";
 
 const root = ReactDOM.createRoot(
     document.getElementById("root") as HTMLElement
@@ -11,6 +12,7 @@ const root = ReactDOM.createRoot(
 root.render(
     // strictMode에서는 두번 렌더링 될 수 있으나, 프로덕션빌드 모드에서는 그렇지 않을것
     <React.StrictMode>
+        <Navbar />
         <App />
     </React.StrictMode>
 );

src/pages/MainPage.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Navbar from "../components/Navbar";
 
 const MainPage = () => {
     return (

src/styles/NavbarStyled.tsx

@@ -0,0 +1,66 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+export const Container = styled.div`
+    width: 80vw;
+    height: 10vh;
+    padding: 0 10vw;
+
+    position: fixed;
+    top: 0;
+
+    display: flex;
+    justify-content: space-between;
+
+    background-color: #080101;
+    box-shadow: 0px 4px 50px rgba(255, 255, 255, 0.2);
+    color: #3b3b3b;
+
+    .logoBox {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .logoBox > img {
+        width: 6vw;
+    }
+
+    .navBox {
+        width: 30vw;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .navBox > div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .navBox > div > div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-size: 1.4rem;
+        margin-right: 0.7rem;
+    }
+
+    .navBox > div:hover {
+        cursor: pointer;
+        color: white;
+    }
+`;
+
+export const StyledLink = styled(Link)`
+    text-decoration: none;
+    &:focus,
+    &:hover,
+    &:visited,
+    &:link,
+    &:active {
+        text-decoration: none;
+    }
+`;