Stepper.vue

<template>

    <v-stepper
        v-model="step"
        vertical
        style="height:100%"
        class="font-weight-black elevation-0 "
        width="100%"
        max-width="100%" 
        
    >   
        <v-toolbar
            color="blue darken-1"
            dark
            class="elevation-0 "
        >
            <v-toolbar-title>{{wpo}}</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-chip v-if="local" light color="yellow">LOCAL</v-chip>
        </v-toolbar>

        <v-stepper-step
            :color="step > 1 ? 'primary' : 'blue lighten-3'" 
            :complete="step > 1" 
            step="1"
            class="font-weight-black"
        >
            <small class="font-weight-bold">Step 1</small>
            세팅
        </v-stepper-step>

        <v-stepper-content step="1" >
            <div class="text-center">
                <v-progress-circular
                    :size="100"
                    color="blue lighten-3"
                    indeterminate
                ></v-progress-circular>
            </div>
        </v-stepper-content>

        <v-stepper-step
            :color="step > 2 ? 'primary' : 'blue lighten-3'" 
            :complete="step > 2" 
            step="2"
            class="font-weight-black"
        >
            <small class="font-weight-bold">Step 2 </small>
            <span> 데이터 불러오기 </span>
        </v-stepper-step>

        <v-stepper-content step="2" >
            <v-list>
        <v-list-item-group
    
            multiple
        >
            <v-list-item>
                    <v-list-item-action>
                        <v-checkbox
                            :input-value="Object.keys(project).length !== 0  ? true : false"
                            color="blue lighten-3"
                        ></v-checkbox>
                    </v-list-item-action>

                    <v-list-item-content>
                        <v-list-item-title>프로젝트</v-list-item-title>
                    </v-list-item-content>
            </v-list-item>

            <v-list-item>
                    <v-list-item-action>
                        <v-checkbox
                            :input-value="infos.length !== 0 ? true : false"
                            color="blue lighten-3"
                        ></v-checkbox>
                    </v-list-item-action>

                    <v-list-item-content>
                        <v-list-item-title>검수 정보</v-list-item-title>
                    </v-list-item-content>
            </v-list-item>

            <v-list-item>
                    <v-list-item-action>
                        <v-checkbox
                            :input-value="step === 2 ? true : false"
                            color="blue lighten-3"
                        ></v-checkbox>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>데이터 저장</v-list-item-title>
                    </v-list-item-content>
            </v-list-item>
        </v-list-item-group>
        </v-list>
        </v-stepper-content>

        <v-stepper-step
            :color="step > 3 ? 'primary' : 'blue lighten-3'" 
            :complete="step > 3" 
            step="3"
        >
            <small class="font-weight-bold">Step 3</small>
            매니저 티칭 정보 확인
            
        </v-stepper-step>
        <v-stepper-content step="3">
            <div class="text-center">
                <v-progress-circular
                    :size="100"
                    color="blue lighten-3"
                    indeterminate
                ></v-progress-circular>
            </div>
        </v-stepper-content>

        <v-stepper-step
            :color="step > 4 ? 'primary' : 'blue lighten-3'" 
            :complete="step > 4" 
            step="4"
        >
            <small class="font-weight-bold">Step 4</small>
            보드 사진 촬영
        </v-stepper-step>

        <v-stepper-content step="4">
            <div class="text-center">
                <v-progress-circular
                    :size="100"
                    color="blue lighten-3"
                    indeterminate
                ></v-progress-circular>
            </div>
        </v-stepper-content>

        <v-stepper-step
            :color="step > 5 ? 'primary' : 'blue lighten-3'" 
            :complete="step > 5" 
            step="5"
        >
            <small class="font-weight-bold">Step 5</small>
            검수
        </v-stepper-step>

        <v-stepper-content step="5">
            <div class="text-center">
                <v-progress-circular
                    :size="100"
                    color="blue lighten-3"
                    indeterminate
                ></v-progress-circular>
            </div>
        </v-stepper-content>

        <v-stepper-step
            :color="step === 6 ? 'primary' : 'blue lighten-3'" 
            :complete="step === 6" 
            step="6"
        >
            <small class="font-weight-bold">Step 6</small>
            결과
        </v-stepper-step>

        <v-stepper-content step="6">
            <div class="text-center">
                <v-btn
                    class="elevation-3 mt-5 "
                    x-large
                    fab
                    color="yellow"
                >
                    <v-icon>mdi-replay</v-icon>
                </v-btn>
                <div class="mt-3">상단 버튼을 누르면 재검수</div>
            </div>
        </v-stepper-content>
    </v-stepper>
</template>

<script>
export default {

    props: {
        step:Number,
        wpo:String,
        infos:Array,
        project:Object,
        local:Boolean
    },

}
</script>

<style>

</style>