Merge pull request #108 from delicious-algorithme/dev

�fix: 검색바 식당 리스트 상단 고정
delicious-algorithme · Nov 25, 2024 · 33cee28 · 33cee28
2 parents c2b9f6f + c444ed8
commit 33cee28
Showing 1 changed file with 23 additions and 9 deletions.
diff --git a/src/components/common/store/StoreList.jsx b/src/components/common/store/StoreList.jsx
@@ -162,18 +162,20 @@ const StoreList = () => {
         );
     return (
         <StoreListLayout>
-            <ButtonContainer>
-                <Button visible="true" color="green" onClickHandler={() => navigate('/')} text="뒤로 가기" />
-                <Button visible="true" color="green" onClickHandler={allFetchButtonHandler} text="전체 식당 보기" />
-            </ButtonContainer>
-            <FilteringContentsContainer>
+            <StoreListHeader>
+                <ButtonContainer>
+                    <Button visible="true" color="green" onClickHandler={() => navigate('/')} text="뒤로 가기" />
+                    <Button visible="true" color="green" onClickHandler={allFetchButtonHandler} text="전체 식당 보기" />
+                </ButtonContainer>
                 <SearchBarContainer>
                     <SearchBar
                         onChangeHandler={(e) => setInput(e.target.value)}
                         onKeyDownHandler={handleKeyDown}
                         searchInput={input}
                     />
                 </SearchBarContainer>
+            </StoreListHeader>
+            <FilteringContentsContainer>
                 <Filtering category={category} />
                 <SortBox>
                     <p>정렬</p>
@@ -268,17 +270,18 @@ const Ref = styled.div`
 
 const ButtonContainer = styled.div`
     gap: 10px;
-    position: sticky;
     width: 100%;
-    height: 80px;
+    height: 60px;
     padding: 10px;
-    top: 0;
     display: flex;
     flex-direction: row;
     align-items: center;
     z-index: 20;
     background-color: ${White};
-    border-bottom: 1px solid ${LightGrey};
+
+    @media screen and (max-width: 500px) {
+        height: 50px;
+    }
 `;
 
 const SearchBarContainer = styled.div`
@@ -340,3 +343,14 @@ const LoadingContainer = styled.div`
         margin-right: 90px;
     }
 `;
+
+const StoreListHeader = styled.div`
+    position: sticky;
+    width: 100%;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    z-index: 20;
+    background-color: ${White};
+    border-bottom: 1px solid ${LightGrey};
+`;