pds-dev-kit-web 1.5.2 → 1.5.4

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -189,5 +189,11 @@
     "sys_border_line_darktheme_03_opacity20": "darkred500/opacity20",
     "sys_border_line_darktheme_07_opacity20": "darkgrey50/opacity20",
     "sys_component_base_grey_02_opacity80": "darkgrey30/opacity80",
-    "sys_component_base_10": "black/opacity30"
+    "sys_component_base_10": "black/opacity30",
+    "sys_component_pastel_base_01": "darkpastelblue500",
+    "sys_component_pastel_base_02": "darkpastelpink500",
+    "sys_component_pastel_base_03": "darkpastelorange500",
+    "sys_component_pastel_base_04": "darkpastelgreen500",
+    "sys_component_pastel_base_05": "darkpastelpurple500",
+    "sys_component_base_11": "darkgreen30"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -189,5 +189,11 @@
     "sys_border_line_darktheme_03_opacity20": "darkred500/opacity20",
     "sys_border_line_darktheme_07_opacity20": "darkgrey50/opacity20",
     "sys_component_base_grey_02_opacity80": "grey30/opacity80",
-    "sys_component_base_10": "white/opacity50"
+    "sys_component_base_10": "white/opacity50",
+    "sys_component_pastel_base_01": "pastelblue500",
+    "sys_component_pastel_base_02": "pastelpink500",
+    "sys_component_pastel_base_03": "pastelorange500",
+    "sys_component_pastel_base_04": "pastelgreen500",
+    "sys_component_pastel_base_05": "pastelpurple500",
+    "sys_component_base_11": "green30"
 }

package/dist/src/common/styles/colorSet/SemanticColor.json

@@ -56,5 +56,17 @@
     "opacity95": "F2",
     "darkgrey30": "#1d1d1e",
     "opacity40": "66",
-    "kakaoyellow": "#fee500"
+    "kakaoyellow": "#fee500",
+    "pastelblue500": "#71bcea",
+    "pastelpink500": "#ff6399",
+    "pastelorange500": "#ffa638",
+    "pastelgreen500": "#6adf79",
+    "pastelpurple500": "#b36de9",
+    "darkpastelblue500": "#65b8ea",
+    "darkpastelpink500": "#f2598e",
+    "darkpastelorange500": "#f19829",
+    "darkpastelgreen500": "#59d469",
+    "darkpastelpurple500": "#aa61e2",
+    "green30": "#E5F9F3",
+    "darkgreen30": "#132520"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -569,5 +569,11 @@
     "ui_cpnt_textfield_icon_colortheme_transparent_readonly": "sys_widget_grey_darktheme_03",
     "ui_cpnt_textfield_base_colortheme_transparent_readonly": "sys_component_base_darktheme_disabled_opacity20",
     "ui_cpnt_textfield_border_colortheme_transparent_disabled": "sys_border_line_darktheme_07_opacity00",
