-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #31 from Duri-Salon/feat(duri)/home-ui(DURI-204)
[feat] home UI 페이지 구현
- Loading branch information
Showing
55 changed files
with
1,119 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| export interface RegularShopProps { | ||
| shopIdx: string; | ||
| shopName:string; | ||
| shopImg: string; | ||
| shopScore?: number; | ||
| shopReview?: number; | ||
| } | ||
|
|
||
| export interface RecommendeShopProps extends RegularShopProps{ | ||
| shopAddress: string; | ||
| shopTag: string[]; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,100 @@ | ||
| // | ||
| import { SetStateAction, useState } from 'react'; | ||
|
|
||
| import { Button, Flex, HeightFitFlex, Text, theme } from '@duri-fe/ui'; | ||
| import styled from '@emotion/styled'; | ||
| import { | ||
| Swiper as OriginalSwiper, | ||
| SwiperSlide as OriginalSwiperSlide, | ||
| } from 'swiper/react'; | ||
|
|
||
| const CarouselHome = () => { | ||
| const [swiperIndex, setSwiperIndex] = useState<number>(0); // 슬라이드 인덱스 상태 | ||
|
|
||
| return ( | ||
| <HeightFitFlex direction="column" align="flex-start"> | ||
| <Text | ||
| typo="Heading3" | ||
| colorCode={theme.palette.Normal900} | ||
| margin="33px 0 23px 25px" | ||
| > | ||
| 미용한지 <br /> | ||
| 12일이 지났어요 <br /> | ||
| 매일매일 빗질 잘 해주세요! | ||
| </Text> | ||
| {/* Swiper를 감싸는 Wrapper */} | ||
| <CustomSwiperWrapper> | ||
| <CustomSwiper | ||
| slidesPerView={1.5} | ||
| spaceBetween={8} | ||
| centeredSlides={true} | ||
| onSlideChange={(e: { realIndex: SetStateAction<number> }) => { | ||
| setSwiperIndex(e.realIndex); | ||
| console.log(e.realIndex); | ||
| }} // 슬라이드 변경 완료 시 인덱스 업데이트 | ||
| > | ||
| {[0, 1, 2].map((i) => ( | ||
| <CustomSwiperSlide key={i} isActive={swiperIndex === i}> | ||
| <Card backgroundColor={theme.palette.White} borderRadius={12}> | ||
| 카드 {i} | ||
| </Card> | ||
| </CustomSwiperSlide> | ||
| ))} | ||
| </CustomSwiper> | ||
| </CustomSwiperWrapper> | ||
| <Flex margin="9px 0 0 0" gap={4}> | ||
| {/* Bullets */} | ||
| {[0, 1, 2].map((i) => ( | ||
| <Bullet | ||
| key={i} | ||
| width={swiperIndex === i ? '18px' : '5px'} | ||
| height="4px" | ||
| bg={ | ||
| swiperIndex === i | ||
| ? theme.palette.Normal700 | ||
| : theme.palette.Gray100 | ||
| } | ||
| /> | ||
| ))} | ||
| </Flex> | ||
| </HeightFitFlex> | ||
| ); | ||
| }; | ||
|
|
||
| export default CarouselHome; | ||
|
|
||
| // Swiper를 감싸는 Wrapper 스타일 | ||
| const CustomSwiperWrapper = styled(Flex)` | ||
| overflow: hidden; | ||
| `; | ||
|
|
||
| // Swiper를 커스텀한 스타일 컴포넌트 | ||
| const CustomSwiper = styled(OriginalSwiper)` | ||
| width: 100%; | ||
| padding: 0 16px; | ||
| .swiper-wrapper { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: start; | ||
| width: fit-content; | ||
| height: fit-content; | ||
| } | ||
| `; | ||
|
|
||
| // SwiperSlide를 커스텀한 스타일 컴포넌트 | ||
| const CustomSwiperSlide = styled(OriginalSwiperSlide)<{ isActive: boolean }>` | ||
| transition: transform 0.3s ease; | ||
| height: ${({ isActive }) => | ||
| isActive ? '171px !important' : '141px !important'}; | ||
| width: ${({ isActive }) => | ||
| isActive ? '317px !important' : '316px !important'}; | ||
| `; | ||
|
|
||
| const Card = styled(Flex)` | ||
| box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); | ||
| flex-shrink: 0; | ||
| `; | ||
|
|
||
| const Bullet = styled(Button)` | ||
| padding: 0; | ||
| transition: all 0.3s ease; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { RecommendeShopProps } from '@duri/assets/types/shop'; | ||
| import { Flex, Text, theme } from '@duri-fe/ui'; | ||
|
|
||
| import { ShopVertical } from './shop'; | ||
|
|
||
| const RecommendedShop = ({ shopList }: { shopList: RecommendeShopProps[] }) => { | ||
| return ( | ||
| <Flex direction="column" align="flex-start"> | ||
| <Text typo="Body3" colorCode={theme.palette.Gray400} margin='31px 0 6px 0'> | ||
| 피부 질환이 있는 강아지들이 주로 다니는 샵이에요! | ||
| </Text> | ||
| <Text typo="Heading4">여기 샵은 어때요?</Text> | ||
| <Flex justify='flex-start' gap={15} margin='23px 0 0 0'> | ||
| <ShopVertical shopList={shopList} /> | ||
| </Flex> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| export default RecommendedShop; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './shopHorizontal'; | ||
| export * from './shopVertical'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { useNavigate } from 'react-router-dom'; | ||
|
|
||
| import { RegularShopProps } from '@duri/assets/types/shop'; | ||
| import { | ||
| Button, | ||
| Flex, | ||
| HeightFitFlex, | ||
| Image, | ||
| NextArrow, | ||
| Star, | ||
| Text, | ||
| theme, | ||
| } from '@duri-fe/ui'; | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| export const ShopHorizontal = ({ shopList }: { shopList: RegularShopProps[] }) => { | ||
| const navigate = useNavigate(); | ||
| const handleClickShop = (shopIdx: string) => navigate(`/shop/${shopIdx}`); | ||
| return ( | ||
| <Flex direction="column" gap={15} margin="28px 0 0 0"> | ||
| {shopList && | ||
| shopList.map((shop: RegularShopProps) => ( | ||
| <HeightFitFlex key={shop.shopIdx} justify="flex-start" gap={15}> | ||
| <Image | ||
| width={100} | ||
| height={100} | ||
| borderRadius={8} | ||
| src={shop.shopImg} | ||
| onClick={() => handleClickShop(shop.shopIdx)} | ||
| /> | ||
| <Flex | ||
| direction="column" | ||
| justify="space-between" | ||
| align="flex-start" | ||
| gap={20} | ||
| > | ||
| <Wrapper direction="column" align="flex-start"> | ||
| {/* onClick함수 추가해야 함!!! */} | ||
| <Flex justify="flex-start" gap={2}> | ||
| <Text typo="Body2">{shop.shopName}</Text> | ||
| <NextArrow width={20} height={20} /> | ||
| </Flex> | ||
| <HeightFitFlex justify="flex-start" gap={7}> | ||
| <Star width={14} height={14} /> | ||
| <Text typo="Label3"> | ||
| {shop.shopScore} ({shop.shopReview}) | ||
| </Text> | ||
| </HeightFitFlex> | ||
| </Wrapper> | ||
| {/* onClick함수 추가해야 함!!! */} | ||
| <Button | ||
| height="37px" | ||
| bg={theme.palette.Black} | ||
| fontColor={theme.palette.White} | ||
| borderRadius="8px" | ||
| typo="Label3" | ||
| > | ||
| 입찰 넣기 | ||
| </Button> | ||
| </Flex> | ||
| </HeightFitFlex> | ||
| ))} | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| const Wrapper = styled(HeightFitFlex)` | ||
| cursor: pointer; | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { useNavigate } from 'react-router-dom'; | ||
|
|
||
| import { RecommendeShopProps } from '@duri/assets/types/shop'; | ||
| import { Button, HeightFitFlex, Image, Text, theme } from '@duri-fe/ui'; | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| export const ShopVertical = ({ | ||
| shopList, | ||
| }: { | ||
| shopList: RecommendeShopProps[]; | ||
| }) => { | ||
| const navigate = useNavigate(); | ||
| const handleClickShop = (shopIdx: string) => navigate(`/shop/${shopIdx}`); | ||
|
|
||
| return ( | ||
| <HeightFitFlex justify="flex-start" gap={6}> | ||
| {shopList && | ||
| shopList.map((shop: RecommendeShopProps) => ( | ||
| <Wrapper | ||
| key={shop.shopIdx} | ||
| direction="column" | ||
| align="flex-start" | ||
| gap={6} | ||
| width={152} | ||
| height={184} | ||
| padding="3px 3px 13px 3px" | ||
| onClick={() => handleClickShop(shop.shopIdx)} | ||
| > | ||
| <Image | ||
| width={146} | ||
| height={81} | ||
| borderRadius={8} | ||
| src={shop.shopImg} | ||
| /> | ||
| <HeightFitFlex direction='column' align='flex-start'> | ||
| <Text typo="Label1" margin='13px 0 11px 6px'>{shop.shopName}</Text> | ||
| <Text typo="Body3" colorCode={theme.palette.Gray500} margin='0 0 12px 6px'> | ||
| {shop.shopAddress} | ||
| </Text> | ||
| <HeightFitFlex justify="flex-start" gap={3} margin='0 0 0 6px'> | ||
| {shop.shopTag.map((shopTag: string) => ( | ||
| <Tag | ||
| key={shopTag} | ||
| typo="Body3" | ||
| bg={theme.palette.Gray50} | ||
| fontColor={theme.palette.Gray500} | ||
| width="fit-content" | ||
| height="19px" | ||
| borderRadius="2px" | ||
| > | ||
| <Text typo="Label3">{shopTag}</Text> | ||
| </Tag> | ||
| ))} | ||
| </HeightFitFlex> | ||
| </HeightFitFlex> | ||
| </Wrapper> | ||
| ))} | ||
| </HeightFitFlex> | ||
| ); | ||
| }; | ||
|
|
||
| const Tag = styled(Button)` | ||
| padding: 10px; | ||
| `; | ||
| const Wrapper = styled(HeightFitFlex)` | ||
| border-radius: 12px; | ||
| background: var(--bw-white, #fff); | ||
| box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1); | ||
| cursor: pointer; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { RegularShopProps } from '@duri/assets/types/shop'; | ||
| import { Flex, Text, theme } from '@duri-fe/ui'; | ||
|
|
||
| import { ShopHorizontal } from './shop'; | ||
|
|
||
| const SpeedQuotation = ({ | ||
| name, | ||
| shopList, | ||
| }: { | ||
| name: string; | ||
| shopList: RegularShopProps[]; | ||
| }) => { | ||
| return ( | ||
| <Flex direction="column" align="flex-start" margin="28px 0 0 0"> | ||
| <Text typo="Body3" colorCode={theme.palette.Gray400} margin='0 0 6px 0'> | ||
| {name}가 3회 이상 방문한 샵들이에요. | ||
| </Text> | ||
| <Text typo="Heading4">단골 샵 빠른 입찰</Text> | ||
| <Flex gap={15}> | ||
| <ShopHorizontal shopList={shopList} /> | ||
| </Flex> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| export default SpeedQuotation; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.