홈 화면 - 네비게이션 바 + 태그 추가 개발 w/ 공용 훅 (#140)

* feat: mypage RouterPathType 추가 * feat: HomeNavigationBar 컴포넌트 개발 * design: global, layout 높이 삭제 * fix: TagForm 오타 수정 * feat: NavigationBar backLinkScrollOption prop 추가 * feat: usePreventScroll hook 개발 * feat: useRouterQuery hook 개발 * chore: RouterPathType 추가 * chore: home/AppendButton z-index 수정 * feat: 홈 태그 추가 (/tag) Route as Modal 적용 * chore: dynamic import 태그 route as modal * feat: filteredTags 전역 상태 추가 * chore: /tag route filteredTags 사용으로 변경
depromeet · May 8, 2022 · 02d66b3 · 02d66b3
1 parent 2955f7c
commit 02d66b3
Show file tree

Hide file tree

Showing 19 changed files with 280 additions and 68 deletions.
diff --git 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/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();

diff --git 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 = {

diff --git a/src/components/home/HomeNavigationBar.tsx b/src/components/home/HomeNavigationBar.tsx
@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import { css, Theme } from '@emotion/react';
+
+import { FilterIcon, SettingsIcon } from '../common/icons';
+import InternalLink from '../common/InternalLink';
+
+export default function HomeNavigationBar() {
+  return (
+    <nav css={navCss}>
+      <Link href="/?modal=tag" as="/tag" scroll={false}>
+        <a>
+          <FilterIcon css={iconCss} />
+        </a>
+      </Link>
+      <InternalLink href="/my">
+        <a>
+          <SettingsIcon css={iconCss} />
+        </a>
+      </InternalLink>
+    </nav>
+  );
+}
+
+const navCss = (theme: Theme) => css`
+  position: sticky;
+  top: 0;
+  width: 100%;
+  height: 44px;
+  background-color: ${theme.color.background};
+  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/components/home/TagFormRouteAsModal.tsx b/src/components/home/TagFormRouteAsModal.tsx
@@ -0,0 +1,35 @@
+import { css, Theme } from '@emotion/react';
+
+import PortalWrapper from '~/components/common/PortalWrapper';
+import usePreventScroll from '~/hooks/common/usePreventScroll';
+import useQueryParam from '~/hooks/common/useRouterQuery';
+import TagPage from '~/pages/tag';
+
+export default function TagFormRouteAsModal() {
+  const query = useQueryParam('modal', String);
+
+  usePreventScroll(Boolean(query));
+
+  return (
+    <PortalWrapper isShowing={Boolean(query)}>
+      <div css={wrapperCss}>
+        <TagPage />
+      </div>
+    </PortalWrapper>
+  );
+}
+
+const wrapperCss = (theme: Theme) => css`
+  position: fixed;
+  top: 0;
+  /* 가로 가운데 정렬 */
+  left: 50%;
+  transform: translateX(-50%);
+
+  width: 100%;
+  max-width: ${theme.size.maxWidth};
+  height: 100vh;
+  background-color: ${theme.color.background};
+  padding: ${theme.size.layoutPadding};
+  z-index: 1000;
+`;
diff --git 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';
+export type RouterPathType =
+  | `/`
+  | '/test'
+  | '/add/link'
+  | '/add/text'
+  | '/add/image'
+  | '/add/tag'
+  | '/my'
+  | '/my/tag';
 
 export default function useInternalRouter() {
   const router = useRouter();

diff --git a/src/hooks/common/usePreventScroll/index.ts 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
@@ -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]);
+}
diff --git a/src/hooks/common/useRouterQuery/index.ts 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
@@ -0,0 +1,19 @@
+import { useRouter } from 'next/router';
+
+function useQueryParam(key: string): string | string[] | undefined;
+
+function useQueryParam<T>(key: string, parser: (value: string | string[]) => T): T | undefined;
+
+function useQueryParam<T>(
+  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;
diff --git 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/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 (
     <article css={addTagCss}>
       <NavigationBar title="영감 추가" />
-      <TagFrom applyedTags={tags} registeredTags={tagsB} onSave={addTag} onRemove={removeTag} />
+      <TagForm applyedTags={tags} registeredTags={tagsB} onSave={addTag} onRemove={removeTag} />
     </article>
   );
 }

diff --git 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 (
     <article css={editTagCss}>
       <NavigationBar title="영감 편집" />
-      <TagFrom
+      <TagForm
         applyedTags={contentTags}
         registeredTags={tagsB}
         onSave={saveTag}

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,62 +1,90 @@
+import dynamic from 'next/dynamic';
 import { css } from '@emotion/react';
 
 import AppendButton from '~/components/home/AppendButton';
 import ContentThumbnail from '~/components/home/ContentThumbnail';
+import HomeNavigationBar from '~/components/home/HomeNavigationBar';
+
+const TagFormRouteAsModal = dynamic(() => import('~/components/home/TagFormRouteAsModal'));
 
 export default function Root() {
   return (
-    <article>
-      <section css={thumbnailWrapperCss}>
-        <ContentThumbnail
-          type="TEXT"
-          content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, similique quisquam. Inventore iure excepturi, accusamus quae repudiandae, aspernatur praesentium, consequatur quidem modi a sit rerum molestias iusto quaerat vitae perspiciatis."
-          tags={[]}
-        />
-        <ContentThumbnail
-          type="IMAGE"
-          content="https://avatars.githubusercontent.com/u/26461307?v=4"
-          tags={[]}
-        />
-        <ContentThumbnail
-          type="TEXT"
-          content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, similique quisquam. Inventore iure excepturi, accusamus quae repudiandae, aspernatur praesentium, consequatur quidem modi a sit rerum molestias iusto quaerat vitae perspiciatis."
-          tags={TEST_TAGS}
-        />
-        <ContentThumbnail
-          type="IMAGE"
-          content="https://avatars.githubusercontent.com/u/26461307?v=4"
-          tags={TEST_TAGS}
-        />
-        <ContentThumbnail
-          type="LINK"
-          content="https://avatars.githubusercontent.com/u/26461307?v=4"
-          tags={[]}
-          openGraph={{
-            code: 200,
-            description: 'I like to share my knowledge for those who wandering in issue.',
-            siteName: null,
-            title: "Cometin' - hyesungoh overflow test",
-            url: 'https://avatars.githubusercontent.com/',
-            image: '/u/26461307?v=4',
-          }}
-        />
-        <ContentThumbnail
-          type="LINK"
-          content="https://avatars.githubusercontent.com/u/26461307?v=4"
-          tags={TEST_TAGS}
-          openGraph={{
-            code: 200,
-            description: 'I like to share my knowledge for those who wandering in issue.',
-            siteName: null,
-            title: "Cometin' - hyesungoh",
-            url: 'https://avatars.githubusercontent.com/',
-            image: '/u/26461307?v=4',
-          }}
-        />
-        <ContentThumbnail type="TEXT" content="asdf" tags={[]} />
-      </section>
-      <AppendButton />
-    </article>
+    <>
+      <HomeNavigationBar />
+      <article>
+        <section css={thumbnailWrapperCss}>
+          <ContentThumbnail
+            type="TEXT"
+            content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, similique quisquam. Inventore iure excepturi, accusamus quae repudiandae, aspernatur praesentium, consequatur quidem modi a sit rerum molestias iusto quaerat vitae perspiciatis."
+            tags={[]}
+          />
+          <ContentThumbnail
+            type="IMAGE"
+            content="https://avatars.githubusercontent.com/u/26461307?v=4"
+            tags={[]}
+          />
+          <ContentThumbnail
+            type="TEXT"
+            content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, similique quisquam. Inventore iure excepturi, accusamus quae repudiandae, aspernatur praesentium, consequatur quidem modi a sit rerum molestias iusto quaerat vitae perspiciatis."
+            tags={TEST_TAGS}
+          />
+          <ContentThumbnail
+            type="IMAGE"
+            content="https://avatars.githubusercontent.com/u/26461307?v=4"
+            tags={TEST_TAGS}
+          />
+          <ContentThumbnail
+            type="TEXT"
+            content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, similique quisquam. Inventore iure excepturi, accusamus quae repudiandae, aspernatur praesentium, consequatur quidem modi a sit rerum molestias iusto quaerat vitae perspiciatis."
+            tags={[]}
+          />
+          <ContentThumbnail
+            type="IMAGE"
+            content="https://avatars.githubusercontent.com/u/26461307?v=4"
+            tags={[]}
+          />
+          <ContentThumbnail
+            type="TEXT"
+            content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, similique quisquam. Inventore iure excepturi, accusamus quae repudiandae, aspernatur praesentium, consequatur quidem modi a sit rerum molestias iusto quaerat vitae perspiciatis."
+            tags={TEST_TAGS}
+          />
+          <ContentThumbnail
+            type="IMAGE"
+            content="https://avatars.githubusercontent.com/u/26461307?v=4"
+            tags={TEST_TAGS}
+          />
+          <ContentThumbnail
+            type="LINK"
+            content="https://avatars.githubusercontent.com/u/26461307?v=4"
+            tags={[]}
+            openGraph={{
+              code: 200,
+              description: 'I like to share my knowledge for those who wandering in issue.',
+              siteName: null,
+              title: "Cometin' - hyesungoh overflow test",
+              url: 'https://avatars.githubusercontent.com/',
+              image: '/u/26461307?v=4',
+            }}
+          />
+          <ContentThumbnail
+            type="LINK"
+            content="https://avatars.githubusercontent.com/u/26461307?v=4"
+            tags={TEST_TAGS}
+            openGraph={{
+              code: 200,
+              description: 'I like to share my knowledge for those who wandering in issue.',
+              siteName: null,
+              title: "Cometin' - hyesungoh",
+              url: 'https://avatars.githubusercontent.com/',
+              image: '/u/26461307?v=4',
+            }}
+          />
+          <ContentThumbnail type="TEXT" content="asdf" tags={[]} />
+        </section>
+        <AppendButton />
+        <TagFormRouteAsModal />
+      </article>
+    </>
   );
 }