@pfct/purple 1.3.4-npm-test.1

package/dist/components/Segment/ExtendSegment/index.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExtendSegment = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const ExtendSegment = ({ item, value = '', onChange }) => {
+    const width = 100 / item.length;
+    const control = () => {
+        const idx = item.findIndex((i) => i.value === value) * 100;
+        if (idx < 0) {
+            return 0;
+        }
+        else {
+            return idx / item.length;
+        }
+    };
+    return (react_1.default.createElement(Styled.Wrapper, null,
+        react_1.default.createElement(Styled.LabelWrapper, { width: width },
+            item.map((label, index) => {
+                const active = value === label.value;
+                const className = (() => {
+                    const result = [active ? 'active' : 'disabled'];
+                    result.push(Styled.className.extendSegmentLabel);
+                    return result.join(' ');
+                })();
+                return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+                    react_1.default.createElement(Styled.Label, { className: className, active: active, onClick: () => {
+                            onChange(label.value);
+                        } }, label.children)));
+            }),
+            react_1.default.createElement(Styled.Control, { control: control(), width: width }))));
+};
+exports.ExtendSegment = ExtendSegment;

package/dist/components/Segment/ExtendSegment/index.styled.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+export declare const className: {
+    extendSegmentLabel: string;
+};
+export declare const Control: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    control: number;
+    width: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    active: boolean;
+} & import("react").ClassAttributes<HTMLLabelElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Input: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const LabelWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    width: number;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/dist/components/Segment/ExtendSegment/index.styled.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelWrapper = exports.Input = exports.Wrapper = exports.Label = exports.Control = exports.className = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const BaseSegmentStyled = __importStar(require("../BaseSegment/index.styled"));
+const Colors_1 = require("../../../core/Colors");
+exports.className = {
+    extendSegmentLabel: 'extend-segment-label',
+};
+exports.Control = BaseSegmentStyled.Control;
+exports.Label = (0, styled_1.default)(BaseSegmentStyled.Label) `
+	/* fyi. selector 여러개와 !important 로 비활성화 색깔 고정 */
+
+	&.disabled > * {
+		color: ${Colors_1.basicColors.gray200} !important;
+	}
+`;
+exports.Wrapper = BaseSegmentStyled.Wrapper;
+exports.Input = BaseSegmentStyled.Input;
+exports.LabelWrapper = (0, styled_1.default)(BaseSegmentStyled.LabelWrapper) `
+	& > .${exports.className.extendSegmentLabel} {
+		width: ${({ width }) => `${width}%`};
+		height: 40px;
+		text-align: center;
+		z-index: 2;
+		line-height: 40px;
+		cursor: pointer;
+
+		/* 다른 속성 */
+		display: inline-flex;
+		flex-direction: row;
+		justify-content: center;
+	}
+`;

package/dist/components/Segment/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BaseSegment';
+export * from './ExtendSegment';

package/dist/components/Segment/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BaseSegment"), exports);
+__exportStar(require("./ExtendSegment"), exports);

package/dist/components/Segment/index.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SegmentProps } from './BaseSegment';
+import { ExtendSegmentProps } from './ExtendSegment';
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Segment-Control-6e06058eb43c4615a71bf37d35631043?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 하위 정보를 동일하게 분할하여 구성합니다.
+ * 기본적으로 첫 번째 세그먼트가 선택되어 있고 사용자는 나머지 세그먼트를 선택할 수 있습니다.
+ *
+ */
+declare const meta: Meta<SegmentProps<string>>;
+export default meta;
+export declare const Story1: StoryObj<SegmentProps<string>>;
+export declare const Story2: StoryObj<ExtendSegmentProps>;

package/dist/components/Segment/index.stories.js

