diff --git a/frontend/src/mocks/data/recipeDetail.json b/frontend/src/mocks/data/recipeDetail.json index 41c5c1fc..a8ba54c3 100644 --- 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 index 73f430c5..1f98f5d9 100644 --- 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; `;