@tripie-pyotato/design-system 0.0.0

package/dist/src/components/Accordian/variants.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACCORDIAN_VARIANTS = void 0;
+var colors_1 = require("../../shared/colors");
+exports.ACCORDIAN_VARIANTS = {
+    DETAILS: {
+        closed: function () { return ({
+            height: '0%',
+            opacity: 0,
+            display: 'none',
+        }); },
+        open: function () { return ({
+            transform: {
+                height: '100%',
+            },
+            transition: {
+                duration: 2,
+                bounce: 0,
+                damping: 2,
+                stiffness: 10,
+            },
+        }); },
+    },
+    BUTTON: {
+        closed: function () { return ({}); },
+        open: function () { return ({
+            rotate: '45deg',
+            transition: {
+                duration: 0.5,
+                bounce: 0,
+            },
+        }); },
+    },
+    DIVIDER: {
+        closed: function () { return ({
+            backgroundColor: colors_1.default[400],
+        }); },
+        open: function () { return ({
+            backgroundColor: colors_1.default[50],
+            transition: {
+                duration: 0.5,
+                bounce: 0,
+            },
+        }); },
+    },
+};

package/dist/src/components/Carousel/Carousel.jsx

@@ -0,0 +1,84 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var react_1 = require("react");
+var react_intersection_observer_1 = require("react-intersection-observer");
+var NoStyleButton_1 = require("../TripieButton/NoStyle/NoStyleButton");
+var TripieContainer_1 = require("../TripieContainer/TripieContainer");
+var Icon_1 = require("../TripieIcon/Icon");
+var carousel_module_scss_1 = require("./carousel.module.scss");
+var cx = bind_1.default.bind(carousel_module_scss_1.default);
+var Carousel = function (_a) {
+    var items = _a.items, className = _a.className;
+    var _b = (0, react_1.useState)(0), focusedIndex = _b[0], setFocusedIndex = _b[1];
+    var ref = (0, react_1.useRef)(null);
+    var handleScrollButton = (0, react_1.useCallback)(function (direction) {
+        var _a, _b, _c;
+        var next = focusedIndex;
+        setFocusedIndex(function (prevIndex) {
+            if (direction === 'prev') {
+                next = prevIndex != 0 ? prevIndex - 1 : 0;
+                return next;
+            }
+            if (direction === 'next') {
+                next = prevIndex != items.length - 1 ? prevIndex + 1 : items.length - 1;
+                return next;
+            }
+            return prevIndex;
+        });
+        if (((_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[next]) != null) {
+            (_c = ref.current.children) === null || _c === void 0 ? void 0 : _c[next].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    }, [ref, focusedIndex]);
+    return (<TripieContainer_1.default margin="none" className={cx('carousel')}>
+      {items.length > 1 && focusedIndex != 0 ? (<NoStyleButton_1.default name="previous" action={function () { return handleScrollButton('prev'); }}>
+          <Icon_1.default.Scroll className={cx('scroll-icon', 'next-icon')} next={false}/>
+        </NoStyleButton_1.default>) : null}
+      <TripieContainer_1.default margin="none" className={cx('flex-items', 'carousel-inner')}>
+        <TripieContainer_1.default margin="none" className={cx('insta-like-carousel-container', className)} refs={ref}>
+          {items.map(function (item, index) { return (<CarouselItem key={"carousel-item-".concat(item === null || item === void 0 ? void 0 : item.key)} index={index} setFocusedIndex={setFocusedIndex} focusedIndex={focusedIndex}>
+              {item}
+            </CarouselItem>); })}
+        </TripieContainer_1.default>
+      </TripieContainer_1.default>
+      {items.length > 1 && focusedIndex != items.length - 1 ? (<NoStyleButton_1.default name="next" action={function () { return handleScrollButton('next'); }}>
+          <Icon_1.default.Scroll className={cx('scroll-icon', 'prev-icon')}/>
+        </NoStyleButton_1.default>) : null}
+    </TripieContainer_1.default>);
+};
+var CarouselItem = function (_a) {
+    var children = _a.children, className = _a.className, index = _a.index, setFocusedIndex = _a.setFocusedIndex, focusedIndex = _a.focusedIndex, _b = _a.threshold, threshold = _b === void 0 ? 0.6 : _b;
+    var _c = (0, react_intersection_observer_1.useInView)({
+        threshold: threshold, // 60% 보여야 동작
+        triggerOnce: false, // 가시성 체크
+    }), ref = _c.ref, inView = _c.inView;
+    // 보이면 스크롤한 인덱스로 이동
+    (0, react_1.useEffect)(function () {
+        if (inView && index != focusedIndex) {
+            setFocusedIndex(index);
+        }
+    }, [inView, focusedIndex]);
+    // 버튼 클릭으로 보이지 않는 경우 인접한 캐로솔로 인덱스 포커스
+    (0, react_1.useEffect)(function () {
+        if (!inView && index != focusedIndex) {
+            setFocusedIndex(focusedIndex);
+        }
+    }, [inView, focusedIndex]);
+    return (<TripieContainer_1.default margin="none" refs={ref} className={cx('insta-like-carousel-item', focusedIndex == index ? 'focused' : '', className)}>
+      {children}
+    </TripieContainer_1.default>);
+};
+// 좌표를 클릭하는 등 외부의 조작으로 carousel 포커싱이 결정되어 스타일만 carousel 형태
+var ControlledCarousel = function (_a) {
+    var children = _a.children, className = _a.className;
+    return (<TripieContainer_1.default margin="none" className={cx('carousel')}>
+      <TripieContainer_1.default margin="none" className={cx('flex-items', 'carousel-inner')}>
+        <TripieContainer_1.default margin="none" className={cx('insta-like-carousel-container', className)}>
+          {children}
+        </TripieContainer_1.default>
+      </TripieContainer_1.default>
+    </TripieContainer_1.default>);
+};
+Carousel.Controlled = ControlledCarousel;
+exports.default = Carousel;

package/dist/src/components/Carousel/Carousel.spec.jsx

@@ -0,0 +1,203 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@testing-library/react");
+var react_intersection_observer_1 = require("react-intersection-observer");
+var vitest_1 = require("vitest");
+var TripieImage_1 = require("../TripieImage/TripieImage");
+var Carousel_1 = require("./Carousel");
+var images_1 = require("./images");
+// https://vitest.dev/guide/mocking#globals
+var IntersectionObserverMock = vitest_1.vi.fn(function () { return ({
+    disconnect: vitest_1.vi.fn(),
+    observe: vitest_1.vi.fn(),
+    takeRecords: vitest_1.vi.fn(),
+    unobserve: vitest_1.vi.fn(),
+}); });
+vitest_1.vi.stubGlobal('IntersectionObserver', IntersectionObserverMock);
+vitest_1.vi.mock('react-intersection-observer', function () { return ({
+    useInView: vitest_1.vi.fn(function () { return ({
+        ref: vitest_1.vi.fn(), // Mock function
+        inView: false, // Start as false
+    }); }),
+}); });
+// Mock `scrollIntoView` since JSDOM doesn’t have it
+Element.prototype.scrollIntoView = vitest_1.vi.fn();
+// vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView').mockImplementation(() => {});
+react_intersection_observer_1.useInView.mockImplementation(function (_a) {
+    var threshold = _a.threshold;
+    return {
+        ref: vitest_1.vi.fn(),
+        inView: threshold === 0.6,
+    };
+});
+(0, vitest_1.describe)('Carousel Component', function () {
+    (0, vitest_1.it)('1. 캐로솔 이미지가 1개인 경우 다음/이전 버튼이 보이지 않는다.', function () {
+        (0, react_1.render)(<Carousel_1.default items={images_1.default.slice(0, 1).map(function (item, index) { return (<TripieImage_1.default.WithSourceUrl sizes="large" key={item.src + index} alt={item.alt} src={item.src} sourceUrl={item.sourceUrl} blurDataURL={item.blurDataURL}/>); })}/>);
+        var carouselElement = react_1.screen.getByAltText(images_1.default[0].alt);
+        (0, vitest_1.expect)(carouselElement).toBeInTheDocument();
+        var nextButton = react_1.screen.queryByRole('button', { name: /next/i });
+        var prevButton = react_1.screen.queryByRole('button', { name: /previous/i });
+        (0, vitest_1.expect)(nextButton).not.toBeInTheDocument();
+        (0, vitest_1.expect)(prevButton).not.toBeInTheDocument();
+    });
+    (0, vitest_1.it)('2. 캐로솔 이미지가 여려 개인 경우, 하나의 이미지만 focus된다.', function () {
+        var container = (0, react_1.render)(<Carousel_1.default items={images_1.default.map(function (item, index) { return (<TripieImage_1.default.WithSourceUrl sizes="large" key={item.src + index} alt={item.alt} src={item.src} sourceUrl={item.sourceUrl} blurDataURL={item.blurDataURL}/>); })}/>).container;
+        var carouselItemElements = Array.from(container.querySelectorAll('*')).filter(function (el) {
+            return el.className.match(/carousel-item/);
+        });
+        var focusedElement = carouselItemElements.filter(function (el) { return el.className.match(/focused/); });
+        (0, vitest_1.expect)(focusedElement.length).toEqual(1);
+    });
+    (0, vitest_1.it)('3. 캐로솔 아이템이 2개인 경우, 다음 버튼을 클릭하면 두번째 아이템에 focus되고 이전 버튼이 생기고, 다음 버튼이 사라진다.', function () {
+        var container = (0, react_1.render)(<Carousel_1.default items={images_1.default.slice(0, 2).map(function (item, index) { return (<TripieImage_1.default.WithSourceUrl sizes="large" key={item.src + index} alt={item.alt} src={item.src} sourceUrl={item.sourceUrl} blurDataURL={item.blurDataURL}/>); })}/>).container;
+        (0, vitest_1.expect)(container).toBeInTheDocument();
+        var buttonElements = container.querySelectorAll('button');
+        var carouselItemElements = Array.from(container.querySelectorAll('*')).filter(function (el) {
+            return el.className.match(/carousel-item/);
+        });
+        (0, vitest_1.expect)(carouselItemElements.length).toEqual(2);
+        var focusedElement = carouselItemElements.findIndex(function (el) { return el.className.match(/focused/); });
+        (0, vitest_1.expect)(focusedElement).toEqual(0);
+        (0, vitest_1.expect)(buttonElements.length).toEqual(1); // 버튼이 하나만 있고,
+        (0, vitest_1.expect)(buttonElements[0].name).toEqual('next'); // 해당 버튼이 다음 버튼
+        (0, vitest_1.expect)(buttonElements[0].name).not.toEqual('previous'); // 해당 버튼이 다음 버튼
+    });
+    (0, vitest_1.it)('4. 3개의 이미지 캐로솔에서 다음버튼을 두 번 누르면 이미지 1->2->3으로, 이전 버튼을 1번 누르면 3->2로 focus된다.', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var container, scrollContainer, carouselItems, nextButton, prevButton;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    container = (0, react_1.render)(<Carousel_1.default items={images_1.default.slice(0, 3).map(function (item, index) { return (<TripieImage_1.default.WithSourceUrl sizes="large" key={item.src + index} alt={item.alt} src={item.src} sourceUrl={item.sourceUrl} blurDataURL={item.blurDataURL}/>); })}/>).container;
+                    (0, vitest_1.expect)(container).toBeInTheDocument();
+                    scrollContainer = Array.from(container.querySelectorAll('*')).filter(function (el) {
+                        return el.className.match(/carousel-container/);
+                    })[0];
+                    (0, vitest_1.expect)(scrollContainer).toBeInTheDocument();
+                    carouselItems = Array.from(container.querySelectorAll('*')).filter(function (el) { return el.className.match(/carousel-item/); });
+                    (0, vitest_1.expect)(carouselItems.length).toBe(3);
+                    nextButton = container.querySelector('button[name="next"]');
+                    (0, vitest_1.expect)(nextButton).toBeInTheDocument();
+                    // 다음 버튼 클릭
+                    return [4 /*yield*/, (0, react_1.act)(function () { return react_1.fireEvent.click(nextButton); })];
+                case 1:
+                    // 다음 버튼 클릭
+                    _a.sent();
+                    // 클래스 변경, 두번째 항목(인덱스1)에만 focus
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            (0, vitest_1.expect)(carouselItems[0].classList.contains('focused')).toBe(false);
+                            (0, vitest_1.expect)(carouselItems[1].classList.contains('focused')).toBe(true);
+                            (0, vitest_1.expect)(carouselItems[2].classList.contains('focused')).toBe(false);
+                        })];
+                case 2:
+                    // 클래스 변경, 두번째 항목(인덱스1)에만 focus
+                    _a.sent();
+                    // 다음 버튼 클릭
+                    return [4 /*yield*/, (0, react_1.act)(function () { return react_1.fireEvent.click(nextButton); })];
+                case 3:
+                    // 다음 버튼 클릭
+                    _a.sent();
+                    // 클래스 변경, 세번째 항목(인덱스2)에만 focus
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            (0, vitest_1.expect)(carouselItems[0].classList.contains('focused')).toBe(false);
+                            (0, vitest_1.expect)(carouselItems[1].classList.contains('focused')).toBe(false);
+                            (0, vitest_1.expect)(carouselItems[2].classList.contains('focused')).toBe(true);
+                            (0, vitest_1.expect)(nextButton).not.toBeInTheDocument(); // 마지막 항목이므로 다음 버튼이 보이지 않는다.
+                        })];
+                case 4:
+                    // 클래스 변경, 세번째 항목(인덱스2)에만 focus
+                    _a.sent();
+                    prevButton = container.querySelector('button[name="previous"]');
+                    (0, vitest_1.expect)(prevButton).toBeInTheDocument();
+                    // 이전 버튼 클릭
+                    return [4 /*yield*/, (0, react_1.act)(function () { return react_1.fireEvent.click(prevButton); })];
+                case 5:
+                    // 이전 버튼 클릭
+                    _a.sent();
+                    // 클래스 변경, 두번째 항목(인덱스)에만 focus
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            (0, vitest_1.expect)(carouselItems[0].classList.contains('focused')).toBe(false);
+                            (0, vitest_1.expect)(carouselItems[1].classList.contains('focused')).toBe(true);
+                            (0, vitest_1.expect)(carouselItems[2].classList.contains('focused')).toBe(false);
+                        })];
+                case 6:
+                    // 클래스 변경, 두번째 항목(인덱스)에만 focus
+                    _a.sent();
+                    (0, vitest_1.expect)(Element.prototype.scrollIntoView).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    // !! 🤔 스크롤 테스트가 잘 안됨 !!  https://github.com/f-lab-edu/Tripie/blob/e6a096584da85ba6cfba371464b96aee4e77847c/packages/design-system/src/components/Carousel/Carousel.tsx#L92 useEffect가 안먹힘.
+    // it('5. 스크롤', async () => {
+    //   const { container } = render(
+    //     <Carousel
+    //       items={images.slice(0, 2).map((item, index) => (
+    //         <TripieImage.WithSourceUrl
+    //           sizes="large"
+    //           key={item.src + index}
+    //           alt={item.alt}
+    //           src={item.src}
+    //           sourceUrl={item.sourceUrl}
+    //           blurDataURL={item.blurDataURL}
+    //         />
+    //       ))}
+    //     />
+    //   );
+    //   expect(container).toBeInTheDocument();
+    //   // Get all carousel items
+    //   const carouselItems = Array.from(container.querySelectorAll('*')).filter(el => el.className.match(/carousel-item/));
+    //   expect(carouselItems.length).toBe(2);
+    //   // Ensure first item is focused initially
+    //   expect(carouselItems[0].classList.contains('focused')).toBe(true);
+    //   expect(carouselItems[1].classList.contains('focused')).toBe(false);
+    //   act(() => {
+    //     container.scrollLeft = 1000;
+    //     fireEvent.scroll(container);
+    // !! 동작하므로 scroll은 되는 것 같지만 state 변경이 잘 안된듯
+    //     container.addEventListener('scroll', () => {
+    //       console.log('Scroll event triggered!');
+    //     });
+    //   });
+    //   // Wait for class update where only the second item is focused
+    //   await waitFor(() => {
+    //     expect(carouselItems[0].classList.contains('focused')).toBe(false);
+    //     expect(carouselItems[1].classList.contains('focused')).toBe(true);
+    //   });
+    // });
+});

