기본페이지 세팅완료

app/assets/scss/admin.scss

@@ -2890,138 +2890,485 @@ html {
 |start
 =================================================*/
 .models--page{
-  .models--container{
+  .type--carousel{    
+    padding:40px 0px;
     .models--filter--section{
-      .filter--group{
-        .filter--dropdown{
-          display: flex;
-          gap:10px;
+      box-sizing: border-box;
+      padding: 0 var(--page-margin);
+      position: sticky;
+      top: 0px;
+      z-index: 85;
+      
 
-          button{
-            border-radius: 10px;
-            box-sizing: border-box;
-            display: inline-flex;
-            -webkit-box-pack: justify;
-            justify-content: space-between;
-            -webkit-box-align: center;
-            align-items: center;
-            gap: 8px;            
+
+      .filter--group{
+        .filter--dropdown--list{
+          >h2{
+            margin: 0 0 var(--spacing-relative-2xs) 0;
+            color: rgba(252, 252, 253, 0.7);            
             letter-spacing: 0px;
             font-weight: 400;
             text-decoration: none;
-            font-size: 14px;
+            font-size: 12px;
             line-height: 20px;
             font-stretch: 105%;
-            padding: 4px 12px;
-            transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
-            transition-duration: 250ms;
-            transition-property: background-color, box-shadow, color;
-            min-height: 36px;
-            cursor: pointer;
-            background-color: rgb(24, 29, 37);
-            color: rgb(252, 252, 253);
-            box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+            padding-bottom:12px;
+          }
+          .filter--dropdown{
+            display: flex;
+            gap:10px;
+            flex-wrap:wrap;
+            margin-bottom:30px;
+  
+            button{
+              border-radius: 10px;
+              box-sizing: border-box;
+              display: inline-flex;
+              -webkit-box-pack: justify;
+              justify-content: space-between;
+              -webkit-box-align: center;
+              align-items: center;
+              gap: 8px;            
+              letter-spacing: 0px;
+              font-weight: 400;
+              text-decoration: none;
+              font-size: 14px;
+              line-height: 20px;
+              font-stretch: 105%;
+              padding: 4px 12px;
+              transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+              transition-duration: 250ms;
+              transition-property: background-color, box-shadow, color;
+              min-height: 36px;
+              cursor: pointer;
+              background-color: rgb(24, 29, 37);
+              color: rgb(252, 252, 253);
+              box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+  
+  
+              &.active{
+                background-color: rgb(64, 74, 89);
+                color: rgb(252, 252, 253);
+                box-shadow: rgba(219, 223, 230, 0.2) 0px 0px 0px 1px inset;
+              }
+            }
           }
         }
       }
     }
-    .models--list{
-      width:100%;
-      display: flex;
-      flex-wrap:wrap;
-      gap:20px;
-      .model--item{
-        --gradient-start: hsla(216, 20%, 17%, 1);
-        --gradient-end: hsla(216, 21%, 12%, 1);
-        transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
-        transition-duration: 250ms;
-        transition-property: --gradient-start, --gradient-end, box-shadow;
-        padding: 16px;
-        overflow: hidden;
-        border-radius: 20px;
-        border: none;
-        cursor: pointer;
-        box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
-        backdrop-filter: blur(40px);
-        background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
-        text-align: left;
-        max-width:calc( (100% - 60px) / 4);
 
-        .model--name{
-          position: relative;
-          margin: 0px;
-          color: rgba(252, 252, 253, 0.7);          
+    .models--list--wrap{
+      .all--models--wrap{
+        padding: 0px var(--page-margin);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 0 0 var(--spacing-relative-2xs) 0;
+        .all--models{          
+          color: rgba(252, 252, 253, 0.7);            
           letter-spacing: 0px;
           font-weight: 400;
           text-decoration: none;
-          font-size: 16px;
-          line-height: 24px;
+          font-size: 12px;
+          line-height: 20px;
           font-stretch: 105%;
+          padding-bottom:12px;
+        }
+
+        .nav--btn--wrap{
           display: flex;
           align-items: center;
-          justify-content: space-between;
+          gap:20px;
+          button{
+            &.nav--prev--btn{
+              transform: rotate(180deg);
+            }
+
+            &.swiper-button-disabled{
+              opacity: .2;
+              cursor: not-allowed;
+            }
+          }
+        }
+      }
+      .models--list{        
+        width:100%;
+        display: flex;
+        flex-wrap:wrap;
+        gap:10px;
+        > .swiper{
+          width:100%;
+          padding: 0 0 0 var(--page-margin);
+        }
+        .model--item{
+          --gradient-start: hsla(216, 20%, 17%, 1);
+          --gradient-end: hsla(216, 21%, 12%, 1);
+          transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+          transition-duration: 250ms;
+          transition-property: --gradient-start, --gradient-end, box-shadow;
+          padding: 16px;
+          overflow: hidden;
+          border-radius: 20px;
+          border: none;
+          cursor: pointer;
+          box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+          backdrop-filter: blur(40px);
+          background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+          text-align: left;
+          max-width:220px;
+
+          &.active{
+            --gradient-start: hsla(216, 16%, 30%, 1);
+            --gradient-end: hsla(216, 16%, 30%, 1);
+            transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+            transition-duration: 250ms;
+            transition-property: --gradient-start, --gradient-end, box-shadow;
+            padding: 16px;
+            overflow: hidden;
+            border-radius: 20px;
+            border: none;
+            cursor: pointer;
+            box-shadow: rgba(219, 223, 230, 0.2) 0px 0px 0px 1px inset;
+            backdrop-filter: blur(40px);
+            background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+            text-align: left;
 
-          .etron{
+            .model--info--wrap{
+              .ico{
+                transform: rotate(-90deg);
+              }
+            }
+          }
+  
+          .model--name{
+            position: relative;
             margin: 0px;
-            border-radius: 10px;
-            box-sizing: border-box;
-            display: inline-flex;
-            -webkit-box-pack: justify;
-            justify-content: space-between;
-            -webkit-box-align: center;
+            color: rgba(252, 252, 253, 0.7);          
+            letter-spacing: 0px;
+            font-weight: 400;
+            text-decoration: none;
+            font-size: 16px;
+            line-height: 24px;
+            font-stretch: 105%;
+            letter-spacing: -1px; 
+            
+            display: flex;
             align-items: center;
-            gap: 8px;            
+            justify-content: space-between;
+  
+            .etron--wrap{
+              min-height:28px;
+              .etron{
+                margin: 0px;              
+                border-radius: 10px;
+                box-sizing: border-box;
+                display: inline-flex;
+                -webkit-box-pack: justify;
+                justify-content: space-between;
+                -webkit-box-align: center;
+                align-items: center;
+                gap: 8px;            
+                letter-spacing: 0px;
+                font-weight: 400;
+                text-decoration: none;
+                font-size: 12px;
+                line-height: 16px;
+                font-stretch: 105%;
+                padding: 4px 12px;
+                transition-timing-function:cubic-bezier(0.75, 0.02, 0.5, 1);
+                transition-duration: 250ms;
+                transition-property: background-color, box-shadow, color;
+                min-height: 28px;
+                background-color: rgba(154, 163, 177, 0.1);
+                color: rgb(252, 252, 253);
+                box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
+              }
+            }
+          }
+          .model--image--wrap{
+            display: block;
+            aspect-ratio: 7 / 3;
+            overflow: hidden;
+            padding: 0px;
+            margin-bottom:20px;
+            img{
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+          }
+          .model--info--wrap{
+            margin: 0px;
+            color: rgba(252, 252, 253, 0.7);          
             letter-spacing: 0px;
             font-weight: 400;
             text-decoration: none;
             font-size: 12px;
-            line-height: 16px;
+            line-height: 20px;
             font-stretch: 105%;
-            padding: 4px 12px;
-            transition-timing-function:cubic-bezier(0.75, 0.02, 0.5, 1);
-            transition-duration: 250ms;
-            transition-property: background-color, box-shadow, color;
-            min-height: 28px;
-            background-color: rgba(154, 163, 177, 0.1);
-            color: rgb(252, 252, 253);
-            box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .ico{
+              width: 24px;
+              height: 24px;
+              background-image: url(/img/ico--arrow.svg);
+              transform: rotate(90deg);
+            }
           }
+          
         }
-        .model--image--wrap{
-          display: block;
-          aspect-ratio: 7 / 3;
+      }
+      .models--list--car{        
+        height: 0px;
+        overflow: hidden;
+        padding: 0px;
+        z-index: 1;
+
+        &.active{
+          height: 488px;
           overflow: hidden;
-          padding: 0px;
-          img{
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
+          padding: 28px var(--page-margin);
+          z-index: 1;
+        }
+
+        @media (min-width: 768px) {          
+          transition-property: height;
+          transition-duration: 0.2s;
+          transition-timing-function: ease-in-out;          
+        }
+
+        .car--list{
+          .car--item{
+            max-width: 332px;
+            min-width: 285px;
           }
         }
-        .model--info--wrap{
-          margin: 0px;
-          color: rgba(252, 252, 253, 0.7);          
-          letter-spacing: 0px;
-          font-weight: 400;
-          text-decoration: none;
-          font-size: 12px;
-          line-height: 20px;
-          font-stretch: 105%;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          .ico{
-            width: 24px;
-            height: 24px;
-            background-image: url(/img/ico--arrow.svg);
+      }
+    }   
+  }
+
+  .models--container{
+    position: relative;
+    background-color: rgb(16, 19, 25);
+
+
+    @media (min-width: 1024px) {  
+      display: grid;
+      grid-template-columns: 1fr 3fr;      
+    }
+
+    .models--filter--section{
+      box-sizing: border-box;
+      padding: 0 var(--page-margin);
+      position: sticky;
+      top: 0px;
+      z-index: 85;
+      background-color: rgb(44, 52, 63);
+
+      
+      @media (min-width: 1024px) {      
+        background-color: transparent;
+        height: calc(100vh);
+        min-width: 320px;
+        padding: var(--spacing-relative-2xl) 0 var(--spacing-relative-2xl) var(--page-margin);
+        overflow-y: auto;
+        z-index: auto;      
+      }
+
+      @media (min-width: 1280px) {      
+        min-width: 388px;
+      }     
+      
+      @media (min-width: 1440px) {        
+        min-width: auto;        
+      }
+      .filter--group{
+        .filter--dropdown--list{
+          >h2{
+            margin: 0 0 var(--spacing-relative-2xs) 0;
+            color: rgba(252, 252, 253, 0.7);            
+            letter-spacing: 0px;
+            font-weight: 400;
+            text-decoration: none;
+            font-size: 12px;
+            line-height: 20px;
+            font-stretch: 105%;
+            padding-bottom:12px;
+          }
+          .filter--dropdown{
+            display: flex;
+            gap:10px;
+            flex-wrap:wrap;
+            margin-bottom:30px;
+  
+            button{
+              border-radius: 10px;
+              box-sizing: border-box;
+              display: inline-flex;
+              -webkit-box-pack: justify;
+              justify-content: space-between;
+              -webkit-box-align: center;
+              align-items: center;
+              gap: 8px;            
+              letter-spacing: 0px;
+              font-weight: 400;
+              text-decoration: none;
+              font-size: 14px;
+              line-height: 20px;
+              font-stretch: 105%;
+              padding: 4px 12px;
+              transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+              transition-duration: 250ms;
+              transition-property: background-color, box-shadow, color;
+              min-height: 36px;
+              cursor: pointer;
+              background-color: rgb(24, 29, 37);
+              color: rgb(252, 252, 253);
+              box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+  
+  
+              &.active{
+                background-color: rgb(64, 74, 89);
+                color: rgb(252, 252, 253);
+                box-shadow: rgba(219, 223, 230, 0.2) 0px 0px 0px 1px inset;
+              }
+            }
           }
         }
-        
+      }
+    }
+
+    .models--list--wrap{
+      @media (min-width: 1024px) {
+        padding: var(--spacing-relative-2xl) var(--page-margin) var(--spacing-relative-2xl) 0;
+      }
+
+      .all--models{
+        margin: 0 0 var(--spacing-relative-2xs) 0;
+        color: rgba(252, 252, 253, 0.7);            
+        letter-spacing: 0px;
+        font-weight: 400;
+        text-decoration: none;
+        font-size: 12px;
+        line-height: 20px;
+        font-stretch: 105%;
+        padding-bottom:12px;
+      }
+      .models--list{
+        width:100%;
+        display: flex;
+        flex-wrap:wrap;
+        gap:20px;
+        .model--item{
+          --gradient-start: hsla(216, 20%, 17%, 1);
+          --gradient-end: hsla(216, 21%, 12%, 1);
+          transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+          transition-duration: 250ms;
+          transition-property: --gradient-start, --gradient-end, box-shadow;
+          padding: 16px;
+          overflow: hidden;
+          border-radius: 20px;
+          border: none;
+          cursor: pointer;
+          box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+          backdrop-filter: blur(40px);
+          background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+          text-align: left;
+          max-width:calc( (100% - 60px) / 4);
+  
+          .model--name{
+            position: relative;
+            margin: 0px;
+            color: rgba(252, 252, 253, 0.7);          
+            letter-spacing: 0px;
+            font-weight: 400;
+            text-decoration: none;
+            font-size: 16px;
+            line-height: 24px;
+            font-stretch: 105%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+  
+            .etron--wrap{
+              min-height:28px;
+              .etron{
+                margin: 0px;              
+                border-radius: 10px;
+                box-sizing: border-box;
+                display: inline-flex;
+                -webkit-box-pack: justify;
+                justify-content: space-between;
+                -webkit-box-align: center;
+                align-items: center;
+                gap: 8px;            
+                letter-spacing: 0px;
+                font-weight: 400;
+                text-decoration: none;
+                font-size: 12px;
+                line-height: 16px;
+                font-stretch: 105%;
+                padding: 4px 12px;
+                transition-timing-function:cubic-bezier(0.75, 0.02, 0.5, 1);
+                transition-duration: 250ms;
+                transition-property: background-color, box-shadow, color;
+                min-height: 28px;
+                background-color: rgba(154, 163, 177, 0.1);
+                color: rgb(252, 252, 253);
+                box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
+              }
+            }
+          }
+          .model--image--wrap{
+            display: block;
+            aspect-ratio: 7 / 3;
+            overflow: hidden;
+            padding: 0px;
+            margin-bottom:20px;
+            img{
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+          }
+          .model--info--wrap{
+            margin: 0px;
+            color: rgba(252, 252, 253, 0.7);          
+            letter-spacing: 0px;
+            font-weight: 400;
+            text-decoration: none;
+            font-size: 12px;
+            line-height: 20px;
+            font-stretch: 105%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .ico{
+              width: 24px;
+              height: 24px;
+              background-image: url(/img/ico--arrow.svg);
+            }
+          }
+          
+        }
       }
     }
   }
 
   .models--list--car{
+    .all--car--title{
+      margin: 0px;
+      color: rgba(252, 252, 253, 0.7);      
+      letter-spacing: 0px;
+      font-weight: 400;
+      text-decoration: none;
+      font-size: 12px;
+      line-height: 20px;
+      font-stretch: 105%;
+      padding-bottom:12px;
+      margin: 0 0 var(--spacing-relative-2xs) 0;
+    }
     .car--list{
       display: flex;
       flex-wrap: wrap;
@@ -3033,6 +3380,7 @@ html {
         background-color: rgba(154, 163, 177, 0.1);
         border-radius: 20px;        
         padding-top:24px;     
+        padding-bottom:24px;
         .car--image{
           img{
             width:100%;
@@ -3081,7 +3429,8 @@ html {
             text-decoration: none;
             font-size: 16px;
             line-height: 24px;
-            font-stretch: 130%;            
+            font-stretch: 130%;     
+            min-height:64px;       
             
             @media (min-width: 1440px) {                
               font-size: 18px;
@@ -3098,6 +3447,7 @@ html {
           padding-left: 24px;
           padding-right: 24px;
           gap: var(--spacing-relative-2xs);
+          min-height:28px;
 
           .etron{          
             margin: 0px;
@@ -3129,4 +3479,187 @@ html {
       }
     }
   }
-}
+}
+
+
+
+header{
+  width: 100%;
+    
+  .header--wrap{
+    background-color: #020203;
+    max-width: 1920px;
+    width: 100%;
+    margin: 0 auto;
+    height: 72px;
+    padding: 0 96px;
+    display: flex;
+    align-items: center;
+    .header--logo--wrap{
+      margin-right: 40px;
+      a{
+        strong{
+          clip: rect(1px, 1px, 1px, 1px);
+          height: 1px;
+          overflow: hidden;
+          position: absolute;
+          width: 1px;
+        }
+      }
+    }
+  }
+  
+  .header--menu--wrap{
+      display: flex;
+      gap: 24px;
+      >a{
+          color: #fcfcfdb2;
+          &:hover{
+              color: hsla(216, 33%, 99%, 1);
+          }
+      }
+  }
+  .header--search--wrap{
+      margin-left: auto;
+      .search--btn{
+          border-radius: 50%;
+          padding: 0;
+          background-image: url(/img/ico--search.svg);
+          background-repeat: no-repeat;
+          background-position: center;
+          background-color: transparent;
+          width: 48px;
+          height: 48px;
+      }
+  }
+}
+
+footer{
+  width: 100%;
+  --one-footer-color-black: hsla(216, 26%, 1%, 1);
+  --one-footer-color-white: hsla(216, 33%, 99%, 1);
+  --one-footer-neutral-5: hsla(216, 26%, 1%, 0.6);
+  --one-footer-neutral-10: hsla(216, 17%, 26%, 1);
+  --one-footer-neutral-20: hsla(216, 14%, 35%, 1);
+  --one-footer-neutral-70: hsla(216, 33%, 99%, 0.6);
+  --one-footer-side-spacing: 16px;
+  --one-footer-space-xs: var(--spacing-relative-xs);
+  --one-footer-space-s: var(--spacing-relative-sm);
+  --one-footer-space-m: var(--spacing-relative-md);
+  --one-footer-space-l: var(--spacing-relative-lg);
+  --one-footer-space-xl: var(--spacing-relative-xl);
+  --one-footer-space-xxl: var(--spacing-relative-2xl);
+  --one-footer-space-xxxl: var(--spacing-relative-3xl);
+  background: var(--one-footer-color-black);
+  box-sizing: border-box;
+  color: var(--one-footer-color-white);
+
+  
+  @media (min-width: 375px) {  
+    --one-footer-side-spacing: 28px;    
+  }
+  @media (min-width: 768px) {  
+    --one-footer-side-spacing: 40px;  
+  }
+  @media (min-width: 1024px) {    
+    --one-footer-side-spacing: 60px;    
+  }
+
+  .footer--wrap{
+    background-color: #020203;
+    max-width: 1920px;
+    width: 100%;
+    margin: 0 auto;    
+    padding: 40px 96px;
+    display: flex;
+    flex-direction: column;
+    
+    .footer--site--map{
+      width:100%;
+      >ul{        
+        display: block;
+        list-style: none;        
+        margin: 0 0 var(--one-footer-space-xxl) calc(-1 * var(--one-footer-side-spacing));
+        padding: 0px;
+        width: calc(100% + 2 * var(--one-footer-side-spacing));
+
+        @media (min-width: 768px) {          
+          display: flex;
+          flex-flow: wrap;
+          margin: 28px auto;
+          width: 100%;                    
+        }
+
+
+        >li{
+          margin-bottom: -1px;
+          
+
+          @media (min-width: 768px) {
+            margin: 0px 24px 40px 0px;            
+            width: calc(33% - var(--one-footer-space-xl) * 2 / 3); 
+            
+
+            &:first-of-type {
+              margin-top: 0px;
+            }
+          }
+
+          >ul{
+            >li{
+              padding: 0 var(--one-footer-side-spacing);
+              @media (min-width: 768px) {
+                padding: 0 0 var(--one-footer-space-s);
+              }
+            }
+          }
+        
+        
+          @media (min-width: 1440px) {            
+            margin: 0px 24px 0px 0px;
+            width: calc(20% - var(--one-footer-space-xl) * 4 / 5);            
+          }
+          
+          >h2{
+            color: var(--one-footer-color-white);
+            display: flex;
+            flex-flow: row;
+            -webkit-box-pack: justify;
+            justify-content: space-between;
+            padding: var(--one-footer-space-m) 0;
+            width: 100%;
+
+            margin: 0px;
+            color: rgb(252, 252, 253);
+            
+            letter-spacing: 0px;
+            font-weight: 400;
+            text-decoration: none;
+            font-size: 16px;
+            line-height: 24px;
+            font-stretch: 130%;
+            margin-bottom: 24px;        
+
+            
+            @media (min-width: 768px) {              
+              padding: 0px;
+              width: auto;              
+            }
+
+            
+            @media (min-width: 1440px) {          
+              font-size: 18px;
+              line-height: 28px;
+            }        
+            
+            @media (min-width: 1920px) {            
+              font-size: 20px;
+              line-height: 32px;            
+            }
+          }
+          
+        }
+      }
+    }
+  }
+}

app/assets/scss/style.scss

@@ -44,59 +44,6 @@ button{
     cursor: pointer;
 }
 
-header{
-    width: 100%;
-    .header--wrap{
-        background-color: #020203;
-        max-width: 1920px;
-        width: 100%;
-        margin: 0 auto;
-        height: 72px;
-        padding: 0 96px;
-        display: flex;
-        align-items: center;
-    }
-    .header--logo--wrap{
-        margin-right: 40px;
-    }
-    .header--menu--wrap{
-        display: flex;
-        gap: 24px;
-        >a{
-            color: #fcfcfdb2;
-            &:hover{
-                color: hsla(216, 33%, 99%, 1);
-            }
-        }
-    }
-    .header--search--wrap{
-        margin-left: auto;
-        .search--btn{
-            border-radius: 50%;
-            padding: 0;
-            background-image: url(/img/ico--search.svg);
-            background-repeat: no-repeat;
-            background-position: center;
-            background-color: transparent;
-            width: 48px;
-            height: 48px;
-        }
-    }
-}
-
-footer{
-    width: 100%;
-    .footer--wrap{
-        background-color: #020203;
-        max-width: 1920px;
-        width: 100%;
-        margin: 0 auto;
-        height: 72px;
-        padding: 0 96px;
-        display: flex;
-        align-items: center;
-    }
-}
 
 main{
     .visual--section{

app/components/block/carouselModels.vue

@@ -0,0 +1,328 @@
+<template>
+  <main class="models--page">
+    <div class="type--carousel">
+      <!-- 필터 -->
+      <div class="models--filter--section">
+        <div class="filter--group">
+          <!-- 연료 타입 필터 -->
+          <div class="filter--dropdown--list">
+            <div class="filter--dropdown">
+              <button
+                v-for="fuel in filters.fuelType"
+                :key="fuel.id"
+                :class="['filter--btn', { active: activeFuelTypes.includes(fuel.id) }]"
+                @click="toggleFuelType(fuel.id)"
+              >
+                <svg
+                  v-if="fuel.id == 'etron'"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                  width="16px"
+                  height="16px"
+                  class=""
+                >
+                  <use
+                    v-if="activeFuelTypes.includes(fuel.id)"
+                    href="/img/select-xs.svg#main"
+                  ></use>
+                  <use v-else href="/img/charging-xs.svg#main"></use>
+                </svg>
+
+                <svg
+                  v-else-if="activeFuelTypes.includes(fuel.id)"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                  width="16px"
+                  height="16px"
+                  class=""
+                >
+                  <use href="/img/select-xs.svg#main"></use>
+                </svg>
+                {{ fuel.name }}
+              </button>
+
+              <button
+                v-for="body in filters.bodyType"
+                :key="body.id"
+                :class="['filter--btn', { active: activeBodyTypes.includes(body.id) }]"
+                @click="toggleBodyType(body.id)"
+              >
+                <svg
+                  v-if="activeBodyTypes.includes(body.id)"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                  width="16px"
+                  height="16px"
+                  class="sc-AxhUy kMyssS sc-fzoant LAaNs"
+                >
+                  <use href="/img/select-xs.svg#main"></use>
+                </svg>
+                {{ body.name }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 차량 그리드 (항상 표시) -->
+      <div class="models--list--wrap">
+        <div class="all--models--wrap">
+          <div class="all--models">Model 보기 ({{ filteredModels.length }})</div>
+          <div class="nav--btn--wrap">
+            <button class="nav--prev--btn">
+              <svg
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+                width="24px"
+                height="24px"
+                class=""
+              >
+                <use href="/img/forward-s.svg#main"></use>
+              </svg>
+            </button>
+            <button class="nav--next--btn">
+              <svg
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+                width="24px"
+                height="24px"
+                class=""
+              >
+                <use href="/img/forward-s.svg#main"></use>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="models--list">
+          <Swiper
+            :slides-per-view="'auto'"
+            :space-between="8"
+            :navigation="{
+              nextEl: '.nav--next--btn',
+              prevEl: '.nav--prev--btn',
+            }"
+            :centered-slides="false"
+            :modules="modules"
+            class="models--swiper"
+          >
+            <SwiperSlide
+              v-for="model in filteredModels"
+              :key="model.id"
+              :class="['model--item', { active: selectedGroupName === model.groupName }]"
+            >
+              <div @click="handleModelClick(model)">
+                <!-- 이미지 -->
+                <h2 class="model--name">
+                  {{ model.groupName }}
+                  <div class="etron--wrap" v-if="model.fuelType === 'etron'">
+                    <div class="etron">
+                      <svg
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                        width="16px"
+                        height="16px"
+                        class="sc-AxhUy kMyssS sc-fzoant LAaNs"
+                      >
+                        <use href="/img/charging-xs.svg#main"></use>
+                      </svg>
+                    </div>
+                  </div>
+                </h2>
+                <div class="model--image--wrap">
+                  <img :src="model.image" :alt="model.name" />
+                </div>
+
+                <!-- 정보 -->
+                <div class="model--info--wrap">
+                  Model 보기 {{ getGroupModelCount(model.groupName) }}
+                  <i class="ico"></i>
+                </div>
+              </div>
+            </SwiperSlide>
+          </Swiper>
+        </div>
+
+        <!-- 모든 차량 리스트 (Swiper 차량 클릭 시 드롭다운 표시) -->
+        <div class="models--list--car" :class="{ active: selectedGroupName }">
+          <div class="car--list">
+            <div v-for="car in filteredCars" :key="car.id" class="car--item">
+              <div class="bedge--wrap">
+                <div class="etron--wrap" v-if="car.fuelType === 'etron'">
+                  <div class="etron">
+                    <svg
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      aria-hidden="true"
+                      width="16px"
+                      height="16px"
+                      class="sc-AxhUy kMyssS sc-fzoant LAaNs"
+                    >
+                      <use href="/img/charging-xs.svg#main"></use>
+                    </svg>
+                    Electrified
+                  </div>
+                </div>
+              </div>
+              <div class="car--image">
+                <NuxtLink :to="car.link">
+                  <img :src="car.image" :alt="car.name" />
+                </NuxtLink>
+              </div>
+              <div class="car--info">
+                <h3 class="car--name">{{ car.fullName }}</h3>
+                <NuxtLink :to="car.link" class="car--link">자세히 보기</NuxtLink>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  import { Swiper, SwiperSlide } from "swiper/vue";
+  import { Navigation } from "swiper/modules";
+  import "swiper/css";
+  import "swiper/css/navigation";
+
+  const modules = [Navigation];
+
+  const modelsData = ref({
+    models: [],
+    filters: { fuelType: [], bodyType: [] },
+  });
+  const activeFuelTypes = ref([]);
+  const activeBodyTypes = ref([]);
+  const selectedGroupName = ref(null); // Swiper에서 클릭한 그룹
+
+  // 필터 옵션
+  const filters = computed(() => modelsData.value.filters);
+
+  // 필터 토글 함수
+  const toggleFuelType = (value) => {
+    const index = activeFuelTypes.value.indexOf(value);
+    if (index > -1) {
+      activeFuelTypes.value.splice(index, 1);
+    } else {
+      activeFuelTypes.value.push(value);
+    }
+    // 필터 버튼 클릭 시 선택된 그룹 초기화
+    selectedGroupName.value = null;
+  };
+
+  const toggleBodyType = (value) => {
+    const index = activeBodyTypes.value.indexOf(value);
+    if (index > -1) {
+      activeBodyTypes.value.splice(index, 1);
+    } else {
+      activeBodyTypes.value.push(value);
+    }
+    // 필터 버튼 클릭 시 선택된 그룹 초기화
+    selectedGroupName.value = null;
+  };
+
+  // groupName별 모델 개수를 계산하는 함수
+  const getGroupModelCount = (groupName) => {
+    return modelsData.value.models.filter((model) => model.groupName === groupName)
+      .length;
+  };
+
+  // 연료 타입 이름 가져오기
+  const getFuelTypeName = (fuelType) => {
+    const fuelTypes = {
+      etron: "전기차",
+      hybrid: "하이브리드",
+      "gas-diesel": "가솔린/디젤",
+    };
+    return fuelTypes[fuelType] || fuelType;
+  };
+
+  // 모델 그룹 클릭 핸들러 (Swiper에서 차량 클릭 - 토글)
+  const handleModelClick = (model) => {
+    // 같은 그룹을 다시 클릭하면 토글 (숨김)
+    if (selectedGroupName.value === model.groupName) {
+      selectedGroupName.value = null;
+    } else {
+      // 다른 그룹을 클릭하면 변경
+      selectedGroupName.value = model.groupName;
+    }
+  };
+
+  // 필터링된 차량 리스트 (모든 차량)
+  const filteredCars = computed(() => {
+    // Swiper에서 차량을 클릭한 경우 - groupName으로 필터링
+    if (selectedGroupName.value) {
+      return modelsData.value.models.filter(
+        (model) => model.groupName === selectedGroupName.value
+      );
+    }
+
+    return [];
+  });
+
+  // 필터링된 모델 계산 (그룹화된 모델)
+  const filteredModels = computed(() => {
+    let filtered = modelsData.value.models;
+
+    // 연료 타입 필터 (OR 조건 - 선택된 연료 타입 중 하나라도 일치하면 포함)
+    if (activeFuelTypes.value.length > 0) {
+      filtered = filtered.filter((model) =>
+        activeFuelTypes.value.includes(model.fuelType)
+      );
+    }
+
+    // 바디 타입 필터 (OR 조건 - 선택된 바디 타입 중 하나라도 일치하면 포함)
+    if (activeBodyTypes.value.length > 0) {
+      filtered = filtered.filter((model) =>
+        model.bodyType.some((type) => activeBodyTypes.value.includes(type))
+      );
+    }
+
+    // groupName별로 그룹화하고 각 그룹의 첫 번째 모델만 추출
+    const groupedByName = {};
+
+    filtered.forEach((model) => {
+      // groupName을 키로 사용
+      const groupName = model.groupName;
+
+      // 해당 groupName 그룹이 없으면 생성하고 첫 번째 모델 저장
+      if (!groupedByName[groupName]) {
+        groupedByName[groupName] = model;
+      }
+    });
+
+    // 그룹화된 객체에서 값(첫 번째 모델들)만 배열로 반환
+    return Object.values(groupedByName);
+  });
+
+  onMounted(async () => {
+    try {
+      const response = await fetch("/models.json");
+      const data = await response.json();
+      modelsData.value = data;
+
+      console.log("Models data loaded:", data);
+    } catch (error) {
+      console.error("Failed to load models data:", error);
+    }
+  });
+</script>
+
+<style scoped lang="scss">
+  .type--carousel {
+    .models--list {
+      position: relative;
+    }
+
+    .models--list--car {
+      transition: all 0.3s ease-in-out;
+    }
+  }
+</style>

app/components/footer.vue

@@ -1,9 +1,140 @@
 <template>
-    <footer>
-        <div class="footer--wrap">
-            <div class="footer--menu--wrap">
-                뿌터
-            </div>
-        </div>
-    </footer>
-</template>
+  <footer>
+    <div class="footer--wrap">
+      <div class="footer--site--map">
+        <ul>
+          <li>
+            <h2>Models</h2>
+            <ul>
+              <li><NuxtLink to="/models/sedan">아우디 코리아 Sedan</NuxtLink></li>
+              <li><NuxtLink to="/models/suv">아우디 코리아 SUV</NuxtLink></li>
+              <li><NuxtLink to="/models/coupe">아우디 코리아 Coupe</NuxtLink></li>
+              <li><NuxtLink to="/models/sportback">아우디 코리아 Sportback</NuxtLink></li>
+              <li><NuxtLink to="/models/etron">아우디 코리아 전기차</NuxtLink></li>
+              <li><NuxtLink to="/models/srange">아우디 코리아 S range</NuxtLink></li>
+              <li><NuxtLink to="/models/rsrange">아우디 코리아 RS range</NuxtLink></li>
+            </ul>
+          </li>
+          <li>
+            <h2>About Audi</h2>
+            <ul>
+              <li><NuxtLink to="/service/careprogram/diesel">고객안내</NuxtLink></li>
+              <li>
+                <NuxtLink to="/aboutaudi/audi-brand-2023">아우디 브랜드 소개</NuxtLink>
+              </li>
+              <li><NuxtLink to="/aboutaudi">아우디 브랜드 히스토리</NuxtLink></li>
+              <li><NuxtLink to="/aboutaudi/quattor">quattro 시스템</NuxtLink></li>
+              <li><NuxtLink to="/aboutaudi/aude_connect">Audi Connect</NuxtLink></li>
+              <li>
+                <NuxtLink to="/aboutaudi/morepossibilities">More possibilities</NuxtLink>
+              </li>
+              <li>
+                <NuxtLink to="/aboutaudi/futureisanattitude"
+                  >Future is an attitude</NuxtLink
+                >
+              </li>
+              <li><NuxtLink to="/aboutaudi/myaudiworld">myAudiworld</NuxtLink></li>
+              <li><NuxtLink to="/etronms/">Audi e-tron 모빌리티 서비스</NuxtLink></li>
+              <li>
+                <NuxtLink to="/aboutaudi/auditoyou"
+                  >Audi to you 찾아가는 시승 서비스</NuxtLink
+                >
+              </li>
+            </ul>
+          </li>
+          <li>
+            <h2>About Service</h2>
+            <ul>
+              <li><NuxtLink to="/service">아우디 서비스</NuxtLink></li>
+              <li><NuxtLink to="/service/program">서비스 프로그램</NuxtLink></li>
+              <li>
+                <NuxtLink to="/service/careprogram/"
+                  >아우디 e-tron 케어 프로그램</NuxtLink
+                >
+              </li>
+              <li>
+                <NuxtLink to="/service/program/dealersearch?filter=as">AS센터</NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  to="https://www.audikoreaevent.co.kr/app/rsvt/applyServiceReservation.do"
+                  target="_blank"
+                  >서비스 예약</NuxtLink
+                >
+              </li>
+              <li>
+                <NuxtLink to="/service/careprogram/carecenter">고객지원센터</NuxtLink>
+              </li>
+              <li><NuxtLink to="/service/genuineparts">아우디 순정부품</NuxtLink></li>
+              <li><NuxtLink to="/service/acc">아우디 순정 액세서리</NuxtLink></li>
+              <li>
+                <NuxtLink to="/service/navigationdown"
+                  >내비게이션 데이터 다운로드</NuxtLink
+                >
+              </li>
+              <li>
+                <NuxtLink
+                  to="https://www.audikoreaevent.co.kr/etc/component/index1.jsp"
+                  target="_blank"
+                  >부품 가격 정보</NuxtLink
+                >
+              </li>
+              <li>
+                <NuxtLink to="/service/advisor">사설수리업체를 위한 권고사항</NuxtLink>
+              </li>
+              <li><NuxtLink to="/service/videomenual">아우디 영상 매뉴얼</NuxtLink></li>
+              <li><NuxtLink to="/service/qna">아우디 차량 Q&A</NuxtLink></li>
+            </ul>
+          </li>
+          <li>
+            <h2>About exclusive</h2>
+            <ul>
+              <li>
+                <NuxtLink to="/exclusive/exclusive-order">exclusive order</NuxtLink>
+              </li>
+              <li>
+                <NuxtLink to="/exclusive/exclusive-edition">exclusive edition</NuxtLink>
+              </li>
+            </ul>
+          </li>
+          <li>
+            <h2>Stories of Progress</h2>
+            <ul>
+              <li><NuxtLink to="/stories/technology">Technology</NuxtLink></li>
+              <li><NuxtLink to="/stories/future">Future</NuxtLink></li>
+              <li><NuxtLink to="/stories/design">Design</NuxtLink></li>
+              <li><NuxtLink to="/stories/sustainability">Sustainability</NuxtLink></li>
+              <li><NuxtLink to="/stories/lifestyle">Lifestyle</NuxtLink></li>
+              <li><NuxtLink to="/stories/audi-sport">Audi Sport</NuxtLink></li>
+            </ul>
+          </li>
+        </ul>
+        <ul>
+            <li>
+                <h2>Company</h2>
+                <ul>
+                    <li><NuxtLink to="/">About Gojin Motors</NuxtLink></li>
+                    <li><NuxtLink to="/">CEO</NuxtLink></li>
+                    <li><NuxtLink to="/">History</NuxtLink></li>
+                    <li><NuxtLink to="/">IR</NuxtLink></li>
+                    <li><NuxtLink to="/">Showroom</NuxtLink></li>
+                    <li><NuxtLink to="/">Service Center</NuxtLink></li>
+                    <li><NuxtLink to="/">Career</NuxtLink></li>
+                    <li><NuxtLink to="/">Sales Advisor</NuxtLink></li>
+                    <li><NuxtLink to="/">견적요청</NuxtLink></li>
+                    <li><NuxtLink to="/">시승요청</NuxtLink></li>
+                    <li><NuxtLink to="/">e-카탈로그</NuxtLink></li>
+                    <li><NuxtLink to="/">Event</NuxtLink></li>
+                    <li><NuxtLink to="/">Audi News</NuxtLink></li>
+                </ul>
+            </li>
+            <li>
+                <h2>Used Car(AAP)</h2>
+                <li><NuxtLink to="/">Used Car(AAP)</NuxtLink></li>
+            </li>
+        </ul>
+      </div>
+      <div class="footer--menu--wrap">뿌터</div>
+    </div>
+  </footer>
+</template>

app/pages/index.vue

@@ -1,5 +1,7 @@
 <template>
-    <main>
-        하잉 인덱스
-    </main>
-</template>
+  <main><carouselModels /></main>
+</template>
+
+<script setup>
+  import carouselModels from "~/components/block/carouselModels.vue";
+</script>

app/pages/models/index.vue

@@ -1,62 +1,89 @@
 <template>
   <main class="models--page">
     <div class="models--container">
-      <!-- 헤더 -->
-      <div class="models--header">
-        <h1 class="models--title">Audi Models</h1>
-      </div>
-
       <!-- 필터 -->
       <div class="models--filter--section">
         <div class="filter--group">
           <!-- 연료 타입 필터 -->
-          <div class="filter--dropdown">
-            <button
-              v-for="fuel in filters.fuelType"
-              :key="fuel.id"
-              :class="['filter--btn', { active: activeFuelType === fuel.id }]"
-              @click="activeFuelType = fuel.id"
-            >
-              {{ fuel.name }}
-            </button>
+          <div class="filter--dropdown--list">
+            <h2>연료 타입</h2>
+            <div class="filter--dropdown">
+              <button
+                v-for="fuel in filters.fuelType"
+                :key="fuel.id"
+                :class="['filter--btn', { active: activeFuelTypes.includes(fuel.id) }]"
+                @click="toggleFuelType(fuel.id)"
+              >
+                <svg
+                  v-if="fuel.id == 'etron'"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                  width="16px"
+                  height="16px"
+                  class="sc-AxhUy kMyssS sc-fzoant LAaNs"
+                >
+                  <use
+                    v-if="activeFuelTypes.includes(fuel.id)"
+                    href="/img/select-xs.svg#main"
+                  ></use>
+                  <use v-else href="/img/charging-xs.svg#main"></use>
+                </svg>
+
+                <svg
+                  v-else-if="activeFuelTypes.includes(fuel.id)"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                  width="16px"
+                  height="16px"
+                  class="sc-AxhUy kMyssS sc-fzoant LAaNs"
+                >
+                  <use href="/img/select-xs.svg#main"></use>
+                </svg>
+                {{ fuel.name }}
+              </button>
+            </div>
           </div>
 
           <!-- 그룹 네임 필터 -->
-          <div class="filter--dropdown">
-            <button
-              v-for="group in filters.groupName"
-              :key="group.id"
-              :class="['filter--btn', { active: activeGroupName === group.id }]"
-              @click="activeGroupName = group.id"
-            >
-              {{ group.name }}
-            </button>
+          <div class="filter--dropdown--list">
+            <h2>모델</h2>
+            <div class="filter--dropdown">
+              <button
+                v-for="group in filters.groupName"
+                :key="group.id"
+                :class="['filter--btn', { active: activeGroupNames.includes(group.id) }]"
+                @click="toggleGroupName(group.id)"
+              >
+                <svg
+                  v-if="activeGroupNames.includes(group.id)"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                  width="16px"
+                  height="16px"
+                  class="sc-AxhUy kMyssS sc-fzoant LAaNs"
+                >
+                  <use href="/img/select-xs.svg#main"></use>
+                </svg>
+                {{ group.name }}
+              </button>
+            </div>
           </div>
 
           <!-- 바디 타입 필터 -->
-          <div class="filter--dropdown">
-            <button
-              v-for="body in filters.bodyType"
-              :key="body.id"
-              :class="['filter--btn', { active: activeBodyType === body.id }]"
-              @click="activeBodyType = body.id"
-            >
-              {{ body.name }}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- 차량 그리드 -->
-      <div class="models--list--wrap">
-        <div class="all--models">전체 모델({{ filteredModels.length }})</div>
-        <div class="models--list">
-          <div v-for="model in filteredModels" :key="model.id" class="model--item">
-            <!-- 이미지 -->
-            <h2 class="model--name">
-              {{ model.groupName }}
-              <div v-if="model.fuelType === 'etron'" class="etron">
+          <div class="filter--dropdown--list">
+            <h2>모델 유형</h2>
+            <div class="filter--dropdown">
+              <button
+                v-for="body in filters.bodyType"
+                :key="body.id"
+                :class="['filter--btn', { active: activeBodyTypes.includes(body.id) }]"
+                @click="toggleBodyType(body.id)"
+              >
                 <svg
+                  v-if="activeBodyTypes.includes(body.id)"
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg"
                   aria-hidden="true"
@@ -64,14 +91,47 @@
                   height="16px"
                   class="sc-AxhUy kMyssS sc-fzoant LAaNs"
                 >
-                  <use href="/img/charging-xs.svg#main"></use>
+                  <use href="/img/select-xs.svg#main"></use>
                 </svg>
+                {{ body.name }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 차량 그리드 (필터 선택되지 않았을 때만 표시) -->
+      <div class="models--list--wrap">
+        <div v-if="!isFilterActive" class="all--models">
+          전체 모델({{ filteredModels.length }})
+        </div>
+        <div v-if="!isFilterActive" class="models--list">
+          <div
+            v-for="model in filteredModels"
+            :key="model.id"
+            class="model--item"
+            @click="handleModelClick(model)"
+          >
+            <!-- 이미지 -->
+            <h2 class="model--name">
+              {{ model.groupName }}
+              <div class="etron--wrap" v-if="model.fuelType === 'etron'">
+                <div class="etron">
+                  <svg
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                    width="16px"
+                    height="16px"
+                    class="sc-AxhUy kMyssS sc-fzoant LAaNs"
+                  >
+                    <use href="/img/charging-xs.svg#main"></use>
+                  </svg>
+                </div>
               </div>
             </h2>
             <div class="model--image--wrap">
-              <NuxtLink :to="model.link">
-                <img :src="model.image" :alt="model.name" />
-              </NuxtLink>
+              <img :src="model.image" :alt="model.name" />
             </div>
 
             <!-- 정보 -->
@@ -81,36 +141,38 @@
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 모든 차량 리스트 -->
-      <div class="models--list--car">
-        <div class="all--car--title">모든 차량 ({{ modelsData.models.length }})</div>
-        <div class="car--list">
-          <div v-for="car in modelsData.models" :key="car.id" class="car--item">
-            <div class="bedge--wrap">
-              <div v-if="car.fuelType === 'etron'" class="etron">
-                <svg
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  aria-hidden="true"
-                  width="16px"
-                  height="16px"
-                  class="sc-AxhUy kMyssS sc-fzoant LAaNs"
-                >
-                  <use href="/img/charging-xs.svg#main"></use>
-                </svg>
-                Electrified
+        <!-- 모든 차량 리스트 (필터 선택 시 표시) -->
+        <div v-if="isFilterActive" class="models--list--car">
+          <div class="all--car--title">모든 차량 ({{ filteredCars.length }})</div>
+          <div class="car--list">
+            <div v-for="car in filteredCars" :key="car.id" class="car--item">
+              <div class="bedge--wrap">
+                <div class="etron--wrap" v-if="car.fuelType === 'etron'">
+                  <div class="etron">
+                    <svg
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      aria-hidden="true"
+                      width="16px"
+                      height="16px"
+                      class="sc-AxhUy kMyssS sc-fzoant LAaNs"
+                    >
+                      <use href="/img/charging-xs.svg#main"></use>
+                    </svg>
+                    Electrified
+                  </div>
+                </div>
+              </div>
+              <div class="car--image">
+                <NuxtLink :to="car.link">
+                  <img :src="car.image" :alt="car.name" />
+                </NuxtLink>
+              </div>
+              <div class="car--info">
+                <h3 class="car--name">{{ car.fullName }}</h3>
+                <NuxtLink :to="car.link" class="car--link">자세히 보기</NuxtLink>
               </div>
-            </div>
-            <div class="car--image">
-              <NuxtLink :to="car.link">
-                <img :src="car.image" :alt="car.name" />
-              </NuxtLink>
-            </div>
-            <div class="car--info">
-              <h3 class="car--name">{{ car.fullName }}</h3>
-              <NuxtLink :to="car.link" class="car--link">자세히 보기</NuxtLink>
             </div>
           </div>
         </div>
@@ -124,13 +186,41 @@
     models: [],
     filters: { fuelType: [], bodyType: [], groupName: [] },
   });
-  const activeFuelType = ref("all");
-  const activeBodyType = ref("all");
-  const activeGroupName = ref("all");
+  const activeFuelTypes = ref([]);
+  const activeBodyTypes = ref([]);
+  const activeGroupNames = ref([]);
 
   // 필터 옵션
   const filters = computed(() => modelsData.value.filters);
 
+  // 필터 토글 함수
+  const toggleFuelType = (value) => {
+    const index = activeFuelTypes.value.indexOf(value);
+    if (index > -1) {
+      activeFuelTypes.value.splice(index, 1);
+    } else {
+      activeFuelTypes.value.push(value);
+    }
+  };
+
+  const toggleBodyType = (value) => {
+    const index = activeBodyTypes.value.indexOf(value);
+    if (index > -1) {
+      activeBodyTypes.value.splice(index, 1);
+    } else {
+      activeBodyTypes.value.push(value);
+    }
+  };
+
+  const toggleGroupName = (value) => {
+    const index = activeGroupNames.value.indexOf(value);
+    if (index > -1) {
+      activeGroupNames.value.splice(index, 1);
+    } else {
+      activeGroupNames.value.push(value);
+    }
+  };
+
   // groupName별 모델 개수를 계산하는 함수
   const getGroupModelCount = (groupName) => {
     return modelsData.value.models.filter((model) => model.groupName === groupName)
@@ -147,25 +237,84 @@
     return fuelTypes[fuelType] || fuelType;
   };
 
-  // 필터링된 모델 계산
-  const filteredModels = computed(() => {
+  // 필터가 활성화되어 있는지 확인
+  const isFilterActive = computed(() => {
+    return (
+      activeFuelTypes.value.length > 0 ||
+      activeBodyTypes.value.length > 0 ||
+      activeGroupNames.value.length > 0
+    );
+  });
+
+  // 모델 그룹 클릭 핸들러
+  const handleModelClick = (model) => {
+    // 해당 그룹을 필터에 추가
+    if (!activeGroupNames.value.includes(model.groupName)) {
+      activeGroupNames.value.push(model.groupName);
+    }
+
+    // 해당 연료 타입을 필터에 추가
+    if (model.fuelType && !activeFuelTypes.value.includes(model.fuelType)) {
+      activeFuelTypes.value.push(model.fuelType);
+    }
+  };
+
+  // 필터링된 차량 리스트 (모든 차량)
+  const filteredCars = computed(() => {
+    // 필터가 활성화되지 않은 경우
+    if (!isFilterActive.value) {
+      return [];
+    }
+
     let filtered = modelsData.value.models;
 
     // 연료 타입 필터
-    if (activeFuelType.value !== "all") {
-      filtered = filtered.filter((model) => model.fuelType === activeFuelType.value);
+    if (activeFuelTypes.value.length > 0) {
+      filtered = filtered.filter((model) =>
+        activeFuelTypes.value.includes(model.fuelType)
+      );
     }
 
     // 바디 타입 필터
-    if (activeBodyType.value !== "all") {
+    if (activeBodyTypes.value.length > 0) {
       filtered = filtered.filter((model) =>
-        model.bodyType.includes(activeBodyType.value)
+        model.bodyType.some((type) => activeBodyTypes.value.includes(type))
       );
     }
 
     // 그룹 네임 필터
-    if (activeGroupName.value !== "all") {
-      filtered = filtered.filter((model) => model.groupName === activeGroupName.value);
+    if (activeGroupNames.value.length > 0) {
+      filtered = filtered.filter((model) =>
+        activeGroupNames.value.includes(model.groupName)
+      );
+    }
+
+    return filtered;
+  });
+
+  // 필터링된 모델 계산 (그룹화된 모델)
+  const filteredModels = computed(() => {
+    let filtered = modelsData.value.models;
+
+    // 연료 타입 필터 (OR 조건 - 선택된 연료 타입 중 하나라도 일치하면 포함)
+    if (activeFuelTypes.value.length > 0) {
+      filtered = filtered.filter((model) =>
+        activeFuelTypes.value.includes(model.fuelType)
+      );
+    }
+
+    // 바디 타입 필터 (OR 조건 - 선택된 바디 타입 중 하나라도 일치하면 포함)
+    if (activeBodyTypes.value.length > 0) {
+      filtered = filtered.filter((model) =>
+        model.bodyType.some((type) => activeBodyTypes.value.includes(type))
+      );
+    }
+
+    // 그룹 네임 필터 (OR 조건 - 선택된 그룹 네임 중 하나라도 일치하면 포함)
+    if (activeGroupNames.value.length > 0) {
+      filtered = filtered.filter((model) =>
+        activeGroupNames.value.includes(model.groupName)
+      );
     }
 
     // groupName별로 그룹화하고 각 그룹의 첫 번째 모델만 추출

public/img/back-s.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="main"><path fill="currentColor" d="m10.21 12 5.12-5.08-.7-.71L8.79 12l5.84 5.8.7-.72L10.22 12Z"></path></g></svg>

public/img/forward-s.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="main"><path fill="currentColor" d="M14.27 12 9.15 6.92l.7-.71L15.7 12l-5.84 5.8-.7-.72L14.27 12Z"></path></g></svg>

public/img/select-xs.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="main"><path fill="currentColor" d="M14.66 3.31 6.3 13.71 1.65 9.2l.7-.72 3.86 3.73 7.67-9.53.78.62Z"></path></g></svg>

public/models.json

@@ -193,7 +193,7 @@
       "isNew": false,
       "fuelType": "gas-diesel",
       "groupName" : "Audi A3",
-      "bodyType": ["sedan"]
+      "bodyType": ["sedan","sports-car"]
     },
     {
       "id": "a5",
@@ -238,7 +238,7 @@
       "isNew": true,
       "fuelType": "gas-diesel",
       "groupName" : "Audi A5",
-      "bodyType": ["sedan"]
+      "bodyType": ["sedan","sports-car"]
     },
     {
       "id": "a6-sedan",
@@ -296,7 +296,7 @@
       "link": "/models/a7-sportback-tfsi-e",
       "stock": 6,
       "isNew": false,
-      "fuelType": "hybrid",
+      "fuelType": "gas-diesel",
       "groupName" : "Audi A7",
       "bodyType": ["sportback"]
     },
@@ -478,18 +478,15 @@
       "isNew": false,
       "fuelType": "gas-diesel",
       "groupName" : "Audi Q8",
-      "bodyType": ["suv"]
+      "bodyType": ["suv","sports-car"]
     }
   ],
   "filters": {
     "fuelType": [
-      { "id": "all", "name": "전체" },
-      { "id": "etron", "name": "전기차" },
-      { "id": "hybrid", "name": "하이브리드" },
+      { "id": "etron", "name": "전기차" },      
       { "id": "gas-diesel", "name": "가솔린/디젤" }
     ],
     "bodyType": [
-      { "id": "all", "name": "전체" },
       { "id": "sedan", "name": "세단" },
       { "id": "suv", "name": "SUV" },
       { "id": "sportback", "name": "스포츠백" },
@@ -498,7 +495,6 @@
       { "id": "sports-car", "name": "스포츠카" }
     ],
     "groupName": [
-      { "id": "all", "name": "전체" },
       { "id": "Audi e-tron GT", "name": "e-tron GT" },
       { "id": "Audi A6 e-tron", "name": "A6 e-tron" },
       { "id": "Audi Q4 e-tron", "name": "Q4 e-tron" },