feat: implement icon library with layout and global styles

ohprettyhak · ohprettyhak · commit d594f086da34 · 2025-08-04T02:11:58.000+09:00
diff --git a/.prettierignore b/.prettierignore
diff --git a/.prettierrc b/.prettierrc
diff --git a/apps/spectator/src/app/layout.tsx b/apps/spectator/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import type { PropsWithChildren } from 'react';
+import { Layout } from '~/components/layout';
 import { Pretendard } from './_fonts';
 import '~/styles/globals.css';
 
@@ -11,7 +12,9 @@ export const metadata: Metadata = {
 const RootLayout = ({ children }: PropsWithChildren) => {
   return (
     <html lang="ko">
-      <body className={Pretendard.className}>{children}</body>
+      <body className={Pretendard.className}>
+        <Layout>{children}</Layout>
+      </body>
     </html>
   );
 };
diff --git a/apps/spectator/src/components/layout/header.tsx b/apps/spectator/src/components/layout/header.tsx
@@ -0,0 +1,3 @@
+export const Header = () => {
+  return <header>header</header>;
+};
diff --git a/apps/spectator/src/components/layout/index.ts b/apps/spectator/src/components/layout/index.ts
@@ -0,0 +1 @@
+export * from './root';
diff --git a/apps/spectator/src/components/layout/root.tsx b/apps/spectator/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/spectator/src/styles/globals.css b/apps/spectator/src/styles/globals.css
@@ -1,2 +1,35 @@
 @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;
+}
+
+@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/biome.json b/biome.json
@@ -6,6 +6,9 @@
     "experimentalScannerIgnores": [
       "node_modules/**",
       "dist/**",
+      "lib/**",
+      "**/lib/**",
+      "**/dist/**",
       ".turbo/**",
       ".next/**",
       "pnpm-lock.yaml"
diff --git a/packages/config-typescript/base.json b/packages/config-typescript/base.json
diff --git a/packages/config-typescript/nextjs.json b/packages/config-typescript/nextjs.json
diff --git a/packages/config-typescript/package.json b/packages/config-typescript/package.json
diff --git a/packages/config-typescript/react-library.json b/packages/config-typescript/react-library.json
diff --git a/packages/icons/README.md b/packages/icons/README.md
@@ -0,0 +1 @@
+## `@hcc/icons`
diff --git a/packages/icons/build.js b/packages/icons/build.js
@@ -0,0 +1,38 @@
+import esbuild from 'esbuild';
+import pkg from './package.json' with { type: 'json' };
+
+const sharedConfig = {
+  entryPoints: ['./src/index.ts'],
+  bundle: true,
+  write: true,
+  treeShaking: true,
+  minify: true,
+  sourcemap: false,
+  target: ['es2020'],
+  external: [
+    'react',
+    'react-dom',
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+  ],
+  jsx: 'automatic',
+  jsxImportSource: 'react',
+};
+
+esbuild
+  .build({
+    ...sharedConfig,
+    outfile: './dist/index.js',
+    format: 'esm',
+    platform: 'neutral',
+  })
+  .catch(() => process.exit(1));
+
+esbuild
+  .build({
+    ...sharedConfig,
+    outfile: './dist/index.cjs',
+    format: 'cjs',
+    platform: 'neutral',
+  })
+  .catch(() => process.exit(1));
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@hcc/icons",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "rm -rf dist && node build.js && tsc",
+    "dev": "node build.js --watch",
+    "start": "next start",
+    "lint": "biome lint .",
+    "format": "biome format --write ."
+  },
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@hcc/typescript-config": "workspace:*",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "esbuild": "^0.25.8",
+    "typescript": "^5.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/icons/src/child.tsx b/packages/icons/src/child.tsx
@@ -0,0 +1,14 @@
+import { Children, cloneElement, isValidElement, type ReactNode } from 'react';
+
+type ChildProps = {
+  children: ReactNode;
+  [key: string]: unknown;
+};
+
+const Child = ({ children, ...props }: ChildProps) => {
+  const child: React.ReactNode = Children.only(children);
+
+  return isValidElement(child) ? cloneElement(child, props) : null;
+};
+
+export default Child;
diff --git a/packages/icons/src/components/brand/HCCLogo.tsx b/packages/icons/src/components/brand/HCCLogo.tsx
@@ -0,0 +1,15 @@
+import Icon from '../../icon';
+import type { IconProps } from '../../types';
+
+export const HCCLogo = (props: IconProps) => (
+  <Icon {...props}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="73" height="22" fill="none" aria-hidden="true">
+      <path
+        d="M65.078 2.489a1 1 0 0 1 .844-.988l5.11-.808a1 1 0 0 1 1.156 1.038l-.961 18.819a1 1 0 0 1-.999.949h-4.15a1 1 0 0 1-1-1V2.489zm-15.091 18.04a.995.995 0 0 1-.96-1c.03-3.985.263-6.513.883-8.474a.41.41 0 0 0-.384-.537.395.395 0 0 1-.395-.395V7.451a1 1 0 0 1 1-1h12.962a1 1 0 0 1 1 1v2.067a1 1 0 0 1-1 1h-6.757a.62.62 0 0 0-.588.416c-.153.448.252.87.719.79a15.74 15.74 0 0 1 2.639-.243c3.81 0 5.094 1.499 5.094 5.073v2.975a1 1 0 0 1-.963 1l-3.78.14a1 1 0 0 1-1.036-1v-2.473c0-1.006-.364-1.305-1.37-1.305a7.7 7.7 0 0 0-1.44.16.945.945 0 0 0-.754.9 90.35 90.35 0 0 0-.05 2.718 1.005 1.005 0 0 1-1.04 1l-3.78-.14zm1.321-14.934a1 1 0 0 1-1-1V2.55a1 1 0 0 1 .913-.996L62.094.6a1 1 0 0 1 1.085 1.058l-.184 2.997a1 1 0 0 1-.998.939H51.308zM41.21 2.859a1 1 0 0 1 .848-.989l4.516-.69a1 1 0 0 1 1.15 1.01l-.393 18.33a1 1 0 0 1-1 .979h-4.122a1 1 0 0 1-1-1V2.859zm-15.092 17.67a.995.995 0 0 1-.96-1c.031-3.985.263-6.513.883-8.474a.41.41 0 0 0-.384-.537.395.395 0 0 1-.395-.395V7.451a1 1 0 0 1 1-1h12.963a1 1 0 0 1 1 1v2.067a1 1 0 0 1-1 1h-6.758a.619.619 0 0 0-.588.416c-.153.448.253.87.72.79a15.742 15.742 0 0 1 2.638-.243c3.81 0 5.095 1.499 5.095 5.073v2.975a1 1 0 0 1-.963 1l-3.78.14a1 1 0 0 1-1.037-1v-2.473c0-1.006-.364-1.305-1.37-1.305a7.7 7.7 0 0 0-1.439.16.945.945 0 0 0-.755.9c-.03.818-.045 1.72-.05 2.718a1.005 1.005 0 0 1-1.04 1l-3.78-.14zM27.44 5.595a1 1 0 0 1-1-1V2.586a1 1 0 0 1 .95-.998l10.768-.534a1 1 0 0 1 1.049 1.038l-.1 2.542a1 1 0 0 1-1 .96H27.44zM1.67 15.993a1 1 0 0 1 1-1h4.673c.177 0 .32.144.32.322 0 .177.145.32.322.32h8.862a.321.321 0 0 0 .32-.32c0-.178.145-.322.322-.322h4.672a1 1 0 0 1 1 1v4.508a1 1 0 0 1-1 1H2.671a1 1 0 0 1-1-1v-4.508zm.08-1.535a1 1 0 0 1-1-1v-.89a1 1 0 0 1 1-1h21.332a1 1 0 0 1 1 1v.89a1 1 0 0 1-1 1H15.68a.375.375 0 0 0-.374.375.375.375 0 0 1-.375.374h-5.03a.375.375 0 0 1-.375-.374.375.375 0 0 0-.374-.375H1.75zM1.577 7.31a.438.438 0 0 1-.438-.441l.01-1.328a1 1 0 0 1 1-.992H22.71a1 1 0 0 1 1 1.007l-.01 1.296a.461.461 0 0 1-.461.458h-.051c-.274 0-.476.26-.476.535 0 2.483-3.061 3.296-10.296 3.296-5.708 0-8.819-.51-9.875-1.94-.355-.481.125-1.035.722-1.035h5.622c.099 0 .197.016.292.04.47.122 1.129.174 3.26.174 2.655 0 3.853-.128 3.853-.535 0-.407-1.198-.535-3.853-.535-1.393 0-2.375.08-2.937.283-.365.13-.757.344-1.144.32L2.23 7.528c-.05-.004-.089-.043-.08-.091.012-.064-.032-.129-.096-.129h-.477zm2.035-3.254a1 1 0 0 1-.99-.863L2.41 1.666A1 1 0 0 1 3.426.529l17.797.445a1 1 0 0 1 .974 1.052l-.057 1.081a1 1 0 0 1-.998.948H3.612zm4.052 14.46c0 .23.187.417.417.417h8.67a.417.417 0 0 0 0-.835H8.08a.417.417 0 0 0-.417.418z"
+        fill="currentColor"
+      />
+    </svg>
+  </Icon>
+);
+
+HCCLogo.displayName = 'HCCLogo';
diff --git a/packages/icons/src/components/brand/index.ts b/packages/icons/src/components/brand/index.ts
@@ -0,0 +1 @@
+export * from './HCCLogo';
diff --git a/packages/icons/src/icon.tsx b/packages/icons/src/icon.tsx
@@ -0,0 +1,17 @@
+import { cloneElement } from 'react';
+
+import Child from './child';
+import type { IconProps } from './types';
+
+const DEFAULT_ICON_SIZE = 16;
+
+const Icon = ({ children, width, height, size = DEFAULT_ICON_SIZE, ...props }: IconProps) => {
+  return cloneElement(<Child>{children}</Child>, {
+    width: width ?? size,
+    height: height ?? size,
+    'aria-hidden': true,
+    ...props,
+  });
+};
+
+export default Icon;
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
@@ -0,0 +1 @@
+export * from './components/brand';
diff --git a/packages/icons/src/types.ts b/packages/icons/src/types.ts
@@ -0,0 +1,7 @@
+import type { SVGAttributes } from 'react';
+
+export type IconProps = {
+  size?: number | string;
+  width?: number | string;
+  height?: number | string;
+} & SVGAttributes<SVGElement>;
diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "@hcc/typescript-config/react-library.json",
+  "compilerOptions": {
+    "strict": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "sourceMap": false
+  }
+}
diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -0,0 +1 @@
+## `@hcc/ui`
diff --git a/packages/ui/build.js b/packages/ui/build.js
@@ -0,0 +1,38 @@
+import esbuild from 'esbuild';
+import pkg from './package.json' with { type: 'json' };
+
+const sharedConfig = {
+  entryPoints: ['./src/index.ts'],
+  bundle: true,
+  write: true,
+  treeShaking: true,
+  minify: true,
+  sourcemap: false,
+  target: ['es2020'],
+  external: [
+    'react',
+    'react-dom',
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+  ],
+  jsx: 'automatic',
+  jsxImportSource: 'react',
+};
+
+esbuild
+  .build({
+    ...sharedConfig,
+    outfile: './lib/index.js',
+    format: 'esm',
+    platform: 'neutral',
+  })
+  .catch(() => process.exit(1));
+
+esbuild
+  .build({
+    ...sharedConfig,
+    outfile: './lib/index.cjs',
+    format: 'cjs',
+    platform: 'neutral',
+  })
+  .catch(() => process.exit(1));
diff --git a/packages/ui/lib/index.cjs b/packages/ui/lib/index.cjs
@@ -0,0 +1 @@
+"use strict";
diff --git a/packages/ui/lib/index.js b/packages/ui/lib/index.js
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@hcc/ui",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "rm -rf lib && node build.js && tsc",
+    "dev": "node build.js --watch"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    }
+  },
+  "files": [
+    "lib"
+  ],
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@hcc/typescript-config": "workspace:*",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "esbuild": "^0.25.8",
+    "typescript": "^5.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/ui/src/index.d.ts b/packages/ui/src/index.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/packages/ui/src/index.js b/packages/ui/src/index.js
@@ -0,0 +1 @@
+export {};
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "@hcc/typescript-config/react-library.json"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tooling/typescript-config/react-library.json b/tooling/typescript-config/react-library.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const Header = () => {`
	`2`	`+ return <header>header</header>;`
	`3`	`+};`