fix: 검색 스크롤 레이아웃 조정 후 콘솔로그 삭제

- 스크롤이 잘 먹도록 레이아웃 조절을 했어요 - 불필요한 콘솔은 삭제하고 map을 리액트에서 적용할 경우 key를 사용해 하는 김에 Divider 컴포넌트도 분리해서 꽂았어요.
GDSC-Hongik · Aug 7, 2024 · 5db0f0a · 5db0f0a
1 parent 4dfb0aa
commit 5db0f0a
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 />
+		</>
 	);
 };