From 5db0f0a49f222188489fd08cf1c290692512fe16 Mon Sep 17 00:00:00 2001
From: soulchicken <soulfever01@naver.com>
Date: Wed, 7 Aug 2024 11:33:03 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EA=B2=80=EC=83=89=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95=20=ED=9B=84=20=EC=BD=98=EC=86=94=EB=A1=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 스크롤이 잘 먹도록 레이아웃 조절을 했어요
- 불필요한 콘솔은 삭제하고 map을 리액트에서 적용할 경우 key를 사용해 하는 김에 Divider 컴포넌트도 분리해서 꽂았어요.
---
 src/components/map/SearchBar.tsx           |  1 -
 src/components/map/SearchContents.tsx      | 69 ++++++++++++++--------
 src/components/navBar/NavBar.tsx           |  2 +-
 src/components/search/Divider.tsx          |  8 +++
 src/components/search/HistoryLine.tsx      | 22 ++++---
 src/components/search/SearchResultLine.tsx | 25 ++++----
 6 files changed, 81 insertions(+), 46 deletions(-)
 create mode 100644 src/components/search/Divider.tsx

diff --git a/src/components/map/SearchBar.tsx b/src/components/map/SearchBar.tsx
index 45a80d4..8d027d3 100644
--- a/src/components/map/SearchBar.tsx
+++ b/src/components/map/SearchBar.tsx
@@ -115,7 +115,6 @@ const SearchBar: React.FC<SearchBarProps> = ({ bottomSheetClose }) => {
 		e && e.preventDefault();
 		// searchText가 비어 있는 경우 refetch를 하지 않음
 		if (searchText.trim() !== '') {
-			console.log('Submit button clicked');
 			refetch();
 		}
 	};
diff --git a/src/components/map/SearchContents.tsx b/src/components/map/SearchContents.tsx
index 2e47830..52e1784 100644
--- a/src/components/map/SearchContents.tsx
+++ b/src/components/map/SearchContents.tsx
@@ -19,15 +19,14 @@ const Overlay = styled.div<{ $isVisible: boolean }>`
 	left: 50%;
 	transform: translate(-50%, 0);
 	width: 400px;
-	height: 100%;
+	height: calc(100% - 56px);
 	background-color: ${({ theme }) => theme.colors.whitegray};
 	display: ${({ $isVisible }) => ($isVisible ? 'block' : 'none')};
 `;
 
 const HistoryWrapper = styled.ul`
 	margin-top: 100px;
-	padding: 40px;
-	overflow-y: auto;
+	padding: 40px 0;
 	height: 100%;
 
 	display: flex;
@@ -40,6 +39,24 @@ const HistoryWrapper = styled.ul`
 	background-color: ${({ theme }) => theme.colors.white};
 `;
 
+const OverflowBox = styled.div`
+	width: 100%;
+	padding-bottom: 56px;
+	overflow-y: auto;
+	::-webkit-scrollbar {
+		display: none;
+	}
+	-ms-overflow-style: none; /* IE and Edge */
+	scrollbar-width: none; /* Firefox */
+`;
+
+const EmptyHistory = styled.div`
+	padding: 20px;
+	text-align: center;
+	font-size: 14px;
+	font-weight: ${({ theme }) => theme.fontWeights.Regular};
+`;
+
 const SearchContents: React.FC<SearchContentsProps> = ({
 	$isVisible,
 	textSetter,
@@ -60,28 +77,30 @@ const SearchContents: React.FC<SearchContentsProps> = ({
 	return (
 		<Overlay $isVisible={$isVisible}>
 			<HistoryWrapper>
-				{searchRestaurants.length > 0 ? (
-					searchRestaurants.map((result) => (
-						<SearchResultLine key={result.id} {...result} />
-					))
-				) : histories.length > 0 ? (
-					// restaurant가 비어있고 histories가 있으면 이 컴포넌트를 보여줍니다.
-					<>
-						{histories.map((history) => (
-							<HistoryLine
-								key={history.id}
-								setFn={() => {
-									textSetter(history.query);
-								}}
-								removeHistory={removeHistory}
-								{...history}
-							/>
-						))}
-					</>
-				) : (
-					// 둘 다 없으면 이 메시지를 보여줍니다.
-					<div>검색 기록이 없습니다.</div>
-				)}
+				<OverflowBox>
+					{searchRestaurants.length > 0 ? (
+						searchRestaurants.map((result) => (
+							<SearchResultLine key={result.id} {...result} />
+						))
+					) : histories.length > 0 ? (
+						// restaurant가 비어있고 histories가 있으면 이 컴포넌트를 보여줍니다.
+						<>
+							{histories.map((history) => (
+								<HistoryLine
+									key={history.id}
+									setFn={() => {
+										textSetter(history.query);
+									}}
+									removeHistory={removeHistory}
+									{...history}
+								/>
+							))}
+						</>
+					) : (
+						// 둘 다 없으면 이 메시지를 보여줍니다.
+						<EmptyHistory>검색 기록이 없습니다.</EmptyHistory>
+					)}
+				</OverflowBox>
 			</HistoryWrapper>
 		</Overlay>
 	);
diff --git a/src/components/navBar/NavBar.tsx b/src/components/navBar/NavBar.tsx
index f2c92b4..b7c9594 100644
--- a/src/components/navBar/NavBar.tsx
+++ b/src/components/navBar/NavBar.tsx
@@ -43,7 +43,7 @@ const NavBar = () => {
 		<Nav>
 			<NavList>
 				{navItems.map(({ path, label, Icon }) => (
-					<NavItemWrapper key={path} isActive={pathname === path} link={path}>
+					<NavItemWrapper key={path} $isActive={pathname === path} link={path}>
 						<Icon />
 						{label}
 					</NavItemWrapper>
diff --git a/src/components/search/Divider.tsx b/src/components/search/Divider.tsx
new file mode 100644
index 0000000..d9d71fb
--- /dev/null
+++ b/src/components/search/Divider.tsx
@@ -0,0 +1,8 @@
+import { styled } from 'styled-components';
+
+export const Divider = styled.div`
+	width: 100%;
+	margin: 16px 0;
+	height: 1px;
+	background-color: ${({ theme }) => theme.colors.whitegray};
+`;
diff --git a/src/components/search/HistoryLine.tsx b/src/components/search/HistoryLine.tsx
index 6472cdf..3da3079 100644
--- a/src/components/search/HistoryLine.tsx
+++ b/src/components/search/HistoryLine.tsx
@@ -1,5 +1,6 @@
 import { styled } from 'styled-components';
 import XIcon from '~/assets/icons/XIcon';
+import { Divider } from '~/components/search/Divider';
 import useDelSearch from '~/hooks/api/search/useDelSearch';
 
 type HistoryLineProps = {
@@ -11,6 +12,7 @@ type HistoryLineProps = {
 
 const LineWarpper = styled.div`
 	width: 100%;
