Design: 인기페이지 정렬 추가

HELLO-FIT · Nov 19, 2024 · f04d79d · f04d79d
1 parent 1c78d4f
commit f04d79d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git 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
@@ -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 ? (