Merge pull request #119 from nanjeong-owl/dev2

[team-29][아울 & 난정] 1주차 금요일 PR

.eslintrc.json

@@ -3,11 +3,7 @@
         "browser": true,
         "es2021": true
     },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended"
-    ],
+    "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier"],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
         "ecmaFeatures": {
@@ -18,9 +14,9 @@
     },
     "plugins": ["react", "@typescript-eslint"],
     "rules": {
-        "indent": ["error", 4],
         "linebreak-style": 0,
         "quotes": ["error", "double"],
-        "semi": ["error", "always"]
+        "semi": ["error", "always"],
+        "react/prop-types": ["off"]
     }
 }

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "styled-reset": "^4.4.1",
     "web-vitals": "^2.1.4"
@@ -40,7 +41,9 @@
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "eslint": "^8.16.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.30.0",
+    "prettier": "^2.6.2",
     "styled-components": "^5.3.5"
   }
 }

src/App.jsx

@@ -1,14 +1,19 @@
 import React from "react";
 import {ThemeProvider} from "styled-components";
 import theme from "./theme";
-import Header from "./components/header/Header";
-import SearchBar from "./components/header/SearchBar";
+import {BrowserRouter, Routes, Route} from "react-router-dom";
+import Home from "./pages/home";
+import Search from "./pages/Search";
 
 const App = () => {
     return (
         <ThemeProvider theme={theme}>
-            <Header />
-            <SearchBar />
+            <BrowserRouter>
+                <Routes>
+                    <Route path="/" element={<Home />}></Route>
+                    <Route path="/search" element={<Search />}></Route>
+                </Routes>
+            </BrowserRouter>
         </ThemeProvider>
     );
 };

src/Modal.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+const Modal = styled.div`
+    position: absolute;
+    background-color: ${({theme}) => theme.color.white};
+    border-radius: 40px;
+    box-shadow: 0px 0px 4px rgba(51, 51, 51, 0.05);
+`;
+
+export default Modal;

src/components/Boundary.jsx

@@ -1,10 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-// eslint-disable-next-line react/prop-types
 const Boundary = ({condition}) => {
-    // {direction, length, weight, color}
-    // eslint-disable-next-line react/prop-types
     return condition.direction === "vertical" ? <VerticalLine {...condition} /> : <HorizontalLine {...condition} />;
 };
 

src/components/header/Gnb.jsx

@@ -20,6 +20,7 @@ const GnbItem = styled.span`
     font-size: 1rem;
     cursor: pointer;
     line-height: 23px;
+    white-space: nowrap;
     &:hover {
         font-weight: 700;
         text-decoration-line: underline;

src/components/header/Header.jsx

@@ -16,7 +16,7 @@ const Header = () => {
 };
 
 const Background = styled.div`
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: ${({theme}) => theme.transparentColor.gray1};
     height: 640px;
     user-select: none;
 `;