Merge pull request #3 from 2weeks-team/TW-10--feature/main/carousel

Feat: carousel 기능 구현
KDT1-FE · Sep 13, 2023 · 9d12cd7 · 9d12cd7
2 parents 3453f4e + 4590156
commit 9d12cd7
Show file tree

Hide file tree

Showing 12 changed files with 848 additions and 105 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,8 @@
   "dependencies": {
     "@emotion/styled": "^11.11.0",
     "@loadable/component": "^5.15.3",
+    "@mui/icons-material": "^5.14.8",
+    "@mui/material": "^5.14.8",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -22,6 +24,7 @@
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-material-ui-carousel": "^3.4.2",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "react-simply-carousel": "^9.0.4",

diff --git a/src/common/mainImg/fastcampus.png b/src/common/mainImg/fastcampus.png
diff --git a/src/common/mainImg/main-banner01.png b/src/common/mainImg/main-banner01.png
diff --git a/src/common/mainImg/main-banner02.png b/src/common/mainImg/main-banner02.png
diff --git a/src/common/mainImg/main-banner03.png b/src/common/mainImg/main-banner03.png
diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
@@ -1,74 +1,47 @@
 import React from 'react';
-import { useState } from 'react';
-import ReactSimplyCarousel from 'react-simply-carousel';
+import banner01 from '../../common/mainImg/main-banner01.png';
+import banner02 from '../../common/mainImg/main-banner02.png';
+import banner03 from '../../common/mainImg/main-banner03.png';
 
-const Slider: React.FC = () => {
-    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+import Carousel from 'react-material-ui-carousel';
+import { Paper } from '@mui/material';
+import { SliderImg, SliderItem } from './style';
+// REactSimplyCarousel uninstall
+
+interface slideItem {
+    item: {
+        img: string;
+    };
+}
+
+function Item(props: slideItem) {
+    return (
+        <Paper>
+            <SliderItem>
+                <SliderImg src={props.item.img} />
+            </SliderItem>
+        </Paper>
+    );
+}
 
+const Slider: React.FC = () => {
+    const items = [
+        {
+            img: banner01,
+        },
+        {
+            img: banner02,
+        },
+        {
+            img: banner03,
+        },
+    ];
     return (
-        <div>
-            <ReactSimplyCarousel
-                activeSlideIndex={activeSlideIndex}
-                onRequestChange={setActiveSlideIndex}
-                itemsToShow={1}
-                itemsToScroll={1}
-                forwardBtnProps={{
-                    //here you can also pass className, or any other button element attributes
-                    style: {
-                        alignSelf: 'center',
-                        background: 'black',
-                        border: 'none',
-                        borderRadius: '50%',
-                        color: 'white',
-                        cursor: 'pointer',
-                        fontSize: '20px',
-                        height: 30,
-                        lineHeight: 1,
-                        textAlign: 'center',
-                        width: 30,
-                    },
-                    children: <span>{`>`}</span>,
-                }}
-                backwardBtnProps={{
-                    //here you can also pass className, or any other button element attributes
-                    style: {
-                        alignSelf: 'center',
-                        background: 'black',
-                        border: 'none',
-                        borderRadius: '50%',
-                        color: 'white',
-                        cursor: 'pointer',
-                        fontSize: '20px',
-                        height: 30,
-                        lineHeight: 1,
-                        textAlign: 'center',
-                        width: 30,
-                    },
-                    children: <span>{`<`}</span>,
-                }}
-                responsiveProps={[
-                    {
-                        itemsToShow: 2,
-                        itemsToScroll: 2,
-                        minWidth: 768,
-                    },
-                ]}
-                speed={400}
-                easing="linear"
-            >
-                {/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}
-                <div style={{ width: 300, height: 300, background: '#ff80ed' }}>slide 0</div>
-                <div style={{ width: 300, height: 300, background: '#065535' }}>slide 1</div>
-                <div style={{ width: 300, height: 300, background: '#000000' }}>slide 2</div>
-                <div style={{ width: 300, height: 300, background: '#133337' }}>slide 3</div>
-                <div style={{ width: 300, height: 300, background: '#ffc0cb' }}>slide 4</div>
-                <div style={{ width: 300, height: 300, background: '#ffffff' }}>slide 5</div>
-                <div style={{ width: 300, height: 300, background: '#ffe4e1' }}>slide 6</div>
-                <div style={{ width: 300, height: 300, background: '#008080' }}>slide 7</div>
-                <div style={{ width: 300, height: 300, background: '#ff0000' }}>slide 8</div>
-                <div style={{ width: 300, height: 300, background: '#e6e6fa' }}>slide 9</div>
-            </ReactSimplyCarousel>
-        </div>
+        <Carousel navButtonsAlwaysVisible={true} fullHeightHover={false} animation="slide" duration={300}>
+            {items.map((item) => (
+                <Item item={item} />
+            ))}
+        </Carousel>
     );
 };
 

diff --git a/src/components/Slider/style.tsx b/src/components/Slider/style.tsx
@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+export const SliderItem = styled.div`
+    width: 1440px;
+    height: 400px;
+
+    margin: 0 auto;
+
+    background-color: #efefef;
+`;
+
+export const SliderImg = styled.img`
+    display: block;
+
+    width: 1440px;
+    height: 400px;
+`;
diff --git a/src/custom.d.ts b/src/custom.d.ts
@@ -0,0 +1,4 @@
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.jpeg';
+declare module '*.gif';
diff --git a/src/model/restaurant.ts b/src/model/restaurant.ts
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -1,10 +1,32 @@
 import React from 'react';
-import { HomeContainer, CarouselContainer, ContentTitle, CarouselWrapper } from './style';
+import {
+    HomeContainer,
+    CarouselContainer,
+    ContentTitle,
+    CarouselWrapper,
+    AboutContainer,
+    AboutImg,
+    AboutWrapper,
+    AboutTitle,
+    AboutSubTitle,
+    AboutUs,
+} from './style';
 import Slider from '../../components/Slider';
+import fastcampusImg from '../../common/mainImg/fastcampus.png';
 
 const Home: React.FC = () => {
     return (
         <HomeContainer>
+            <AboutContainer>
+                <AboutWrapper>
+                    <AboutUs>About us</AboutUs>
+                    <AboutTitle>
+                        WIKI FOR <span style={{ color: 'red' }}>FASTCAMPUS</span>
+                    </AboutTitle>
+                    <AboutSubTitle>Page for Fastcampus x Yanolja bootcamp</AboutSubTitle>
+                </AboutWrapper>
+                <AboutImg src={fastcampusImg} />
+            </AboutContainer>
             <CarouselContainer>
                 <ContentTitle>Carousel</ContentTitle>
                 <CarouselWrapper>

diff --git a/src/pages/Home/style.tsx b/src/pages/Home/style.tsx
@@ -1,8 +1,6 @@
 import styled from '@emotion/styled';
 
 export const HomeContainer = styled.div`
-    margin-top: 72px;
-
     padding: 0 50px;
 `;
 
@@ -16,6 +14,47 @@ export const ContentTitle = styled.h1`
 `;
 
 export const CarouselWrapper = styled.div`
-    border: 1px solid black;
     height: 400px;
+
+    margin-bottom: 30px;
+`;
+
+export const AboutContainer = styled.div`
+    height: 100vh;
+
+    position: relative;
+
+    padding-top: 72px;
 `;
+
+export const AboutImg = styled.img`
+    width: 40vw;
+
+    position: absolute;
+    right: 0;
+    top: 10rem;
+`;
+
+export const AboutWrapper = styled.div`
+    margin-top: 10rem;
+
+    position: relative;
+    z-index: 2;
+`;
+
+export const AboutUs = styled.p`
+    font-size: 1.5rem;
+`;
+
+export const AboutTitle = styled.h1`
+    font-size: 4rem;
+    margin-top: 0;
+    margin-bottom: 0;
+`;
+
+export const AboutSubTitle = styled.h2`
+    color: #e6e6e6;
+    font-size: 3rem;
+`;
+
+export const AboutContent = styled.p``;