From 57c924cac42463ea0ea7ac16214543dbeb1eb955 Mon Sep 17 00:00:00 2001 From: nakyong82 Date: Tue, 9 Jan 2024 16:42:53 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Feat:=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EA=B0=9C=EB=B0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icon/arrow-right.svg | 3 + src/assets/icon/before-button.svg | 3 + src/assets/icon/cloudy-icon.svg | 9 ++ src/assets/icon/heart-icon.svg | 3 + src/assets/icon/next-button.svg | 3 + src/assets/icon/rainy-icon.svg | 9 ++ src/assets/icon/snowy-icon.svg | 9 ++ src/assets/icon/sunny-icon.svg | 9 ++ src/assets/images/example-img.svg | 9 ++ src/components/Main/InfoSlide.jsx | 119 +++++++++++++++++++++++++ src/components/Main/PreviewItem.jsx | 129 ++++++++++++++++++++++++++++ src/components/Main/WeatherInfo.jsx | 49 +++++++++++ src/pages/Main/MainPage.jsx | 52 ++++++++++- src/pages/Start/StartPage.jsx | 2 - 14 files changed, 405 insertions(+), 3 deletions(-) create mode 100644 src/assets/icon/arrow-right.svg create mode 100644 src/assets/icon/before-button.svg create mode 100644 src/assets/icon/cloudy-icon.svg create mode 100644 src/assets/icon/heart-icon.svg create mode 100644 src/assets/icon/next-button.svg create mode 100644 src/assets/icon/rainy-icon.svg create mode 100644 src/assets/icon/snowy-icon.svg create mode 100644 src/assets/icon/sunny-icon.svg create mode 100644 src/assets/images/example-img.svg create mode 100644 src/components/Main/InfoSlide.jsx create mode 100644 src/components/Main/PreviewItem.jsx create mode 100644 src/components/Main/WeatherInfo.jsx diff --git a/src/assets/icon/arrow-right.svg b/src/assets/icon/arrow-right.svg new file mode 100644 index 0000000..b5625b5 --- /dev/null +++ b/src/assets/icon/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/before-button.svg b/src/assets/icon/before-button.svg new file mode 100644 index 0000000..77f4c1b --- /dev/null +++ b/src/assets/icon/before-button.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/cloudy-icon.svg b/src/assets/icon/cloudy-icon.svg new file mode 100644 index 0000000..3ce6028 --- /dev/null +++ b/src/assets/icon/cloudy-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icon/heart-icon.svg b/src/assets/icon/heart-icon.svg new file mode 100644 index 0000000..bf619e0 --- /dev/null +++ b/src/assets/icon/heart-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/next-button.svg b/src/assets/icon/next-button.svg new file mode 100644 index 0000000..352cbf7 --- /dev/null +++ b/src/assets/icon/next-button.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/rainy-icon.svg b/src/assets/icon/rainy-icon.svg new file mode 100644 index 0000000..8efcfac --- /dev/null +++ b/src/assets/icon/rainy-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icon/snowy-icon.svg b/src/assets/icon/snowy-icon.svg new file mode 100644 index 0000000..e2f0c40 --- /dev/null +++ b/src/assets/icon/snowy-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icon/sunny-icon.svg b/src/assets/icon/sunny-icon.svg new file mode 100644 index 0000000..a0854f5 --- /dev/null +++ b/src/assets/icon/sunny-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/example-img.svg b/src/assets/images/example-img.svg new file mode 100644 index 0000000..492f04d --- /dev/null +++ b/src/assets/images/example-img.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Main/InfoSlide.jsx b/src/components/Main/InfoSlide.jsx new file mode 100644 index 0000000..bd928b0 --- /dev/null +++ b/src/components/Main/InfoSlide.jsx @@ -0,0 +1,119 @@ +import { Card, Carousel } from "antd"; +import styled from "styled-components"; +import exampleImg from "../../assets/images/example-img.svg"; +import beforeImg from "../../assets/icon/before-button.svg"; +import nextImg from "../../assets/icon/next-button.svg"; +import { useRef } from "react"; + +const { Meta } = Card; + +const dummyData = [0, 1, 2, 3]; + +const InfoSlide = () => { + const sliderRef = useRef(null); + return ( + + sliderRef.current.prev()}> + 이전 + + + {dummyData.map((item) => ( +
+ + } + > + + 봉사 장소 : ~~~
+ 봉사 기간 : ~~~
+ 모집 기간 : ~~~
+ + } + /> + 자세히 알아보기 + + +
+ ))} + + sliderRef.current.next()}> + 다음 + + + ); +}; + +const Container = styled.div` + position: relative; + margin-top: 10px; + margin-bottom: 20px; + padding: 0 20px; + width: 100%; + max-width: 400px; + .slick-dots { + display: none !important; + } +`; + +const BeforeButton = styled.button` + position: absolute; + top: 120px; + left: -20px; + padding: 5px; + border: none; + background-color: transparent; + cursor: pointer; +`; + +const NextButton = styled.button` + position: absolute; + top: 120px; + right: -20px; + padding: 5px; + border: none; + background-color: transparent; + cursor: pointer; +`; + +const InnterContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 5px; + width: 100%; + //height: 200px; +`; + +const ContentBox = styled(Card)` + .ant-card-body { + padding: 20px 20px; + } +`; + +const ProfileImg = styled.img` + width: 240px; + height: 120px; + object-fit: cover; +`; + +const Explain = styled.div` + font-size: 0.8rem; +`; + +const LinkButton = styled.button` + width: 100%; + margin-top: 10px; + padding: 7px 10px; + border: none; + border-radius: 20px; + background-color: #e2f4f3; + font-size: 0.8rem; + cursor: pointer; +`; + +export default InfoSlide; diff --git a/src/components/Main/PreviewItem.jsx b/src/components/Main/PreviewItem.jsx new file mode 100644 index 0000000..c8e00e5 --- /dev/null +++ b/src/components/Main/PreviewItem.jsx @@ -0,0 +1,129 @@ +import styled from "styled-components"; +import exampleImg from "../../assets/images/example-img.svg"; +import heartIcon from "../../assets/icon/heart-icon.svg"; +import arrowIcon from "../../assets/icon/arrow-right.svg"; + +let dummyData = [0, 1, 2]; +const PreviewItem = () => { + // 최대 3개까지만 보여주기! + return ( + + {dummyData.map((item) => ( + + +
+ 제목~~~~~ + + [지금 용인은] 우리동네 눈 치우기 자원봉사활동 + +
+ 사진 + + + 23.01.03 + + + 6 + + + + ))} + + 더 보러가기 + + + + ); +}; + +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +`; + +const MatchingBox = styled.div` + display: flex; + flex-direction: column; + margin: 10px 0; + padding: 10px 13px; + width: 100%; + border-radius: 10px; + background-color: #e2f4f3; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +`; + +const MatchingContentBox = styled.div` + display: flex; + justify-content: space-between; + width: 100%; +`; + +const Title = styled.div` + padding-bottom: 5px; + font-size: 0.9rem; + font-weight: 600; +`; + +const ContentText = styled.div` + font-size: 0.7rem; + font-weight: 600; + color: #085f63; +`; + +const Image = styled.img` + margin-left: 10px; + width: 70px; + height: 70px; + border-radius: 10px; + object-fit: cover; +`; + +const MatchingInfoBox = styled.div` + display: flex; + justify-content: space-between; + margin-top: 3px; + width: 100%; +`; + +const DateText = styled.div` + font-size: 0.8rem; + font-weight: 400; + color: #4d4d4d; +`; + +const LikeBox = styled.div` + display: flex; + align-items: center; +`; + +const LikeImg = styled.img` + margin-right: 2px; + width: 17px; +`; + +const LikeText = styled.div` + font-size: 0.8rem; + font-weight: 400; + color: #fe0135; +`; + +const MoreButtonBox = styled.div` + display: flex; + justify-content: flex-end; + align-items: center; + margin: 10px; + width: 100%; +`; + +const MoreButtonText = styled.div` + color: #404144; + font-size: 0.9rem; +`; + +const MoreButtonImg = styled.img` + width: 20px; +`; + +export default PreviewItem; diff --git a/src/components/Main/WeatherInfo.jsx b/src/components/Main/WeatherInfo.jsx new file mode 100644 index 0000000..f56ff86 --- /dev/null +++ b/src/components/Main/WeatherInfo.jsx @@ -0,0 +1,49 @@ +import styled from "styled-components"; +import cloudyImg from "../../assets/icon/cloudy-icon.svg"; +import rainyImg from "../../assets/icon/rainy-icon.svg"; +import snowyImg from "../../assets/icon/snowy-icon.svg"; +import sunnyImg from "../../assets/icon/sunny-icon.svg"; + +const WeatherInfo = () => { + // 날씨에 따른 이미지 선택! + const ChooseIcon = () => { + let type = 0; // + switch (type) { + case 0: + return ; + case 1: + return ; + case 2: + return ; + case 3: + return ; + default: + break; + } + }; + return ( + + {ChooseIcon()} +
날씨 정보 넣기
+ + ); +}; + +const Container = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 10px 0; + padding: 20px; + width: 100%; + color: white; + background-color: #24353e; + border-radius: 10px; +`; + +const WeatherImg = styled.img` + width: 200px; +`; + +export default WeatherInfo; diff --git a/src/pages/Main/MainPage.jsx b/src/pages/Main/MainPage.jsx index 5bd5ffa..3716c43 100644 --- a/src/pages/Main/MainPage.jsx +++ b/src/pages/Main/MainPage.jsx @@ -1,5 +1,55 @@ +import styled from "styled-components"; +import MainHeader from "../../components/Common/MainHeader"; +import WeatherInfo from "../../components/Main/WeatherInfo"; +import PreviewItem from "../../components/Main/PreviewItem"; +import InfoSlide from "../../components/Main/InfoSlide"; + const MainPage = () => { - return <>메인 페이지!; + return ( + + + + 오늘의 날씨 + + 함께 봉사하기 + 이웃들과 함께 깨끗한 동네를 만들어봐요! + + 봉사활동 정보 + + + + ); }; +const Container = styled.div` + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +`; + +const InnerContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + padding: 0 20px; + width: 100vw; + max-width: 600px; + height: 100%; +`; + +const Title = styled.div` + margin-top: 10px; + padding: 10px 0; + width: 100%; + font-size: 1.3rem; + font-weight: 800; +`; + +const Explain = styled.div` + width: 100%; + color: #71727a; + font-size: 0.9rem; +`; + export default MainPage; diff --git a/src/pages/Start/StartPage.jsx b/src/pages/Start/StartPage.jsx index 34e0f61..eacb16f 100644 --- a/src/pages/Start/StartPage.jsx +++ b/src/pages/Start/StartPage.jsx @@ -37,7 +37,6 @@ const Container = styled.div` const InnerContainer = styled.div` display: flex; flex-direction: column; - background-position: center; align-items: center; width: 100vw; height: 100%; @@ -46,7 +45,6 @@ const InnerContainer = styled.div` const ContentContainer = styled.div` display: flex; flex-direction: column; - background-position: center; align-items: center; padding: 80px 20px; width: 100%; From 614eb7e35db75d90601c15a71194dce43aa65d69 Mon Sep 17 00:00:00 2001 From: nakyong82 Date: Tue, 9 Jan 2024 17:05:43 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Feat:=20=EB=A9=94=EC=9D=B8=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=20drawer=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icon/community-menu.svg | 6 +++ src/assets/icon/home-menu.svg | 3 ++ src/assets/icon/matching-menu.svg | 3 ++ src/assets/icon/mypage-menu.svg | 4 ++ src/components/Common/MenuDrawer.jsx | 68 +++++++++++++++++++++++++--- 5 files changed, 78 insertions(+), 6 deletions(-) create mode 100644 src/assets/icon/community-menu.svg create mode 100644 src/assets/icon/home-menu.svg create mode 100644 src/assets/icon/matching-menu.svg create mode 100644 src/assets/icon/mypage-menu.svg diff --git a/src/assets/icon/community-menu.svg b/src/assets/icon/community-menu.svg new file mode 100644 index 0000000..0ae263b --- /dev/null +++ b/src/assets/icon/community-menu.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icon/home-menu.svg b/src/assets/icon/home-menu.svg new file mode 100644 index 0000000..4fb3055 --- /dev/null +++ b/src/assets/icon/home-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/matching-menu.svg b/src/assets/icon/matching-menu.svg new file mode 100644 index 0000000..c2b6b52 --- /dev/null +++ b/src/assets/icon/matching-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/mypage-menu.svg b/src/assets/icon/mypage-menu.svg new file mode 100644 index 0000000..e1becb3 --- /dev/null +++ b/src/assets/icon/mypage-menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Common/MenuDrawer.jsx b/src/components/Common/MenuDrawer.jsx index 4e40e34..e249ba3 100644 --- a/src/components/Common/MenuDrawer.jsx +++ b/src/components/Common/MenuDrawer.jsx @@ -1,18 +1,74 @@ import { Drawer } from "antd"; +import styled from "styled-components"; +import homeMenu from "../../assets/icon/home-menu.svg"; +import communityMenu from "../../assets/icon/community-menu.svg"; +import matchingMenu from "../../assets/icon/matching-menu.svg"; +import mypageMenu from "../../assets/icon/mypage-menu.svg"; const MenuDrawer = ({ onClose, open }) => { return ( - -

