From f04d79dadc5800b2489d3eb1c859d036df62e0e2 Mon Sep 17 00:00:00 2001
From: MEGUMMY1 <cys10902@nate.com>
Date: Tue, 19 Nov 2024 14:56:50 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=EC=9D=B8=EA=B8=B0=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=A0=95=EB=A0=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Lesson/Popular/Popular.module.scss        | 15 +++++++++++++
 src/components/Lesson/Popular/index.tsx       | 22 ++++++++++++-------
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/Lesson/Popular/Popular.module.scss b/src/components/Lesson/Popular/Popular.module.scss
index 2353d93..b2ce383 100644
--- a/src/components/Lesson/Popular/Popular.module.scss
+++ b/src/components/Lesson/Popular/Popular.module.scss
@@ -24,6 +24,12 @@
 }
 
 .checkboxContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.filterContainer {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -41,6 +47,15 @@
   }
 }
 
+.sort {
+  @include C12M;
+  color: $gray70;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  cursor: pointer;
+}
+
 .listContainer {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Lesson/Popular/index.tsx b/src/components/Lesson/Popular/index.tsx
index 8201d92..15db2ff 100644
--- a/src/components/Lesson/Popular/index.tsx
+++ b/src/components/Lesson/Popular/index.tsx
@@ -82,14 +82,20 @@ export default function Popular() {
           </div>
           <div className={styles.bottomContainer}>
             <div className={styles.checkboxContainer}>
-              <SportsFilter
-                options={sportsList}
-                value={selectedSport}
-                onChange={setSelectedSport}
-              />
-              <div className={styles.totalText}>
-                총<p className={styles.totalTextColor}>{facilities.length}</p>
-                시설
+              <div className={styles.filterContainer}>
+                <SportsFilter
+                  options={sportsList}
+                  value={selectedSport}
+                  onChange={setSelectedSport}
+                />
+                <div className={styles.totalText}>
+                  총<p className={styles.totalTextColor}>{facilities.length}</p>
+                  시설
+                </div>
+              </div>
+              <div className={styles.sort}>
+                인기순
+                <IconComponent name="down" size="s" alt="sort arrow" />
               </div>
             </div>
             {facilities.length > 0 ? (