@jk-core/components 1.1.11 → 1.1.12

package/dist/src/common/DropDown/index.d.ts

@@ -3,6 +3,10 @@ interface DropDownProps {
      * 드롭다운 목록
      */
     list: string[];
+    /**
+     * 드롭다운 버튼에 표시될 내용
+     */
+    value?: string;
     /**
      * 선택된 아이템을 처리하는 함수
      */
@@ -25,5 +29,5 @@ interface DropDownProps {
  * 사용자가 선택할 수 있는 목록을 제공하며, 선택된 아이템을 표시합니다.
  * 필터링 기능을 활성화할 수 있으며, 플레이스홀더 텍스트를 설정할 수 있습니다.
  */
-export default function DropDown({ list, onSelect, filter, placeholder, style }: DropDownProps): import("react/jsx-runtime").JSX.Element;
+export default function DropDown({ list, value, onSelect, filter, placeholder, style }: DropDownProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,99 +1,99 @@
-{
-  "name": "@jk-core/components",
-  "version": "1.1.11",
-  "type": "module",
-  "main": "./dist/index.umd.cjs",
-  "types": "./dist/index.d.ts",
-  "module": "./dist/index.js",
-  "license": "MIT",
-  "description": "components for jk",
-  "author": "KimKyungYun <kky38225221@gmail.com>",
-  "homepage": "https://bitbucket.org/jkcore/frontend_library#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://KyungYun@bitbucket.org/jkcore/frontend_library.git"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "bugs": {
-    "url": "https://bitbucket.org/jkcore/frontend_library/issues"
-  },
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
-    }
-  },
-  "files": [
-    "./dist",
-    "./src"
-  ],
-  "keywords": [
-    "utils",
-    "kyungyun",
-    "jk",
-    "components",
-    "calendar"
-  ],
-  "peerDependencies": {
-    "react": "^19.1.0"
-  },
-  "scripts": {
-    "build": "yarn clean && vite build",
-    "clean:win": "if exist dist rmdir /S /Q dist",
-    "clean:unix": "rm -rf dist",
-    "clean": "node -e \"require('child_process').execSync(process.platform === 'win32' ? 'npm run clean:win' : 'npm run clean:unix', {stdio: 'inherit'})\"",
-    "lint": "yarn lint:eslint && yarn lint:stylelint",
-    "lint:fix": "yarn lint:eslint --fix && yarn lint:stylelint --fix",
-    "lint:eslint": "eslint src",
-    "lint:stylelint": "stylelint \"./src/**/*.scss\" --config ../../.stylelintrc.json"
-  },
-  "dependencies": {
-    "@jk-core/hooks": "^1.0.0",
-    "@jk-core/utils": "^1.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.30.1",
-    "@stylistic/eslint-plugin": "^5.1.0",
-    "@types/eslint-plugin-jsx-a11y": "^6.10.0",
-    "@types/node": "^24.0.10",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.6.0",
-    "code-inspector-plugin": "^0.20.15",
-    "eslint": "^9.30.1",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.3.0",
-    "optionator": "^0.9.4",
-    "postcss": "^8.5.6",
-    "postcss-scss": "^4.0.9",
-    "sass": "^1.80.0",
-    "sass-loader": "^16.0.2",
-    "stylelint": "^16.21.1",
-    "stylelint-config-standard": "^38.0.0",
-    "stylelint-config-standard-scss": "^15.0.1",
-    "stylelint-scss": "^6.12.1",
-    "stylelint-selector-bem-pattern": "^4.0.1",
-    "tslib": "^2.8.1",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.36.0",
-    "vite": "^7.0.2",
-    "vite-plugin-checker": "^0.10.0",
-    "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-css-modules": "^0.0.1",
-    "vite-plugin-dts": "^4.5.3",
-    "vite-plugin-sass-dts": "^1.3.31",
-    "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^5.1.4"
-  }
-}
+{
+  "name": "@jk-core/components",
+  "version": "1.1.12",
+  "type": "module",
+  "main": "./dist/index.umd.cjs",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "license": "MIT",
+  "description": "components for jk",
+  "author": "KimKyungYun <kky38225221@gmail.com>",
+  "homepage": "https://bitbucket.org/jkcore/frontend_library#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://KyungYun@bitbucket.org/jkcore/frontend_library.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://bitbucket.org/jkcore/frontend_library/issues"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "files": [
+    "./dist",
+    "./src"
+  ],
+  "keywords": [
+    "utils",
+    "kyungyun",
+    "jk",
+    "components",
+    "calendar"
+  ],
+  "peerDependencies": {
+    "react": "^19.1.0"
+  },
+  "scripts": {
+    "build": "yarn clean && vite build",
+    "clean:win": "if exist dist rmdir /S /Q dist",
+    "clean:unix": "rm -rf dist",
+    "clean": "node -e \"require('child_process').execSync(process.platform === 'win32' ? 'npm run clean:win' : 'npm run clean:unix', {stdio: 'inherit'})\"",
+    "lint": "yarn lint:eslint && yarn lint:stylelint",
+    "lint:fix": "yarn lint:eslint --fix && yarn lint:stylelint --fix",
+    "lint:eslint": "eslint src",
+    "lint:stylelint": "stylelint \"./src/**/*.scss\" --config ../../.stylelintrc.json"
+  },
+  "dependencies": {
+    "@jk-core/hooks": "^1.0.0",
+    "@jk-core/utils": "^1.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@stylistic/eslint-plugin": "^5.1.0",
+    "@types/eslint-plugin-jsx-a11y": "^6.10.0",
+    "@types/node": "^24.0.10",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "code-inspector-plugin": "^0.20.15",
+    "eslint": "^9.30.1",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "optionator": "^0.9.4",
+    "postcss": "^8.5.6",
+    "postcss-scss": "^4.0.9",
+    "sass": "^1.80.0",
+    "sass-loader": "^16.0.2",
+    "stylelint": "^16.21.1",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-scss": "^6.12.1",
+    "stylelint-selector-bem-pattern": "^4.0.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.36.0",
+    "vite": "^7.0.2",
+    "vite-plugin-checker": "^0.10.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-css-modules": "^0.0.1",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-sass-dts": "^1.3.31",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

package/src/Calendar/Calendar.module.scss

@@ -1,213 +1,213 @@
-@use "../styles/mediaQuery.scss" as media;
-
-button {
-  border: none;
-  background-color: transparent;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  cursor: pointer;
-}
-
-.calendar {
-  width: 100%;
-  min-width: 300px;
-  border: 1px solid var(--calendar-G-30);
-  border-radius: 10px;
-  overflow: hidden;
-  color: var(--calendar-G-80);
-  background-color: var(--calendar-white);
-
-  &--range {
-    box-sizing: border-box;
-  }
-
-  &--scroll {
-    height: 100%;
-    border: none;
-    border-radius: 0;
-  }
-
-  &__scroll {
-    height: 100%;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column-reverse;
-    box-sizing: border-box;
-    gap: 10px;
-    overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-      width: 0;
-    }
-
-    &--wrapper {
-      flex: 1 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-
-    &--button {
-      width: 95%;
-      margin: 5px auto;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 10px;
-      background-color: var(--calendar-white);
-      border: 2px solid var(--calendar-G-50);
-      padding: 15px 0;
-      transition: 0.2s;
-      font-size: 1.2em;
-
-      &:active {
-        scale: 0.98;
-        background-color: var(--calendar-G-5);
-      }
-    }
-  }
-
-  &__close {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 7px 10px 7px 0;
-    box-sizing: border-box;
-
-    svg {
-      width: 18px;
-      height: 18px;
-      cursor: pointer;
-    }
-  }
-
-  &__range-tile {
-    position: relative;
-    width: 100%;
-    display: flex;
-    gap: 10px;
-  }
-
-  &__wrapper {
-    flex: 1 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-.view {
-  position: relative;
-  margin: 0 auto;
-  width: 90%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #f3f4f8;
-  border-radius: 10px;
-
-  &__block {
-    position: absolute;
-    background-color: #fff;
-    left: 0;
-    height: 100%;
-    border: 2px solid var(--calendar-G-30);
-    width: 33.3%;
-    border-radius: 10px;
-    transition: 0.3s;
-
-    &--second {
-      left: 33%;
-    }
-
-    &--last {
-      left: 66.6%;
-    }
-  }
-
-  &__selector {
-    position: relative;
-    height: 40px;
-    flex: 1 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--calendar-G-60);
-    font-size: 1em;
-    font-weight: 400;
-
-    &--selected {
-      color: var(--calendar-G-80);
-      font-size: 1em;
-      font-weight: 600;
-    }
-  }
-}
-
-.nav {
-  height: 60px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 5px;
-  border-bottom: 1px solid var(--calendar-G-30);
-  font-size: 1.3em;
-  font-weight: 400;
-
-  &__button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    padding: 10px;
-    border-radius: 100%;
-
-    &:hover {
-      @include media.pc {
-        background-color: var(--calendar-G-10);
-      }
-    }
-
-    &:active {
-      background-color: var(--calendar-G-30);
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      fill: var(--calendar-G-40);
-      background-color: transparent;
-    }
-  }
-
-  &__label {
-    flex: 1 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    font-size: 1.1em;
-    font-weight: 400;
-
-    &--date {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 5px;
-      padding: 5px 10px;
-      font-weight: 400;
-      font-size: 1em;
-
-      svg {
-        width: 15px;
-        height: 15px;
-      }
-    }
-
-    &--date-selected {
-      background-color: var(--calendar-S-10);
-    }
-  }
-}
+@use "../styles/mediaQuery.scss" as media;
+
+button {
+  border: none;
+  background-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  cursor: pointer;
+}
+
+.calendar {
+  width: 100%;
+  min-width: 300px;
+  border: 1px solid var(--calendar-G-30);
+  border-radius: 10px;
+  overflow: hidden;
+  color: var(--calendar-G-80);
+  background-color: var(--calendar-white);
+
+  &--range {
+    box-sizing: border-box;
+  }
+
+  &--scroll {
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+
+  &__scroll {
+    height: 100%;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column-reverse;
+    box-sizing: border-box;
+    gap: 10px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
+    &--wrapper {
+      flex: 1 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &--button {
+      width: 95%;
+      margin: 5px auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 10px;
+      background-color: var(--calendar-white);
+      border: 2px solid var(--calendar-G-50);
+      padding: 15px 0;
+      transition: 0.2s;
+      font-size: 1.2em;
+
+      &:active {
+        scale: 0.98;
+        background-color: var(--calendar-G-5);
+      }
+    }
+  }
+
+  &__close {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 7px 10px 7px 0;
+    box-sizing: border-box;
+
+    svg {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+  }
+
+  &__range-tile {
+    position: relative;
+    width: 100%;
+    display: flex;
+    gap: 10px;
+  }
+
+  &__wrapper {
+    flex: 1 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.view {
+  position: relative;
+  margin: 0 auto;
+  width: 90%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f3f4f8;
+  border-radius: 10px;
+
+  &__block {
+    position: absolute;
+    background-color: #fff;
+    left: 0;
+    height: 100%;
+    border: 2px solid var(--calendar-G-30);
+    width: 33.3%;
+    border-radius: 10px;
+    transition: 0.3s;
+
+    &--second {
+      left: 33%;
+    }
+
+    &--last {
+      left: 66.6%;
+    }
+  }
+
+  &__selector {
+    position: relative;
+    height: 40px;
+    flex: 1 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--calendar-G-60);
+    font-size: 1em;
+    font-weight: 400;
+
+    &--selected {
+      color: var(--calendar-G-80);
+      font-size: 1em;
+      font-weight: 600;
+    }
+  }
+}
+
+.nav {
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+  border-bottom: 1px solid var(--calendar-G-30);
+  font-size: 1.3em;
+  font-weight: 400;
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 10px;
+    border-radius: 100%;
+
+    &:hover {
+      @include media.pc {
+        background-color: var(--calendar-G-10);
+      }
+    }
+
+    &:active {
+      background-color: var(--calendar-G-30);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      fill: var(--calendar-G-40);
+      background-color: transparent;
+    }
+  }
+
+  &__label {
+    flex: 1 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    font-size: 1.1em;
+    font-weight: 400;
+
+    &--date {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 5px;
+      padding: 5px 10px;
+      font-weight: 400;
+      font-size: 1em;
+
+      svg {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    &--date-selected {
+      background-color: var(--calendar-S-10);
+    }
+  }
+}