package/dist/src/components/Carousel/carousel.stories.jsx

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselImageOf5 = exports.CarouselImageOf4 = exports.CarouselImageOf3 = exports.Default = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var TripieImage_1 = require("../TripieImage/TripieImage");
+var Carousel_1 = require("./Carousel");
+var images_1 = require("./images");
+var meta = {
+    title: 'tripie-ui/Carousel',
+    component: Carousel_1.default,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: '인스타그램의 이미지 carousel와 같이 임계점을 넘어야 해당 이미지에 고정되는 carousel 컴포넌트입니다.ex. 기본은 인접한 게시물의 60%가 보여야 해당 콘텐츠로 넘어갑니다.',
+            },
+        },
+    },
+    argTypes: {},
+    decorators: [
+        function (story, context) {
+            var _a = (0, hooks_1.useAppTheme)(), mode = _a.mode, setMode = _a.setMode;
+            var selectedTheme = context.globals.theme || mode;
+            (0, react_1.useEffect)(function () {
+                setMode(selectedTheme);
+            }, [selectedTheme]);
+            return <div className={"".concat(context.globals.theme)}>{story()}</div>;
+        },
+    ],
+};
+exports.default = meta;
+exports.Default = {
+    name: 'Carousel.Image.2',
+    render: function () {
+        return (<Carousel_1.default items={images_1.default.slice(0, 2).map(function (item, index) { return (<TripieImage_1.default.WithSourceUrl sizes="large" key={item.src + index} alt={item.alt} src={item.src} sourceUrl={item.sourceUrl} blurDataURL={item.blurDataURL}/>); })}/>);
+    },
+};
+exports.CarouselImageOf3 = {
+    name: 'Carousel.Image.3',
+    render: function () {
+        return (<Carousel_1.default items={images_1.default.slice(0, 3).map(function (item, index) { return (<TripieImage_1.default.WithSourceUrl sizes="large" key={item.src + index} alt={item.alt} src={item.src} sourceUrl={item.sourceUrl} blurDataURL={item.blurDataURL}/>); })}/>);
+    },
+};
+exports.CarouselImageOf4 = {
+    name: 'Carousel.Image.4',
+    render: function () {
+        return (<Carousel_1.default items={images_1.default.slice(0, 4).map(function (item, index) { return (<TripieImage_1.default.WithSourceUrl sizes="large" key={item.src + index} alt={item.alt} src={item.src} sourceUrl={item.sourceUrl} blurDataURL={item.blurDataURL}/>); })}/>);
+    },
+};
+exports.CarouselImageOf5 = {
+    name: 'Carousel.Image.5',
+    render: function () {
+        return (<Carousel_1.default items={images_1.default.map(function (item, index) { return (<TripieImage_1.default.WithSourceUrl sizes="large" key={item.src + index} alt={item.alt} src={item.src} sourceUrl={item.sourceUrl} blurDataURL={item.blurDataURL}/>); })}/>);
+    },
+};

