From a23e397538c2c9a97a26e760407332beaa30c27c Mon Sep 17 00:00:00 2001 From: JSH99 Date: Tue, 7 Nov 2023 19:42:34 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Design:=20Reset=20CSS=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.css | 43 +++++++++++++++++++++++++++++++++++++++++++ src/index.tsx | 1 + 2 files changed, 44 insertions(+) create mode 100644 src/index.css diff --git a/src/index.css b/src/index.css new file mode 100644 index 00000000..27acba5c --- /dev/null +++ b/src/index.css @@ -0,0 +1,43 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index d23f06b3..bfdb0ac6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; +import './index.css'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement, From 7076d998a8a7a049caadff1ca29e51fc3968596c Mon Sep 17 00:00:00 2001 From: JSH99 Date: Tue, 7 Nov 2023 19:57:42 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Docs:=20PR=20=ED=85=9C=ED=94=8C=EB=A6=BF=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/PULL_REQUEST_TEMPLATE.md | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index aab4cdc5..f8c18fab 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,13 +1,8 @@ -## ๐Ÿ“Œ ๊ด€๋ จ ์ด์Šˆ - +## ๐Ÿ“Œ ์ œ๋ชฉ + -## โœจ ๊ณผ์ œ ๋‚ด์šฉ - +## โœจ ์ž‘์—… ๋‚ด์šฉ + -## ๐Ÿ“ธ ์Šคํฌ๋ฆฐ์ƒท(์„ ํƒ) - - -## ๐Ÿ“š ๋ ˆํผ๋Ÿฐ์Šค (๋˜๋Š” ์ƒˆ๋กœ ์•Œ๊ฒŒ ๋œ ๋‚ด์šฉ) ํ˜น์€ ๊ถ๊ธˆํ•œ ์‚ฌํ•ญ๋“ค - \ No newline at end of file +## โœ… ํ™•์ธ ์‚ฌํ•ญ + \ No newline at end of file From 7e18a0e3d2343755149530f3b37065ad9f6bd941 Mon Sep 17 00:00:00 2001 From: JSH99 Date: Wed, 8 Nov 2023 19:12:49 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Design:=20=EA=B3=B5=ED=86=B5=20=ED=85=8C?= =?UTF-8?q?=EB=A7=88=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 9 +++++---- src/styles/theme.d.ts | 28 ++++++++++++++++++++++++++++ src/styles/theme.ts | 27 +++++++++++++++++++++++++++ 3 files changed, 60 insertions(+), 4 deletions(-) create mode 100644 src/styles/theme.d.ts create mode 100644 src/styles/theme.ts diff --git a/src/App.tsx b/src/App.tsx index 5eebfb34..535063ee 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,12 @@ import './App.css'; +import { ThemeProvider } from 'styled-components'; +import theme from '../src/styles/theme'; function App() { return ( -
- - -
+ + hello + ); } diff --git a/src/styles/theme.d.ts b/src/styles/theme.d.ts new file mode 100644 index 00000000..24cde2f4 --- /dev/null +++ b/src/styles/theme.d.ts @@ -0,0 +1,28 @@ +import 'styled-components'; + +declare module "styled-components" { + export interface DefaultTheme { + colors: { + primary: string; + second: string; + black: string; + white: string; + darkGray: string; + lightGray: string; + successMessage: string; + }; + + font: { + name: string; + title: string; + smallSize: string; + mediumSize: string; + largeSize: string; + }; + + response: { + tablet: string; + mobile: string; + }; + } +} \ No newline at end of file diff --git a/src/styles/theme.ts b/src/styles/theme.ts new file mode 100644 index 00000000..4ef6b322 --- /dev/null +++ b/src/styles/theme.ts @@ -0,0 +1,27 @@ +import { DefaultTheme } from "styled-components"; + +const theme: DefaultTheme = { + color: { + primary: "#D94E28", + secondary: "#F9744C", + black: "#111111", + white: "#FFFFFF", + borderGray: "#949494", + darkGray: "#D9D9D9", + lightGray: "#EFEFEF", + successMessage: "#132f8b", + }, + font: { + name: "Press Start 2P", + title: "56px", + smallSize: "14px", + mediumSize: "16px", + largeSize: "20px", + }, + response: { + tablet: "@media screen and (max-width: 1024px)", + mobile: "@media screen and (max-width: 480px)" + }, +}; + +export default theme; \ No newline at end of file From 22fe1b1db57ef2636a1b1fe9df4aa39730d8bcf1 Mon Sep 17 00:00:00 2001 From: JSH99 Date: Wed, 8 Nov 2023 19:15:04 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Feat:=20=EB=84=A4=EB=B9=84=EA=B2=8C?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EB=B0=94=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 87 +++++++ package.json | 1 + src/App.tsx | 18 +- src/assets/activedChattingIcon.svg | 3 + src/assets/activedCommunityIcon.svg | 3 + src/assets/activedHomeIcon.svg | 3 + src/assets/activedMypageIcon.svg | 3 + src/assets/activedSettingIcon.svg | 3 + src/assets/chattingIcon.svg | 3 + src/assets/communityIcon.svg | 3 + src/assets/homeIcon.svg | 3 + src/assets/mypageIcon.svg | 3 + src/assets/settingIcon.svg | 3 + src/assets/sweetyIcon.svg | 44 ++++ src/assets/sweetyLogo.svg | 9 + src/components/NavigationBar.tsx | 356 ++++++++++++++++++++++++++++ src/pages/CommunityPage.tsx | 6 + src/pages/HomePage.tsx | 6 + src/pages/MyPage.tsx | 7 + src/pages/chatting/index.tsx | 7 + 20 files changed, 570 insertions(+), 1 deletion(-) create mode 100644 src/assets/activedChattingIcon.svg create mode 100644 src/assets/activedCommunityIcon.svg create mode 100644 src/assets/activedHomeIcon.svg create mode 100644 src/assets/activedMypageIcon.svg create mode 100644 src/assets/activedSettingIcon.svg create mode 100644 src/assets/chattingIcon.svg create mode 100644 src/assets/communityIcon.svg create mode 100644 src/assets/homeIcon.svg create mode 100644 src/assets/mypageIcon.svg create mode 100644 src/assets/settingIcon.svg create mode 100644 src/assets/sweetyIcon.svg create mode 100644 src/assets/sweetyLogo.svg create mode 100644 src/components/NavigationBar.tsx create mode 100644 src/pages/CommunityPage.tsx create mode 100644 src/pages/HomePage.tsx create mode 100644 src/pages/MyPage.tsx create mode 100644 src/pages/chatting/index.tsx diff --git a/package-lock.json b/package-lock.json index 4d3affbe..b4b560e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.18.0", "react-scripts": "5.0.1", + "styled-components": "^6.1.0", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, @@ -2417,6 +2418,24 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "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==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, "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", @@ -3688,6 +3707,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.2.tgz", "integrity": "sha512-g7CK9nHdwjK2n0ymT2CW698FuWJRIx+RP6embAzZ2Qi8/ilIrA1Imt2LVSeHUzKvpoi7BhmmQcXz95eS0f2JXw==" }, + "node_modules/@types/stylis": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.2.tgz", + "integrity": "sha512-Rm17MsTpQQP5Jq4BF7CdrxJsDufoiL/q5IbJZYZmOZAJALyijgF7BzLgobXUqraNcQdqFYLYGeglDp6QzaxPpg==" + }, "node_modules/@types/trusted-types": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.5.tgz", @@ -5151,6 +5175,14 @@ "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==", + "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", @@ -5655,6 +5687,14 @@ "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==", + "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", @@ -5836,6 +5876,16 @@ "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==", + "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", @@ -13774,6 +13824,11 @@ "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==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -14248,6 +14303,33 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.0.tgz", + "integrity": "sha512-VWNfYYBuXzuLS/QYEeoPgMErP26WL+dX9//rEh80B2mmlS1yRxRxuL5eax4m6ybYEUoHWlTy2XOU32767mlMkg==", + "dependencies": { + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/unitless": "^0.8.0", + "@types/stylis": "^4.0.2", + "css-to-react-native": "^3.2.0", + "csstype": "^3.1.2", + "postcss": "^8.4.31", + "shallowequal": "^1.1.0", + "stylis": "^4.3.0", + "tslib": "^2.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -14263,6 +14345,11 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", + "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" + }, "node_modules/sucrase": { "version": "3.34.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", diff --git a/package.json b/package.json index 5fd263b6..34d3f744 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.18.0", "react-scripts": "5.0.1", + "styled-components": "^6.1.0", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, diff --git a/src/App.tsx b/src/App.tsx index 535063ee..96fa1cde 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,27 @@ import './App.css'; import { ThemeProvider } from 'styled-components'; import theme from '../src/styles/theme'; +import { BrowserRouter, Route, Routes } from "react-router-dom"; +import NavigationBar from './components/NavigationBar'; +import HomePage from './pages/HomePage'; +import CommunityPage from './pages/CommunityPage'; +import ChatPage from './pages/chatting/index'; +import MyPage from './pages/MyPage'; function App() { return ( - hello + +
+ + + } /> + } /> + } /> + } /> + +
+ ); } diff --git a/src/assets/activedChattingIcon.svg b/src/assets/activedChattingIcon.svg new file mode 100644 index 00000000..b3f48e5d --- /dev/null +++ b/src/assets/activedChattingIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/activedCommunityIcon.svg b/src/assets/activedCommunityIcon.svg new file mode 100644 index 00000000..f9d8ccb1 --- /dev/null +++ b/src/assets/activedCommunityIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/activedHomeIcon.svg b/src/assets/activedHomeIcon.svg new file mode 100644 index 00000000..9cfb628b --- /dev/null +++ b/src/assets/activedHomeIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/activedMypageIcon.svg b/src/assets/activedMypageIcon.svg new file mode 100644 index 00000000..1bc19d6c --- /dev/null +++ b/src/assets/activedMypageIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/activedSettingIcon.svg b/src/assets/activedSettingIcon.svg new file mode 100644 index 00000000..ac0a0ea8 --- /dev/null +++ b/src/assets/activedSettingIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/chattingIcon.svg b/src/assets/chattingIcon.svg new file mode 100644 index 00000000..346400ad --- /dev/null +++ b/src/assets/chattingIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/communityIcon.svg b/src/assets/communityIcon.svg new file mode 100644 index 00000000..7e194a71 --- /dev/null +++ b/src/assets/communityIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/homeIcon.svg b/src/assets/homeIcon.svg new file mode 100644 index 00000000..3e15eb8f --- /dev/null +++ b/src/assets/homeIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/mypageIcon.svg b/src/assets/mypageIcon.svg new file mode 100644 index 00000000..b331b39d --- /dev/null +++ b/src/assets/mypageIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/settingIcon.svg b/src/assets/settingIcon.svg new file mode 100644 index 00000000..6eed5b6d --- /dev/null +++ b/src/assets/settingIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/sweetyIcon.svg b/src/assets/sweetyIcon.svg new file mode 100644 index 00000000..5686f76c --- /dev/null +++ b/src/assets/sweetyIcon.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/sweetyLogo.svg b/src/assets/sweetyLogo.svg new file mode 100644 index 00000000..ed1163b0 --- /dev/null +++ b/src/assets/sweetyLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx new file mode 100644 index 00000000..370c5731 --- /dev/null +++ b/src/components/NavigationBar.tsx @@ -0,0 +1,356 @@ +import styled from "styled-components"; +import React, { useEffect, useState } from 'react'; +import { useNavigate } from "react-router-dom"; +import { ReactComponent as Logo } from "../assets/sweetyLogo.svg" +import { ReactComponent as Icon } from "../assets/sweetyIcon.svg" +import { ReactComponent as HomeIcon } from "../assets/homeIcon.svg" +import { ReactComponent as CommunityIcon } from "../assets/communityIcon.svg" +import { ReactComponent as ChatIcon } from "../assets/chattingIcon.svg" +import { ReactComponent as MyPageIcon } from "../assets/mypageIcon.svg" +import { ReactComponent as SettingIcon } from "../assets/settingIcon.svg" +import { ReactComponent as ActivedHomeIcon } from "../assets/activedHomeIcon.svg" +import { ReactComponent as ActivedCommunityIcon } from "../assets/activedCommunityIcon.svg" +import { ReactComponent as ActivedChatIcon } from "../assets/activedChattingIcon.svg" +import { ReactComponent as ActivedMyPageIcon } from "../assets/activedMypageIcon.svg" +import { ReactComponent as ActivedSettingIcon } from "../assets/activedSettingIcon.svg" + +export default function NavigationBar() { + const navigate = useNavigate(); + const [isHomeClicked, setIsHomeClicked] = useState(false); + const [isCommunityClicked, setIsCommunityClicked] = useState(false); + const [isChatClicked, setIsChatClicked] = useState(false); + const [isMyPageClicked, setIsMyPageClicked] = useState(false); + const [isSettingClicked, setIsSettingClicked] = useState(false); + + const handleCategoryButton = ( category: string ) => { + if(category === 'home') + navigate(`/`); + if(category === 'community') + navigate(`/community`); + if(category === 'chat') + navigate(`/chat`); + if(category === 'mypage') + navigate(`/mypage`); + } + + const handleLinkToHomePage= () => { + setIsHomeClicked(true); + setIsCommunityClicked(false); + setIsChatClicked(false); + setIsMyPageClicked(false); + + localStorage.setItem('isHomeClicked', 'true'); + localStorage.setItem('isCommunityClicked', 'false'); + localStorage.setItem('isChatClicked', 'false'); + localStorage.setItem('isMyPageClicked', 'false'); + + handleCategoryButton('home'); + } + const handleLinkToCommunityPage= () => { + setIsCommunityClicked(true); + setIsHomeClicked(false); + setIsChatClicked(false); + setIsMyPageClicked(false); + + localStorage.setItem('isCommunityClicked', 'true'); + localStorage.setItem('isHomeClicked', 'false'); + localStorage.setItem('isChatClicked', 'false'); + localStorage.setItem('isMyPageClicked', 'false'); + + handleCategoryButton('community'); + } + + const handleLinkToChatPage= () => { + setIsChatClicked(true); + setIsHomeClicked(false); + setIsCommunityClicked(false); + setIsMyPageClicked(false); + + localStorage.setItem('isChatClicked', 'true'); + localStorage.setItem('isCommunityClicked', 'false'); + localStorage.setItem('isHomeClicked', 'false'); + localStorage.setItem('isMyPageClicked', 'false'); + + handleCategoryButton('chat'); + } + + const handleLinkToMyPage= () => { + setIsMyPageClicked(true); + setIsHomeClicked(false); + setIsCommunityClicked(false); + setIsChatClicked(false); + + localStorage.setItem('isMyPageClicked', 'true'); + localStorage.setItem('isHomeClicked', 'false'); + localStorage.setItem('isCommunityClicked', 'false'); + localStorage.setItem('isChatClicked', 'false'); + + handleCategoryButton('mypage'); + + } + + const handleOpenSettingBox = () => { + setIsSettingClicked(!isSettingClicked); + } + + // ์ƒˆ๋กœ๊ณ ์นจ ์‹œ ํ˜„์žฌ ํŽ˜์ด์ง€ clicked state ์ €์žฅ + useEffect(() => { + const isHomeClicked = localStorage.getItem('isHomeClicked') === 'true'; + const isCommunityClicked = localStorage.getItem('isCommunityClicked') === 'true'; + const isChatClicked = localStorage.getItem('isChatClicked') === 'true'; + const isMyPageClicked = localStorage.getItem('isMyPageClicked') === 'true'; + + setIsHomeClicked(isHomeClicked); + setIsCommunityClicked(isCommunityClicked); + setIsChatClicked(isChatClicked); + setIsMyPageClicked(isMyPageClicked); + }, []); + + + return ( + + + + + + + + + + + + { + isHomeClicked ? + : + } + Home + + + + + { + isCommunityClicked ? + : + } + Community + + + + + { + isChatClicked ? + : + } + Chat + + + + + { + isMyPageClicked ? + : + } + MyPage + + + + + + + ๋กœ๊ทธ์•„์›ƒ + + ๋‹ค๋ฅธ ์„ค์ •... + + + + { + isSettingClicked ? + : + } + Settings + + + + + ) +} + +const NavigationWrap = styled.div` + border-right: 1px solid ${props => props.theme.color.borderGray}; + background: ${props => props.theme.color.white}; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 300px; + height: 100vh; + + ${props => props.theme.response.tablet} { + width: 100px; + } + + ${props => props.theme.response.mobile} { + border-top: 1px solid ${props => props.theme.color.borderGray}; + border-right: none; + width: 100%; + height: auto; + position: absolute; + bottom: 0; + } +`; + +const TopDiv = styled.div` + display: flex; + flex-direction: column; + gap: 30px; + + ${props => props.theme.response.tablet} { + gap: 40px; + } + + ${props => props.theme.response.mobile} { + width: 100%; + align-items: center; + } +`; + +const BottomDiv = styled.div` + margin-bottom: 30px; + position: relative; + + ${props => props.theme.response.mobile} { + display: none; + } +`; + +const LogoWrap = styled.div` + margin-top: 40px; + + &:hover { + cursor: pointer; + } + + ${props => props.theme.response.tablet} { + display: none; + } +`; + +const IconWrap = styled.div` + display: none; + margin-top: 30px; + + &:hover { + cursor: pointer; + } + + ${props => props.theme.response.tablet} { + display: flex; + justify-content: center; + } + + ${props => props.theme.response.mobile} { + display: none; + } +`; + +const CategoryWrap = styled.nav` + display: flex; + flex-direction: column; + gap: 20px; + + ${props => props.theme.response.mobile} { + flex-direction: row; + padding: 15px 0; + flex: 1; + } +`; + +const CategoryButton = styled.button` + display: flex; + align-items: center; + gap: 18px; + padding: 20px 30px; + width: 100%; + background-color: transparent; + border: none; + + &:hover { + cursor: pointer; + } + + ${props => props.theme.response.tablet} { + padding: 18px; + } +`; + +const CategoryTitle = styled.span<{ $isClicked: boolean }>` + font-size: 25px; + font-style: normal; + font-weight: 400; + line-height: normal; + + color: ${(props) => (props.$isClicked ? props => props.theme.color.primary : props => props.theme.color.black)}; + + ${props => props.theme.response.tablet} { + display: none; + } +`; + +const SettingButton = styled.button` + display: flex; + align-items: center; + gap: 18px; + padding: 20px 30px; + width: 100%; + background-color: transparent; + border: none; + + &:hover { + cursor: pointer; + } + + ${props => props.theme.response.tablet} { + padding: 18px; + } +`; + +const ClickedBox = styled.div<{ $isClicked: boolean }>` + border-radius: 20px; + background-color: ${(props) => (props.$isClicked ? props => props.theme.color.lightGray : "transparent")}; +`; + +const SettingBox = styled.div<{ $isClicked: boolean }>` + width: 100%; + height: 112px; + flex-shrink: 0; + border-radius: 20px; + background: ${props => props.theme.color.lightGray}; + margin-bottom: 10px; + flex-direction: column; + justify-content: space-evenly; + position: absolute; + bottom: 75px; + left: 0; + display: ${(props) => (props.$isClicked ? "flex" : "none")}; + + ${props => props.theme.response.tablet} { + width: 170px; + } +`; + +const SettingMenu = styled.span` + color: ${props => props.theme.color.black}; + text-align: center; + font-size: ${props => props.theme.font.largeSize}; + font-style: normal; + font-weight: 600; + line-height: normal; + + &:hover { + cursor: pointer; + } +`; + +const Divider = styled.div` + border: 0.5px solid ${props => props.theme.color.borderGray}; +`; \ No newline at end of file diff --git a/src/pages/CommunityPage.tsx b/src/pages/CommunityPage.tsx new file mode 100644 index 00000000..5b1d051f --- /dev/null +++ b/src/pages/CommunityPage.tsx @@ -0,0 +1,6 @@ +export default function CommunityPage() { + + return ( +

COMMUNITY PAGE

+ ) +} diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx new file mode 100644 index 00000000..9dfad643 --- /dev/null +++ b/src/pages/HomePage.tsx @@ -0,0 +1,6 @@ +export default function HomePage() { + + return ( +

HOME PAGE

+ ) +} diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx new file mode 100644 index 00000000..a3c4bedd --- /dev/null +++ b/src/pages/MyPage.tsx @@ -0,0 +1,7 @@ +export default function MyPage() { + + return ( +

MY PAGE

+ ) +} + \ No newline at end of file diff --git a/src/pages/chatting/index.tsx b/src/pages/chatting/index.tsx new file mode 100644 index 00000000..09fec9a8 --- /dev/null +++ b/src/pages/chatting/index.tsx @@ -0,0 +1,7 @@ +export default function ChatPage() { + + return ( +

CHAT PAGE

+ ) +} + \ No newline at end of file