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

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,

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();

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

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};
+`;

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;
+`;

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();

src/hooks/common/usePreventScroll/index.ts

@@ -0,0 +1 @@
+export { default } from './usePreventScroll';

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]);
+}

src/hooks/common/useRouterQuery/index.ts

@@ -0,0 +1 @@
+export { default } from './useRouterQuery';

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;

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};
 `;

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>
   );
 }

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}

src/pages/index.tsx

@@ -1,36 +1,119 @@
+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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="asdf" tags={[]} />
+        </section>
+        <AppendButton />
+      </article>
+      <TagFormRouteAsModal />
+    </>
   );
 }
 

src/pages/tag/index.tsx

@@ -0,0 +1,24 @@
+import NavigationBar from '~/components/common/NavigationBar';
+import TagForm from '~/components/TagForm';
+import { useAppliedTags } from '~/store/AppliedTags';
+
+// TODO: 비동기 요청으로 대체
+const mockTags: TagType[] = [
+  { id: 1, content: 'hi hihi hi hi hi hi hi ' },
+  { id: 2, content: 'h2' },
+  { id: 3, content: 'h3' },
+  { id: 4, content: 'h4' },
+  { id: 5, content: 'h5' },
+  { id: 6, content: 'h6' },
+];
+
+export default function TagPage() {
+  const { tags, removeTag, addTag } = useAppliedTags();
+
+  return (
+    <article>
+      <NavigationBar title="태그 추가" backLink="/" backLinkScrollOption={false} />
+      <TagForm applyedTags={tags} registeredTags={mockTags} onSave={addTag} onRemove={removeTag} />
+    </article>
+  );
+}