[FE] refactor: 레이아웃 스타일 수정

frontend/src/components/Common/Carousel/Carousel.tsx

@@ -7,12 +7,12 @@ interface CarouselProps {
   carouselList: CarouselChildren[];
 }
 
-const CAROUSEL_WIDTH = window.innerWidth;
-
 const Carousel = ({ carouselList }: CarouselProps) => {
   const extendedCarouselList = [...carouselList, carouselList[0]];
   const [currentIndex, setCurrentIndex] = useState(0);
 
+  const CAROUSEL_WIDTH = window.innerWidth;
+
   const showNextSlide = () => {
     setCurrentIndex((prev) => (prev === carouselList.length ? 0 : prev + 1));
   };
@@ -25,9 +25,16 @@ const Carousel = ({ carouselList }: CarouselProps) => {
 
   return (
     <CarouselContainer>
-      <CarouselWrapper currentIndex={currentIndex}>
+      <CarouselWrapper
+        style={{
+          transform: 'translateX(-' + currentIndex * CAROUSEL_WIDTH + 'px)',
+          transition: currentIndex === length - 1 ? '' : 'all 0.5s ease-in-out',
+        }}
+      >
         {extendedCarouselList.map(({ id, children }) => (
-          <CarouselItem key={id}>{children}</CarouselItem>
+          <CarouselItem key={id} style={{ width: `${CAROUSEL_WIDTH}px` }}>
+            {children}
+          </CarouselItem>
         ))}
       </CarouselWrapper>
     </CarouselContainer>
@@ -44,13 +51,10 @@ const CarouselContainer = styled.div`
   overflow: hidden;
 `;
 
-const CarouselWrapper = styled.ul<{ currentIndex: number }>`
+const CarouselWrapper = styled.ul`
   display: flex;
-  transform: ${({ currentIndex }) => 'translateX(-' + currentIndex * CAROUSEL_WIDTH + 'px)'};
-  transition: ${({ currentIndex }) => (currentIndex === length - 1 ? '' : 'all 0.5s ease-in-out')};
 `;
 
 const CarouselItem = styled.li`
-  width: ${CAROUSEL_WIDTH}px;
   height: fit-content;
 `;

frontend/src/components/Common/CategoryItem/CategoryItem.tsx

@@ -34,7 +34,7 @@ const ImageWrapper = styled.div`
   border-radius: 10px;
   background: ${({ theme }) => theme.colors.white};
 
-  img {
+  & > img {
     width: 100%;
     height: auto;
     object-fit: cover;
@@ -44,5 +44,5 @@ const ImageWrapper = styled.div`
 const CategoryName = styled.p`
   margin-top: 10px;
   font-weight: 600;
-  font-size: 0.8rem;
+  font-size: ${({ theme }) => theme.fontSizes.xs};
 `;

frontend/src/components/Layout/DefaultLayout.tsx

@@ -25,7 +25,6 @@ const DefaultLayoutContainer = styled.div`
 const MainWrapper = styled.main`
   position: relative;
   height: calc(100% - 120px);
-  padding: 0 20px;
   overflow-x: hidden;
   overflow-y: auto;
 `;

frontend/src/components/Layout/SimpleHeaderLayout.tsx

@@ -25,7 +25,7 @@ const SimpleHeaderLayoutContainer = styled.div`
 const MainWrapper = styled.main`
   position: relative;
   height: calc(100% - 120px);
-  padding: 20px;
+  padding: 20px 20px 0;
   overflow-x: hidden;
   overflow-y: auto;
 `;

frontend/src/pages/HomePage.tsx

@@ -27,7 +27,7 @@ const HomePage = () => {
         </Link>
       </section>
       <Spacing size={40} />
-      <section>
+      <SectionWrapper>
         <Heading as="h2" size="xl">
           카테고리
         </Heading>
@@ -36,9 +36,9 @@ const HomePage = () => {
           <CategoryList />
         </Suspense>
         <Spacing size={15} />
-      </section>
+      </SectionWrapper>
       <Spacing size={40} />
-      <section>
+      <SectionWrapper>
         <Heading as="h2" size="xl">
           🍯 꿀조합 랭킹
         </Heading>
@@ -48,9 +48,9 @@ const HomePage = () => {
             <RecipeRankingList />
           </Suspense>
         </ErrorBoundary>
-      </section>
+      </SectionWrapper>
       <Spacing size={36} />
-      <section>
+      <SectionWrapper>
         <Heading as="h2" size="xl">
           👑 상품 랭킹
         </Heading>
@@ -60,9 +60,9 @@ const HomePage = () => {
             <ProductRankingList isHomePage />
           </Suspense>
         </ErrorBoundary>
-      </section>
+      </SectionWrapper>
       <Spacing size={36} />
-      <section>
+      <SectionWrapper>
         <Heading as="h2" size="xl">
           📝 리뷰 랭킹
         </Heading>
@@ -72,7 +72,7 @@ const HomePage = () => {
             <ReviewRankingList isHomePage />
           </Suspense>
         </ErrorBoundary>
-      </section>
+      </SectionWrapper>
       <Spacing size={36} />
       <ScrollButton />
     </>
@@ -84,3 +84,7 @@ export default HomePage;
 const Banner = styled.img`
   width: 100%;
 `;
+
+const SectionWrapper = styled.section`
+  padding: 0 20px;
+`;

frontend/src/pages/MemberPage.tsx

@@ -1,6 +1,7 @@
 import { Spacing } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { Suspense } from 'react';
+import styled from 'styled-components';
 
 import { ErrorBoundary, ErrorComponent, Loading, NavigableSectionTitle } from '@/components/Common';
 import { MembersInfo, MemberReviewList, MemberRecipeList } from '@/components/Members';
@@ -10,7 +11,7 @@ const MemberPage = () => {
   const { reset } = useQueryErrorResetBoundary();
 
   return (
-    <>
+    <MemberPageContainer>
       <Suspense fallback={<Loading />}>
         <MembersInfo />
       </Suspense>
@@ -30,8 +31,12 @@ const MemberPage = () => {
         </Suspense>
       </ErrorBoundary>
       <Spacing size={40} />
-    </>
+    </MemberPageContainer>
   );
 };
 
 export default MemberPage;
+
+const MemberPageContainer = styled.div`
+  padding: 20px 20px 0;
+`;

frontend/src/pages/MemberRecipePage.tsx

@@ -1,6 +1,7 @@
 import { Spacing } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { Suspense } from 'react';
+import styled from 'styled-components';
 
 import { ErrorBoundary, ErrorComponent, Loading, ScrollButton, SectionTitle } from '@/components/Common';
 import { MemberRecipeList } from '@/components/Members';
@@ -9,7 +10,7 @@ const MemberRecipePage = () => {
   const { reset } = useQueryErrorResetBoundary();
 
   return (
-    <>
+    <MemberRecipePageContainer>
       <SectionTitle name="내가 작성한 꿀조합" />
       <Spacing size={18} />
       <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
@@ -18,8 +19,13 @@ const MemberRecipePage = () => {
         </Suspense>
       </ErrorBoundary>
       <ScrollButton />
-    </>
+      <Spacing size={40} />
+    </MemberRecipePageContainer>
   );
 };
 
 export default MemberRecipePage;
+
+const MemberRecipePageContainer = styled.div`
+  padding: 20px 20px 0;
+`;

frontend/src/pages/MemberReviewPage.tsx

@@ -1,6 +1,7 @@
 import { Spacing } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { Suspense } from 'react';
+import styled from 'styled-components';
 
 import { ErrorBoundary, ErrorComponent, Loading, ScrollButton, SectionTitle } from '@/components/Common';
 import { MemberReviewList } from '@/components/Members';
@@ -9,7 +10,7 @@ const MemberReviewPage = () => {
   const { reset } = useQueryErrorResetBoundary();
 
   return (
-    <>
+    <MemberReviewPageContainer>
       <SectionTitle name="내가 작성한 리뷰" />
       <Spacing size={18} />
       <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
@@ -18,8 +19,13 @@ const MemberReviewPage = () => {
         </Suspense>
       </ErrorBoundary>
       <ScrollButton />
-    </>
+      <Spacing size={40} />
+    </MemberReviewPageContainer>
   );
 };
 
 export default MemberReviewPage;
+
+const MemberReviewPageContainer = styled.div`
+  padding: 20px 20px 0;
+`;

frontend/src/pages/RecipeDetailPage.tsx

@@ -15,7 +15,7 @@ const RecipeDetailPage = () => {
   const { id, images, title, content, author, products, totalPrice, favoriteCount, favorite, createdAt } = recipeDetail;
 
   return (
-    <>
+    <RecipeDetailPageContainer>
       <SectionTitle name={title} />
       <Spacing size={24} />
       {images.length > 0 ? (
@@ -65,12 +65,17 @@ const RecipeDetailPage = () => {
       <RecipeContent size="lg" lineHeight="lg">
         {content}
       </RecipeContent>
-    </>
+      <Spacing size={40} />
+    </RecipeDetailPageContainer>
   );
 };
 
 export default RecipeDetailPage;
 
+const RecipeDetailPageContainer = styled.div`
+  padding: 20px 20px 0;
+`;
+
 const RecipeImageContainer = styled.ul`
   display: flex;
   flex-direction: column;