Merge branch '#22-burgerK' of https://github.com/OZ-Coding-School/oz_…

…01_collabo-006 into #22-burgerK

frontend/src/components/Banner/Banner.css

@@ -1,16 +1,31 @@
-/* .bn_contain {
+.bn_contain {
     padding: 0 100px;
     max-width: 1300px;
     display: flex;
     justify-content: space-between;
     margin: 0 auto;
     gap: 20px;
-} */
-
-/* .bn_logo {
-    flex-shrink: 1;
-} */
-/* .bn_swiper {
-    flex-shrink: 2;
-    background-color: aqua;
-} */
+    height: 400px;
+}
+.bn_logo {
+    padding: 70px;
+}
+.bn_logo_text {
+    width: 320px;
+}
+.bn_logo p {
+    margin-top: 20px;
+    line-height: 70px;
+    font-size: 40px;
+    font-family: 'SUIT Variable', sans-serif;
+    color: rgb(87, 87, 87);
+}
+.bn_swiper {
+    padding: 20px;
+    background-color: rgb(225, 225, 225);
+    border-radius: 2rem;
+}
+.bn_swiper_content {
+    height: 100%;
+    padding: 20px;
+}

frontend/src/components/Banner/Banner.jsx

@@ -1,10 +1,9 @@
 import React from 'react'
 
-import { Box } from '@mui/material'
-import Grid from '@mui/material/Unstable_Grid2'
-import 'swiper/css'
-import { Swiper, SwiperSlide } from 'swiper/react'
 import './Banner.css'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/css'
+
 import bnlogo from '/images/banner_logo.png'
 
 function Banner() {
@@ -24,49 +23,29 @@ function Banner() {
     ]
 
     return (
-        <>
-            <Box sx={{ flexGrow: 1 }}>
-                <Grid
-                    container
-                    spacing={{ xs: 2, md: 3, lg: 3 }}
-                    columns={{ xs: 4, md: 8, lg: 12 }}
-                >
-                    <Grid xs={4} md={8} lg={4}>
-                        <img
-                            src={bnlogo}
-                            alt="logo"
-                            style={{
-                                width: 'auto', // 이미지를 그리드 아이템에 꽉 차도록 설정
-                                height: '41%', // 비율 유지
-                                maxWidth: {
-                                    xs: '64px', // 모바일
-                                    md: '128px', // 태블릿
-                                    lg: '160px', // 데스크톱
-                                },
-                            }}
-                        />
-                        <h1>
-                            반려견과 함께하는 <br />
-                            즐거운 하루를 위해!{' '}
-                        </h1>
-                    </Grid>
-                    <Grid xs={4} md={8} lg={8}>
-                        <Swiper slidesPerView={1} className="bn_swiper">
-                            {data.map((data) => (
-                                <SwiperSlide>
-                                    <Content data={data} />
-                                </SwiperSlide>
-                            ))}
-                        </Swiper>
-                    </Grid>
-                </Grid>
-            </Box>
-        </>
+        <div className="bn_contain">
+            <div className="bn_logo">
+                <img src={bnlogo} alt="" />
+                <div className="bn_logo_text">
+                    <p>
+                        반려견과 함께하는
+                        <br />
+                        즐거운 하루를 위해!!
+                    </p>
+                </div>
+            </div>
+            <Swiper slidesPerView={1} className="bn_swiper">
+                {data.map((data) => (
+                    <SwiperSlide>
+                        <div className="bn_swiper_content">
+                            <img src="" alt="" />
+                            <p>{data.title}</p>
+                        </div>
+                    </SwiperSlide>
+                ))}
+            </Swiper>
+        </div>
     )
 }
 
-function Content({ data }) {
-    return <>{data.title}</>
-}
-
 export default Banner

frontend/src/pages/MainPage.jsx

@@ -32,6 +32,7 @@ function MainPage() {
     }
 
     return (
+
         <ThemeProvider theme={theme}>
             <Container
                 maxWidth="md"