Design: 지도,강좌 페이지에 따른 지역 필터 드롭다운 스타일 구분

src/components/Layout/TabNav/index.tsx

@@ -106,6 +106,7 @@ export default function TabNav({ showmenu = true }: TabNavProps) {
           onNextClick={() => setIsNextStep(true)}
           onCompleteClick={() => setIsNextStep(false)}
           isNextStep={isNextStep}
+          placeholderType="lesson"
         />
         {showmenu && (
           <div className={styles.btnContainer} onClick={handleMenuClick}>

src/components/Lesson/LocalFilter/LocalFilter.module.scss

@@ -40,6 +40,16 @@
   color: $blue60;
 }
 
+.lesson {
+  color: $gray90;
+  @include T18B;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
 .bottomSheet {
   position: fixed;
   bottom: 0;

src/components/Lesson/LocalFilter/LocalFilter.types.ts

@@ -7,4 +7,5 @@ export interface LocalFilterProps {
   onNextClick?: () => void;
   onCompleteClick?: () => void;
   isNextStep?: boolean;
+  placeholderType?: string; // 지도 탭과 강좌 탭 페이지에 따른 드롭다운 요소 디자인 차이 구분용
 }

src/components/Lesson/LocalFilter/index.tsx

@@ -13,6 +13,7 @@ export default function LocalFilter({
   onNextClick,
   onCompleteClick,
   isNextStep,
+  placeholderType,
 }: LocalFilterProps) {
   const [isOpen, setIsOpen] = useState(false);
   const filterRef = useRef<HTMLDivElement>(null);
@@ -33,15 +34,23 @@ export default function LocalFilter({
   return (
     <div className={styles.container}>
       <div
-        className={`${styles.selectedValue} ${value ? styles.selectedDropdown : ''}`}
+        className={`${placeholderType !== 'lesson' && value ? styles.selectedDropdown : ''} ${placeholderType === 'lesson' ? styles.lesson : styles.selectedValue}`}
         onClick={() => setIsOpen(!isOpen)}
       >
         {placeholder}
-        <IconComponent
-          name={isOpen ? 'up' : 'down'}
-          size="m"
-          alt="dropdown arrow"
-        />
+        {placeholderType === 'lesson' ? (
+          <IconComponent
+            name={isOpen ? 'upBlack' : 'downBlack'}
+            size="m"
+            alt="dropdown arrow"
+          />
+        ) : (
+          <IconComponent
+            name={isOpen ? 'up' : 'down'}
+            size="m"
+            alt="dropdown arrow"
+          />
+        )}
       </div>
       {isOpen && (
         <>

src/constants/asset.tsx

@@ -41,6 +41,12 @@ export const ICONS = {
     l: '/icon/l/icon-down.svg',
     m: '/icon/m/icon-down.svg',
   },
+  upBlack: {
+    m: '/icon/m/up-black.svg',
+  },
+  downBlack: {
+    m: '/icon/m/down-black.svg',
+  },
   image: {
     l: '/icon/l/icon-image.svg',
     m: '/icon/m/icon-image.svg',