package/dist/src/components/Carousel/images.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var images = [
+    {
+        sizes: 'large',
+        alt: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/1037f801-0b0e-40b1-bff1-c5be7d66eab1.jpeg',
+        src: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/1037f801-0b0e-40b1-bff1-c5be7d66eab1.jpeg',
+        sourceUrl: 'huistenbosch.co.jp/gourmet/64',
+        blurDataURL: 'data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LC85ai8yd0JEQUFnSUNBZ0pDQWtLQ2drTkRnd09EUk1SRUJBUkV4d1VGaFFXRkJ3ckd4OGJHeDhiS3lZdUpTTWxMaVpFTlM4dk5VUk9RajVDVGw5VlZWOTNjWGVjbk5ILzJ3QkRBUWdJQ0FnSkNBa0tDZ2tORGd3T0RSTVJFQkFSRXh3VUZoUVdGQndyR3g4Ykd4OGJLeVl1SlNNbExpWkVOUzh2TlVST1FqNUNUbDlWVlY5M2NYZWNuTkgvd2dBUkNBQVFBQkFEQVNJQUFoRUJBeEVCLzhRQUZnQUJBUUVBQUFBQUFBQUFBQUFBQUFBQUJnTUYvOFFBRlFFQkFRQUFBQUFBQUFBQUFBQUFBQUFBQXdULzJnQU1Bd0VBQWhBREVBQUFBRXN6MkdGSC84UUFKUkFBQWdJQkFnUUhBQUFBQUFBQUFBQUFBUUlEQkJJQUVRVVVNVkVURlNFaU1sSnkvOW9BQ0FFQkFBRS9BRnQwR3hyclRYbW5iWmc3bkdMY2RHUDI3alVGV0VoY1ZnbEhVeU14YmNkOGZUVnpqbEdLSzBKSjRzekZKNFlpSU14WS9FKzNwcFpxL0pWZk1PS1N6TWNDd2pjSXY0eFRZNi8veEFBYUVRQUNBZ01BQUFBQUFBQUFBQUFBQUFBQkVRQVNBaE5oLzlvQUNBRUNBUUUvQU53b0dNbDEyTS8veEFBWUVRRUJBQU1BQUFBQUFBQUFBQUFBQUFBQkVRQVN3Zi9hQUFnQkF3RUJQd0RSckU1bi85az0nIC8+CiAgPC9zdmc+Cg==',
+    },
+    {
+        sizes: 'large',
+        alt: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/5aa4fd86-ce45-4675-a227-a1577bd8d823.jpeg',
+        src: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/5aa4fd86-ce45-4675-a227-a1577bd8d823.jpeg',
+        sourceUrl: 'huistenbosch.co.jp/gourmet/329',
+        blurDataURL: 'data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LC85ai8yd0JEQUFnSUNBZ0pDQWtLQ2drTkRnd09EUk1SRUJBUkV4d1VGaFFXRkJ3ckd4OGJHeDhiS3lZdUpTTWxMaVpFTlM4dk5VUk9RajVDVGw5VlZWOTNjWGVjbk5ILzJ3QkRBUWdJQ0FnSkNBa0tDZ2tORGd3T0RSTVJFQkFSRXh3VUZoUVdGQndyR3g4Ykd4OGJLeVl1SlNNbExpWkVOUzh2TlVST1FqNUNUbDlWVlY5M2NYZWNuTkgvd2dBUkNBQVFBQkFEQVNJQUFoRUJBeEVCLzhRQUZnQUJBUUVBQUFBQUFBQUFBQUFBQUFBQUJBVUcvOFFBRkFFQkFBQUFBQUFBQUFBQUFBQUFBQUFBQmYvYUFBd0RBUUFDRUFNUUFBQUEwNW16eld2L3hBQWhFQUFEQUFFREJBTUFBQUFBQUFBQUFBQUJBZ01SQUFRVEJSSWhNUlFWWWYvYUFBZ0JBUUFCUHdDa3BmRVZJQ2ZLaUZITGVQYlp5UXZyOE9vN0xkYm8zanVKSkpPSWhheHFmTEgwZTBnRWE2cjA1NUZhSStUSHRkeU1qTFpKeVJyN3ppdFMrOUNxenFxRW9DUW9HVHIveEFBYkVRQURBUUFEQVFBQUFBQUFBQUFBQUFBQkF4RUNBQklUSWYvYUFBZ0JBZ0VCUHdCU2J2eGRoUnU4OVFWMHlUNFFlZi9FQUJvUkFBSUNBd0FBQUFBQUFBQUFBQUFBQUFFQ0F4SUFJekgvMmdBSUFRTUJBVDhBRnh0aGtmcFltMmYvMlE9PScgLz4KICA8L3N2Zz4K',
+    },
+    {
+        sizes: 'large',
+        alt: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/0e054e18-9b82-4382-a239-75891abfd614.jpeg',
+        src: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/0e054e18-9b82-4382-a239-75891abfd614.jpeg',
+        sourceUrl: 'huistenbosch.co.jp/gourmet/73',
+        blurDataURL: 'data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFCQUFBQUFRQ0FNQUFBQW9MUTlUQUFBQmpGQk1WRVVEQUFDOFhFNjZVMHdNQ0FpaVpFTzdnbC9EaFZvR0F3VzFjRXVNVlRzVkVoVXVLUzBVQ3cwd0xUQTRORG1pYUV5ZlhqNm1ia3lYWHo2SlBqbkdURVFlR3lYT2syZjBzUXIzNjloYWRpeUlxRE5pU1RsR05pNC9MQ3pkbm5GTEd4eUVTeTdDZFVMN3p5cjd4NHl5UFRpM2UwaktpbGJTV1ZQeHNCbXNTRCtYYWovVmRXYWFQVFpXVjJTbVNEZm1tUjcvMlNiUGZGdjV4aVgyOVBEODkrdUVocG1pbWp2OC9QcnUyOGhEUDBRdlBDZmd4cWRzbGl5SmhZbVJlR1QxcHdMR3kyMzZ6bVIzWGxDZ2JFVFdtV0pUT1N2Z21WclRqVldvV3pheVprbXJuWHBpWDJWM0hSekxoVjVJUlV4NVNUYTRtSVBDZWs5MVJpK2liRHlOTGlyYWYzR3RrempwZEdUb3ExSDhvNWZHa1ZIaHFUcnBybDM2MXBQd3dYYmNhbHZrNHVESmxsMy8xb25pcGgzZmpES3pzTE95a3gyWWRSUHN3SVYvZVg3WHRKMkpoU3hqWFYybGx4dGFneS8vNHF6MjM4VDR1VDNMNEVPeHRDcjh3MXRXVlJUZjJNL3pueURSMUVHL3VIMjh5a1gvcWkvUjA5cVhsWjRrTFJTeXMwYm95MFgvOHBSSllDVzR0anlYeWdvQUFBQUFDWEJJV1hNQUFoY29BQUlYS0FFUCsrY1dBQUFCQWtsRVFWUjRuRFhIWlZlREFCaEE0UmNHak5oZ3hJaDFkM2VIM2QzZDNkMU8vZU1lOWZoOHVlZkNjTHhzcm55K1FmbTFubis1cTU5QVBtNnVXSjdlRzlXUGRsc3RaZzloYUc3LzlQcWgxZW9vemVhbFd0d0ZUeXFWS2RTMDJ0ZnovYzE1THJjQm5veVMxTTQweTJQcG9ucFVVck1RVWtMYmU4ZVdxOXVHakdNQ1BnSEo1ZFcxblRSZmlKQUhXMHRUTGhlZ1VlOUtERVVvbWR0Y21CNFhNRUJpYVhkaVBTRVRSTUR2RnlnTTBMQWtSZWNSWXBJa1RTWVR4c0hzWWhCQmd6NXlGQ2NKbnVKNEVNV3dOT01iQ1RnR0IvcjdjTW9LWTZ4ZGREb05FYS9EM2RQZFpXZUFOckpHeHNqYWVxMDJ4a3pUT2dBQXZjNWcwT2wvL041Zi91bS9BVElpSytQS3lJZ2tBQUFBQUVsRlRrU3VRbUNDJyAvPgogIDwvc3ZnPgo=',
+    },
+    {
+        sizes: 'large',
+        alt: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/24201c4a-ad69-489c-bd73-96b830ce9040.jpeg',
+        src: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/24201c4a-ad69-489c-bd73-96b830ce9040.jpeg',
+        sourceUrl: 'huistenbosch.co.jp/gourmet/66#photo',
+        blurDataURL: 'data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LC85ai8yd0JEQUFnSUNBZ0pDQWtLQ2drTkRnd09EUk1SRUJBUkV4d1VGaFFXRkJ3ckd4OGJHeDhiS3lZdUpTTWxMaVpFTlM4dk5VUk9RajVDVGw5VlZWOTNjWGVjbk5ILzJ3QkRBUWdJQ0FnSkNBa0tDZ2tORGd3T0RSTVJFQkFSRXh3VUZoUVdGQndyR3g4Ykd4OGJLeVl1SlNNbExpWkVOUzh2TlVST1FqNUNUbDlWVlY5M2NYZWNuTkgvd2dBUkNBQVFBQkFEQVNJQUFoRUJBeEVCLzhRQUZnQUJBUUVBQUFBQUFBQUFBQUFBQUFBQUJnTUUvOFFBRlFFQkFRQUFBQUFBQUFBQUFBQUFBQUFBQkFYLzJnQU1Bd0VBQWhBREVBQUFBSkNGZXdWSC84UUFJeEFBQVFNREJBSURBQUFBQUFBQUFBQUFBZ0VEQkJFU0lRQUZFeUlHTVRKQllmL2FBQWdCQVFBQlB3Q1REOGJoczJUNGR6dnNXMk83cDV4MjA5UDNTRklSM2hjYVVBUVE1VzBKYkV3aVpUTk5iZURUVUxjQWZKS2lWUmRKQ080UitRMVgzK2EyOTlpWkZtdXlsYjVXMUVVS3hWVHRYNjlEU21kZi84UUFHQkVCQVFBREFBQUFBQUFBQUFBQUFBQUFBZ0VBRWlILzJnQUlBUUlCQVQ4QU5STTV0TS8veEFBWUVRRUJBQU1BQUFBQUFBQUFBQUFBQUFBQkFnQURJZi9hQUFnQkF3RUJQd0RZWGFWZEp6UC8yUT09JyAvPgogIDwvc3ZnPgo=',
+    },
+    {
+        sizes: 'large',
+        alt: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/e3dc3514-e5c7-456e-93c2-e342483aa769.jpeg',
+        src: 'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/e3dc3514-e5c7-456e-93c2-e342483aa769.jpeg',
+        sourceUrl: 'huistenbosch.co.jp/gourmet/58#information',
+        blurDataURL: 'data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LC85ai8yd0JEQUFnSUNBZ0pDQWtLQ2drTkRnd09EUk1SRUJBUkV4d1VGaFFXRkJ3ckd4OGJHeDhiS3lZdUpTTWxMaVpFTlM4dk5VUk9RajVDVGw5VlZWOTNjWGVjbk5ILzJ3QkRBUWdJQ0FnSkNBa0tDZ2tORGd3T0RSTVJFQkFSRXh3VUZoUVdGQndyR3g4Ykd4OGJLeVl1SlNNbExpWkVOUzh2TlVST1FqNUNUbDlWVlY5M2NYZWNuTkgvd2dBUkNBQVFBQkFEQVNJQUFoRUJBeEVCLzhRQUZnQUJBUUVBQUFBQUFBQUFBQUFBQUFBQUJRWUgvOFFBRkFFQkFBQUFBQUFBQUFBQUFBQUFBQUFBQlAvYUFBd0RBUUFDRUFNUUFBQUFsZEFGWE9yL3hBQWpFQUFCQXdNRUFnTUFBQUFBQUFBQUFBQURBUUlFQlNFaUFCRVNFd1l4UVdGeS85b0FDQUVCQUFFL0FQSG80MmxFYkRkRE0rYjNYVVhqR0lpRmlMTGN1WElqdnJmYk4ya3FsSEIzQlJpakt4K0QrbEZIYjgzMUhTbFZFSFlhc1F4eUh0dzV2ZUgxYTZhLy84UUFHQkVBQWdNQUFBQUFBQUFBQUFBQUFBQUFBQUVDRVNMLzJnQUlBUUlCQVQ4QWl0MmYvOFFBR0JFQUF3RUJBQUFBQUFBQUFBQUFBQUFBQWhFaEFBSC8yZ0FJQVFNQkFUOEFJWHl4Yi8vWicgLz4KICA8L3N2Zz4K',
+    },
+];
+exports.default = images;

