Merge pull request #4 from Fastcampus-Youcandoit/feature/#1

design: add Header layout

.eslintrc.json

@@ -36,6 +36,13 @@
     "no-unused-vars": "off",
     "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
     "import/extensions": "off",
-    "prettier/prettier": ["error", { "endOfLine": "auto" }]
+    "prettier/prettier": ["error", { "endOfLine": "auto" }],
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ]
   }
 }

.prettierrc

@@ -8,5 +8,5 @@
   "arrowParens": "avoid",
   "orderedImports": true,
   "bracketSpacing": true,
-  "jsxBracketSameLine": false
+  "jsxBracketSameLine": true
 }

package.json

@@ -8,11 +8,11 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.50",
-    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "firebase": "^10.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "styled-components": "^6.0.7",
@@ -45,6 +45,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react": "^18.2.21",
     "eslint": "^8.49.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.0.0",

src/App.tsx

@@ -1,13 +1,18 @@
-import { BrowserRouter, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Header from "./components/common/Header";
+import Home from "./pages/Home";
 import GlobalStyle from "./styles/globalStyle";
 
-function App() {
+const App = () => {
   return (
     <BrowserRouter>
       <GlobalStyle />
-      <Routes />
+      <Header />
+      <Routes>
+        <Route path="/" element={<Home />} />
+      </Routes>
     </BrowserRouter>
   );
-}
+};
 
 export default App;

src/components/common/Header.tsx

@@ -0,0 +1,95 @@
+import styled from "styled-components";
+import gelleryBlack from "../../assets/icons/header_icon/header_gellery_black_icon.png";
+import github from "../../assets/icons/header_icon/header_github_black_icon.png";
+import wikiBlack from "../../assets/icons/header_icon/header_wiki_black_icon.png";
+import Logo from "./Logo";
+import cummute from "../../assets/icons/header_icon/header_commute_white-icon.png";
+
+const HeaderBox = styled.header`
+  width: 100vw;
+  height: 5rem;
+  padding: 0 2rem;
+`;
+
+const HeaderNav = styled.nav`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const HeaderItems = styled.nav`
+  display: flex;
+  height: 50%;
+  gap: 1.5rem;
+`;
+
+const HeaderItem = styled.div`
+  font-size: 1rem;
+  font-weight: 500;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 0.2rem;
+  border-radius: 10px;
+  .github {
+    width: 2.2rem;
+    height: 80%;
+  }
+`;
+
+const IconImg = styled.img`
+  width: 1rem;
+`;
+
+const Span = styled.span`
+  padding-bottom: 0.2rem;
+`;
+
+const CommuteButton = styled.button`
+  background-color: #000000;
+  height: 100%;
+  border-radius: 10px;
+  font-size: 1rem;
+  padding: 0 2rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .commute_span {
+    color: #ffff;
+    margin-left: 0.5rem;
+  }
+`;
+
+const Header = () => {
+  return (
+    <HeaderBox>
+      <HeaderNav>
+        <Logo />
+        <HeaderItems>
+          <HeaderItem>
+            <IconImg src={wikiBlack} alt="wiki icon" />
+            <Span>wiki</Span>
+          </HeaderItem>
+          <HeaderItem>
+            <IconImg src={gelleryBlack} alt="gellery icon" />
+            <Span>gellery</Span>
+          </HeaderItem>
+          <HeaderItem>
+            <IconImg src={github} alt="github icon" className="github" />
+          </HeaderItem>
+          <HeaderItem>
+            <CommuteButton type="button">
+              <IconImg src={cummute} />
+              <Span className="commute_span">commute</Span>
+            </CommuteButton>
+          </HeaderItem>
+        </HeaderItems>
+      </HeaderNav>
+    </HeaderBox>
+  );
+};
+
+export default Header;

src/components/common/Logo.tsx

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import logo from "../../assets/icons/header_icon/logo.png";
+
+const LogoBox = styled.a`
+  width: 150px;
+  height: 50%;
+`;
+
+const LogoImg = styled.img`
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+`;
+
+const Logo = () => {
+  return (
+    <LogoBox>
+      <LogoImg src={logo} alt="youcandoit logo" />
+    </LogoBox>
+  );
+};
+
+export default Logo;

src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.jpeg";
+declare module "*.gif";

src/pages/Home.tsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+const Home = () => {
+  return <div>home</div>;
+};
+
+export default Home;