feat: 레스토랑 서머리 컴포넌트 내부 부품

src/components/bottomSheet/BottomSheet.tsx

@@ -37,7 +37,7 @@ const Handle = styled.div`
 const BottomSheetContent = styled.div`
 	padding: 16px;
 	// TODO: 임시 크기
-	/* height: 1000px; */
+	height: 1000px;
 `;
 
 const BottomSheet: React.FC<BottomSheetProps> = ({ onClose }) => {

src/components/bottomSheet/restaurantSummary/MoreButton.tsx

@@ -5,6 +5,7 @@ const Button = styled.button`
 	flex-shrink: 0;
 	width: 50px;
 	height: 50px;
+	margin-bottom: 8px;
 	background-color: ${({ theme }) => theme.colors.orange};
 	color: ${({ theme }) => theme.colors.white};
 	border: none;
@@ -18,6 +19,7 @@ const Button = styled.button`
 	align-items: center;
 	gap: 8px;
 	cursor: pointer;
+	filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.2));
 
 	&:hover {
 		background-color: ${({ theme }) => theme.colors.grayorange};

src/components/bottomSheet/restaurantSummary/RestaurantImgBox.tsx

@@ -0,0 +1,18 @@
+// 가로 세로 크기는 68px * 68px 입니다.
+
+import { styled } from 'styled-components';
+
+const ImgWrapper = styled.div`
+	width: 68px;
+	height: 68px;
+`;
+
+const RestaurantImgBox = () => {
+	return (
+		<ImgWrapper>
+			<img src="https://via.placeholder.com/68" alt="restaurantImg" />
+		</ImgWrapper>
+	);
+};
+
+export default RestaurantImgBox;

src/components/bottomSheet/restaurantSummary/RestaurantSummary.tsx

@@ -1,10 +1,49 @@
+import { styled } from 'styled-components';
+import MoreButton from '~/components/bottomSheet/restaurantSummary/MoreButton';
+import RestaurantImgBox from '~/components/bottomSheet/restaurantSummary/RestaurantImgBox';
 import StarRating from '~/components/bottomSheet/restaurantSummary/StarRating';
 import { Restaurant } from '~/types/restaurants';
 
 interface RestaurantSummaryProps {
 	restaurant: Restaurant; // Restaurant 타입 사용
 }
 
+const SummaryWrapper = styled.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 8px;
+`;
+
+const SummaryInfo = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	flex: 1;
+	max-width: calc(100% - 16px - 16px - 50px - 68px);
+`;
+
+const Title = styled.h3`
+	display: inline-block;
+	font-size: 16px;
+	font-weight: ${({ theme }) => theme.fonts.Regular};
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 100%;
+`;
+
+const Category = styled.p`
+	display: inline-block;
+	margin-top: 6px;
+	font-size: 12px;
+	font-weight: ${({ theme }) => theme.fonts.Light};
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 100%;
+`;
+
 const RestaurantSummary: React.FC<RestaurantSummaryProps> = ({
 	restaurant,
 }) => {
@@ -26,10 +65,16 @@ const RestaurantSummary: React.FC<RestaurantSummaryProps> = ({
 	};
 
 	return (
-		<div>
-			<h3>{restaurant.name}</h3>
-			<StarRating rating={calculateAverageRating()} />
-		</div>
+		<SummaryWrapper>
+			<RestaurantImgBox />
+			<SummaryInfo>
+				<Title>{restaurant.name}</Title>
+				{/* TODO: address가 아니라 카테고리로 변경 */}
+				<Category>{restaurant.address}</Category>
+				<StarRating rating={calculateAverageRating()} />
+			</SummaryInfo>
+			<MoreButton />
+		</SummaryWrapper>
 	);
 };
 

src/styles/colors.ts

@@ -1,5 +1,5 @@
 const colors = {
-	grayorange: '#ffc397',
+	grayorange: '#FFC397',
 	orange: '#FC6B02',
 	green: '#3FBA3B',