feat: add initial project setup with Tailwind CSS, Next.js, and custom components

ohprettyhak · ohprettyhak · commit 2d96f32c7712 · 2025-08-08T18:09:31.000+09:00
diff --git a/apps/manager/.gitignore b/apps/manager/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/apps/manager/README.md b/apps/manager/README.md
@@ -0,0 +1 @@
+## `@hcc/manager`
diff --git a/apps/manager/next.config.ts b/apps/manager/next.config.ts
@@ -0,0 +1,31 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  images: {
+    formats: ['image/avif', 'image/webp'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'hufscheer-server.s3.ap-northeast-2.amazonaws.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'hufscheer-images.s3.ap-northeast-2.amazonaws.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'images.hufscheer.com',
+      },
+    ],
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'https://api.hufscheer.com/:path*',
+      },
+    ];
+  },
+};
+
+export default nextConfig;
diff --git a/apps/manager/package.json b/apps/manager/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "manager",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack --port 11113 --hostname 0.0.0.0",
+    "build": "next build",
+    "start": "next start",
+    "lint": "biome lint .",
+    "format": "biome format --write ."
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "biome lint --fix",
+      "biome format --write"
+    ]
+  },
+  "dependencies": {
+    "@bprogress/next": "^3.2.12",
+    "@hcc/api-base": "workspace:*",
+    "@hcc/icons": "workspace:*",
+    "@vercel/analytics": "^1.5.0",
+    "next": "^15.4.6",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@hcc/typescript-config": "workspace:*",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@types/node": "^22.17.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.9.2"
+  }
+}
diff --git a/apps/manager/postcss.config.mjs b/apps/manager/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;
diff --git a/apps/manager/src/app/_fonts/PretendardVariable.woff2 b/apps/manager/src/app/_fonts/PretendardVariable.woff2
diff --git a/apps/manager/src/app/_fonts/index.tsx b/apps/manager/src/app/_fonts/index.tsx
@@ -0,0 +1,8 @@
+import localFont from 'next/font/local';
+
+export const Pretendard = localFont({
+  src: './PretendardVariable.woff2',
+  display: 'swap',
+  weight: '45 920',
+  preload: true,
+});
diff --git a/apps/manager/src/app/apple-icon.png b/apps/manager/src/app/apple-icon.png
diff --git a/apps/manager/src/app/favicon.ico b/apps/manager/src/app/favicon.ico
diff --git a/apps/manager/src/app/icon.png b/apps/manager/src/app/icon.png
diff --git a/apps/manager/src/app/layout.tsx b/apps/manager/src/app/layout.tsx
@@ -0,0 +1,27 @@
+import { Analytics } from '@vercel/analytics/next';
+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 = {
+  title: '훕치치 매니저',
+  description: '한국외대 스포츠 플랫폼 훕치치 매니저 페이지',
+};
+
+const RootLayout = ({ children }: PropsWithChildren) => {
+  return (
+    <html lang="ko">
+      <body className={Pretendard.className}>
+        <Provider>
+          <Layout>{children}</Layout>
+        </Provider>
+        <Analytics />
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;
diff --git a/apps/manager/src/app/page.tsx b/apps/manager/src/app/page.tsx
@@ -0,0 +1,5 @@
+const Page = () => {
+  return <div>Home</div>;
+};
+
+export default Page;
diff --git a/apps/manager/src/app/provider.tsx b/apps/manager/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/manager/src/components/layout/header.tsx b/apps/manager/src/components/layout/header.tsx
@@ -0,0 +1,13 @@
+import { HCCLogo } from '@hcc/icons';
+import Link from 'next/link';
+import { ROUTES } from '~/constants/routes';
+
+export const Header = () => {
+  return (
+    <header className="sticky top-0 z-header row-between h-12 w-full border-neutral-100 border-b px-5">
+      <Link href={ROUTES.HOME}>
+        <HCCLogo width="71.5" height="21" className="text-primary-500" />
+      </Link>
+    </header>
+  );
+};
diff --git a/apps/manager/src/components/layout/index.ts b/apps/manager/src/components/layout/index.ts
@@ -0,0 +1 @@
+export * from './root';
diff --git a/apps/manager/src/components/layout/root.tsx b/apps/manager/src/components/layout/root.tsx
@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from 'react';
+import { Header } from './header';
+
+export const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="column-center-x mx-auto w-full max-w-[var(--app-max-width)] flex-1 bg-white">
+      <Header />
+      <main className="column-center-y w-full">{children}</main>
+    </div>
+  );
+};
diff --git a/apps/manager/src/constants/routes.ts b/apps/manager/src/constants/routes.ts
@@ -0,0 +1,3 @@
+export const ROUTES = {
+  HOME: '/',
+};
diff --git a/apps/manager/src/styles/globals.css b/apps/manager/src/styles/globals.css
@@ -0,0 +1,38 @@
+@import "tailwindcss";
+@import "./utilities.css";
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+
+  --z-index-header: 10;
+  --z-index-above: 1;
+
+  --app-max-width: 560px;
+
+  --color-primary-100: #F2F8FF;
+  --color-primary-500: #007AFF;
+}
+
+@layer base {
+  html, body {
+    height: 100%;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    padding-bottom: env(safe-area-inset-bottom);
+    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-size-adjust: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    scrollbar-gutter: stable;
+    background-color: var(--color-neutral-50);
+  }
+}
diff --git a/apps/manager/src/styles/utilities.css b/apps/manager/src/styles/utilities.css
@@ -0,0 +1,37 @@
+@layer utilities {
+  .center {
+    @apply flex items-center justify-center;
+  }
+
+  .center-x {
+    @apply flex justify-center;
+  }
+
+  .center-y {
+    @apply flex items-center;
+  }
+
+  .row-between {
+    @apply flex items-center justify-between;
+  }
+
+  .column {
+    @apply flex flex-col;
+  }
+
+  .column-center {
+    @apply flex flex-col items-center justify-center;
+  }
+
+  .column-center-x {
+    @apply flex flex-col items-center;
+  }
+
+  .column-center-y {
+    @apply flex flex-col justify-center;
+  }
+
+  .column-between {
+    @apply flex flex-col items-center justify-between;
+  }
+}
diff --git a/apps/manager/tsconfig.json b/apps/manager/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "@hcc/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "plugins": [{ "name": "next" }],
+    "baseUrl": ".",
+    "paths": { "~/*": ["src/*"] }
+  },
+  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.ts", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/spectator/package.json b/apps/spectator/package.json
@@ -20,7 +20,7 @@
     "@hcc/api-base": "workspace:*",
     "@hcc/icons": "workspace:*",
     "@vercel/analytics": "^1.5.0",
-    "next": "^15.4.5",
+    "next": "^15.4.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
diff --git a/biome.json b/biome.json
@@ -1,8 +1,8 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.1.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.1.4/schema.json",
   "files": {
     "ignoreUnknown": false,
-    "includes": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "**/*.json"],
+    "includes": ["**/*.ts", "**/*.tsx", "**/*.json"],
     "experimentalScannerIgnores": [
       "node_modules/**",
       "dist/**",
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     ]
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.1.3",
+    "@biomejs/biome": "^2.1.4",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "husky": "^9.1.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
