[250925] style: components - CustomDropDown.module.less - 기능 개선

🕐 커밋 시간: 2025. 09. 25. 13:08:50

📊 변경 통계:
  • 총 파일: 1개
  • 추가: +84줄
  • 삭제: -56줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/CustomDropDown.module.less

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선
  • 코드 정리 및 최적화

com.twin.app.shoptime/src/views/DetailPanel/components/CustomDropDown.module.less

@@ -1,70 +1,98 @@
-/* CustomDropDown Module - 타겟 UI 스타일 유지 */
+// CustomDropDown BEM Style
 .custom_dropdown {
   position: relative;
-  display: inline-block;
-}
+  width: 675px;
+  height: 60px;
 
-.custom_dropdown__button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border: 1px solid #ddd;
-  background-color: #fff;
-  cursor: pointer;
-  border-radius: 4px;
-  min-width: 200px;
-}
+  // custom-dropdown__button (Element)
+  &__button {
+    width: 675px;
+    height: 60px;
+    background-color: #7A808D;
+    border-radius: 6px;
+    padding: 20px 19px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
 
-.custom_dropdown__button_expanded {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-color: transparent;
-}
-
-.custom_dropdown__text {
-  flex: 1;
-  text-align: left;
-  color: #333;
-  font-size: 14px;
-}
-
-.custom_dropdown__icon {
-  margin-left: 8px;
-
-  img {
-    width: 12px;
-    height: 12px;
+    &:focus {
+      background-color: #C72054;
+    }
   }
-}
 
-.custom_dropdown__list {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-top: none;
-  border-radius: 0 0 4px 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  max-height: 200px;
-  overflow-y: auto;
-}
+  // custom-dropdown__button--expanded (Modifier)
+  &__button_expanded {
+    background-color: #4A4C50 !important;
 
-.custom_dropdown__option {
-  padding: 12px 16px;
-  cursor: pointer;
-  font-size: 14px;
-  color: #333;
-
-  &:hover {
-    background-color: #f5f5f5;
+    &:focus {
+      background-color: #4A4C50 !important;
+    }
   }
-}
 
-.custom_dropdown__option_selected {
-  background-color: #e6f3ff;
-  color: #0066cc;
+  // custom-dropdown__text (Element)
+  &__text {
+    color: white;
+    font-size: 24px;
+    font-family: 'LG Smart UI';
+    font-weight: 700;
+    line-height: 24px;
+    text-align: left;
+    flex: 1;
+    margin-right: 20px;
+  }
+
+  // custom-dropdown__icon (Element)
+  &__icon {
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      width: 24px;
+      height: 24px;
+      object-fit: contain;
+    }
+  }
+
+  // custom-dropdown__list (Element)
+  &__list {
+    position: absolute;
+    bottom: 64px;
+    left: 0;
+    width: 675px;
+    background-color: #7A808D;
+    border-radius: 6px;
+    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    overflow: visible;
+  }
+
+  // custom-dropdown__option (Element)
+  &__option {
+    width: 100%;
+    height: 60px;
+    padding: 20px 19px;
+    color: white;
+    font-size: 24px;
+    font-family: 'LG Smart UI';
+    font-weight: 700;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      background-color: #C72054;
+    }
+
+    // custom-dropdown__option--selected (Modifier)
+    &_selected {
+      background-color: #C72054;
+    }
+  }
 }