@@ -0,0 +1,105 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importStar(require("react"));
+const BaseSegment_1 = require("./BaseSegment");
+const ExtendSegment_1 = require("./ExtendSegment");
+const Colors_1 = require("../../core/Colors");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Segment-Control-6e06058eb43c4615a71bf37d35631043?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 하위 정보를 동일하게 분할하여 구성합니다.
+ * 기본적으로 첫 번째 세그먼트가 선택되어 있고 사용자는 나머지 세그먼트를 선택할 수 있습니다.
+ *
+ */
+const meta = {
+    title: 'Component/Segment',
+    component: BaseSegment_1.Segment,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const BaseSegmentComp = (props) => {
+    const [value, setValue] = (0, react_1.useState)(props.item[0]);
+    const onChange = (val) => {
+        setValue(val);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        "selected: ",
+        value,
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(BaseSegment_1.Segment, Object.assign({}, props, { value: value, onChange: onChange }))));
+};
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement("div", { style: { width: '600px' } },
+        react_1.default.createElement(BaseSegmentComp, Object.assign({}, props)))),
+    args: {
+        item: ['One', 'Two', 'Three'],
+    },
+    argTypes: {
+        onChange: { action: 'onChange' },
+    },
+};
+exports.Story1.storyName = 'Segment - 문자열 리스트';
+const ExtendSegmentComp = (props) => {
+    const [value, setValue] = (0, react_1.useState)(props.item[0].value);
+    const onChange = (val) => {
+        setValue(val);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        "selected: ",
+        value,
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(ExtendSegment_1.ExtendSegment, Object.assign({}, props, { value: value, onChange: onChange }))));
+};
+exports.Story2 = {
+    render: (props) => (react_1.default.createElement("div", { style: { width: '600px' } },
+        react_1.default.createElement(ExtendSegmentComp, Object.assign({}, props)))),
+    args: {
+        item: [
+            {
+                value: '부정',
+                children: (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", null, "\uBD80\uC815"),
+                    react_1.default.createElement("div", { style: { color: Colors_1.basicColors.red300, paddingLeft: '5px' } }, "4"))),
+            },
+            {
+                value: '긍정',
+                children: (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", null, "\uAE0D\uC815"),
+                    react_1.default.createElement("div", { style: { color: '#6EED81', paddingLeft: '5px' } }, "1"))),
+            },
+        ],
+    },
+    argTypes: {
+        onChange: { action: 'onChange' },
+    },
+};
+exports.Story2.storyName = 'Segment - 컴포넌트 리스트';

package/dist/components/SelectBox/index.d.ts

@@ -0,0 +1,18 @@
+import React, { InputHTMLAttributes } from 'react';
+import { InputValidator } from '../Input/BaseInput';
+type SelectBoxProps<ValueType = string> = InputHTMLAttributes<HTMLSelectElement> & {
+    itemList: SelectItemProps<ValueType>[];
+    onChange: (value: any) => void;
+    disabled?: boolean;
+    errorValidation?: InputValidator[];
+    label?: string;
+    bottomSheetTitle?: string;
+};
+type SelectItemProps<ValueType = string> = {
+    label: string;
+    value: ValueType;
+};
+declare const SelectBox: React.FC<SelectBoxProps>;
+export type { SelectBoxProps, SelectItemProps };
+export { SelectBox };
+export * as SelectBoxStyled from './index.styled';

