Merge pull request #42 from Team-B1ND/Feature/#40

Feature/#40

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,5 @@
+##### **📘 할 내용**
+
+- 여기에 작성해 주세요
+
+---

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,5 @@
+##### **📘 한 내용**
+
+- 여기에 작성해 주세요
+
+---

.github/workflows/release.yml

@@ -0,0 +1,40 @@
+name: Deploy to NPM
+
+on:
+  push:
+    branches:
+      - main  
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout the repository
+      uses: actions/checkout@v2
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '20' 
+
+    - name: Cache Node.js modules
+      uses: actions/cache@v2
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+
+    - name: Install dependencies
+      run: pnpm install  
+
+    - name: Build the project
+      run: pnpm run build  
+
+    - name: Publish to NPM
+      run: |
+        echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc 
+        npm publish dist --access public 
+      env:
+        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}  

babel.config.js

@@ -0,0 +1,9 @@
+const config = {
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+};
+
+module.exports = config;

package.json

@@ -1,13 +1,33 @@
 {
   "name": "dds-web",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.cjs.js",
+  "module": "dist/esm/index.esm.js",
   "private": true,
   "devDependencies": {
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@changesets/cli": "^2.27.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-url": "^8.0.2",
+    "@types/typescript": "^2.0.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "prettier": "^3.2.5"
+    "prettier": "^3.2.5",
+    "rollup": "^4.28.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "^5.4.2"
   },
   "scripts": {
+    "rollup": "rollup -c",
+    "build:bundle": "tsc -p tsconfig.base.json && pnpm bundle",
+    "build": "pnpm build:bundle",
     "prepare": "husky",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
@@ -18,5 +38,15 @@
     "hooks": {
       "pre-commit": "pnpm lint-staged"
     }
+  },
+  "dependencies": {
+    "@dds-web/styles": "workspace:*",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@svgr/rollup": "^8.1.0",
+    "@types/react": "^19.0.2",
+    "@types/styled-components": "^5.1.34",
+    "react": "^18.2.0",
+    "styled-components": "^6.1.8"
   }
 }

packages/assets/index.ts

@@ -0,0 +1 @@
+export * from "./src";

packages/assets/package.json

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@dds-web/styles": "workspace: *",
-    "@types/react": "^18.2.73",
+    "@types/react": "18.2.0",
     "@types/styled-components": "^5.1.34"
   }
 }

packages/assets/src/index.ts

@@ -1,2 +1,2 @@
 export * from "./fonts";
-export * from "./icons";
+export * from "./icons";

packages/assets/tsconfig.json

@@ -3,7 +3,8 @@
     "declaration": true,
     "emitDeclarationOnly": true,
     "outDir": "dist",
-    "rootDir": "src"
+    "rootDir": "src",
+    "jsx": "react"
   },
   "extends": "../../tsconfig.base.json",
   "include": ["./src"]

packages/components/index.ts

@@ -0,0 +1 @@
+export * from "./src";

packages/components/package.json

@@ -31,8 +31,8 @@
     "@storybook/blocks": "^8.0.2",
     "@storybook/react": "^8.4.1",
     "@storybook/react-webpack5": "^8.4.1",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "storybook": "^8.4.1",
     "swc-loader": "^0.2.6"
   }

packages/components/src/index.ts

@@ -0,0 +1 @@
+export * from "./ui";

packages/components/src/ui/Button/SegmentedButton/DodamSegmentedButton.tsx

