diff --git a/.eslintrc.json b/.eslintrc.json
index 2ad69917..c47385dc 100644
--- a/.eslintrc.json
+++ b/.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"
+ }
+ ]
}
}
diff --git a/.prettierrc b/.prettierrc
index 17982b21..c6df960b 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -8,5 +8,5 @@
"arrowParens": "avoid",
"orderedImports": true,
"bracketSpacing": true,
- "jsxBracketSameLine": false
+ "jsxBracketSameLine": true
}
diff --git a/package-lock.json b/package-lock.json
index 0743b960..25834f52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,11 +13,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",
@@ -26,6 +26,7 @@
"web-vitals": "^2.1.4"
},
"devDependencies": {
+ "@types/react": "^18.2.21",
"eslint": "^8.49.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^9.0.0",
@@ -6579,6 +6580,11 @@
"resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
"integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ=="
},
+ "node_modules/classnames": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+ "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+ },
"node_modules/clean-css": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -15705,6 +15711,17 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-easy-swipe": {
+ "version": "0.0.21",
+ "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz",
+ "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==",
+ "dependencies": {
+ "prop-types": "^15.5.8"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/react-error-overlay": {
"version": "6.0.11",
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -15723,6 +15740,16 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-responsive-carousel": {
+ "version": "3.2.23",
+ "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz",
+ "integrity": "sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==",
+ "dependencies": {
+ "classnames": "^2.2.5",
+ "prop-types": "^15.5.8",
+ "react-easy-swipe": "^0.0.21"
+ }
+ },
"node_modules/react-router": {
"version": "6.15.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
@@ -23668,6 +23695,11 @@
"resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
"integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ=="
},
+ "classnames": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+ "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+ },
"clean-css": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -30068,6 +30100,14 @@
"scheduler": "^0.23.0"
}
},
+ "react-easy-swipe": {
+ "version": "0.0.21",
+ "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz",
+ "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==",
+ "requires": {
+ "prop-types": "^15.5.8"
+ }
+ },
"react-error-overlay": {
"version": "6.0.11",
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -30083,6 +30123,16 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
+ "react-responsive-carousel": {
+ "version": "3.2.23",
+ "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz",
+ "integrity": "sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==",
+ "requires": {
+ "classnames": "^2.2.5",
+ "prop-types": "^15.5.8",
+ "react-easy-swipe": "^0.0.21"
+ }
+ },
"react-router": {
"version": "6.15.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
diff --git a/package.json b/package.json
index d6c9aaf3..0ac31c27 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.tsx b/src/App.tsx
index f33f2e09..22cb55a2 100644
--- a/src/App.tsx
+++ b/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 (
-
+
+
+ } />
+
);
-}
+};
export default App;
diff --git a/src/assets/icons/header_icon/header_github_black_icon.png b/src/assets/icons/header_icon/header_github_black_icon.png
new file mode 100644
index 00000000..0c2ee503
Binary files /dev/null and b/src/assets/icons/header_icon/header_github_black_icon.png differ
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
new file mode 100644
index 00000000..0e82e086
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ wiki
+
+
+
+ gellery
+
+
+
+
+
+
+
+ commute
+
+
+
+
+
+ );
+};
+
+export default Header;
diff --git a/src/components/common/Logo.tsx b/src/components/common/Logo.tsx
new file mode 100644
index 00000000..6c478baa
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+export default Logo;
diff --git a/src/custom.d.ts b/src/custom.d.ts
new file mode 100644
index 00000000..86763ec0
--- /dev/null
+++ b/src/custom.d.ts
@@ -0,0 +1,4 @@
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.jpeg";
+declare module "*.gif";
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 00000000..76fac3ea
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+const Home = () => {
+ return home
;
+};
+
+export default Home;