package/dist/src/components/Carousel/index.js

@@ -0,0 +1,20 @@
+"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 });
+exports.default = void 0;
+__exportStar(require("./Carousel"), exports);
+var Carousel_1 = require("./Carousel");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Carousel_1.default; } });

package/dist/src/components/Chip/Chip.jsx

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var bind_1 = require("classnames/bind");
+var chip_module_scss_1 = require("./chip.module.scss");
+var framer_motion_1 = require("framer-motion");
+var variants_1 = require("../../shared/variants");
+var cx = bind_1.default.bind(chip_module_scss_1.default);
+var Chip = function (_a) {
+    var children = _a.children, className = _a.className, onClick = _a.onClick, selected = _a.selected, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    return (<framer_motion_1.motion.button whileHover={'shine'} whileTap={'shine'} disabled={disabled} animate={selected ? 'selected' : 'rest'} variants={variants_1.SHINE_VARIANT} onClick={onClick} className={cx('chip', 'with-border', className)}>
+      {children}
+    </framer_motion_1.motion.button>);
+};
+var AccentedChip = function (_a) {
+    var children = _a.children, current = _a.current, className = _a.className, onClick = _a.onClick;
+    return (<framer_motion_1.motion.button initial={'rest'} className={cx('wrap', 'with-border', current === 'on' ? 'selected' : 'chip', className)} variants={variants_1.GLOW_VARIANT} whileHover={'glow'} onClick={onClick}>
+      <div className={cx('accented', current === 'on' ? 'selected' : 'chip')}>{children}</div>
+      <framer_motion_1.motion.div className={cx('glow')} animate={{ rotate: 360 }} transition={{
+            type: 'tween',
+            duration: 2,
+            ease: 'linear',
+            repeat: Infinity,
+        }}/>
+    </framer_motion_1.motion.button>);
+};
+Chip.Accented = AccentedChip;
+exports.default = Chip;