+	padding: 0 20px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -49,7 +51,6 @@ const HistoryLine: React.FC<HistoryLineProps> = ({
 	const { mutate: deleteSearch } = useDelSearch();
 
 	const handleHistoryButton = () => {
-		console.log(`history #${id} button clicked`);
 		setFn();
 	};
 
@@ -59,14 +60,17 @@ const HistoryLine: React.FC<HistoryLineProps> = ({
 	};
 
 	return (
-		<LineWarpper>
-			<HistoryButton onClick={handleHistoryButton}>
-				<Query>{query}</Query>
-			</HistoryButton>
-			<DelButton onClick={handleDelButton}>
-				<XIcon />
-			</DelButton>
-		</LineWarpper>
+		<>
+			<LineWarpper>
+				<HistoryButton onClick={handleHistoryButton}>
+					<Query>{query}</Query>
+				</HistoryButton>
+				<DelButton onClick={handleDelButton}>
+					<XIcon />
+				</DelButton>
+			</LineWarpper>
+			<Divider />
+		</>
 	);
 };
 
diff --git a/src/components/search/SearchResultLine.tsx b/src/components/search/SearchResultLine.tsx
index 9b67953..76fc835 100644
--- a/src/components/search/SearchResultLine.tsx
+++ b/src/components/search/SearchResultLine.tsx
@@ -1,4 +1,5 @@
 import { styled } from 'styled-components';
+import { Divider } from '~/components/search/Divider';
 import SmallStarRating from '~/components/search/SmallStarRating';
 import { Restaurant } from '~/types/restaurants';
 
@@ -31,6 +32,7 @@ const FoodType = styled.p`
 
 const LineWrapper = styled.div`
 	width: 100%;
+	padding: 0 20px;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
@@ -49,16 +51,19 @@ const Info = styled.div`
 
 const SearchResultLine: React.FC<Restaurant> = (restaurant) => {
 	return (
-		<LineWrapper>
-			<Info>
-				<Title>{restaurant.name}</Title>
-				<Address>{restaurant.address}</Address>
-			</Info>
-			<Info>
-				<SmallStarRating rating={restaurant.rating_average} />
-				<FoodType>{restaurant.food_type || '치킨 및 닭강정'}</FoodType>
-			</Info>
-		</LineWrapper>
+		<>
+			<LineWrapper>
+				<Info>
+					<Title>{restaurant.name}</Title>
+					<Address>{restaurant.address}</Address>
+				</Info>
+				<Info>
+					<SmallStarRating rating={restaurant.rating_average} />
+					<FoodType>{restaurant.food_type || '치킨 및 닭강정'}</FoodType>
+				</Info>
+			</LineWrapper>
+			<Divider />
+		</>
 	);
 };