package/dist/components/SelectBox/index.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectBoxStyled = exports.SelectBox = void 0;
+const List_1 = require("../../library/List");
+const Icon_1 = require("../../Icon");
+const BottomSheet_1 = require("../BottomSheet");
+const Colors_1 = require("../../core/Colors");
+const react_1 = __importStar(require("react"));
+const BaseInput_1 = require("../Input/BaseInput");
+const Styled = __importStar(require("./index.styled"));
+const useLayoutIsMobile_1 = __importDefault(require("../../hooks/useLayoutIsMobile"));
+const SelectBox = (props) => {
+    var _a;
+    const { label, placeholder, itemList, onChange, disabled, errorValidation, value, bottomSheetTitle } = props;
+    const [name, setName] = (0, react_1.useState)((_a = itemList.find((item) => item.value === value)) === null || _a === void 0 ? void 0 : _a.label);
+    const [mouseOut, setMouseOut] = (0, react_1.useState)(false);
+    const [visibleItemList, setVisibleItemList] = (0, react_1.useState)(false);
+    const isMobile = (0, useLayoutIsMobile_1.default)();
+    const handleVisibleItemList = (0, react_1.useCallback)((visible) => {
+        setVisibleItemList(visible);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setName((_a = itemList.find((item) => item.value === value)) === null || _a === void 0 ? void 0 : _a.label);
+    }, [itemList, value]);
+    return (react_1.default.createElement(Styled.Wrapper, null,
+        react_1.default.createElement(Styled.IconWrapper, { rotateArrow: visibleItemList },
+            react_1.default.createElement(Icon_1.ChevronDownSIcon, { fillColor: Colors_1.basicColors.gray200 })),
+        react_1.default.createElement(BaseInput_1.BaseInput, { disabled: disabled, className: "select-box", label: label, placeholder: placeholder, readOnly: true, onClick: () => setVisibleItemList(!visibleItemList), focusedAnimation: false, value: name, onBlur: () => {
+                if (mouseOut) {
+                    handleVisibleItemList(false);
+                }
+            }, errorValidation: errorValidation }),
+        visibleItemList && (react_1.default.createElement(Styled.Desktop, null,
+            react_1.default.createElement(Styled.ItemListWrapper, { onMouseOver: () => setMouseOut(false), onMouseOut: () => setMouseOut(true) },
+                react_1.default.createElement(Styled.ItemList, null, itemList.map((item) => {
+                    const { label, value } = item;
+                    return (react_1.default.createElement(Styled.Item, { key: label, onClick: () => {
+                            setName(label);
+                            onChange(value);
+                            handleVisibleItemList(false);
+                        } }, label));
+                })),
+                react_1.default.createElement(Styled.ListBottomMargin, null)))),
+        isMobile && ( // fyi. (PC 모드) useOverlayPreventScroll 호출자체를 안해야해서 렌더링안함.
+        react_1.default.createElement(BottomSheet_1.TitleBottomSheet, { visible: visibleItemList, onMaskClick: () => handleVisibleItemList(false) },
+            react_1.default.createElement(BottomSheet_1.TitleBottomSheet.Body, { hasContentPadding: false },
+                react_1.default.createElement(BottomSheet_1.TitleBottomSheet.Title, { hasContentPadding: false, title: bottomSheetTitle }),
+                react_1.default.createElement(List_1.BottomSheetItemList, { item: itemList, onClick: ({ value }) => {
+                        onChange(value);
+                        handleVisibleItemList(false);
+                    } }))))));
+};
+exports.SelectBox = SelectBox;
+exports.SelectBoxStyled = __importStar(require("./index.styled"));

package/dist/components/SelectBox/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/SelectBox/index.spec.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = require(".");
+const props = {
+    itemList: [],
+    onChange: (val) => {
+        console.log('onChange', val);
+    },
+};
+describe('<SelectBox />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null,
+            "\uD655\uC778",
+            react_1.default.createElement(_1.SelectBox, Object.assign({}, props))));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