package/dist/src/components/Chip/Chip.spec.jsx

@@ -0,0 +1,103 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@testing-library/react");
+var vitest_1 = require("vitest");
+require("../../shared/variants");
+var Chip_1 = require("./Chip");
+// !! motion framer 올바르게 mock 하는 방법? props 못 읽는 문제..
+vitest_1.vi.mock('framer-motion', function () { return __awaiter(void 0, void 0, void 0, function () {
+    var actual;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, vitest_1.vi.importActual('framer-motion')];
+            case 1:
+                actual = _a.sent();
+                return [2 /*return*/, __assign(__assign({}, actual), { motion: {
+                            button: vitest_1.vi.fn(function (_a) {
+                                var animate = _a.animate, whileHover = _a.whileHover, whileTap = _a.whileTap, className = _a.className, props = __rest(_a, ["animate", "whileHover", "whileTap", "className"]);
+                                console.log('Mocked motion.button animate:', animate); // Debugging log
+                                return (<button data-animate={animate !== null && animate !== void 0 ? animate : 'rest'} // Ensure animate is always defined
+                                 data-while-hover={whileHover !== null && whileHover !== void 0 ? whileHover : ''} data-while-tap={whileTap !== null && whileTap !== void 0 ? whileTap : ''} className={className !== null && className !== void 0 ? className : ''} {...props}/>);
+                            }),
+                        } })];
+        }
+    });
+}); });
+(0, vitest_1.describe)('Chip Component', function () {
+    (0, vitest_1.it)('1. should have correct motion attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var chip;
+        return __generator(this, function (_a) {
+            (0, react_1.render)(<Chip_1.default selected={true}>Animated Chip</Chip_1.default>);
+            chip = react_1.screen.getByRole('button', { name: /Animated Chip/i });
+            expect(chip).toBeInTheDocument();
+            return [2 /*return*/];
+        });
+    }); });
+    (0, vitest_1.it)('2. Chip disabled 속성을 true로 설정하면 disable된다.', function () {
+        (0, react_1.render)(<Chip_1.default disabled={true}>Disabled Chip</Chip_1.default>);
+        var chip = react_1.screen.getByRole('button', { name: /Disabled Chip/i });
+        expect(chip).toBeDisabled();
+    });
+    (0, vitest_1.it)('2. Chip disabled 속성을 true로 설정하면 disable된다.', function () {
+        (0, react_1.render)(<Chip_1.default className={'restaurant'}>1</Chip_1.default>);
+        var chip = react_1.screen.getByRole('button', { name: /1/i });
+    });
+});