탭 컴포넌트 작업 (#27)

* feat: NavLink 컴포넌트 작성

* feat: NavLink 컴포넌트 사용

* refactor: QuizLinkTab 컴포넌트로 분리

* refactor: QuizLinkTab 제거 후 레이아웃 활용하는 방식으로 변경

* feat: 로딩 화면 작성

* style: twMerge 대신 cn으로 변경

* style: loaddingSpinner에 twMerge 대신 cn 적용

app/quizzes/[id]/layout.tsx

@@ -0,0 +1,27 @@
+import NavLink from '@/components/common/link/nav-link';
+import React from 'react';
+
+interface LayoutProps {
+  children: React.ReactNode;
+  params: {
+    id: string;
+  };
+}
+
+export default function Layout({ children, params }: LayoutProps) {
+  const quizId = Number(params.id) ?? 0;
+
+  return (
+    <section className="p-4">
+      <article className="mb-4 flex w-full">
+        <NavLink className="grow" href={`/quizzes/${quizId}`}>
+          퀴즈
+        </NavLink>
+        <NavLink className="grow" href={`/quizzes/${quizId}/questions`}>
+          질문
+        </NavLink>
+      </article>
+      {children}
+    </section>
+  );
+}

app/quizzes/[id]/loading.tsx

@@ -0,0 +1,9 @@
+import LoadingSpinner from '@/components/common/loading-spinner/loading-spinner';
+
+export default function Loading() {
+  return (
+    <section className="flex min-h-[90vh] items-center justify-center overflow-hidden">
+      <LoadingSpinner size="3xl" className="text-blue-600" />
+    </section>
+  );
+}

app/quizzes/[id]/page.tsx

@@ -22,49 +22,47 @@ export default async function Page({ params }: { params: { id: string } }) {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <div className="p-4">
-        <section className="mb-10">
-          <h2 className="text-2xl font-bold">출제자</h2>
-          {/* TODO: 추후 상세 유저 페이지 라우팅 경로로 변경하기 */}
-          <Link className="underline" href={`/users/${quiz?.users?.id}`}>
-            {quiz?.users?.name}
-          </Link>
-        </section>
+      <section className="mb-10">
+        <h2 className="text-2xl font-bold">출제자</h2>
+        {/* TODO: 추후 상세 유저 페이지 라우팅 경로로 변경하기 */}
+        <Link className="underline" href={`/users/${quiz?.users?.id}`}>
+          {quiz?.users?.name}
+        </Link>
+      </section>
 
-        <section className="mb-10">
-          <h2 className="text-2xl font-bold">문제</h2>
-          <Markdown
-            className="prose"
-            remarkPlugins={[remarkGfm]}
-            components={{
-              code({ className, children, ...rest }) {
-                const match = /language-(\w+)/.exec(className || '');
-                return match ? (
-                  <SyntaxHighlighter
-                    {...rest}
-                    PreTag="div"
-                    language={match[1]}
-                    style={dracula}
-                    ref={null}
-                  >
-                    {String(children).replace(/\n$/, '')}
-                  </SyntaxHighlighter>
-                ) : (
-                  <code {...rest} className={className}>
-                    {children}
-                  </code>
-                );
-              },
-            }}
-          >
-            {quiz?.description}
-          </Markdown>
-        </section>
+      <section className="mb-10">
+        <h2 className="text-2xl font-bold">문제</h2>
+        <Markdown
+          className="prose"
+          remarkPlugins={[remarkGfm]}
+          components={{
+            code({ className, children, ...rest }) {
+              const match = /language-(\w+)/.exec(className || '');
+              return match ? (
+                <SyntaxHighlighter
+                  {...rest}
+                  PreTag="div"
+                  language={match[1]}
+                  style={dracula}
+                  ref={null}
+                >
+                  {String(children).replace(/\n$/, '')}
+                </SyntaxHighlighter>
+              ) : (
+                <code {...rest} className={className}>
+                  {children}
+                </code>
+              );
+            },
+          }}
+        >
+          {quiz?.description}
+        </Markdown>
+      </section>
 
-        <section className="mb-10">
-          <ChoiceForm quizId={quizId} />
-        </section>
-      </div>
+      <section className="mb-10">
+        <ChoiceForm quizId={quizId} />
+      </section>
     </HydrationBoundary>
   );
 }

app/quizzes/[id]/questions/page.tsx

@@ -0,0 +1,5 @@
+export default async function Page({ params }: { params: { id: string } }) {
+  const quizId = Number(params.id) ?? 0;
+
+  return <section>{quizId}번 퀴즈에 대한 질문 페이지</section>;
+}

components/common/link/nav-link.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import Link from 'next/link';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { forwardRef, type Ref } from 'react';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/libs/utils';
+
+type NavLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
+  VariantProps<typeof navLink>;
+
+const navLink = cva(
+  ['border-b-2 border-b-neutral-300 pb-2 text-center text-neutral-300'],
+  {
+    variants: {
+      intent: {
+        primary: ['text-[#3077C6] ', 'border-b-[#3077C6]'],
+        secondary: ['text-red-600', 'border-b-red-600'],
+      },
+    },
+    defaultVariants: { intent: 'primary' },
+  }
+);
+
+export default forwardRef(function NavLink(
+  { children, className, intent, href, ...props }: NavLinkProps,
+  forwardedRef: Ref<HTMLAnchorElement>
+) {
+  const pathname = usePathname();
+  const isActive = pathname === href;
+
+  return (
+    <Link
+      ref={forwardedRef}
+      href={href ?? '#'}
+      className={cn(
+        navLink({ intent: isActive ? intent : null, className }),
+        isActive ? 'border-b-4 font-bold' : null
+      )}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+});

components/common/loading-spinner/loading-spinner.tsx

@@ -1,6 +1,6 @@
+import { cn } from '@/libs/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { forwardRef, type Ref } from 'react';
-import { twMerge } from 'tailwind-merge';
 
 type LoadingSpinnerProps = React.HTMLAttributes<HTMLElement> &
   VariantProps<typeof loadingSpinner>;
@@ -36,7 +36,7 @@ export default forwardRef(function LoadingSpinner(
   return (
     <div
       ref={forwardedRef}
-      className={twMerge(loadingSpinner({ size, weight, className }))}
+      className={cn(loadingSpinner({ size, weight, className }))}
       {...props}
     />
   );