[Feat/common/#71] 모노레포 공통 패키지 설정

apps/admin/package.json

@@ -17,6 +17,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^4.1.0",
+    "@repo/pointer-design-system": "workspace:*",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@tanstack/react-router": "^1.98.4",

apps/admin/src/styles/globals.css

@@ -1,132 +1,11 @@
-@import 'tailwindcss';
+@import '@repo/pointer-design-system/global-styles';
 
-/* ========================= */
-/*        FONT STYLES        */
-/* ========================= */
-@font-face {
-  font-family: 'Pretendard';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
-}
-
-/* ========================= */
-/*        THEME STYLES       */
-/* ========================= */
-@theme {
-  /* fonts */
-  --font-pretendard: Pretendard, sans-serif;
-
-  /* Black & White */
-  --color-black: #000000;
-  --color-white: #ffffff;
-
-  /* Gray Scale */
-  --color-lightgray500: #c8cad4;
-  --color-lightgray400: #dfe2e7;
-  --color-lightgray300: #edeef2;
-  --color-lightgray200: #f3f5fb;
-  --color-lightgray100: #f8f9fc;
-
-  --color-midgray200: #6b6f77;
-  --color-midgray100: #9fa4ae;
-
-  --color-darkgray200: #222224;
-  --color-darkgray100: #3e3f45;
-
-  --color-background: #f7f7f7;
-
-  /* Colors */
-  --color-green: #0fb700;
-  --color-lightgreen: #e7f6e5;
-  --color-red: #d20000;
-  --color-lightred: #fce4e4;
-  --color-blue: #3a67ee;
-  --color-lightblue: #ecf0fb;
-}
-
-/* ========================= */
-/*        BASE STYLES        */
-/* ========================= */
 @layer base {
   html {
-    font-size: 62.5%;
-    font-family: var(--font-pretendard);
-    overscroll-behavior: none;
-    background-color: var(--color-background);
     min-width: 144rem;
   }
 
   body {
-    width: 100%;
-    min-height: 100dvh;
-    font-family: var(--font-pretendard);
-    scroll-behavior: smooth;
     overflow-x: auto;
   }
-
-  p {
-    word-break: keep-all;
-    white-space: pre-line;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  button {
-    cursor: pointer;
-  }
-
-  input:disabled {
-    cursor: not-allowed;
-  }
-
-  select {
-    background: #fff;
-  }
-
-  ::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-/* ========================= */
-/*      TYPOGRAPHY STYLES    */
-/* ========================= */
-@layer components {
-  /* Bold font styles */
-  .font-bold-32 {
-    @apply font-pretendard text-[3.2rem] leading-[150%] font-bold;
-  }
-  .font-bold-24 {
-    @apply font-pretendard text-[2.4rem] leading-[150%] font-bold;
-  }
-  .font-bold-20 {
-    @apply font-pretendard text-[2.0rem] leading-[150%] font-bold;
-  }
-  .font-bold-18 {
-    @apply font-pretendard text-[1.8rem] leading-[150%] font-bold;
-  }
-  .font-bold-14 {
-    @apply font-pretendard text-[1.4rem] leading-[150%] font-bold;
-  }
-
-  /* Medium font styles */
-  .font-medium-24 {
-    @apply font-pretendard text-[2.4rem] leading-[150%] font-medium;
-  }
-  .font-medium-18 {
-    @apply font-pretendard text-[1.8rem] leading-[150%] font-medium;
-  }
-  .font-medium-16 {
-    @apply font-pretendard text-[1.6rem] leading-[150%] font-medium;
-  }
-  .font-medium-14 {
-    @apply font-pretendard text-[1.4rem] leading-[150%] font-medium;
-  }
-  .font-medium-12 {
-    @apply font-pretendard text-[1.2rem] leading-[150%] font-medium;
-  }
 }

apps/service/eslint.config.mjs

@@ -11,7 +11,7 @@ const compat = new FlatCompat({
 });
 
 /** @type {import("eslint").FlatConfig[]} */
-export default [
+const config = [
   ...baseConfig,
   ...compat.extends('next/core-web-vitals'),
   {
@@ -21,3 +21,5 @@ export default [
     },
   },
 ];
+
+export default config;

apps/service/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@next/third-parties": "^15.2.4",
+    "@repo/pointer-design-system": "workspace:*",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "dayjs": "^1.11.13",

apps/service/src/styles/globals.css

@@ -1,146 +1,19 @@
-@import 'tailwindcss';
+@import '@repo/pointer-design-system/global-styles';
 
-/* ========================= */
-/*        FONT STYLES        */
-/* ========================= */
-@font-face {
-  font-family: 'Pretendard';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
-}
-
-/* ========================= */
-/*        THEME STYLES       */
-/* ========================= */
 @theme {
   /* breakpoints */
   --breakpoint-sm: 431px;
   --breakpoint-md: 769px;
   --breakpoint-lg: 1367px;
-
-  /* fonts */
-  --font-pretendard: Pretendard, sans-serif;
-
-  /* Black & White */
-  --color-black: #000000;
-  --color-white: #ffffff;
-
-  /* Gray Scale */
-  --color-lightgray500: #c6cad4;
-  --color-lightgray400: #dfe2e7;
-  --color-lightgray300: #edeef2;
-  --color-lightgray200: #f3f5fb;
-  --color-lightgray100: #f8f9fc;
-
-  --color-midgray200: #6b6f77;
-  --color-midgray100: #9fa4ae;
-
-  --color-darkgray200: #222224;
-  --color-darkgray100: #3e3f45;
-
-  --color-background: #f7f7f7;
-
-  /* Colors */
-  --color-main: #617af9;
-  --color-sub1: #c5ceff;
-  --color-sub2: #e9ebf8;
-  --color-green: #0fb700;
-  --color-lightgreen: #e7f6e5;
-  --color-red: #d20000;
-  --color-lightred: #fce4e4;
-  --color-blue: #3a67ee;
-  --color-lightblue: #ecf0fb;
-  --color-yellow: #e59c00;
-  --color-lightyellow: #fff4cc;
 }
 
-/* ========================= */
-/*        BASE STYLES        */
-/* ========================= */
 @layer base {
   html {
-    font-size: 62.5%;
-    font-family: var(--font-pretendard);
-    overscroll-behavior: none;
-    background-color: var(--color-background);
     min-width: 375px;
   }
 
   body {
-    width: 100%;
-    min-height: 100dvh;
-    font-family: var(--font-pretendard);
-    scroll-behavior: smooth;
     max-width: 768px;
     margin: 0 auto;
   }
-
-  p {
-    word-break: keep-all;
-    white-space: pre-line;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  button {
-    cursor: pointer;
-  }
-
-  input:disabled {
-    cursor: not-allowed;
-  }
-
-  select {
-    background: #fff;
-  }
-
-  ::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-/* ========================= */
-/*      TYPOGRAPHY STYLES    */
-/* ========================= */
-@layer components {
-  /* Bold font styles */
-  .font-bold-32 {
-    @apply font-pretendard text-[3.2rem] leading-[150%] font-bold;
-  }
-  .font-bold-24 {
-    @apply font-pretendard text-[2.4rem] leading-[150%] font-bold;
-  }
-  .font-bold-20 {
-    @apply font-pretendard text-[2.0rem] leading-[150%] font-bold;
-  }
-  .font-bold-18 {
-    @apply font-pretendard text-[1.8rem] leading-[150%] font-bold;
-  }
-  .font-bold-16 {
-    @apply font-pretendard text-[1.6rem] leading-[150%] font-bold;
-  }
-  .font-bold-14 {
-    @apply font-pretendard text-[1.4rem] leading-[150%] font-bold;
-  }
-
-  /* Medium font styles */
-  .font-medium-24 {
-    @apply font-pretendard text-[2.4rem] leading-[150%] font-medium;
-  }
-  .font-medium-18 {
-    @apply font-pretendard text-[1.8rem] leading-[150%] font-medium;
-  }
-  .font-medium-16 {
-    @apply font-pretendard text-[1.6rem] leading-[150%] font-medium;
-  }
-  .font-medium-14 {
-    @apply font-pretendard text-[1.4rem] leading-[150%] font-medium;
-  }
-  .font-medium-12 {
-    @apply font-pretendard text-[1.2rem] leading-[150%] font-medium;
-  }
 }

packages/ui/package.json → packages/pointer-design-system/package.json

@@ -1,11 +1,10 @@
 {
-  "name": "@repo/ui",
-  "version": "0.0.0",
-  "private": true,
+  "name": "@repo/pointer-design-system",
+  "version": "1.0.0",
+  "main": "index.js",
   "exports": {
-    "./button": "./src/button.tsx",
-    "./card": "./src/card.tsx",
-    "./code": "./src/code.tsx"
+    "./components": "./src/components/index.ts",
+    "./global-styles": "./src/styles/globals.css"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
@@ -16,9 +15,9 @@
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@turbo/gen": "^1.12.4",
-    "@types/node": "^20.11.24",
-    "@types/react": "18.3.0",
-    "@types/react-dom": "18.3.1",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "typescript": "5.5.4"
   },
   "dependencies": {

packages/pointer-design-system/src/components/Divider.tsx

@@ -0,0 +1,5 @@
+const Divider = () => {
+  return <div className='bg-lightgray300 h-[2px] w-full' />;
+};
+
+export default Divider;

packages/pointer-design-system/src/components/PortalModal.tsx

@@ -0,0 +1,42 @@
+'use client';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+interface PortalModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const portalElement =
+  typeof window !== 'undefined' && (document.getElementById('modal') as HTMLElement);
+
+const PortalModal = ({ isOpen, onClose, children = null }: PortalModalProps) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  if (!isOpen || !portalElement) return null;
+
+  return createPortal(
+    <div className='fixed inset-0 z-50 flex items-center justify-center' onClick={onClose}>
+      <div className='h-full w-full bg-black opacity-50' />
+      <div
+        className='absolute top-[50%] left-[50%] max-w-[768px] translate-x-[-50%] translate-y-[-50%] transform overflow-auto rounded-[16px] bg-white shadow-lg'
+        onClick={(e) => e.stopPropagation()}>
+        {children}
+      </div>
+    </div>,
+    portalElement
+  );
+};
+
+export default PortalModal;