From 7e6104ac042cd5595aa265e97047826c52730cf0 Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Sun, 5 Nov 2023 20:04:54 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Refactor:=20=EC=9E=AC=EC=A0=95=EC=9D=98?= =?UTF-8?q?=EB=90=9C=20=EC=BB=AC=EB=9F=AC=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/const/theme.ts | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/client/src/const/theme.ts b/client/src/const/theme.ts index 96a3fd9..a93c4c9 100644 --- a/client/src/const/theme.ts +++ b/client/src/const/theme.ts @@ -52,22 +52,31 @@ const theme = createTheme({ palette: { mode: "light", primary: { - main: "#82BCDB", + main: "#7B1FA2", contrastText: "#fff", }, secondary: { - main: "#00dde6", + main: "#C2185B", }, text: { - primary: "#3D4A59", - secondary: "#558C99", - disabled: "#6D7A89", + primary: "#1C1C1C", + secondary: "#8A8A8A", + disabled: "#B8B8B8", }, divider: "#CDD4D4", background: { - default: "#E9F3F3", + default: "#F5F5F5", paper: "#fefefe", }, + info: { + main: "#00C853", + }, + error: { + main: "#D50000", + }, + warning: { + main: "#FFD600", + }, }, components: { MuiButton: { From bac1a245140250a17fba4ad7d778ef322f7ec2a8 Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Sun, 5 Nov 2023 20:05:15 +0900 Subject: [PATCH 2/4] =?UTF-8?q?New=20:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EC=97=90=EC=85=8B=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/assets/icons/BeverageIcon.svg | 10 ++++++++++ client/src/assets/icons/HomeIcon.svg | 10 ++++++++++ client/src/assets/icons/MyIcon.svg | 10 ++++++++++ client/src/assets/icons/PostIcon.svg | 10 ++++++++++ client/src/assets/icons/SearchIcon.svg | 10 ++++++++++ client/static/media/HomeIcon.d2ed79b6.svg | 10 ++++++++++ 6 files changed, 60 insertions(+) create mode 100644 client/src/assets/icons/BeverageIcon.svg create mode 100644 client/src/assets/icons/HomeIcon.svg create mode 100644 client/src/assets/icons/MyIcon.svg create mode 100644 client/src/assets/icons/PostIcon.svg create mode 100644 client/src/assets/icons/SearchIcon.svg create mode 100644 client/static/media/HomeIcon.d2ed79b6.svg diff --git a/client/src/assets/icons/BeverageIcon.svg b/client/src/assets/icons/BeverageIcon.svg new file mode 100644 index 0000000..ed895d5 --- /dev/null +++ b/client/src/assets/icons/BeverageIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + \ No newline at end of file diff --git a/client/src/assets/icons/HomeIcon.svg b/client/src/assets/icons/HomeIcon.svg new file mode 100644 index 0000000..bd37f36 --- /dev/null +++ b/client/src/assets/icons/HomeIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + \ No newline at end of file diff --git a/client/src/assets/icons/MyIcon.svg b/client/src/assets/icons/MyIcon.svg new file mode 100644 index 0000000..20bdd51 --- /dev/null +++ b/client/src/assets/icons/MyIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + \ No newline at end of file diff --git a/client/src/assets/icons/PostIcon.svg b/client/src/assets/icons/PostIcon.svg new file mode 100644 index 0000000..3e5a016 --- /dev/null +++ b/client/src/assets/icons/PostIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + \ No newline at end of file diff --git a/client/src/assets/icons/SearchIcon.svg b/client/src/assets/icons/SearchIcon.svg new file mode 100644 index 0000000..793e58a --- /dev/null +++ b/client/src/assets/icons/SearchIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + \ No newline at end of file diff --git a/client/static/media/HomeIcon.d2ed79b6.svg b/client/static/media/HomeIcon.d2ed79b6.svg new file mode 100644 index 0000000..654fcd2 --- /dev/null +++ b/client/static/media/HomeIcon.d2ed79b6.svg @@ -0,0 +1,10 @@ + + + + + + + + \ No newline at end of file From f1cd87ab4a7fb8ffd51bc68c9d1bdbb24f60ef67 Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Sun, 5 Nov 2023 20:05:58 +0900 Subject: [PATCH 3/4] =?UTF-8?q?New=20:=20Navbar=20=ED=8D=BC=EB=B8=94?= =?UTF-8?q?=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/app/layout.tsx | 4 +- client/src/components/NavigationBar.tsx | 79 +++++++++++++++++++++++++ 2 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 client/src/components/NavigationBar.tsx diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx index d36f5a7..aa40cf4 100644 --- a/client/src/app/layout.tsx +++ b/client/src/app/layout.tsx @@ -3,7 +3,8 @@ import ThemeRegistry from "@/components/theme/ThemeRegistry"; import { nameOfApp, oneLineMessage } from "@/const/brand"; import OverrideCSS from "@/const/overrideCSS"; import { GlobalStyles } from "@mui/material"; -import Pretendard from "@/assets/font/Pretendard"; +import Pretendard from "~/assets/font/Pretendard"; +import NavigationBar from "~/components/NavigationBar"; export const metadata: Metadata = { title: `${nameOfApp} | ${oneLineMessage}`, @@ -25,6 +26,7 @@ export default function RootLayout({ {children} + diff --git a/client/src/components/NavigationBar.tsx b/client/src/components/NavigationBar.tsx new file mode 100644 index 0000000..74e7bde --- /dev/null +++ b/client/src/components/NavigationBar.tsx @@ -0,0 +1,79 @@ +import { + AppBar, + ButtonBase, + ButtonBaseProps, + Toolbar, + Typography, +} from "@mui/material"; + +import HomeIcon from "~/assets/icons/HomeIcon.svg"; +import SearchIcon from "~/assets/icons/SearchIcon.svg"; +import PostIcon from "~/assets/icons/PostIcon.svg"; +import BeverageIcon from "~/assets/icons/BeverageIcon.svg"; +import MyIcon from "~/assets/icons/MyIcon.svg"; + +const NavbarData = [ + { + iconComponent: , + label: "홈", + href: "/", + }, + { + iconComponent: , + label: "검색", + }, + { + iconComponent: , + label: "올리기", + }, + { + iconComponent: , + label: "술과사전", + }, + { + iconComponent: , + label: "내 정보", + }, +]; + +const NavigationBar = () => { + return ( + + + {NavbarData.map((buttonData) => { + return ( + + {buttonData.label} + + ); + })} + + + ); +}; + +export default NavigationBar; + +interface NavbarIconButtonInterface extends Omit { + children: string; + iconComponent: React.ReactNode; + href?: string; +} +export const NavbarIconButton = ({ + children, + iconComponent, + ...others +}: NavbarIconButtonInterface) => { + return ( + + {iconComponent} + + {children} + + + ); +}; From 28ca0b62edaea306730ee32ed2b2d3b4c51cde95 Mon Sep 17 00:00:00 2001 From: Jungu Lee <1zzangjun@gmail.com> Date: Sun, 5 Nov 2023 20:06:13 +0900 Subject: [PATCH 4/4] =?UTF-8?q?New=20:=20Navbar=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/.storybook/main.ts | 6 ++--- .../Components/Navigation/Navbar.stories.tsx | 25 +++++++++++++++++++ 2 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 client/src/stories/Components/Navigation/Navbar.stories.tsx diff --git a/client/.storybook/main.ts b/client/.storybook/main.ts index 3054c5d..e71f57d 100644 --- a/client/.storybook/main.ts +++ b/client/.storybook/main.ts @@ -23,9 +23,9 @@ const config: StorybookConfig = { }, staticDirs: [ { - from: '../src/assets/font', - to: '/src/assets/font' - } + from: "../src/assets", + to: "/src/assets", + }, ], webpackFinal: async (config, { configType }) => { config.resolve!.alias = { diff --git a/client/src/stories/Components/Navigation/Navbar.stories.tsx b/client/src/stories/Components/Navigation/Navbar.stories.tsx new file mode 100644 index 0000000..562477d --- /dev/null +++ b/client/src/stories/Components/Navigation/Navbar.stories.tsx @@ -0,0 +1,25 @@ +import NavigationBar from "@/components/NavigationBar"; + +import { Meta, StoryObj } from "@storybook/react"; +const meta = { + title: "Components/Navigation/NavigationBar", + component: NavigationBar, + tags: ["autodocs"], + decorators: [ + (Story) => { + return ( +
e.stopPropagation()} + > + +
+ ); + }, + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Navbar: Story = {};