feat: integrate ProgressProvider and QueryClientProvider in layout, update header styles, and add new dependencies

ohprettyhak · ohprettyhak · commit 8241a11464de · 2025-08-05T00:14:27.000+09:00
diff --git a/apps/spectator/package.json b/apps/spectator/package.json
@@ -16,6 +16,8 @@
     ]
   },
   "dependencies": {
+    "@bprogress/next": "^3.2.12",
+    "@hcc/api-base": "workspace:*",
     "@hcc/icons": "workspace:*",
     "next": "^15.4.5",
     "react": "^19.1.1",
diff --git a/apps/spectator/src/app/layout.tsx b/apps/spectator/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import type { PropsWithChildren } from 'react';
 import { Layout } from '~/components/layout';
 import { Pretendard } from './_fonts';
+import { Provider } from './provider';
 import '~/styles/globals.css';
 
 export const metadata: Metadata = {
@@ -13,7 +14,9 @@ const RootLayout = ({ children }: PropsWithChildren) => {
   return (
     <html lang="ko">
       <body className={Pretendard.className}>
-        <Layout>{children}</Layout>
+        <Provider>
+          <Layout>{children}</Layout>
+        </Provider>
       </body>
     </html>
   );
diff --git a/apps/spectator/src/app/provider.tsx b/apps/spectator/src/app/provider.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { ProgressProvider } from '@bprogress/next/app';
+import { QueryClientProvider } from '@hcc/api-base';
+import type { PropsWithChildren } from 'react';
+
+export const Provider = ({ children }: PropsWithChildren) => {
+  return (
+    <QueryClientProvider>
+      <ProgressProvider
+        color="var(--color-primary-500)"
+        options={{ showSpinner: false }}
+        shallowRouting={false}
+      >
+        {children}
+      </ProgressProvider>
+    </QueryClientProvider>
+  );
+};
diff --git a/apps/spectator/src/components/layout/header.tsx b/apps/spectator/src/components/layout/header.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 
 export const Header = () => {
   return (
-    <header className="center sticky top-0 z-header h-[44px] w-full border-neutral-50 border-b">
+    <header className="center sticky top-0 z-header h-[44px] w-full border-neutral-100 border-b">
       <Link href="/">
         <HCCLogo width="71.5" height="21" className="text-primary-500" />
       </Link>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,8 @@`
`16`	`16`	`]`
`17`	`17`	`},`
`18`	`18`	`"dependencies": {`
	`19`	`+ "@bprogress/next": "^3.2.12",`
	`20`	`+ "@hcc/api-base": "workspace:*",`
`19`	`21`	`"@hcc/icons": "workspace:*",`
`20`	`22`	`"next": "^15.4.5",`
`21`	`23`	`"react": "^19.1.1",`