Design: 인기 페이지 변경 사항 반영

src/components/Lesson/Lesson.module.scss

@@ -23,6 +23,7 @@
 
   .titleContainer {
     display: flex;
+    gap: 4px;
     flex-direction: column;
   }
 
@@ -60,8 +61,8 @@
 .checkboxContainer {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin: 12px 0 16px;
+  gap: 8px;
+  margin: 20px 0 16px;
 }
 
 .totalText {
@@ -76,13 +77,6 @@
   }
 }
 
-.locationSelectors {
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  gap: 8px;
-}
-
 .resultContainer {
   display: flex;
   flex-direction: column;

src/components/Lesson/Popular/Popular.module.scss

@@ -3,10 +3,30 @@
 .container {
   width: 100%;
   min-height: calc(100vh - 92px);
-  padding: 4px 20px 20px;
   background-color: $gray10;
   display: flex;
   flex-direction: column;
+  gap: 10px;
+}
+
+.topContainer {
+  width: 100%;
+  padding: 20px 20px 32px;
+  background-color: $white;
+}
+
+.bottomContainer {
+  padding: 16px 20px;
+  background-color: $white;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.checkboxContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .totalText {
@@ -20,3 +40,35 @@
     color: $blue60;
   }
 }
+
+.listContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.resultContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  flex-grow: 1;
+
+  .textContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .mainText {
+    color: $gray90;
+    @include T16B;
+  }
+
+  .subText {
+    color: $gray60;
+    @include B14R;
+  }
+}

src/components/Lesson/Popular/index.tsx

@@ -6,16 +6,23 @@ import {
 import styles from './Popular.module.scss';
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
-import { selectedLocalCodeState } from '@/states/filterState';
+import {
+  selectedLocalCodeState,
+  selectedSportState,
+} from '@/states/filterState';
 import Link from 'next/link';
 import Schedule from '@/components/Schedule';
 import IconComponent from '@/components/Asset/Icon';
 import LoadingSpinner from '@/components/LoadingSpinner';
+import SportsFilter from '../SportsFilter';
+import { sportsList } from '@/constants/sportsList';
+import { localCodes } from '@/constants/localCode';
 
 export default function Popular() {
   const [facilities, setFacilities] = useState<NomalPopular[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [selectedLocalCode] = useRecoilState(selectedLocalCodeState);
+  const [selectedSport, setSelectedSport] = useRecoilState(selectedSportState);
 
   useEffect(() => {
     const fetchFacilities = async () => {
@@ -28,7 +35,9 @@ export default function Popular() {
         };
 
         const fetchedFacilities = await getNomalPopular(params);
-        setFacilities(fetchedFacilities);
+        setFacilities(
+          filterFacilitiesBySport(fetchedFacilities, selectedSport)
+        );
       } catch {
         console.error('데이터를 불러오는 데 실패했습니다.');
       } finally {
@@ -37,42 +46,78 @@ export default function Popular() {
     };
 
     fetchFacilities();
-  }, [selectedLocalCode]);
+  }, [selectedLocalCode, selectedSport]);
+
+  // 스포츠 필터링
+  const filterFacilitiesBySport = (
+    facilities: NomalPopular[],
+    sport: string
+  ): NomalPopular[] => {
+    if (!sport) return facilities;
+    return facilities.filter(facility =>
+      facility.items.some(item => item.trim() === sport.trim())
+    );
+  };
+
+  const parseLocalCode = (code: string): string => {
+    const localCode = code;
+
+    const localName = localCodes[localCode];
+
+    if (!localName) {
+      return '알 수 없는 지역';
+    }
+
+    return `${localName}`;
+  };
 
   return (
     <div className={styles.container}>
       {isLoading ? (
         <LoadingSpinner />
       ) : (
         <>
-          <div className={styles.totalText}>
-            총<p className={styles.totalTextColor}>{facilities.length}</p>시설
+          <div className={styles.topContainer}>
+            <h2>{parseLocalCode(selectedLocalCode)}</h2>
           </div>
-          {facilities.length > 0 ? (
-            <div className={styles.listContainer}>
-              {facilities.map(facility => (
-                <Link
-                  key={`${facility.businessId}-${facility.serialNumber}`}
-                  href={`/details/${facility.businessId}/${facility.serialNumber}`}
-                >
-                  <Schedule facility={facility} isPopular />
-                </Link>
-              ))}
-            </div>
-          ) : (
-            <div className={styles.resultContainer}>
-              <IconComponent
-                name="noResult"
-                width={48}
-                height={48}
-                alt="결과 없음"
+          <div className={styles.bottomContainer}>
+            <div className={styles.checkboxContainer}>
+              <SportsFilter
+                options={sportsList}
+                value={selectedSport}
+                onChange={setSelectedSport}
               />
-              <div className={styles.textContainer}>
-                <p className={styles.mainText}>해당하는 시설이 없어요.</p>
-                <p className={styles.subText}>종목을 변경해주세요.</p>
+              <div className={styles.totalText}>
+                총<p className={styles.totalTextColor}>{facilities.length}</p>
+                시설
               </div>
             </div>
-          )}
+            {facilities.length > 0 ? (
+              <div className={styles.listContainer}>
+                {facilities.map(facility => (
+                  <Link
+                    key={`${facility.businessId}-${facility.serialNumber}`}
+                    href={`/details/${facility.businessId}/${facility.serialNumber}`}
+                  >
+                    <Schedule facility={facility} isPopular />
+                  </Link>
+                ))}
+              </div>
+            ) : (
+              <div className={styles.resultContainer}>
+                <IconComponent
+                  name="noResult"
+                  width={48}
+                  height={48}
+                  alt="결과 없음"
+                />
+                <div className={styles.textContainer}>
+                  <p className={styles.mainText}>해당하는 시설이 없어요.</p>
+                  <p className={styles.subText}>종목을 변경해주세요.</p>
+                </div>
+              </div>
+            )}
+          </div>
         </>
       )}
     </div>

src/components/Lesson/index.tsx

@@ -90,14 +90,12 @@ export default function Lesson() {
             </div>
           </Link>
           <SearchBar />
-          <div className={styles.locationSelectors}>
+          <div className={styles.checkboxContainer}>
             <SportsFilter
               options={sportsList}
               value={selectedSport}
               onChange={setSelectedSport}
             />
-          </div>
-          <div className={styles.checkboxContainer}>
             <div className={styles.totalText}>
               총<p className={styles.totalTextColor}>{facilities.length}</p>시설
             </div>

src/components/Search/SearchBar/SearchBar.module.scss

@@ -3,7 +3,7 @@
 .container {
   display: flex;
   width: 100%;
-  padding: 16px;
+  padding: 14px 16px;
   align-items: center;
   gap: 11px;
   border-radius: 12px;
@@ -18,12 +18,14 @@
 
   .inputContainer {
     width: 100%;
+    height: 24px;
     @include B14M;
     border: none;
     outline: none;
 
     &:focus-within {
       background-color: $blue5;
+      color: $gray90;
     }
   }
 }