package/dist/components/SelectBox/index.styled.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemListWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ListBottomMargin: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Item: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    rotateArrow: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Desktop: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Mobile: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/SelectBox/index.styled.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mobile = exports.Desktop = exports.IconWrapper = exports.Item = exports.ItemList = exports.ListBottomMargin = exports.ItemListWrapper = exports.Wrapper = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const utils_1 = require("../../utils");
+const TextStyles_1 = require("../../core/TextStyles");
+const Colors_1 = require("../../core/Colors");
+const style_constants_1 = require("../../constants/style.constants");
+exports.Wrapper = styled_1.default.div `
+	& > div > .select-box {
+		cursor: pointer;
+	}
+	position: relative;
+`;
+exports.ItemListWrapper = styled_1.default.div `
+	position: absolute;
+	z-index: ${style_constants_1.zIndex.basicLayer + 1};
+	width: 100%;
+	height: max-content;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		top: 70px;
+	`)}
+`;
+exports.ListBottomMargin = styled_1.default.div `
+	height: 80px;
+	pointer-events: none;
+`;
+exports.ItemList = styled_1.default.div `
+	box-shadow: 0 2px 10px ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.black, '20%')};
+	background-color: ${Colors_1.basicColors.white};
+	border-radius: 10px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	max-height: ${65 * 4.5}px;
+	overflow-y: scroll;
+`;
+exports.Item = styled_1.default.div `
+	width: 100%;
+	height: 50px;
+	padding: 15px 25px;
+	cursor: pointer;
+	${(0, TextStyles_1.title2)({ color: Colors_1.basicColors.gray400 })};
+	background-color: ${Colors_1.basicColors.white};
+
+	&:first-of-type {
+		border-top-right-radius: 10px;
+		border-top-left-radius: 10px;
+	}
+
+	&:last-of-type {
+		border-bottom-right-radius: 10px;
+		border-bottom-left-radius: 10px;
+	}
+
+	&:hover {
+		background-color: ${Colors_1.basicColors.gray25};
+	}
+
+	&:active {
+		background-color: ${Colors_1.basicColors.gray50};
+	}
+`;
+exports.IconWrapper = styled_1.default.div `
+	position: absolute;
+	z-index: 10;
+	right: 20px;
+	top: ${({ rotateArrow }) => (rotateArrow ? '18px' : '20px')};
+	cursor: pointer;
+	transform: ${({ rotateArrow }) => (rotateArrow ? 'rotate(180deg)' : 'rotate(0)')};
+	pointer-events: none;
+`;
+exports.Desktop = styled_1.default.div `
+	${(0, utils_1.Smaller)((0, react_1.css) `
+		display: none;
+	`)}
+`;
+exports.Mobile = styled_1.default.div `
+	${(0, utils_1.Larger)((0, react_1.css) `
+		display: none;
+	`)}
+`;

package/dist/components/Tab/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type TabTypeProps = 'fixed' | 'scroll';
+type TabProps = {
+    list: string[];
+    onChange: (index: number) => void;
+    defaultActiveIndex?: number;
+    tabType?: TabTypeProps;
+};
+declare const Tab: React.FC<TabProps>;
+export type { TabProps, TabTypeProps };
+export { Tab };

package/dist/components/Tab/index.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const Tab = ({ list, onChange, defaultActiveIndex, tabType = 'fixed' }) => {
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(defaultActiveIndex !== null && defaultActiveIndex !== void 0 ? defaultActiveIndex : 0);
+    const widthPerItem = 100 / (list.length || 1);
+    const handleClick = (0, react_1.useCallback)((idx) => {
+        setActiveIndex(idx);
+        onChange(idx);
+    }, [onChange]);
+    return (react_1.default.createElement(Styled.Wrapper, { tabType: tabType }, list.map((item, idx) => (react_1.default.createElement(Styled.Item, { key: idx, widthPerItem: widthPerItem, active: activeIndex === idx, onClick: () => handleClick(idx), tabType: tabType }, item)))));
+};
+exports.Tab = Tab;

package/dist/components/Tab/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Tab/index.spec.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = require(".");
+const props = {
+    list: ['라벨1', '라벨2', '라벨3'],
+    tabType: 'fixed',
+    onChange: () => {
+        console.log('onChange');
+    },
+};
+describe('<Tab />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(_1.Tab, Object.assign({}, props)));
+        expect(react_2.screen.getByText('라벨1')).toBeInTheDocument();
+    });
+});

package/dist/components/Tab/index.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TabProps } from '.';
+type Story = StoryObj<TabProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Tabs-532da8d4d94b48e4a92f954b678e1870?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 화면 내 연관된 콘텐츠들을 카테고리로 분류하여 제공할 때 사용합니다.
+ * 사용자는 페이지를 벗어나지 않고 탭을 통해 카테고리 별 콘텐츠를 확인할 수 있습니다.
+ *
+ */
+declare const meta: Meta<TabProps>;
+export default meta;
+export declare const Story1: Story;
+export declare const Story2: Story;