From 61451f64694d8f0ddf77dc858065727271729699 Mon Sep 17 00:00:00 2001
From: smithoo <smithoo@pubg.com>
Date: Wed, 11 Sep 2024 11:23:40 +0900
Subject: [PATCH] fix(VsStepper): apply index-selector-composable (#280)

---
 .../src/components/vs-stepper/VsStepper.scss  |  24 +-
 .../src/components/vs-stepper/VsStepper.vue   | 155 ++----
 .../vs-stepper/__tests__/vs-stepper.test.ts   | 457 ++++++++++++++----
 .../vlossom/src/components/vs-tabs/VsTabs.vue | 113 +----
 .../vs-tabs/__tests__/vs-tabs.test.ts         |   2 +-
 .../index-selector-composable.test.ts         | 233 +++++++++
 .../composables/index-selector-composable.ts  | 121 +++++
 packages/vlossom/src/composables/index.ts     |   1 +
 8 files changed, 793 insertions(+), 313 deletions(-)
 create mode 100644 packages/vlossom/src/composables/__tests__/index-selector-composable.test.ts
 create mode 100644 packages/vlossom/src/composables/index-selector-composable.ts

diff --git a/packages/vlossom/src/components/vs-stepper/VsStepper.scss b/packages/vlossom/src/components/vs-stepper/VsStepper.scss
index 81a8b5c83..1de7b9e7a 100644
--- a/packages/vlossom/src/components/vs-stepper/VsStepper.scss
+++ b/packages/vlossom/src/components/vs-stepper/VsStepper.scss
@@ -7,7 +7,7 @@ $stepButtonW: var(--vs-stepper-stepSize, 2.4rem);
     position: relative;
     -webkit-tap-highlight-color: transparent;
 
-    .vs-item-line {
+    .vs-step-line {
         background-color: var(--vs-area-bg-active);
         height: 0.3rem;
         left: $stepButtonW;
@@ -16,7 +16,7 @@ $stepButtonW: var(--vs-stepper-stepSize, 2.4rem);
         top: 50%;
         transform: translateY(-50%);
 
-        .vs-progress-line {
+        .vs-step-progress {
             background-color: var(--vs-stepper-activeColor, var(--vs-primary-comp-bg-active));
             height: 100%;
             opacity: 0.8;
@@ -33,7 +33,11 @@ $stepButtonW: var(--vs-stepper-stepSize, 2.4rem);
         list-style: none;
         margin-bottom: 4rem;
 
-        .vs-step {
+        &.vs-stepper-no-label {
+            margin-bottom: 0;
+        }
+
+        .vs-step-item {
             align-items: center;
             cursor: pointer;
             display: flex;
@@ -41,7 +45,7 @@ $stepButtonW: var(--vs-stepper-stepSize, 2.4rem);
             justify-content: center;
             position: relative;
 
-            .vs-item-step {
+            .vs-step-num {
                 align-items: center;
                 background-color: var(--vs-comp-bg);
                 color: var(--vs-comp-font);
@@ -67,7 +71,7 @@ $stepButtonW: var(--vs-stepper-stepSize, 2.4rem);
                 }
             }
 
-            .vs-item-name {
+            .vs-step-label {
                 color: var(--vs-stepper-labelFontColor, var(--vs-font-color));
                 font-size: $fontSize;
                 font-weight: 400;
@@ -83,28 +87,30 @@ $stepButtonW: var(--vs-stepper-stepSize, 2.4rem);
             }
 
             &.vs-previous {
-                .vs-item-step {
+                .vs-step-num {
                     border: var(--vs-stepper-activeColor, var(--vs-primary-comp-bg));
                     background-color: var(--vs-stepper-activeBackgroundColor, var(--vs-primary-comp-bg));
                     color: var(--vs-primary-comp-font);
                 }
 
-                .vs-item-name {
+                .vs-step-label {
                     color: var(--vs-stepper-labelFontColor, var(--vs-primary-comp-bg-active));
                 }
             }
 
             &.vs-selected {
-                .vs-item-step {
+                .vs-step-num {
                     border: 1px solid var(--vs-stepper-activeColor, var(--vs-primary-comp-bg));
                     background-color: var(--vs-stepper-activeBackgroundColor, var(--vs-primary-comp-bg));
                     color: var(--vs-primary-comp-font);
 
                     outline: 3px solid var(--vs-primary-comp-bg);
                     outline-offset: 3px;
+                    transition: outline;
+                    transition-delay: 0.15s;
                 }
 
-                .vs-item-name {
+                .vs-step-label {
                     font-weight: 600;
                     color: var(--vs-stepper-labelFontColor, var(--vs-primary-comp-bg));
                 }
diff --git a/packages/vlossom/src/components/vs-stepper/VsStepper.vue b/packages/vlossom/src/components/vs-stepper/VsStepper.vue
index 18d9ca747..5e8966e54 100644
--- a/packages/vlossom/src/components/vs-stepper/VsStepper.vue
+++ b/packages/vlossom/src/components/vs-stepper/VsStepper.vue
@@ -1,15 +1,15 @@
 <template>
     <vs-responsive :width="width" :grid="grid">
         <div :class="['vs-stepper', colorSchemeClass]" :style="{ ...computedStyleSet, ...fixedWidth }">
-            <div class="vs-item-line">
-                <div class="vs-progress-line" :style="progressWidth" />
+            <div class="vs-step-line">
+                <div class="vs-step-progress" :style="progressWidth" />
             </div>
-            <ul role="tablist" class="vs-steps">
+            <ul role="tablist" :class="['vs-steps', { 'vs-stepper-no-label': noLabel }]">
                 <li
-                    v-for="(item, index) in steps"
+                    v-for="(step, index) in steps"
                     ref="stepRefs"
-                    class="vs-step"
-                    :key="item"
+                    class="vs-step-item"
+                    :key="step"
                     :class="[
                         {
                             'vs-previous': isPrevious(index),
@@ -24,11 +24,11 @@
                     @click.stop="selectStep(index)"
                     @keydown.stop="handleKeydown"
                 >
-                    <div class="vs-item-step">
-                        <slot :name="`${item}-step`" :item="item" :index="index"> {{ index + 1 }} </slot>
+                    <div class="vs-step-num">
+                        <slot :name="`step-${step}`" :step="step" :index="index">{{ index + 1 }}</slot>
                     </div>
-                    <div class="vs-item-name">
-                        <slot :name="`${item}-name`" :item="item" :index="index"> {{ item }} </slot>
+                    <div class="vs-step-label" v-if="!noLabel">
+                        <slot :name="`label-${step}`" :step="step" :index="index">{{ step }}</slot>
                     </div>
                 </li>
             </ul>
@@ -38,7 +38,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, toRefs, ref, watch, type Ref, type PropType } from 'vue';
-import { useColorScheme, useStyleSet, getResponsiveProps } from '@/composables';
+import { useColorScheme, useStyleSet, getResponsiveProps, useIndexSelector } from '@/composables';
 import { VsComponent, ColorScheme } from '@/declaration';
 import { utils } from '@/utils';
 import VsResponsive from '@/components/vs-responsive/VsResponsive.vue';
@@ -53,19 +53,24 @@ export default defineComponent({
         ...getResponsiveProps(),
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsStepperStyleSet> },
-        disabled: { type: Array as PropType<number[]>, default: () => [] },
-        gap: { type: [String, Number], default: '' },
-        steps: {
-            type: Array as PropType<string[]>,
-            required: true,
-            validator: (prop: string[]) => {
-                const isValid = utils.object.isUniq(prop);
+        disabled: {
+            type: Array as PropType<number[]>,
+            default: () => [],
+            validator: (value: number[], props: any) => {
+                const stepsLength = props.steps.length;
+                const isValid = value.every((i) => i >= 0 && i < stepsLength);
                 if (!isValid) {
-                    utils.log.propError(name, 'steps', 'steps with duplicate items are not allowed');
+                    utils.log.propWarning(name, 'disabled', 'Disabled index is out of range.');
                 }
                 return isValid;
             },
         },
+        gap: { type: [String, Number], default: '' },
+        noLabel: { type: Boolean, default: false },
+        steps: {
+            type: Array as PropType<string[]>,
+            required: true,
+        },
         // v-model
         modelValue: { type: Number, default: 0 },
     },
@@ -79,7 +84,18 @@ export default defineComponent({
 
         const stepRefs: Ref<HTMLElement[]> = ref([]);
 
-        const selected = ref(modelValue.value);
+        const {
+            selectedIndex,
+            isSelected,
+            isDisabled,
+            isPrevious,
+            findNextActivedIndex,
+            getInitialIndex,
+            selectIndex: selectStep,
+            handleKeydown,
+        } = useIndexSelector(steps, disabled);
+
+        selectStep(getInitialIndex(modelValue.value));
 
         const gapCount = computed(() => steps.value.length - 1);
 
@@ -117,110 +133,35 @@ export default defineComponent({
                 width: `${gapCount.value * value}${unit}`,
             };
         });
+
         const progressWidth = computed(() => {
+            if (selectedIndex.value === -1) {
+                return { width: '0%' };
+            }
+
             return {
-                width: (selected.value / gapCount.value) * 100 + '%',
+                width: (selectedIndex.value / gapCount.value) * 100 + '%',
             };
         });
 
-        function isDisabled(index: number) {
-            return disabled.value.includes(index);
-        }
-
-        function isPrevious(index: number) {
-            return index < selected.value;
-        }
-
-        function isSelected(index: number) {
-            return selected.value === index;
-        }
-
-        function selectStep(index: number) {
-            if (index < 0 || index > gapCount.value) {
-                selected.value = 0;
-                return;
-            }
-
-            if (isDisabled(index)) {
-                return;
-            }
-
-            selected.value = index;
-        }
-
         watch(steps, () => {
-            selectStep(modelValue.value);
+            selectStep(findNextActivedIndex(0));
         });
 
-        watch(selected, (index: number) => {
+        watch(selectedIndex, (index: number) => {
             stepRefs.value[index]?.focus();
-            if (index !== modelValue.value) {
-                emit('update:modelValue', index);
-                emit('change', index);
-            }
+            emit('update:modelValue', index);
+            emit('change', index);
         });
 
-        watch(
-            modelValue,
-            (index: number) => {
-                selectStep(index);
-            },
-            { immediate: true },
-        );
-
-        function findNextActivedIndex(startIndex: number): number {
-            let length = steps.value.length;
-            for (let i = startIndex; i < length + startIndex; i++) {
-                const index = i % length;
-                if (!isDisabled(index)) {
-                    return index;
-                }
-            }
-            return startIndex;
-        }
-
-        function findPreviousActivedIndex(startIndex: number): number {
-            let length = steps.value.length;
-            for (let i = startIndex; i > startIndex - length; i--) {
-                const index = (i + length) % length;
-                if (!isDisabled(index)) {
-                    return index;
-                }
-            }
-            return startIndex;
-        }
-
-        function handleKeydown(event: KeyboardEvent) {
-            const length = steps.value.length;
-            let targetIndex = selected.value;
-
-            switch (event.code) {
-                case 'ArrowLeft':
-                    targetIndex = findPreviousActivedIndex(targetIndex - 1);
-                    break;
-                case 'ArrowRight':
-                    targetIndex = findNextActivedIndex(targetIndex + 1);
-                    break;
-                case 'Home':
-                    targetIndex = findNextActivedIndex(0);
-                    break;
-                case 'End':
-                    targetIndex = findPreviousActivedIndex(length - 1);
-                    break;
-                default:
-                    return;
-            }
-
-            event.preventDefault();
-            selectStep(targetIndex);
-        }
+        watch(modelValue, selectStep);
 
         return {
             colorSchemeClass,
             computedStyleSet,
             progressWidth,
             fixedWidth,
-            selected,
+            selectedIndex,
             selectStep,
             isPrevious,
             isSelected,
diff --git a/packages/vlossom/src/components/vs-stepper/__tests__/vs-stepper.test.ts b/packages/vlossom/src/components/vs-stepper/__tests__/vs-stepper.test.ts
index bf667612a..d16b8451c 100644
--- a/packages/vlossom/src/components/vs-stepper/__tests__/vs-stepper.test.ts
+++ b/packages/vlossom/src/components/vs-stepper/__tests__/vs-stepper.test.ts
@@ -1,182 +1,435 @@
 import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
-import { mockConsoleError } from '@/test/setup';
 import VsStepper from './../VsStepper.vue';
+import { mockConsoleWarn } from '@/test/setup';
 
-function mountComponent() {
-    return mount(VsStepper);
-}
+describe('vs-steps', () => {
+    const steps = ['step1', 'step2', 'step3', 'step4', 'step5'];
 
-describe('vs-stepper', () => {
-    describe('props & slots', () => {
-        it('props steps에 string 배열을 전달하면, 그 길이만큼 steps가 생기고 배열의 각 요소가 steps의 라벨로 지정된다', () => {
+    describe('steps', () => {
+        it('steps를 설정한 만큼 step이 생성된다', () => {
             // given
-            const steps = ['step1', 'step2', 'step3'];
             const wrapper = mount(VsStepper, {
-                props: {
-                    steps: steps,
-                },
+                props: { steps },
             });
 
+            // when
+            const stepItems = wrapper.findAll('.vs-step-item');
+
             // then
-            expect(wrapper.html()).toContain('step1');
-            expect(wrapper.html()).toContain('step2');
-            expect(wrapper.html()).toContain('step3');
-            expect(wrapper.vm.$options.props.steps.validator?.(steps)).toBe(true);
+            expect(stepItems).toHaveLength(steps.length);
         });
 
-        it('props steps에 전달된 string 배열이 중복되면 validator가 false를 리턴한다', () => {
+        it('disabled에 설정한 탭은 disabled 되어 있다', () => {
             // given
-            const steps = ['step1', 'step1'];
+            const disabled = [0, 2];
             const wrapper = mount(VsStepper, {
-                props: {
-                    steps: steps,
-                },
+                props: { steps, disabled },
             });
 
+            // when
+            const stepItems = wrapper.findAll('.vs-step-item');
+
             // then
-            expect(wrapper.vm.$options.props.steps.validator?.(steps)).toBe(false);
-            expect(mockConsoleError).toHaveBeenCalledTimes(2);
+            expect(stepItems.filter((t) => t.classes().includes('vs-disabled'))).toHaveLength(disabled.length);
         });
 
-        it('각 스텝의 step slot을 통해 step에서 표시할 내용을 커스터마이징할 수 있다', () => {
-            const wrapper = mount(VsStepper, {
-                props: {
-                    steps: ['A', 'B', 'C'],
-                },
-                slots: {
-                    'A-step': 'step1',
-                    'B-step': 'step2',
-                    'C-step': 'step3',
-                },
+        it('disabled의 범위가 전체 length를 벗어나면 warning message를 보여준다', () => {
+            // given
+            const disabled = [100];
+            mount(VsStepper, {
+                props: { steps, disabled },
             });
 
             // then
-            expect(wrapper.html()).toContain('step1');
-            expect(wrapper.html()).toContain('step2');
-            expect(wrapper.html()).toContain('step3');
+            expect(mockConsoleWarn).toHaveBeenCalled();
         });
+    });
 
-        it('각 스텝의 name slot을 통해 step 하단에 표시할 이름을 커스터마이징할 수 있다', () => {
+    describe('step select', () => {
+        it('초기 index는 0이다', () => {
+            // given
             const wrapper = mount(VsStepper, {
-                props: {
-                    steps: ['A', 'B', 'C'],
-                },
-                slots: {
-                    'A-name': 'name1',
-                    'B-name': 'name2',
-                    'C-name': 'name3',
-                },
+                props: { steps },
             });
 
             // then
-            expect(wrapper.html()).toContain('name1');
-            expect(wrapper.html()).toContain('name2');
-            expect(wrapper.html()).toContain('name3');
+            expect(wrapper.vm.selectedIndex).toEqual(0);
         });
-    });
 
-    describe('select', () => {
-        it('step 를 click 하면 selectedStep이 해당 step index로 변경된다 (update: modelValue)', async () => {
+        it('step을 click하면 선택된 index가 바뀐다', async () => {
             // given
-            const wrapper: ReturnType<typeof mountComponent> = mount(VsStepper, {
+            const wrapper = mount(VsStepper, {
                 props: {
-                    steps: ['step1', 'step2', 'step3'],
-                    modelValue: 2,
+                    steps,
+                    modelValue: 0,
                     'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
                 },
             });
 
             // when
-            const target = wrapper.findAll('li')[1];
-            await target.trigger('click');
+            const stepItems = wrapper.findAll('.vs-step-item');
+            await stepItems[2].trigger('click');
 
             // then
-            expect(wrapper.emitted('change')?.[0]).toEqual([1]);
-            expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1]);
-            expect(wrapper.vm.selected).toEqual(1);
-            expect(target.attributes('aria-selected')).toBe('true');
+            expect(wrapper.vm.selectedIndex).toEqual(2);
+            expect(wrapper.vm.modelValue).toEqual(2);
         });
 
-        it('disabled 인 step은 click 이벤트가 발생하지 않는다', async () => {
-            // given
-            const wrapper: ReturnType<typeof mountComponent> = mount(VsStepper, {
-                props: {
-                    steps: ['step1', 'step2', 'step3'],
-                    modelValue: 2,
-                    'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
-                    disabled: [0],
-                },
+        describe('step index with modelValue', () => {
+            it('modelValue로 원하는 index로 변경할 수 있다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        modelValue: 2,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(2);
+                await wrapper.setProps({ modelValue: 3 });
+                expect(wrapper.vm.selectedIndex).toEqual(3);
             });
 
-            // when
-            const steps = wrapper.findAll('li');
-            await steps[1].trigger('click');
-            await steps[0].trigger('click');
+            it('-1로 초깃값을 설정하면 step을 선택하지 않은 상태로 render 된다', () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        modelValue: -1,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
 
-            // then
-            expect(wrapper.emitted('change')?.[0]).toEqual([1]);
-            expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1]);
-            expect(wrapper.vm.selected).toEqual(1);
+                // then
+                const selectedTab = wrapper.find('.vs-step-item.vs-selected');
+                expect(selectedTab.exists()).toBeFalsy();
+                expect(wrapper.vm.selectedIndex).toEqual(-1);
+            });
+
+            it('modelValue를 -1로 전달하면 step을 선택하지 않는다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        modelValue: 0,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
+
+                // when
+                await wrapper.setProps({ modelValue: -1 });
+
+                // then
+                const selectedTab = wrapper.find('.vs-step-item.vs-selected');
+                expect(selectedTab.exists()).toBeFalsy();
+                expect(wrapper.vm.selectedIndex).toEqual(-1);
+            });
+
+            it('modelValue가 -1보다 작으면 index가 -1로 보정된다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        modelValue: 0,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
+
+                // when
+                await wrapper.setProps({ modelValue: -5 });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(-1);
+            });
+
+            it('modelValue가 steps length보다 크면 index가 -1로 보정된다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        modelValue: 0,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
+
+                // when
+                await wrapper.setProps({ modelValue: 10 });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(-1);
+            });
+        });
+
+        describe('첫번째 탭이 disabled 상태이면 선택 가능한 첫번째 탭으로 index를 보정한다', () => {
+            it('초기 상태에 index 0이 disabled이면 그 다음 선택 가능한 다음 step으로 index가 보정된다', () => {
+                // given
+                const disabled = [0, 1];
+                const wrapper = mount(VsStepper, {
+                    props: { steps, disabled },
+                });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(2);
+            });
+
+            it('modelValue가 disabled step에 지정되면 index가 -1로 보정된다', async () => {
+                // given
+                const disabled = [3];
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        disabled,
+                        modelValue: 0,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
+
+                // when
+                await wrapper.setProps({ modelValue: 3 });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(-1);
+            });
+
+            it('선택 가능한 step이 하나도 없으면 index를 -1로 보정한다', async () => {
+                // given
+                const disabled = [0, 1, 2, 3, 4];
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        disabled,
+                    },
+                });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(-1);
+            });
+        });
+
+        describe('steps 변경됐을 때', () => {
+            it('첫번쨰 탭으로 index를 보정한다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: { steps },
+                });
+
+                // when
+                await wrapper.setProps({ steps: ['step6', 'step7', 'step8'] });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(0);
+            });
+
+            it('첫번째 탭이 disabled 상태이면 선택 가능한 첫번째 탭으로 index를 보정한다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: { steps },
+                });
+
+                // when
+                await wrapper.setProps({ steps: ['step6', 'step7', 'step8'], disabled: [0, 1] });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(2);
+            });
         });
     });
 
-    describe('gap', () => {
-        it('gap prop이 없으면 width는 auto이다', () => {
-            // given
-            const wrapper = mount(VsStepper, {
-                props: {
-                    steps: ['step1', 'step2', 'step3'],
-                },
+    describe('keyboard control', () => {
+        describe('left arrow 키를 눌렀을 때', () => {
+            it('왼쪽 step을 선택한다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        modelValue: 2,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
+
+                // when
+                await wrapper.find('.vs-step-item.vs-selected').trigger('keydown', { code: 'ArrowLeft' });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(1);
+                expect(wrapper.vm.modelValue).toEqual(1);
             });
 
-            // then
-            expect(wrapper.vm.fixedWidth).toEqual({ width: 'auto' });
+            it('왼쪽에 disabled 된 step이 있다면 이전 선택 가능한 step을 선택한다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        disabled: [2],
+                        modelValue: 3,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
+
+                // when
+                await wrapper.find('.vs-step-item.vs-selected').trigger('keydown', { code: 'ArrowLeft' });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(1);
+                expect(wrapper.vm.modelValue).toEqual(1);
+            });
+
+            it('더 왼쪽으로 갈 수 없다면 index가 유지된다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        disabled: [0, 1],
+                        modelValue: 2,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
+
+                // when
+                await wrapper.find('.vs-step-item.vs-selected').trigger('keydown', { code: 'ArrowLeft' });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(2);
+                expect(wrapper.vm.modelValue).toEqual(2);
+            });
         });
 
-        describe('gap 타입이 number인 경우', () => {
-            it('gap과 (전체 step의 개수 - 1)을 곱한 값이 width가 되고 단위는 px로 지정된다 ', () => {
+        describe('right arrow 키를 눌렀을 때', () => {
+            it('오른쪽 step을 선택한다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        modelValue: 2,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
+
+                // when
+                await wrapper.find('.vs-step-item.vs-selected').trigger('keydown', { code: 'ArrowRight' });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(3);
+                expect(wrapper.vm.modelValue).toEqual(3);
+            });
+
+            it('오른쪽에 disabled 된 step이 있다면 다음 선택 가능한 step을 선택한다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        disabled: [2],
+                        modelValue: 1,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
+
+                // when
+                await wrapper.find('.vs-step-item.vs-selected').trigger('keydown', { code: 'ArrowRight' });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(3);
+                expect(wrapper.vm.modelValue).toEqual(3);
+            });
+
+            it('더 왼쪽으로 갈 수 없다면 index가 유지된다', async () => {
                 // given
-                const gap = 300;
                 const wrapper = mount(VsStepper, {
                     props: {
-                        steps: ['step1', 'step2', 'step3'],
-                        gap,
+                        steps,
+                        disabled: [3, 4],
+                        modelValue: 2,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
                     },
                 });
 
+                // when
+                await wrapper.find('.vs-step-item.vs-selected').trigger('keydown', { code: 'ArrowRight' });
+
                 // then
-                expect(wrapper.vm.fixedWidth).toEqual({ width: '600px' });
+                expect(wrapper.vm.selectedIndex).toEqual(2);
+                expect(wrapper.vm.modelValue).toEqual(2);
             });
         });
 
-        describe('gap 타입이 string인 경우', () => {
-            it('gap 에 단위가 포함되어 있다면 단위를 제외한 값과 (전체 step의 개수 - 1)을 곱한 값이 width가 되고 단위는 string에 포함된 단위로 지정된다 ', () => {
+        describe('home 키를 눌렀을 때', () => {
+            it('맨 처음 step을 선택한다', async () => {
                 // given
-                const gap = '300%';
                 const wrapper = mount(VsStepper, {
                     props: {
-                        steps: ['step1', 'step2', 'step3'],
-                        gap,
+                        steps,
+                        modelValue: 2,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
                     },
                 });
 
+                // when
+                await wrapper.find('.vs-step-item.vs-selected').trigger('keydown', { code: 'Home' });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(0);
+                expect(wrapper.vm.modelValue).toEqual(0);
+            });
+
+            it('disabled가 있을 때 앞쪽에서 선택 가능한 맨 앞 step을 선택한다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        disabled: [0, 1],
+                        modelValue: 4,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
+
+                // when
+                await wrapper.find('.vs-step-item.vs-selected').trigger('keydown', { code: 'Home' });
+
                 // then
-                expect(wrapper.vm.fixedWidth).toEqual({ width: '600%' });
+                expect(wrapper.vm.selectedIndex).toEqual(2);
+                expect(wrapper.vm.modelValue).toEqual(2);
             });
+        });
 
-            it('gap 에 단위가 없다면 gap과 (전체 step의 개수 - 1)을 곱한 값이 width가 되고 단위는 px로 지정된다 ', () => {
+        describe('end 키를 눌렀을 때', () => {
+            it('맨 마지막 step을 선택한다', async () => {
                 // given
-                const gap = '300';
                 const wrapper = mount(VsStepper, {
                     props: {
-                        steps: ['step1', 'step2', 'step3'],
-                        gap,
+                        steps,
+                        modelValue: 2,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
                     },
                 });
 
+                // when
+                await wrapper.find('.vs-step-item.vs-selected').trigger('keydown', { code: 'End' });
+
+                // then
+                expect(wrapper.vm.selectedIndex).toEqual(4);
+                expect(wrapper.vm.modelValue).toEqual(4);
+            });
+
+            it('disabled가 있을 때 뒤쪽에서 선택 가능한 맨 마지막 step을 선택한다', async () => {
+                // given
+                const wrapper = mount(VsStepper, {
+                    props: {
+                        steps,
+                        disabled: [3, 4],
+                        modelValue: 0,
+                        'onUpdate:modelValue': (e: number) => wrapper.setProps({ modelValue: e }),
+                    },
+                });
+
+                // when
+                await wrapper.find('.vs-step-item.vs-selected').trigger('keydown', { code: 'End' });
+
                 // then
-                expect(wrapper.vm.fixedWidth).toEqual({ width: '600px' });
+                expect(wrapper.vm.selectedIndex).toEqual(2);
+                expect(wrapper.vm.modelValue).toEqual(2);
             });
         });
     });
diff --git a/packages/vlossom/src/components/vs-tabs/VsTabs.vue b/packages/vlossom/src/components/vs-tabs/VsTabs.vue
index 68dac29bd..6ac4ea2d5 100644
--- a/packages/vlossom/src/components/vs-tabs/VsTabs.vue
+++ b/packages/vlossom/src/components/vs-tabs/VsTabs.vue
@@ -6,6 +6,7 @@
                 class="vs-scroll-button vs-scroll-left-button"
                 aria-label="scroll to the left"
                 :disabled="isLeftEdge"
+                tabindex="-1"
                 @click.stop="goLeft"
                 dense
             >
@@ -37,6 +38,7 @@
                 aria-label="scroll to the right"
                 :colorScheme="colorScheme"
                 :disabled="isRightEdge"
+                tabindex="-1"
                 @click.stop="goRight"
                 dense
             >
@@ -48,12 +50,12 @@
 
 <script lang="ts">
 import { computed, defineComponent, toRefs, ref, watch, onMounted, onUnmounted, type Ref, type PropType } from 'vue';
-import { useColorScheme, useStyleSet, getResponsiveProps } from '@/composables';
+import { useColorScheme, useStyleSet, getResponsiveProps, useIndexSelector } from '@/composables';
 import { VsComponent, type ColorScheme } from '@/declaration';
-import VsResponsive from '@/components/vs-responsive/VsResponsive.vue';
-import VsButton from '@/components/vs-button/VsButton.vue';
 import { VsIcon } from '@/icons';
 import { utils } from '@/utils';
+import VsResponsive from '@/components/vs-responsive/VsResponsive.vue';
+import VsButton from '@/components/vs-button/VsButton.vue';
 
 import type { VsTabsStyleSet } from './types';
 
@@ -100,64 +102,22 @@ export default defineComponent({
 
         const tabsWrapRef: Ref<HTMLElement | null> = ref(null);
         const tabRefs: Ref<HTMLElement[]> = ref([]);
-        const selectedIndex = ref(modelValue.value);
         const scrollCount = ref(0);
 
-        const initialIndex = selectedIndex.value === -1 ? -1 : findNextActivedIndex(selectedIndex.value);
-        selectTab(initialIndex);
-
-        function isSelected(index: number): boolean {
-            return selectedIndex.value === index;
-        }
-
-        function isDisabled(index: number): boolean {
-            return disabled.value?.includes(index);
-        }
-
-        const isLeftEdge = computed(() => {
-            const targetDisabled = disabled.value.filter((i) => i >= 0 && i < selectedIndex.value);
-            return targetDisabled.length === selectedIndex.value;
-        });
-
-        const isRightEdge = computed(() => {
-            const targetDisabled = disabled.value.filter((i) => i > selectedIndex.value);
-            return targetDisabled.length === tabs.value.length - selectedIndex.value - 1;
-        });
-
-        function selectTab(index: number) {
-            const tabsLength = tabs.value.length;
-            const isOutOfRange = index < 0 || index > tabsLength - 1;
-            const isAllDisabled = disabled.value.length === tabsLength;
-            if (isOutOfRange || isAllDisabled || isDisabled(index)) {
-                selectedIndex.value = -1;
-                return;
-            }
-
-            selectedIndex.value = index;
-            scrollTo(index);
-        }
-
-        function findNextActivedIndex(startIndex: number): number {
-            const tabsLength = tabs.value.length;
-            for (let i = startIndex; i < tabsLength + startIndex; i++) {
-                const index = i % tabsLength;
-                if (!isDisabled(index)) {
-                    return index;
-                }
-            }
-            return startIndex;
-        }
+        const {
+            selectedIndex,
+            isLeftEdge,
+            isRightEdge,
+            isSelected,
+            isDisabled,
+            findNextActivedIndex,
+            findPreviousActivedIndex,
+            getInitialIndex,
+            selectIndex: selectTab,
+            handleKeydown,
+        } = useIndexSelector(tabs, disabled);
 
-        function findPreviousActivedIndex(startIndex: number): number {
-            const tabsLength = tabs.value.length;
-            for (let i = startIndex; i > startIndex - tabsLength; i--) {
-                const index = (i + tabsLength) % tabsLength;
-                if (!isDisabled(index)) {
-                    return index;
-                }
-            }
-            return startIndex;
-        }
+        selectTab(getInitialIndex(modelValue.value));
 
         const showScrollButtons = computed(() => {
             if (tabButtons.value === 'auto') {
@@ -185,42 +145,6 @@ export default defineComponent({
             selectTab(targetIndex);
         }
 
-        function handleKeydown(event: KeyboardEvent) {
-            let targetIndex = selectedIndex.value;
-            switch (event.code) {
-                case 'ArrowLeft': {
-                    if (isLeftEdge.value) {
-                        return;
-                    }
-                    event.preventDefault();
-                    targetIndex = findPreviousActivedIndex(targetIndex - 1);
-                    break;
-                }
-                case 'ArrowRight': {
-                    if (isRightEdge.value) {
-                        return;
-                    }
-                    event.preventDefault();
-                    targetIndex = findNextActivedIndex(targetIndex + 1);
-                    break;
-                }
-                case 'Home': {
-                    event.preventDefault();
-                    targetIndex = findNextActivedIndex(0);
-                    break;
-                }
-                case 'End': {
-                    event.preventDefault();
-                    targetIndex = findPreviousActivedIndex(tabs.value.length - 1);
-                    break;
-                }
-                default:
-                    return;
-            }
-
-            selectTab(targetIndex);
-        }
-
         function calculateScrollCount(): void {
             const tabsWrapWidth = tabsWrapRef.value?.clientWidth;
             if (!tabsWrapWidth) {
@@ -257,6 +181,7 @@ export default defineComponent({
         });
 
         watch(selectedIndex, (index: number) => {
+            scrollTo(index);
             emit('update:modelValue', index);
             emit('change', index);
         });
diff --git a/packages/vlossom/src/components/vs-tabs/__tests__/vs-tabs.test.ts b/packages/vlossom/src/components/vs-tabs/__tests__/vs-tabs.test.ts
index 1b8b3742c..ca68a3a62 100644
--- a/packages/vlossom/src/components/vs-tabs/__tests__/vs-tabs.test.ts
+++ b/packages/vlossom/src/components/vs-tabs/__tests__/vs-tabs.test.ts
@@ -49,7 +49,7 @@ describe('vs-tabs', () => {
             expect(tabItems.filter((t) => t.classes().includes('vs-disabled'))).toHaveLength(disabled.length);
         });
 
-        it('disabled의 범위가 tabs length를 벗어나면 warning message를 보여준다', () => {
+        it('disabled의 범위가 전체 length를 벗어나면 warning message를 보여준다', () => {
             // given
             const disabled = [100];
             mount(VsTabs, {
diff --git a/packages/vlossom/src/composables/__tests__/index-selector-composable.test.ts b/packages/vlossom/src/composables/__tests__/index-selector-composable.test.ts
new file mode 100644
index 000000000..f726877e7
--- /dev/null
+++ b/packages/vlossom/src/composables/__tests__/index-selector-composable.test.ts
@@ -0,0 +1,233 @@
+import { describe, it, expect } from 'vitest';
+import { ref } from 'vue';
+import { useIndexSelector } from './../index-selector-composable';
+
+describe('index-selector-composable', () => {
+    const list = ref(['a', 'b', 'c', 'd', 'e']);
+
+    describe('selectIndex', () => {
+        it('원하는 index를 선택할 수 있다', () => {
+            // given
+            const { selectedIndex, selectIndex } = useIndexSelector(list);
+
+            // when
+            selectIndex(3);
+
+            // then
+            expect(selectedIndex.value).toBe(3);
+        });
+
+        it('list의 length를 넘어가는 index는 -1로 보정된다', () => {
+            // given
+            const { selectedIndex, selectIndex } = useIndexSelector(list);
+
+            // when
+            selectIndex(5);
+
+            // then
+            expect(selectedIndex.value).toBe(-1);
+        });
+
+        it('-1보다 작은 index는 -1로 보정된다', () => {
+            // given
+            const { selectedIndex, selectIndex } = useIndexSelector(list);
+
+            // when
+            selectIndex(-8);
+
+            // then
+            expect(selectedIndex.value).toBe(-1);
+        });
+
+        it('모든 list item이 disabled 상태이면 선택 했을 때 -1로 보정한다', () => {
+            // given
+            const disabled = ref([0, 1, 2, 3, 4]);
+            const { selectedIndex, selectIndex } = useIndexSelector(list, disabled);
+
+            // when
+            selectIndex(2);
+
+            // then
+            expect(selectedIndex.value).toBe(-1);
+        });
+    });
+
+    describe('findNextActivedIndex', () => {
+        it('targetIndex가 선택 가능하면 targetIndex를 그대로 반환한다', () => {
+            // given
+            const { findNextActivedIndex } = useIndexSelector(list);
+
+            // then
+            expect(findNextActivedIndex(2)).toBe(2);
+        });
+
+        it('targetIndex가 disabled이면 그 다음 선택 가능한 index를 반환한다', () => {
+            // given
+            const disabled = ref([1, 2]);
+            const { findNextActivedIndex } = useIndexSelector(list, disabled);
+
+            // when
+
+            // then
+            expect(findNextActivedIndex(1)).toBe(3);
+        });
+    });
+
+    describe('findPreviousActivedIndex', () => {
+        it('targetIndex가 선택 가능하면 targetIndex를 그대로 반환한다', () => {
+            // given
+            const { findPreviousActivedIndex } = useIndexSelector(list);
+
+            // then
+            expect(findPreviousActivedIndex(2)).toBe(2);
+        });
+
+        it('targetIndex가 disabled이면 그 이전 선택 가능한 index를 반환한다', () => {
+            // given
+            const disabled = ref([1, 2]);
+            const { findPreviousActivedIndex } = useIndexSelector(list, disabled);
+
+            // when
+
+            // then
+            expect(findPreviousActivedIndex(2)).toBe(0);
+        });
+    });
+
+    describe('getInitialIndex', () => {
+        it('initial index가 -1이면 -1을 반환한다', () => {
+            // given
+            const { getInitialIndex } = useIndexSelector(list);
+
+            // then
+            expect(getInitialIndex(-1)).toBe(-1);
+        });
+
+        it('initial index가 선택 가능하면 그대로 반환한다', () => {
+            // given
+            const { getInitialIndex } = useIndexSelector(list);
+
+            // then
+            expect(getInitialIndex(2)).toBe(2);
+        });
+
+        it('initial index가 disabled이면 다음 선택 가능한 index를 반환한다', () => {
+            // given
+            const disabled = ref([1, 2]);
+            const { getInitialIndex } = useIndexSelector(list, disabled);
+
+            // then
+            expect(getInitialIndex(1)).toBe(3);
+        });
+    });
+
+    it('isSelected', () => {
+        // given
+        const { isSelected, selectIndex } = useIndexSelector(list);
+        selectIndex(3);
+
+        // then
+        expect(isSelected(3)).toBe(true);
+        expect(isSelected(1)).toBe(false);
+    });
+
+    it('isDisabled', () => {
+        // given
+        const disabled = ref([0, 4]);
+        const { isDisabled } = useIndexSelector(list, disabled);
+
+        // then
+        expect(isDisabled(0)).toBe(true);
+        expect(isDisabled(1)).toBe(false);
+    });
+
+    it('isPrevious', () => {
+        // given
+        const { isPrevious, selectIndex } = useIndexSelector(list);
+        selectIndex(2);
+
+        // then
+        expect(isPrevious(1)).toBe(true);
+        expect(isPrevious(2)).toBe(false);
+    });
+
+    describe('isLeftEdge', () => {
+        it('selectedIndex가 0이면 왼쪽 끝이다', () => {
+            // given
+            const { isLeftEdge, selectIndex } = useIndexSelector(list);
+            selectIndex(0);
+
+            // then
+            expect(isLeftEdge.value).toBe(true);
+        });
+
+        it('selectedIndex가 왼쪽 끝인지 알 수 있다', () => {
+            // given
+            const disabled = ref([0, 1, 2]);
+            const { isLeftEdge, selectIndex } = useIndexSelector(list, disabled);
+            selectIndex(3);
+
+            // then
+            expect(isLeftEdge.value).toBe(true);
+        });
+
+        it('selectedIndex가 왼쪽 끝이 아닌지 알 수 있다', () => {
+            // given
+            const disabled = ref([0, 1, 2]);
+            const { isLeftEdge, selectIndex } = useIndexSelector(list, disabled);
+            selectIndex(4);
+
+            // then
+            expect(isLeftEdge.value).toBe(false);
+        });
+
+        it('selectedIndex가 -1이면 true를 반환한다', () => {
+            // given
+            const { isLeftEdge, selectIndex } = useIndexSelector(list);
+            selectIndex(-1);
+
+            // then
+            expect(isLeftEdge.value).toBe(true);
+        });
+    });
+
+    describe('isRightEdge', () => {
+        it('selectedIndex가 list의 마지막 index면 오른쪽 끝이다', () => {
+            // given
+            const { isRightEdge, selectIndex } = useIndexSelector(list);
+            selectIndex(4);
+
+            // then
+            expect(isRightEdge.value).toBe(true);
+        });
+
+        it('selectedIndex가 오른쪽 끝인지 알 수 있다', () => {
+            // given
+            const disabled = ref([3, 4]);
+            const { isRightEdge, selectIndex } = useIndexSelector(list, disabled);
+            selectIndex(2);
+
+            // then
+            expect(isRightEdge.value).toBe(true);
+        });
+
+        it('selectedIndex가 오른쪽 끝이 아닌지 알 수 있다', () => {
+            // given
+            const disabled = ref([3, 4]);
+            const { isRightEdge, selectIndex } = useIndexSelector(list, disabled);
+            selectIndex(1);
+
+            // then
+            expect(isRightEdge.value).toBe(false);
+        });
+
+        it('selectedIndex가 -1이면 true를 반환한다', () => {
+            // given
+            const { isRightEdge, selectIndex } = useIndexSelector(list);
+            selectIndex(-1);
+
+            // then
+            expect(isRightEdge.value).toBe(true);
+        });
+    });
+});
diff --git a/packages/vlossom/src/composables/index-selector-composable.ts b/packages/vlossom/src/composables/index-selector-composable.ts
new file mode 100644
index 000000000..fc3bed836
--- /dev/null
+++ b/packages/vlossom/src/composables/index-selector-composable.ts
@@ -0,0 +1,121 @@
+import { computed, ref, Ref } from 'vue';
+
+export function useIndexSelector(list: Ref<string[]>, disabled: Ref<number[]> = ref([])) {
+    const selectedIndex = ref(0);
+
+    const isLeftEdge = computed(() => {
+        if (selectedIndex.value === -1) {
+            return true;
+        }
+        const targetDisabled = disabled.value.filter((i) => i >= 0 && i < selectedIndex.value);
+        return targetDisabled.length === selectedIndex.value;
+    });
+
+    const isRightEdge = computed(() => {
+        if (selectedIndex.value === -1) {
+            return true;
+        }
+        const targetDisabled = disabled.value.filter((i) => i > selectedIndex.value);
+        return targetDisabled.length === list.value.length - selectedIndex.value - 1;
+    });
+
+    function isSelected(index: number): boolean {
+        return selectedIndex.value === index;
+    }
+
+    function isDisabled(index: number): boolean {
+        return disabled.value.includes(index);
+    }
+
+    function isPrevious(index: number) {
+        return index < selectedIndex.value;
+    }
+
+    function findNextActivedIndex(targetIndex: number): number {
+        const tabsLength = list.value.length;
+        for (let i = targetIndex; i < tabsLength + targetIndex; i++) {
+            const index = i % tabsLength;
+            if (!isDisabled(index)) {
+                return index;
+            }
+        }
+        return targetIndex;
+    }
+
+    function findPreviousActivedIndex(targetIndex: number): number {
+        const tabsLength = list.value.length;
+        for (let i = targetIndex; i > targetIndex - tabsLength; i--) {
+            const index = (i + tabsLength) % tabsLength;
+            if (!isDisabled(index)) {
+                return index;
+            }
+        }
+        return targetIndex;
+    }
+
+    function getInitialIndex(index: number): number {
+        return index === -1 ? -1 : findNextActivedIndex(index);
+    }
+
+    function selectIndex(index: number) {
+        const tabsLength = list.value.length;
+        const isOutOfRange = index < 0 || index > tabsLength - 1;
+        const isAllDisabled = disabled.value.length === tabsLength;
+        if (isOutOfRange || isAllDisabled || isDisabled(index)) {
+            selectedIndex.value = -1;
+            return;
+        }
+
+        selectedIndex.value = index;
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        let targetIndex = selectedIndex.value;
+        switch (event.code) {
+            case 'ArrowLeft': {
+                if (isLeftEdge.value) {
+                    return;
+                }
+                event.preventDefault();
+                targetIndex = findPreviousActivedIndex(targetIndex - 1);
+                break;
+            }
+            case 'ArrowRight': {
+                if (isRightEdge.value) {
+                    return;
+                }
+                event.preventDefault();
+                targetIndex = findNextActivedIndex(targetIndex + 1);
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                targetIndex = findNextActivedIndex(0);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                targetIndex = findPreviousActivedIndex(list.value.length - 1);
+                break;
+            }
+            default:
+                return;
+        }
+
+        selectIndex(targetIndex);
+    }
+
+    return {
+        selectedIndex,
+        isLeftEdge,
+        isRightEdge,
+        isSelected,
+        isDisabled,
+        isPrevious,
+        findNextActivedIndex,
+        findPreviousActivedIndex,
+        getInitialIndex,
+        selectIndex,
+        handleKeydown,
+    };
+}
diff --git a/packages/vlossom/src/composables/index.ts b/packages/vlossom/src/composables/index.ts
index 2a931be80..37ab36cec 100644
--- a/packages/vlossom/src/composables/index.ts
+++ b/packages/vlossom/src/composables/index.ts
@@ -2,6 +2,7 @@ export * from './anchor-positioning-composable';
 export * from './color-scheme-composable';
 export * from './esc-close-composable';
 export * from './form-provide-composable';
+export * from './index-selector-composable';
 export * from './input-composable';
 export * from './input-form-composable';
 export * from './input-modifier-composable';