-    "ui_cpnt_textfield_border_colortheme_transparent_readonly": "sys_border_line_darktheme_07_opacity00"
+    "ui_cpnt_textfield_border_colortheme_transparent_readonly": "sys_border_line_darktheme_07_opacity00",
+    "ui_cpnt_lottiereactionbutton_base_01": "sys_component_pastel_base_01",
+    "ui_cpnt_lottiereactionbutton_base_02": "sys_component_pastel_base_02",
+    "ui_cpnt_lottiereactionbutton_base_03": "sys_component_pastel_base_03",
+    "ui_cpnt_lottiereactionbutton_base_04": "sys_component_pastel_base_04",
+    "ui_cpnt_lottiereactionbutton_base_05": "sys_component_pastel_base_05",
+    "ui_60": "sys_component_base_11"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -1,5 +1,5 @@
 declare const colorSet: {
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -191,8 +191,86 @@ declare const colorSet: {
         sys_border_line_darktheme_07_opacity20: string;
         sys_component_base_grey_02_opacity80: string;
         sys_component_base_10: string;
+        sys_component_pastel_base_01: string;
+        sys_component_pastel_base_02: string;
+        sys_component_pastel_base_03: string;
+        sys_component_pastel_base_04: string;
+        sys_component_pastel_base_05: string;
+        sys_component_base_11: string;
     };
-    readonly PaletteColor_light: {
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+        grey30: string;
+        opacity95: string;
+        darkgrey30: string;
+        opacity40: string;
+        kakaoyellow: string;
+        pastelblue500: string;
+        pastelpink500: string;
+        pastelorange500: string;
+        pastelgreen500: string;
+        pastelpurple500: string;
+        darkpastelblue500: string;
+        darkpastelpink500: string;
+        darkpastelorange500: string;
+        darkpastelgreen500: string;
+        darkpastelpurple500: string;
+        green30: string;
+        darkgreen30: string;
+    };
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -384,6 +462,12 @@ declare const colorSet: {
         sys_border_line_darktheme_07_opacity20: string;
         sys_component_base_grey_02_opacity80: string;
         sys_component_base_10: string;
+        sys_component_pastel_base_01: string;
+        sys_component_pastel_base_02: string;
+        sys_component_pastel_base_03: string;
+        sys_component_pastel_base_04: string;
+        sys_component_pastel_base_05: string;
+        sys_component_base_11: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -957,66 +1041,12 @@ declare const colorSet: {
         ui_cpnt_textfield_base_colortheme_transparent_readonly: string;
         ui_cpnt_textfield_border_colortheme_transparent_disabled: string;
         ui_cpnt_textfield_border_colortheme_transparent_readonly: string;
-    };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-        grey30: string;
-        opacity95: string;
-        darkgrey30: string;
-        opacity40: string;
-        kakaoyellow: string;
+        ui_cpnt_lottiereactionbutton_base_01: string;
+        ui_cpnt_lottiereactionbutton_base_02: string;
+        ui_cpnt_lottiereactionbutton_base_03: string;
+        ui_cpnt_lottiereactionbutton_base_04: string;
+        ui_cpnt_lottiereactionbutton_base_05: string;
+        ui_60: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
-var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
+var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
-    UIColor: UIColor_json_1.default,
-    SemanticColor: SemanticColor_json_1.default
+    SemanticColor: SemanticColor_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
+    UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -570,4 +570,10 @@ export interface UITheme {
     ui_cpnt_textfield_base_colortheme_transparent_readonly: string;
     ui_cpnt_textfield_border_colortheme_transparent_disabled: string;
     ui_cpnt_textfield_border_colortheme_transparent_readonly: string;
+    ui_cpnt_lottiereactionbutton_base_01: string;
+    ui_cpnt_lottiereactionbutton_base_02: string;
+    ui_cpnt_lottiereactionbutton_base_03: string;
+    ui_cpnt_lottiereactionbutton_base_04: string;
+    ui_cpnt_lottiereactionbutton_base_05: string;
+    ui_60: string;
 }

package/dist/src/desktop/components/Card/Card.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { PDSTextType } from '../../../common';
 export declare type CardProps = {
     titleText?: PDSTextType;
@@ -6,7 +6,7 @@ export declare type CardProps = {
     imageIconMode?: 'none' | 'image' | 'icon';
     imageSrc?: string;
     selectState?: 'unselected' | 'selected';
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 declare function Card({ titleText, descText, imageIconMode, imageSrc, selectState, onClick }: CardProps): JSX.Element;
 export default Card;

package/dist/src/desktop/components/Card/Card.js

@@ -13,9 +13,9 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Card(_a) {
     var titleText = _a.titleText, descText = _a.descText, _b = _a.imageIconMode, imageIconMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.selectState, selectState = _c === void 0 ? 'unselected' : _c, onClick = _a.onClick;
-    var handleClick = function () {
+    var handleClick = function (e) {
         if (onClick) {
-            onClick();
+            onClick(e);
         }
     };
     return (react_1.default.createElement(S_CardGroups, { selectState: selectState, onClick: handleClick },

package/dist/src/desktop/components/Chip/Chip.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption, UiColors } from '../../../common';
 declare type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
 export declare type ChipProps = {
@@ -11,7 +11,7 @@ export declare type ChipProps = {
     overrideBackgroundColorKey?: UiColors;
     value?: PDSValueOption['value'];
     id?: PDSValueOption['value'];
-    onClickChip?: () => void;
+    onClickChip?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onClickXMarkIcon?: () => void;
     /** @deprecated value 필드를 대신 사용하세요. */
     activeChipId?: string | number;

package/dist/src/desktop/components/Chip/Chip.js

@@ -42,9 +42,9 @@ function Chip(_a) {
         }
         return false;
     }, [activeChipId, chipId, value, id]);
-    var handleClickChip = function () {
+    var handleClickChip = function (e) {
         if (onClickChip) {
-            onClickChip();
+            onClickChip(e);
         }
     };
     var handleClickXMarkIcon = function (e) {

package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.d.ts

@@ -14,9 +14,9 @@ declare type DesktopAlertDialogProps = {
     tBtn1Type?: 'button' | 'submit';
     tBtn2Type?: 'button' | 'submit';
     tBtn3Type?: 'button' | 'submit';
-    onClickTBtn1?: () => any;
-    onClickTBtn2?: () => any;
-    onClickTBtn3?: () => any;
+    onClickTBtn1?: () => void;
+    onClickTBtn2?: () => void;
+    onClickTBtn3?: () => void;
 };
 declare function DesktopAlertDialog({ iconMode, titleText, contentText, btnMode, tBtn1Text, tBtn2Text, tBtn3Text, tBtn1State, tBtn2State, tBtn3State, tBtn1Type, tBtn2Type, tBtn3Type, onClickTBtn1, onClickTBtn2, onClickTBtn3 }: DesktopAlertDialogProps): React.ReactPortal;
 export default DesktopAlertDialog;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/InternalLinkMenuItemNav.js

@@ -37,7 +37,9 @@ function InternalLinkMenuItemNav(_a) {
         if (activeMode === 'BY_URL') {
             return false;
         }
-        if (pathname + search === location.pathname + location.search) {
+        // NOTE: 'from' keyword를 예외로 삭제하고 비교합니다.
+        var locationSearch = getSearchExceptGivenName(location.search, 'from');
+        if (pathname + search === location.pathname + locationSearch) {
             return true;
         }
         return false;
@@ -62,4 +64,9 @@ function getInternalLink(basePath, url) {
     var pAppCode = splitPath === null || splitPath === void 0 ? void 0 : splitPath.split('/')[PAPP_CODE_INDEX];
     return { internalPath: basePath + splitPath + search, pAppCode: pAppCode, pathname: pathname, search: search };
 }
+function getSearchExceptGivenName(search, name) {
+    var params = new URLSearchParams(search);
+    params.delete(name);
+    return "?" + params.toString();
+}
 exports.default = InternalLinkMenuItemNav;

package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -9,8 +9,8 @@ export declare type FloatingActionButtonProps = {
     iconName?: FillIconNameKeys | LineIconNameKeys;
     colorTheme?: 'none' | 'theme1' | 'theme2' | 'theme3';
     state?: 'normal' | 'disabled';
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => any;
-    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => any;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 declare function FloatingActionButton({ text, displayType, size, fontWeight, iconFillType, iconName, colorTheme, state, onClick, onMouseDown }: FloatingActionButtonProps): JSX.Element;
 export default FloatingActionButton;

package/dist/src/mobile/components/Card/Card.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { PDSTextType } from '../../../common';
 export declare type CardProps = {
     titleText?: PDSTextType;
@@ -6,7 +6,7 @@ export declare type CardProps = {
     imageIconMode?: 'none' | 'image' | 'icon';
     imageSrc?: string;
     selectState?: 'unselected' | 'selected';
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 declare function Card({ titleText, descText, imageIconMode, imageSrc, selectState, onClick }: CardProps): JSX.Element;
 export default Card;

package/dist/src/mobile/components/Card/Card.js

@@ -13,9 +13,9 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Card(_a) {
     var titleText = _a.titleText, descText = _a.descText, _b = _a.imageIconMode, imageIconMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.selectState, selectState = _c === void 0 ? 'unselected' : _c, onClick = _a.onClick;
-    var handleClick = function () {
+    var handleClick = function (e) {
         if (onClick) {
-            onClick();
+            onClick(e);
         }
     };
     return (react_1.default.createElement(S_CardGroups, { selectState: selectState, onClick: handleClick },

package/dist/src/mobile/components/Chip/Chip.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption, UiColors } from '../../../common';
 declare type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
 export declare type ChipProps = {
@@ -11,7 +11,7 @@ export declare type ChipProps = {
     overrideBackgroundColorKey?: UiColors;
     value?: PDSValueOption['value'];
     id?: PDSValueOption['value'];
-    onClickChip?: () => void;
+    onClickChip?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onClickXMarkIcon?: () => void;
     /** @deprecated value 필드를 대신 사용하세요. */
     activeChipId?: string | number;

package/dist/src/mobile/components/Chip/Chip.js

@@ -42,9 +42,9 @@ function Chip(_a) {
         }
         return false;
     }, [activeChipId, chipId, value, id]);
-    var handleClickChip = function () {
+    var handleClickChip = function (e) {
         if (onClickChip) {
-            onClickChip();
+            onClickChip(e);
         }
     };
     var handleClickXMarkIcon = function (e) {

package/dist/src/mobile/components/MobileAlertDialog/MobileAlertDialog.d.ts

@@ -15,9 +15,9 @@ declare type MobileAlertDialogProps = {
     tBtn1Type?: 'button' | 'submit';
     tBtn2Type?: 'button' | 'submit';
     tBtn3Type?: 'button' | 'submit';
-    onClickTBtn1?: () => any;
-    onClickTBtn2?: () => any;
-    onClickTBtn3?: () => any;
+    onClickTBtn1?: () => void;
+    onClickTBtn2?: () => void;
+    onClickTBtn3?: () => void;
 };
 declare function MobileAlertDialog({ iconMode, titleText, contentText, btnStack, btnMode, tBtn1Text, tBtn2Text, tBtn3Text, tBtn1State, tBtn2State, tBtn3State, tBtn1Type, tBtn2Type, tBtn3Type, onClickTBtn1, onClickTBtn2, onClickTBtn3 }: MobileAlertDialogProps): React.ReactPortal;
 export default MobileAlertDialog;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,6 +1,9 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.5.2]
+## [v1.5.4]
 
 ### Component
-* Icon
-  * ic_bell_notification line asset의 모양 변경
+* DynamicDesktopNavBar
+  * 내부링크 유형을 사용할때 URLSearchParams 비교에서 'from' 키워드 제외
+
+### Color
+* 컬러 키 값 22.11.01 17시 30분 기준 싱크