[FE] feat: 꿀조합 상세 이미지 크기 조정 (#805)

woowacourse-teams · Oct 19, 2023 · 69c744c · 69c744c
1 parent 08aeb2f
commit 69c744c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/frontend/src/mocks/data/recipeDetail.json b/frontend/src/mocks/data/recipeDetail.json
@@ -1,6 +1,6 @@
 {
   "id": 3,
-  "images": [],
+  "images": ["https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/1f0fd418-131c-4cf8-b540-112d762b7c34"],
   "title": "초특급불닭콘치즈",
   "content": "맛있는 불닭콘치즈덮밥을 만들기 위해서는 1번. 어쩌고저쩌고 2번. 어쩌고저쩌고 3번 맛있는 불닭콘치즈덮밥을 만들기 위해서는 1번. 어쩌고저쩌고 2번. 어쩌고저쩌고\n\n 3번맛있는 불닭콘치즈덮밥을 만들기 위해서는 1번. 어쩌고저쩌고 2번. 어쩌고저쩌고 3번맛있는 불닭콘치즈덮밥을 만들기 위해서는 1번. 어쩌고저쩌고 2번. 어쩌고저쩌고 3번맛있는 불닭콘치즈덮밥을 만들기 위해서는 1번. 어쩌고저쩌고 2번. 어쩌고저쩌고 3번맛있는 불닭콘치즈덮밥을 만들기 위해서는 1번. 어쩌고저쩌고 2번. 어쩌고저쩌고 3번맛있는 불닭콘치즈덮밥을 만들기 위해서는 1번. 어쩌고저쩌고 2번. 어쩌고저쩌고 3번",
   "author": {

diff --git a/frontend/src/pages/RecipeDetailPage.tsx b/frontend/src/pages/RecipeDetailPage.tsx
@@ -93,9 +93,16 @@ const RecipeImageContainer = styled.ul`
   flex-direction: column;
   gap: 20px;
   align-items: center;
+
+  & > li {
+    width: 312px;
+    margin: 0 auto;
+  }
 `;
 
 const RecipeImage = styled.img`
+  width: 100%;
+  height: auto;
   border-radius: 10px;
   object-fit: cover;
 `;