Some contents...

-

Some contents...

-

Some contents...

- + + + 메인 홈 + + + + 함께 봉사하기 + + + + 커뮤니티 + + + + 마이 페이지 + + ); }; +const Container = styled(Drawer)` + border-radius: 20px 0 0 20px; + background-color: #13a0a9; + //color: white; + + .ant-drawer-wrapper-body { + background-color: #13a0a9; + color: white; + } + + .ant-drawer-header { + border: none; + } + + .anticon-close { + margin-top: 20px; + font-size: 30px; + color: white; + } +`; + +const MenuBox = styled.div` + display: flex; + align-items: center; + margin: 30px 0; + cursor: pointer; +`; + +const MenuImage = styled.img` + padding: 10px; +`; + +const MenuText = styled.div` + color: white; + font-size: 1.3rem; + font-weight: 600; +`; + export default MenuDrawer; From eaf8ec013c802f751957fe011dbe6cfef69464fa Mon Sep 17 00:00:00 2001 From: nakyong82 Date: Tue, 9 Jan 2024 17:19:01 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Chore:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Main/InfoSlide.jsx | 5 +++-- src/components/Main/PreviewItem.jsx | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Main/InfoSlide.jsx b/src/components/Main/InfoSlide.jsx index bd928b0..ba9830f 100644 --- a/src/components/Main/InfoSlide.jsx +++ b/src/components/Main/InfoSlide.jsx @@ -22,7 +22,7 @@ const InfoSlide = () => { } >