chore: ds core 패키지 적용 (#ATR-605)

apps/service/package.json

@@ -14,6 +14,8 @@
     "lint-staged": "lint-staged"
   },
   "dependencies": {
+    "@attraction/ds-core": "workspace:^",
+    "@attraction/ds-hooks": "workspace:^",
     "@attraction/design-system": "workspace:^",
     "@attraction/icons": "workspace:^",
     "@attraction/utils": "workspace:^",

apps/service/src/app/(service)/layout.tsx

@@ -3,8 +3,11 @@ import Script from 'next/script'
 import type { PropsWithChildren } from 'react'
 
 import '@/app/style/font.css'
+import '@attraction/ds-core/dist/token.css'
+import '@attraction/ds-core/dist/component.css' // TODO: 스타일 캡슐화 적용 시 제거
+import '@attraction/ds-core/dist/index.css'
+import '@attraction/design-system/dist/index.css' // TODO: 디자인 시스템 개편 시 제거
 import '@/app/style/index.css'
-import '@attraction/design-system/dist/index.css'
 
 import { useSession } from '@/entities/auth'
 import Provider from './provider'

apps/service/src/app/(service)/provider.tsx

@@ -1,14 +1,15 @@
-/* eslint-disable react/jsx-key */
+'use client'
 
+/* eslint-disable react/jsx-key */
+import { PropsWithChildren, ReactElement, cloneElement } from 'react'
+import { OverlayProvider } from '@attraction/ds-core'
 import { AuthProvider, DefaultAuthState } from '@/entities/auth'
 import { ChannelTalkProvider } from '@/entities/channel-talk'
 import { ModalProvider } from '@/entities/modal'
 import { PWAProvider } from '@/entities/pwa'
 import { ThemeProvider } from '@/entities/theme'
 import { ToastUIProvider } from '@/entities/toast-ui'
-
 import { DeviceProvider, QueryProvider } from '@/shared/lib'
-import { PropsWithChildren, ReactElement, cloneElement } from 'react'
 
 interface MultiProviderProps {
   providers: ReactElement[]
@@ -41,6 +42,7 @@ export default function Provider({
         <ThemeProvider />,
         <DeviceProvider />,
         <ModalProvider />,
+        <OverlayProvider />,
         <ToastUIProvider />,
       ]}>
       {children}

packages/config/attraction-preset.js

@@ -1,4 +1,5 @@
 import defaultTheme from 'tailwindcss/defaultTheme'
+import { $variable } from '@attraction/ds-core'
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -11,64 +12,64 @@ export default {
       },
       colors: {
         gray: {
-          50: '#F4F6F8',
-          100: '#DDE0E3',
-          200: '#C2C7CC',
-          300: '#A6ADB5',
-          400: '#8A949E',
-          500: '#6F7A86',
-          600: '#58616A',
-          700: '#3C4249',
-          800: '#202427',
-          900: '#131517',
+          50: $variable.color.gray050,
+          100: $variable.color.gray100,
+          200: $variable.color.gray200,
+          300: $variable.color.gray300,
+          400: $variable.color.gray400,
+          500: $variable.color.gray500,
+          600: $variable.color.gray600,
+          700: $variable.color.gray700,
+          800: $variable.color.gray800,
+          900: $variable.color.gray900,
         },
         red: {
-          50: '#FBE9E9',
-          100: '#F8D3D4',
-          200: '#F2B0B1',
-          300: '#EB8586',
-          400: '#E14B4D',
-          500: '#D22325',
-          600: '#A61C1E',
-          700: '#831617',
-          800: '#561C1D',
-          900: '#3B1617',
+          50: $variable.color.red050,
+          100: $variable.color.red100,
+          200: $variable.color.red200,
+          300: $variable.color.red300,
+          400: $variable.color.red400,
+          500: $variable.color.red500,
+          600: $variable.color.red600,
+          700: $variable.color.red700,
+          800: $variable.color.red800,
+          900: $variable.color.red900,
         },
         yellow: {
-          50: '#FFF5E0',
-          100: '#FFE7B8',
-          200: '#FFDA8F',
-          300: '#FFBF3D',
-          400: '#FFAB01',
-          500: '#EB9D00',
-          600: '#C28200',
-          700: '#8F6000',
-          800: '#543D0E',
-          900: '#3D2C0B',
+          50: $variable.color.yellow050,
+          100: $variable.color.yellow100,
+          200: $variable.color.yellow200,
+          300: $variable.color.yellow300,
+          400: $variable.color.yellow400,
+          500: $variable.color.yellow500,
+          600: $variable.color.yellow600,
+          700: $variable.color.yellow700,
+          800: $variable.color.yellow800,
+          900: $variable.color.yellow900,
         },
         green: {
-          50: '#E5FAF1',
-          100: '#B1F1D6',
-          200: '#75E6B6',
-          300: '#39DB97',
-          400: '#23BE7D',
-          500: '#1EA46C',
-          600: '#198A5B',
-          700: '#15704A',
-          800: '#133D2B',
-          900: '#0F2E21',
+          50: $variable.color.green050,
+          100: $variable.color.green100,
+          200: $variable.color.green200,
+          300: $variable.color.green300,
+          400: $variable.color.green400,
+          500: $variable.color.green500,
+          600: $variable.color.green600,
+          700: $variable.color.green700,
+          800: $variable.color.green800,
+          900: $variable.color.green900,
         },
         blue: {
-          50: '#E5EFFA',
-          100: '#C3DAF3',
-          200: '#99BFEB',
-          300: '#77AAE4',
-          400: '#3B84D8',
-          500: '#256BBB',
-          600: '#1D5391',
-          700: '#163F6F',
-          800: '#233851',
-          900: '#192739',
+          50: $variable.color.blue050,
+          100: $variable.color.blue100,
+          200: $variable.color.blue200,
+          300: $variable.color.blue300,
+          400: $variable.color.blue400,
+          500: $variable.color.blue500,
+          600: $variable.color.blue600,
+          700: $variable.color.blue700,
+          800: $variable.color.blue800,
+          900: $variable.color.blue900,
         },
       },
       ...defaultTheme.colors,

packages/config/package.json

@@ -3,5 +3,8 @@
   "version": "1.0.0",
   "description": "",
   "license": "ISC",
+  "dependencies": {
+    "@attraction/ds-core": "workspace:^"
+  },
   "scripts": {}
 }