@@ -74,7 +74,7 @@ export const DodamSegmentedButton = ({
         {segmentedBtndata.map((item, idx) => (
           <StyledSegmentedButton
             key={idx}
-            ref={(e) => (buttonRefs.current[idx] = e)}
+            ref={(e: HTMLButtonElement | null) => (buttonRefs.current[idx] = e)}
             num={num}
             type={type}
             isAtv={item.isAtv}

packages/components/src/ui/DatePicker/DodamDatePicker.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { DodamDatePicker, DatePickerProps } from "./DodamDatePicker"; 
+import { DodamDatePicker, DatePickerProps } from "./DodamDatePicker";
 
 const meta: Meta<typeof DodamDatePicker> = {
   title: "ui/DodamDatePicker",
@@ -16,12 +16,12 @@ type Story = StoryObj<typeof meta>;
 
 export const StyledDatePicker: Story = {
   args: {
-    itemKey: "unique-key", 
-    width: "100%",         
-    height: "40px",        
-    value: "2024-11-12",     
-    onChange: (date: Date) => alert(date), 
+    itemKey: "unique-key",
+    width: "100%",
+    height: "40px",
+    value: "2024-11-12",
+    onChange: (date: Date) => alert(date),
     title: "외출 일시",
-    color: "black"
+    color: "black",
   } as DatePickerProps,
 };

packages/components/src/ui/PageIndicator/PageIndicator.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PageIndicator } from "./PageIndicator";
+import React from "react";
+
+const meta = {
+  title: "ui/DodamPageIndicator",
+  component: PageIndicator,
+  tags: ["autodocs"],
+} satisfies Meta<typeof PageIndicator>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+
+export const PageIndicatorWithCases: Story = {
+  args: {
+    buttonSize: "Large",
+    caseBy: {
+      Page1: <div>첫 번째</div>,
+      Page2: <div>두 번째</div>,
+      Page3: <div>세 번째</div>,
+    },
+    defaultComponent: <div>기본 컴포넌트</div>,
+  },
+};

packages/components/src/ui/PageIndicator/PageIndicator.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import * as S from "./style";
+import { PageIndicatorProps } from "./type";
+
+export const PageIndicator = ({
+  caseBy,
+  buttonSize = "Large",
+  defaultComponent = null,
+}: PageIndicatorProps) => {
+  const [activeIdx, setActiveIdx] = useState<number>(0);
+
+  const handleButtonClick = (idx: number) => {
+    setActiveIdx(idx);
+  };
+
+  if (!caseBy || Object.keys(caseBy).length === 0) {
+    return defaultComponent;
+  }
+
+  const keys = Object.keys(caseBy);
+
+  return (
+    <div>
+      <S.PageIndicatorWrap buttonSize={buttonSize}>
+        {keys.map((_, idx) => (
+          <S.IndicatorBtn
+            key={idx}
+            idx={idx}
+            activeIdx={activeIdx}
+            buttonSize={buttonSize}
+            onClick={() => handleButtonClick(idx)}></S.IndicatorBtn>
+        ))}
+      </S.PageIndicatorWrap>
+      <div>{caseBy[keys[activeIdx]]}</div>
+    </div>
+  );
+};

packages/components/src/ui/PageIndicator/index.ts

@@ -0,0 +1 @@
+export * from "./PageIndicator";

packages/components/src/ui/PageIndicator/style.ts

@@ -0,0 +1,33 @@
+import styled, { css } from "styled-components";
+import { ButtonSize } from "./type";
+import { DodamLightTheme } from "@dds-web/styles/src/DodamTheme/DodamTheme";
+
+export const PageIndicatorWrap = styled.div<{ buttonSize: ButtonSize }>`
+  width: auto;
+  height: auto;
+  gap: ${({ buttonSize }) => (buttonSize === "Small" ? "5px" : "10px")};
+  display: flex;
+`;
+
+export const IndicatorBtn = styled.div<{
+  idx: number;
+  activeIdx: number;
+  buttonSize: ButtonSize;
+}>`
+  ${({ buttonSize }) =>
+    buttonSize === "Small"
+      ? css`
+          width: 5px;
+          height: 5px;
+        `
+      : css`
+          width: 10px;
+          height: 10px;
+        `}
+  border-radius: 50%;
+  background-color: ${({ idx, activeIdx }) =>
+    idx === activeIdx
+      ? DodamLightTheme.primaryNormal
+      : DodamLightTheme.labelDisabled};
+  cursor: pointer;
+`;

packages/components/src/ui/PageIndicator/type.ts

@@ -0,0 +1,7 @@
+export type ButtonSize = "Small" | "Large"
+
+export interface PageIndicatorProps {
+  buttonSize: ButtonSize;
+  caseBy :Partial<Record<string, JSX.Element | null>>
+  defaultComponent?: JSX.Element | null;
+}

packages/components/src/ui/index.ts

@@ -5,3 +5,4 @@ export * from "./ErrorBoundary";
 export * from "./NotFoundPage";
 export * from "./TextField";
 export * from "./Typography";
+export * from "./PageIndicator";

packages/components/tsconfig.json

@@ -4,7 +4,8 @@
     "emitDeclarationOnly": true,
     "outDir": "dist",
     "rootDir": "src",
-    "types": ["react","styled-components"],
+    "types": ["react", "react-dom", "styled-components"],
+    "jsx": "react"
   },
   "extends": "../../tsconfig.base.json",
   "include": ["./src"]

packages/foundations/index.ts

@@ -0,0 +1 @@
+export * from "./src";

packages/foundations/package.json

@@ -13,9 +13,9 @@
     "typescript": "^5.4.2"
   },
   "devDependencies": {
-    "@dds-web/styles": "workspace:*",
     "@dds-web/assets": "workspace:*",
-    "@types/react": "^18.2.67",
+    "@dds-web/styles": "workspace:*",
+    "@types/react": "^18.2.0",
     "@types/styled-components": "^5.1.34"
   }
 }

packages/foundations/tsconfig.json

@@ -3,7 +3,8 @@
     "declaration": true,
     "emitDeclarationOnly": true,
     "outDir": "dist",
-    "rootDir": "src"
+    "rootDir": "src",
+    "jsx": "react"
   },
   "extends": "../../tsconfig.base.json",
   "include": ["./src"]

packages/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./src";

packages/hooks/package.json

@@ -13,6 +13,6 @@
     "typescript": "^5.4.2"
   },
   "devDependencies": {
-    "@types/react": "^18.2.67"
+    "@types/react": "^18.2.0"
   }
 }

packages/hooks/src/useDatePicker.ts

@@ -51,7 +51,7 @@ export const useDatePicker = ({
   const [lastDate, setLastDate] = useState<number>(dayList.indexOf(1));
 
   //데이트 피커 ref
-  const containerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
   const [calendarCoord, setCalendarCoold] = useState({ x: 0, y: 0 });
 
   //데이트피커 아웃사이드 클릭 체크

packages/hooks/tsconfig.json

@@ -3,7 +3,8 @@
     "declaration": true,
     "emitDeclarationOnly": true,
     "outDir": "dist",
-    "rootDir": "src"
+    "rootDir": "src",
+    "jsx": "react"
   },
   "extends": "../../tsconfig.base.json",
   "include": ["./src"]

packages/index.ts

@@ -0,0 +1,6 @@
+export * from "./assets";
+export * from "./components";
+export * from "./foundations";
+export * from "./hooks";
+export * from "./styles";
+export * from "./utils";

packages/styles/index.ts

@@ -0,0 +1 @@
+export * from "./src";