feat: ProgressIndicator 컴포넌트

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 {

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<HTMLAttributes<HTMLDivElement>, 'style'> {
+  mode?: 'horizontal' | 'vertical';
+  totalStep: number;
+  currentStep: number;
+}
+
+export const ProgressIndicator = forwardRef<HTMLDivElement, PropsWithChildren<ProgressIndicatorProps>>(
+  ({ 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 (
+      <div ref={ref} {...rest} css={progressIndicatorCss({ flexDirection })}>
+        {Array.from({ length: totalStep }).map((_, index) => (
+          <ProgressIndicator.Step key={index} isCurrent={index === currentStepIndex} basis={basis} />
+        ))}
+        {children}
+      </div>
+    );
+  },
+) as React.ForwardRefExoticComponent<ProgressIndicatorProps> & { Step: typeof Step };
+
+export interface StepProps extends HTMLAttributes<HTMLSpanElement> {
+  basis: number;
+  isCurrent: boolean;
+}
+
+const Step = ({ isCurrent, basis, ...rest }: StepProps) => {
+  let color = '#E1E1E1';
+
+  if (isCurrent) {
+    color = '#FF7664';
+  }
+
+  return <span {...rest} css={stepCss({ basis, color })} />;
+};
+
+ProgressIndicator.displayName = 'ProgressIndicator';
+ProgressIndicator.Step = Step;

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',
+  });

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;
+};

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';

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 (
-    <FirstFeatureOfFirstDomainBox displayText={displayText} onClick={handleChangeDisplayText}>
-      <FirstFeatureOfFirstDomainTestButton
-        onClick={() => {
-          alert('Button is Clicked at Container');
-        }}
-      />
-      <div css={{ width: '200px', height: '200px', backgroundColor: 'red' }}>{data}</div>
-    </FirstFeatureOfFirstDomainBox>
+    <div css={{ maxWidth: '600px;', margin: '0 auto' }}>
+      <ProgressIndicator totalStep={10} currentStep={7} />
+    </div>
   );
 };

packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx

@@ -8,7 +8,6 @@ export const FirstDomainExampleScreen = async () => {
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <div>
-        <h1>도메인 화면을 전체 담당 하는 컴포넌트입니다.</h1>
         <FirstFeatureOfFirstDomainTestContainer />
       </div>
     </HydrationBoundary>