Cleanup Dropdown UI

src/app/components/dropdown/dropdown.scss

@@ -8,8 +8,9 @@ $dropdown_hover: #F5F5F5;
 $dropdown_selected: #FFF4F0;
 $dropdown_accent: oklch(0.7086 0.1896 39.86);
 
-$dropdown_dimension: (324px, 40px);
-$dropdown_padding: (10px, 5px);
+// 사용자님의 요구사항인 고정 너비 324px 복구
+$dropdown_width: 324px;
+$dropdown_height: 40px;
 $dropdown_border_radius: 8px;
 
 $dropdown_animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
@@ -19,13 +20,14 @@ $dropdown_animation_duration: 0.2s;
   display: inline-block;
   position: relative;
 
-  width: list.nth($dropdown_dimension, 1);
+  width: $dropdown_width;
   padding: 0; margin: 0;
 
   background-color: $dropdown_bg;
   border-radius: $dropdown_border_radius;
   box-shadow: 0 0 0 1px $dropdown_border_color inset;
   outline: none;
+  cursor: pointer;
 
   &:focus-visible {
     box-shadow: 0 0 0 1px $dropdown_border_color inset, 0 0 0 2px white, 0 0 0 4px $dropdown_accent;
@@ -35,31 +37,30 @@ $dropdown_animation_duration: 0.2s;
 .dropdown-box {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
-  padding: list.nth($dropdown_padding, 2) list.nth($dropdown_padding, 1);
-  height: list.nth($dropdown_dimension, 2) - list.nth($dropdown_padding, 2) * 2;
-
-  border-radius: $dropdown_border_radius;
-  transition: library.append-transition((border-color, box-shadow), $dropdown_animation_duration $dropdown_animation_timing);
+  padding: 0 12px;
+  height: $dropdown_height;
+  box-sizing: border-box;
   gap: 8px;
 
   .prefix-icon {
-    width: 24px;
-    height: 24px;
+    width: 24px; height: 24px;
+    flex-shrink: 0;
     user-select: none;
   }
 
   .placeholder {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    margin-right: auto;
-
+    flex-grow: 1;
     font-size: 18px;
+    line-height: 1.2; // descender(g, y 등)가 잘리지 않도록 행간 확보
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    user-select: none;
   }
 
   .chevron {
-    width: 24px;
-    height: 24px;
+    width: 24px; height: 24px;
+    flex-shrink: 0;
     transition: transform $dropdown_animation_duration $dropdown_animation_timing;
     user-select: none;
 
@@ -74,38 +75,31 @@ $dropdown_animation_duration: 0.2s;
   top: calc(100% + 4px);
   left: 0;
   width: 100%;
-  padding: 0;
+  padding: 0; // 아이템이 꽉 차도록 패딩 제거
   margin: 0;
   list-style: none;
   background-color: $dropdown_bg;
   border-radius: $dropdown_border_radius;
   z-index: 1000;
-  max-height: 200px;
+  max-height: 240px;
   overflow-y: auto;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   animation: slideIn $dropdown_animation_duration $dropdown_animation_timing;
 
+  // 자식 요소의 배경색이 테두리를 침범하지 못하도록 하는 사용자님의 핵심 설계 복구
   &::after {
-    display: inline-block;
-
     content: "";
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    border-radius: $dropdown_border_radius;
     box-shadow: 0 0 0 1px $dropdown_border_color inset;
     pointer-events: none;
-    z-index: 1001;
-
-    position: absolute;
-    top: 0; left: 0; bottom: 0; right: 0;
-    border-radius: $dropdown_border_radius;
+    z-index: 1001; // 테두리를 최상단으로!
   }
 
   @keyframes slideIn {
-    from {
-      opacity: 0;
-      transform: translateY(-8px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+    from { opacity: 0; transform: translateY(-8px); }
+    to { opacity: 1; transform: translateY(0); }
   }
 }
 
@@ -114,6 +108,8 @@ $dropdown_animation_duration: 0.2s;
   align-items: center;
   height: 40px;
   padding: 0 16px;
+  position: relative;
+  line-height: 1.2; // descender 보호를 위해 1에서 1.2로 수정
   transition: background-color $dropdown_animation_duration $dropdown_animation_timing;
 
   &:hover, &.focused {