From 3248bedf25285d779aa7d3b4f3dae07f6e163002 Mon Sep 17 00:00:00 2001 From: Hyesung Oh Date: Sat, 7 May 2022 23:27:08 +0900 Subject: [PATCH 01/13] =?UTF-8?q?feat:=20mypage=20RouterPathType=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/common/useInternalRouter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/common/useInternalRouter.ts b/src/hooks/common/useInternalRouter.ts index 43cbc9cb..8d650499 100644 --- a/src/hooks/common/useInternalRouter.ts +++ b/src/hooks/common/useInternalRouter.ts @@ -2,7 +2,7 @@ import { useMemo } from 'react'; import { useRouter } from 'next/router'; import { UrlObject } from 'url'; -export type RouterPathType = `/` | '/test' | '/add/link' | '/add/text' | '/add/image'; +export type RouterPathType = `/` | '/test' | '/add/link' | '/add/text' | '/add/image' | '/my'; export default function useInternalRouter() { const router = useRouter(); From 0a250dbf7985dda91bce741c1286449424eb9742 Mon Sep 17 00:00:00 2001 From: Hyesung Oh Date: Sat, 7 May 2022 23:27:26 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20HomeNavigationBar=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EB=B0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/HomeNavigationBar.tsx | 31 +++++++++++++ src/pages/index.tsx | 56 ++++++++++++----------- 2 files changed, 61 insertions(+), 26 deletions(-) create mode 100644 src/components/home/HomeNavigationBar.tsx diff --git a/src/components/home/HomeNavigationBar.tsx b/src/components/home/HomeNavigationBar.tsx new file mode 100644 index 00000000..5751c5da --- /dev/null +++ b/src/components/home/HomeNavigationBar.tsx @@ -0,0 +1,31 @@ +import { css, Theme } from '@emotion/react'; + +import { FilterIcon, SettingsIcon } from '../common/icons'; +import InternalLink from '../common/InternalLink'; + +export default function HomeNavigationBar() { + return ( + + ); +} + +const navCss = css` + width: 100%; + height: 44px; + display: flex; + justify-content: flex-end; + align-items: center; + gap: 4px; +`; + +const iconCss = (theme: Theme) => css` + margin: 10px; + color: ${theme.color.gray05}; +`; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c4653200..a967d245 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,35 +2,39 @@ import { css } from '@emotion/react'; import AppendButton from '~/components/home/AppendButton'; import ContentThumbnail from '~/components/home/ContentThumbnail'; +import HomeNavigationBar from '~/components/home/HomeNavigationBar'; export default function Root() { return ( -
-
- - - - - -
- -
+ <> + +
+
+ + + + + +
+ +
+ ); } From d3dddde6bd7f1e2e9cb41e4efe07e472665f13e5 Mon Sep 17 00:00:00 2001 From: Hyesung Oh Date: Sun, 8 May 2022 00:17:31 +0900 Subject: [PATCH 03/13] =?UTF-8?q?design:=20global,=20layout=20=EB=86=92?= =?UTF-8?q?=EC=9D=B4=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/_app.tsx | 1 - src/styles/GlobalStyle/GlobalStyle.tsx | 5 ----- 2 files changed, 6 deletions(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 765be76e..81c4ec8d 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -34,7 +34,6 @@ const layoutCss = (theme: Theme) => css` background: ${theme.color.background}; max-width: ${theme.size.maxWidth}; width: 100%; - height: 100%; margin: 0 auto; padding: ${theme.size.layoutPadding}; `; diff --git a/src/styles/GlobalStyle/GlobalStyle.tsx b/src/styles/GlobalStyle/GlobalStyle.tsx index 73a0a93f..51169d2a 100644 --- a/src/styles/GlobalStyle/GlobalStyle.tsx +++ b/src/styles/GlobalStyle/GlobalStyle.tsx @@ -41,10 +41,5 @@ const globalCss = (theme: Theme) => css` display: none !important; } } - - body, - #__next { - height: 100vh; - } } `; From a11503defdc44ff35d9550b93e766794fe2d06ab Mon Sep 17 00:00:00 2001 From: Hyesung Oh Date: Sun, 8 May 2022 21:47:02 +0900 Subject: [PATCH 04/13] =?UTF-8?q?fix:=20TagForm=20=EC=98=A4=ED=83=80=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 --- src/components/TagForm/index.tsx | 3 ++- src/pages/add/tag.tsx | 4 ++-- src/pages/edit/tag.tsx | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/TagForm/index.tsx b/src/components/TagForm/index.tsx index ccfc58f5..0469128a 100644 --- a/src/components/TagForm/index.tsx +++ b/src/components/TagForm/index.tsx @@ -7,7 +7,8 @@ import useInput from '~/hooks/common/useInput'; import AppliedTags from './AppliedTags'; import RegisteredTagList from './RegisteredTagList'; -export default function TagFrom({ +// NOTE: Props들을 컴포넌트내에서 관리할 수도 있지 않을까 +export default function TagForm({ applyedTags = [], registeredTags = [], onSave, diff --git a/src/pages/add/tag.tsx b/src/pages/add/tag.tsx index 2e39176c..9dc10b39 100644 --- a/src/pages/add/tag.tsx +++ b/src/pages/add/tag.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import NavigationBar from '~/components/common/NavigationBar'; -import TagFrom from '~/components/TagForm'; +import TagForm from '~/components/TagForm'; import { useAppliedTags } from '~/store/AppliedTags'; export default function AddTag() { @@ -19,7 +19,7 @@ export default function AddTag() { return (
- +
); } diff --git a/src/pages/edit/tag.tsx b/src/pages/edit/tag.tsx index fe660b58..4bbcc29a 100644 --- a/src/pages/edit/tag.tsx +++ b/src/pages/edit/tag.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import NavigationBar from '~/components/common/NavigationBar'; -import TagFrom from '~/components/TagForm'; +import TagForm from '~/components/TagForm'; import { useToast } from '~/store/Toast'; export interface EditTagProps { @@ -42,7 +42,7 @@ export default function EditTag({ contentId, contentTags }: EditTagProps) { return (
- Date: Sun, 8 May 2022 21:47:37 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat:=20NavigationBar=20backLinkScrollOpt?= =?UTF-8?q?ion=20prop=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/NavigationBar/NavigationBar.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/common/NavigationBar/NavigationBar.tsx b/src/components/common/NavigationBar/NavigationBar.tsx index 84eff785..0ca41a8f 100644 --- a/src/components/common/NavigationBar/NavigationBar.tsx +++ b/src/components/common/NavigationBar/NavigationBar.tsx @@ -6,16 +6,23 @@ import useInternalRouter, { RouterPathType } from '~/hooks/common/useInternalRou interface NavigationBarProps { backLink?: RouterPathType; + backLinkScrollOption?: boolean; title?: string; rightElement?: ReactElement; } -export default function NavigationBar({ backLink, title, rightElement }: NavigationBarProps) { +export default function NavigationBar({ + backLink, + backLinkScrollOption = true, + title, + rightElement, +}: NavigationBarProps) { const router = useInternalRouter(); + // NOTE: 1. router option을 전체적으로 받을 수 있게? 2. onClickBackButton callback을 받을 수 있게? const onClickBackButton = () => { if (backLink) { - router.push(backLink); + router.push(backLink, undefined, { scroll: backLinkScrollOption }); return; } router.back(); From 977aeea49a9803eac2dc4997e0749a7ab030607f Mon Sep 17 00:00:00 2001 From: Hyesung Oh Date: Sun, 8 May 2022 21:48:00 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20usePreventScroll=20hook=20?= =?UTF-8?q?=EA=B0=9C=EB=B0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/common/usePreventScroll/index.ts | 1 + .../common/usePreventScroll/usePreventScroll.ts | 13 +++++++++++++ 2 files changed, 14 insertions(+) create mode 100644 src/hooks/common/usePreventScroll/index.ts create mode 100644 src/hooks/common/usePreventScroll/usePreventScroll.ts diff --git a/src/hooks/common/usePreventScroll/index.ts b/src/hooks/common/usePreventScroll/index.ts new file mode 100644 index 00000000..eef5d8cb --- /dev/null +++ b/src/hooks/common/usePreventScroll/index.ts @@ -0,0 +1 @@ +export { default } from './usePreventScroll'; diff --git a/src/hooks/common/usePreventScroll/usePreventScroll.ts b/src/hooks/common/usePreventScroll/usePreventScroll.ts new file mode 100644 index 00000000..9d093bfd --- /dev/null +++ b/src/hooks/common/usePreventScroll/usePreventScroll.ts @@ -0,0 +1,13 @@ +import { useEffect } from 'react'; + +export default function usePreventScroll(condition: boolean = true) { + useEffect(() => { + if (typeof document === 'undefined') return; + if (condition) document.body.style.overflow = 'hidden'; + else document.body.style.overflow = 'unset'; + + return () => { + document.body.style.overflow = 'unset'; + }; + }, [condition]); +} From 88ada71d9af4c44cecdb46a9065b4b1588b32fc7 Mon Sep 17 00:00:00 2001 From: Hyesung Oh Date: Sun, 8 May 2022 21:48:17 +0900 Subject: [PATCH 07/13] =?UTF-8?q?feat:=20useRouterQuery=20hook=20=EA=B0=9C?= =?UTF-8?q?=EB=B0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/common/useRouterQuery/index.ts | 1 + .../common/useRouterQuery/useRouterQuery.ts | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 src/hooks/common/useRouterQuery/index.ts create mode 100644 src/hooks/common/useRouterQuery/useRouterQuery.ts diff --git a/src/hooks/common/useRouterQuery/index.ts b/src/hooks/common/useRouterQuery/index.ts new file mode 100644 index 00000000..a535c268 --- /dev/null +++ b/src/hooks/common/useRouterQuery/index.ts @@ -0,0 +1 @@ +export { default } from './useRouterQuery'; diff --git a/src/hooks/common/useRouterQuery/useRouterQuery.ts b/src/hooks/common/useRouterQuery/useRouterQuery.ts new file mode 100644 index 00000000..81a7be65 --- /dev/null +++ b/src/hooks/common/useRouterQuery/useRouterQuery.ts @@ -0,0 +1,19 @@ +import { useRouter } from 'next/router'; + +function useQueryParam(key: string): string | string[] | undefined; + +function useQueryParam(key: string, parser: (value: string | string[]) => T): T | undefined; + +function useQueryParam( + key: string, + parser?: (value: string | string[]) => T +): (string | string[] | T) | undefined { + const { query } = useRouter(); + const result = query[key]; + + if (result === undefined) return undefined; + if (parser) return parser(result); + return result; +} + +export default useQueryParam; From a57728004d3a2dab2b241aa7b17ec0494aaad048 Mon Sep 17 00:00:00 2001 From: Hyesung Oh Date: Sun, 8 May 2022 21:48:40 +0900 Subject: [PATCH 08/13] =?UTF-8?q?chore:=20RouterPathType=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/common/useInternalRouter.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/hooks/common/useInternalRouter.ts b/src/hooks/common/useInternalRouter.ts index 8d650499..c5a5d619 100644 --- a/src/hooks/common/useInternalRouter.ts +++ b/src/hooks/common/useInternalRouter.ts @@ -2,7 +2,15 @@ import { useMemo } from 'react'; import { useRouter } from 'next/router'; import { UrlObject } from 'url'; -export type RouterPathType = `/` | '/test' | '/add/link' | '/add/text' | '/add/image' | '/my'; +export type RouterPathType = + | `/` + | '/test' + | '/add/link' + | '/add/text' + | '/add/image' + | '/add/tag' + | '/my' + | '/my/tag'; export default function useInternalRouter() { const router = useRouter(); From 128daa186237aef381849c9891b0bb42674b58cc Mon Sep 17 00:00:00 2001 From: Hyesung Oh Date: Sun, 8 May 2022 21:50:52 +0900 Subject: [PATCH 09/13] =?UTF-8?q?chore:=20home/AppendButton=20z-index=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 --- src/components/home/AppendButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/home/AppendButton.tsx b/src/components/home/AppendButton.tsx index ad94ac2f..37a81dd9 100644 --- a/src/components/home/AppendButton.tsx +++ b/src/components/home/AppendButton.tsx @@ -52,7 +52,7 @@ const buttonCss = (theme: Theme) => css` background-color: ${theme.color.primary}; border-radius: 50%; color: ${theme.color.gray06}; - z-index: 9999; + z-index: 900; `; const backdropCss = (theme: Theme) => css` @@ -62,7 +62,7 @@ const backdropCss = (theme: Theme) => css` width: 100vw; height: 100vh; background-color: ${theme.color.dim03}; - z-index: 1000; + z-index: 800; `; const buttonRotateVariants: Variants = { From cd314c58b8b1146211ce5b8c5b89ae4b441f2ff2 Mon Sep 17 00:00:00 2001 From: Hyesung Oh Date: Sun, 8 May 2022 21:51:37 +0900 Subject: [PATCH 10/13] =?UTF-8?q?feat:=20=ED=99=88=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20(/tag)=20Route=20as=20Modal=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/HomeNavigationBar.tsx | 12 +++- src/components/home/TagFormRouteAsModal.tsx | 35 ++++++++++ src/pages/index.tsx | 77 +++++++++++++++++++++ src/pages/tag/index.tsx | 24 +++++++ 4 files changed, 146 insertions(+), 2 deletions(-) create mode 100644 src/components/home/TagFormRouteAsModal.tsx create mode 100644 src/pages/tag/index.tsx diff --git a/src/components/home/HomeNavigationBar.tsx b/src/components/home/HomeNavigationBar.tsx index 5751c5da..cd37e8b4 100644 --- a/src/components/home/HomeNavigationBar.tsx +++ b/src/components/home/HomeNavigationBar.tsx @@ -1,3 +1,4 @@ +import Link from 'next/link'; import { css, Theme } from '@emotion/react'; import { FilterIcon, SettingsIcon } from '../common/icons'; @@ -6,7 +7,11 @@ import InternalLink from '../common/InternalLink'; export default function HomeNavigationBar() { return (