diff --git a/apps/service/package.json b/apps/service/package.json
index 40100b00..ae6fdd34 100644
--- a/apps/service/package.json
+++ b/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:^",
diff --git a/apps/service/src/app/(service)/layout.tsx b/apps/service/src/app/(service)/layout.tsx
index 5ddf7d4b..a36359cb 100644
--- a/apps/service/src/app/(service)/layout.tsx
+++ b/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'
diff --git a/apps/service/src/app/(service)/provider.tsx b/apps/service/src/app/(service)/provider.tsx
index 5402a207..92da8dc1 100644
--- a/apps/service/src/app/(service)/provider.tsx
+++ b/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({
,
,
,
+ ,
,
]}>
{children}
diff --git a/packages/config/attraction-preset.js b/packages/config/attraction-preset.js
index 90d7db49..a54615a9 100644
--- a/packages/config/attraction-preset.js
+++ b/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,
diff --git a/packages/config/package.json b/packages/config/package.json
index 57d8ffde..a5aa455c 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -3,5 +3,8 @@
"version": "1.0.0",
"description": "",
"license": "ISC",
+ "dependencies": {
+ "@attraction/ds-core": "workspace:^"
+ },
"scripts": {}
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eef5ac5f..bf673586 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,6 +80,12 @@ importers:
'@attraction/design-system':
specifier: workspace:^
version: link:../../packages/design-system
+ '@attraction/ds-core':
+ specifier: workspace:^
+ version: link:../../packages/design-system/packages/core
+ '@attraction/ds-hooks':
+ specifier: workspace:^
+ version: link:../../packages/design-system/packages/hooks
'@attraction/icons':
specifier: workspace:^
version: link:../../packages/icons
@@ -154,7 +160,11 @@ importers:
specifier: ^5.92.0
version: 5.92.1(@swc/core@1.5.7)
- packages/config: {}
+ packages/config:
+ dependencies:
+ '@attraction/ds-core':
+ specifier: workspace:^
+ version: link:../design-system/packages/core
packages/design-system:
dependencies: