diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css index 4d750b87..12fa3eac 100644 --- a/apps/web/app/globals.css +++ b/apps/web/app/globals.css @@ -62,7 +62,7 @@ body { body { color: rgb(var(--foreground-rgb)); - background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); + /* background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); */ } a { diff --git a/packages/core/sds/src/components/ProgressIndicator/index.tsx b/packages/core/sds/src/components/ProgressIndicator/index.tsx new file mode 100644 index 00000000..9125396a --- /dev/null +++ b/packages/core/sds/src/components/ProgressIndicator/index.tsx @@ -0,0 +1,44 @@ +import { HTMLAttributes, PropsWithChildren, forwardRef } from 'react'; + +import { progressIndicatorCss, stepCss } from './styles'; + +export interface ProgressIndicatorProps extends Omit, 'style'> { + mode?: 'horizontal' | 'vertical'; + totalStep: number; + currentStep: number; +} + +export const ProgressIndicator = forwardRef>( + ({ mode = 'horizontal', totalStep, currentStep, children, ...rest }, ref) => { + const flexDirection = mode === 'horizontal' ? 'row' : 'column'; + const currentStepIndex = Math.min(totalStep, currentStep) - 1; + const basis = 100 / totalStep; + + return ( +
+ {Array.from({ length: totalStep }).map((_, index) => ( + + ))} + {children} +
+ ); + }, +) as React.ForwardRefExoticComponent & { Step: typeof Step }; + +export interface StepProps extends HTMLAttributes { + basis: number; + isCurrent: boolean; +} + +const Step = ({ isCurrent, basis, ...rest }: StepProps) => { + let color = '#E1E1E1'; + + if (isCurrent) { + color = '#FF7664'; + } + + return ; +}; + +ProgressIndicator.displayName = 'ProgressIndicator'; +ProgressIndicator.Step = Step; diff --git a/packages/core/sds/src/components/ProgressIndicator/styles.ts b/packages/core/sds/src/components/ProgressIndicator/styles.ts new file mode 100644 index 00000000..42b7957f --- /dev/null +++ b/packages/core/sds/src/components/ProgressIndicator/styles.ts @@ -0,0 +1,16 @@ +import { css } from '@emotion/react'; + +import { ProgressIndicatorCssArgs, StepCssArgs } from './type'; + +export const progressIndicatorCss = ({ flexDirection }: ProgressIndicatorCssArgs) => + css({ width: '100%', display: 'flex', flexWrap: 'nowrap', flexDirection }); + +export const stepCss = ({ basis, color }: StepCssArgs) => + css({ + boxSizing: 'border-box', + flex: `${basis}% 1 1`, + height: '4px', + backgroundColor: color, + borderRadius: '8px', + margin: '2px', + }); diff --git a/packages/core/sds/src/components/ProgressIndicator/type.ts b/packages/core/sds/src/components/ProgressIndicator/type.ts new file mode 100644 index 00000000..3c610f8b --- /dev/null +++ b/packages/core/sds/src/components/ProgressIndicator/type.ts @@ -0,0 +1,8 @@ +export type ProgressIndicatorCssArgs = { + flexDirection: 'row' | 'column'; +}; + +export type StepCssArgs = { + color: string; + basis: number; +}; diff --git a/packages/core/sds/src/index.ts b/packages/core/sds/src/index.ts index bdff5118..b2d03304 100644 --- a/packages/core/sds/src/index.ts +++ b/packages/core/sds/src/index.ts @@ -1,3 +1,4 @@ export { Button } from './components/Button'; export { Card } from './components/Card'; export { Code } from './components/Code'; +export { ProgressIndicator } from './components/ProgressIndicator'; diff --git a/packages/web-domains/src/first-domain/features/containers/FirstFeatureOfFirstDomainTestContainer.tsx b/packages/web-domains/src/first-domain/features/containers/FirstFeatureOfFirstDomainTestContainer.tsx index 4642b622..75a2025e 100644 --- a/packages/web-domains/src/first-domain/features/containers/FirstFeatureOfFirstDomainTestContainer.tsx +++ b/packages/web-domains/src/first-domain/features/containers/FirstFeatureOfFirstDomainTestContainer.tsx @@ -1,20 +1,11 @@ 'use client'; -import { FirstFeatureOfFirstDomainBox } from '../components/FirstFeatureOfFirstDomainTestBox'; -import { FirstFeatureOfFirstDomainTestButton } from '../components/FirstFeatureOfFirstDomainTestButton'; -import { useFirstFeatureOfFirstDomainService } from '../services/useFirstFeatureOfFirstDomainTestService'; +import { ProgressIndicator } from '@sambad/sds'; export const FirstFeatureOfFirstDomainTestContainer = () => { - const { displayText, handleChangeDisplayText, data } = useFirstFeatureOfFirstDomainService(); - return ( - - { - alert('Button is Clicked at Container'); - }} - /> -
{data}
- +
+ +
); }; diff --git a/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx b/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx index a0202cfb..6311d317 100644 --- a/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx +++ b/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx @@ -8,7 +8,6 @@ export const FirstDomainExampleScreen = async () => { return (
-

도메인 화면을 전체 담당 하는 컴포넌트입니다.

 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ff35125d..cdf9b408 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -147,9 +147,6 @@ importers: axios: specifier: ^1.7.2 version: 1.7.2 - qs: - specifier: ^6.12.3 - version: 6.12.3 devDependencies: '@sambad/eslint-config': specifier: workspace:* @@ -2022,6 +2019,7 @@ packages: function-bind: 1.1.2 get-intrinsic: 1.2.4 set-function-length: 1.2.2 + dev: true /callsites@3.1.0: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} @@ -2475,6 +2473,7 @@ packages: es-define-property: 1.0.0 es-errors: 1.3.0 gopd: 1.0.1 + dev: true /define-properties@1.2.1: resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==} @@ -2651,10 +2650,12 @@ packages: engines: {node: '>= 0.4'} dependencies: get-intrinsic: 1.2.4 + dev: true /es-errors@1.3.0: resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==} engines: {node: '>= 0.4'} + dev: true /es-get-iterator@1.1.3: resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==} @@ -3518,6 +3519,7 @@ packages: has-proto: 1.0.3 has-symbols: 1.0.3 hasown: 2.0.2 + dev: true /get-stdin@9.0.0: resolution: {integrity: sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==} @@ -3665,6 +3667,7 @@ packages: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} dependencies: get-intrinsic: 1.2.4 + dev: true /graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} @@ -3716,14 +3719,17 @@ packages: resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==} dependencies: es-define-property: 1.0.0 + dev: true /has-proto@1.0.3: resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==} engines: {node: '>= 0.4'} + dev: true /has-symbols@1.0.3: resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==} engines: {node: '>= 0.4'} + dev: true /has-tostringtag@1.0.2: resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==} @@ -4538,6 +4544,7 @@ packages: /object-inspect@1.13.1: resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==} + dev: true /object-is@1.1.6: resolution: {integrity: sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==} @@ -4884,13 +4891,6 @@ packages: engines: {node: '>=6'} dev: true - /qs@6.12.3: - resolution: {integrity: sha512-AWJm14H1vVaO/iNZ4/hO+HyaTehuy9nRqVdkTqlJt0HWvBiBIEXFmb4C0DGeYo3Xes9rrEW+TxHsaigCbN5ICQ==} - engines: {node: '>=0.6'} - dependencies: - side-channel: 1.0.6 - dev: false - /queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true @@ -5155,6 +5155,7 @@ packages: get-intrinsic: 1.2.4 gopd: 1.0.1 has-property-descriptors: 1.0.2 + dev: true /set-function-name@2.0.2: resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==} @@ -5186,6 +5187,7 @@ packages: es-errors: 1.3.0 get-intrinsic: 1.2.4 object-inspect: 1.13.1 + dev: true /signal-exit@3.0.7: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}