From e3039d69062625d84bb620184d8b2f03e5e2ac9d Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Fri, 28 Jun 2024 02:44:53 +0900 Subject: [PATCH] =?UTF-8?q?[#5]=20feat:=20=EC=83=81=EB=8B=A8=20navbar=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 126 ++++++++++++++++++++++++++++++++++-- package.json | 6 +- src/components/Navbar.tsx | 37 +++++++++++ src/image.d.ts | 4 ++ src/image/bangpro_logo.png | Bin 0 -> 4488 bytes src/index.css | 17 ++--- src/index.tsx | 2 + src/pages/MainPage.tsx | 1 + src/styles/NavbarStyled.tsx | 66 +++++++++++++++++++ 9 files changed, 243 insertions(+), 16 deletions(-) create mode 100644 src/components/Navbar.tsx create mode 100644 src/image.d.ts create mode 100644 src/image/bangpro_logo.png create mode 100644 src/styles/NavbarStyled.tsx diff --git a/package-lock.json b/package-lock.json index 7b642d6..526bcaf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,14 +17,16 @@ "@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", "three": "^0.165.0", - "typescript": "^5.5.2", "web-vitals": "^2.1.4" }, "devDependencies": { - "@types/styled-components": "^5.1.34" + "@types/styled-components": "^5.1.34", + "typescript": "^4.9.5" } }, "node_modules/@adobe/css-tools": { @@ -2309,6 +2311,27 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "license": "MIT" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "license": "MIT" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -4551,6 +4574,12 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", + "license": "MIT" + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -6025,6 +6054,15 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6452,6 +6490,15 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -6593,6 +6640,17 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "license": "MIT", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -15065,6 +15123,15 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", + "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -15977,6 +16044,12 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -16527,6 +16600,40 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.11.tgz", + "integrity": "sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==", + "license": "MIT", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "license": "0BSD" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -16542,6 +16649,12 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", + "license": "MIT" + }, "node_modules/sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", @@ -17226,15 +17339,16 @@ } }, "node_modules/typescript": { - "version": "5.5.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz", - "integrity": "sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=14.17" + "node": ">=4.2.0" } }, "node_modules/unbox-primitive": { diff --git a/package.json b/package.json index 34f9d0c..db86eb5 100644 --- a/package.json +++ b/package.json @@ -12,10 +12,11 @@ "@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", "three": "^0.165.0", - "typescript": "^5.5.2", "web-vitals": "^2.1.4" }, "scripts": { @@ -43,6 +44,7 @@ ] }, "devDependencies": { - "@types/styled-components": "^5.1.34" + "@types/styled-components": "^5.1.34", + "typescript": "^4.9.5" } } diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..aaa2c8c --- /dev/null +++ b/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 ( + +
+ logo +
+
+
+
+ +
+

테마 추천

+
+
+
+ +
+

테마 정보

+
+
+
+ +
+

마이페이지

+
+
+ + ); +}; +export default Navbar; diff --git a/src/image.d.ts b/src/image.d.ts new file mode 100644 index 0000000..09b8733 --- /dev/null +++ b/src/image.d.ts @@ -0,0 +1,4 @@ +declare module "*.png" { + const value: string; + export default value; +} diff --git a/src/image/bangpro_logo.png b/src/image/bangpro_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..ee42fba8b62e202886f8cbdc08bc1021c0458a80 GIT binary patch literal 4488 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 + ); diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 51ce5b2..d01513f 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -1,4 +1,5 @@ import React from "react"; +import Navbar from "../components/Navbar"; const MainPage = () => { return ( diff --git a/src/styles/NavbarStyled.tsx b/src/styles/NavbarStyled.tsx new file mode 100644 index 0000000..9de6225 --- /dev/null +++ b/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; + } +`;