-
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 #32 from Duri-Salon/feat(salon)/home-header(DURI-191)
[feat] 매장 프로필 UI 구현
- Loading branch information
Showing
14 changed files
with
299 additions
and
21 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,69 @@ | ||
import { DuriNavbar, MobileLayout } from '@duri-fe/ui'; | ||
import { DuriNavbar, Flex, Header, HeightFitFlex, MobileLayout, Pencil, Text, theme } from '@duri-fe/ui'; | ||
import styled from '@emotion/styled'; | ||
|
||
const Home = () => { | ||
return ( | ||
<> | ||
<MobileLayout> | ||
<h1>Home</h1> | ||
<h1>Home</h1> | ||
<h1>Home</h1> | ||
<DuriNavbar /> | ||
</MobileLayout> | ||
</> | ||
<MobileLayout> | ||
<HomeHeaderContainer direction='column' height={260} align='start' justify='space-between'> | ||
<Header logoColor={theme.palette.Black} iconColor={theme.palette.White} badge /> | ||
|
||
<TextContainer direction='column' align='start' padding="36px 20px" gap={4}> | ||
<Flex gap={12}> | ||
<Text typo='Heading3' colorCode={theme.palette.White}>댕댕샵</Text> | ||
<Pencil width={20} /> | ||
</Flex> | ||
<Text typo='Body3' colorCode={theme.palette.White}>경기도 성남시</Text> | ||
</TextContainer> | ||
|
||
<ShopNotice justify='start' padding="16px" backgroundColor={theme.palette.Normal200}> | ||
<ShopNoticeText colorCode={theme.palette.Normal900} align='start'> | ||
댕댕샵 점주님 안녕하세용용용용용용용용 | ||
</ShopNoticeText> | ||
</ShopNotice> | ||
</HomeHeaderContainer> | ||
|
||
<DuriNavbar /> | ||
</MobileLayout> | ||
); | ||
}; | ||
|
||
const HomeHeaderContainer = styled(Flex)` | ||
position: relative; | ||
background-size: cover; | ||
background-position: center; | ||
&::before { | ||
content: ''; | ||
position: absolute; | ||
bottom: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 70%; | ||
background: linear-gradient(180deg, rgba(217, 217, 217, 0.00) 0%, #111 100%); | ||
} | ||
`; | ||
|
||
const TextContainer = styled(Flex)` | ||
height: fit-content; | ||
width: fit-content; | ||
z-index: 2; | ||
`; | ||
|
||
const ShopNotice = styled(HeightFitFlex)` | ||
width: calc(100% - 40px); | ||
border-radius: 0 12px 12px 12px; | ||
position: absolute; | ||
bottom: -25px; | ||
left: 20px; | ||
overflow: hidden; | ||
`; | ||
|
||
const ShopNoticeText = styled(Text)` | ||
width: 100%; | ||
justify-content: start; | ||
overflow: hidden; | ||
white-space: nowrap; | ||
text-overflow: ellipsis; | ||
`; | ||
|
||
export default Home; |
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import * as React from 'react'; | ||
const SvgPencil = (props: React.SVGProps<SVGSVGElement>) => ( | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
fill="none" | ||
viewBox="0 0 20 20" | ||
{...props} | ||
> | ||
<path | ||
fill="#fff" | ||
d="M3.658 12.68c-.13.066-.196.262-.196.458v2.746c0 .393.261.654.653.654H6.86a.6.6 0 0 0 .457-.196l6.207-6.211L9.8 6.404zm12.676-6.276-2.745-2.746a.63.63 0 0 0-.914 0l-1.83 1.83 3.725 3.727 1.83-1.83c.195-.262.195-.72-.066-.981" | ||
/> | ||
</svg> | ||
); | ||
export default SvgPencil; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { Flex, theme } from "@duri-fe/ui" | ||
import styled from "@emotion/styled" | ||
|
||
interface CardProps { | ||
height: string, | ||
borderRadius: number, | ||
shadow?: 'small' | 'large', | ||
children: React.ReactNode, | ||
} | ||
|
||
export const Card = ({ | ||
height, | ||
borderRadius, | ||
shadow = 'small', | ||
children, | ||
}: CardProps) => { | ||
return ( | ||
<CardContainer height={height} borderRadius={borderRadius} shadow={shadow}> | ||
{children} | ||
</CardContainer> | ||
) | ||
} | ||
|
||
const CardContainer = styled(Flex)<CardProps>` | ||
box-shadow: ${({ shadow }) => ( | ||
shadow === 'small' | ||
? '0px 0px 4px 0px rgba(0, 0, 0, 0.10)' | ||
: '0px 0px 10px 0px rgba(0, 0, 0, 0.10)' | ||
)}; | ||
background-color: ${theme.palette.White}; | ||
`; |
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 @@ | ||
export { Card } from "./Card"; |
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,59 @@ | ||
import { Doori, Flex, Magnifier, Notification, theme } from "@duri-fe/ui"; | ||
import styled from "@emotion/styled"; | ||
|
||
import { HeightFitFlex } from "../FlexBox/Flex"; | ||
|
||
interface HeaderProps { | ||
logoColor: string; | ||
iconColor: string; | ||
searchIcon?: boolean; | ||
badge?: boolean; | ||
|
||
onClickLogo?: () => void; | ||
onClickSearch?: () => void; | ||
onClickNotification?: () => void; | ||
} | ||
|
||
export const Header = ({ | ||
logoColor, | ||
iconColor, | ||
searchIcon, | ||
badge, | ||
onClickLogo, | ||
onClickSearch, | ||
onClickNotification, | ||
}: HeaderProps) => { | ||
return ( | ||
<HeightFitFlex justify="space-between" backgroundColor="transparent" padding="20px"> | ||
<button onClick={onClickLogo}> | ||
<Doori height={26} color={logoColor} /> | ||
</button> | ||
|
||
<IconContainer gap={20}> | ||
{searchIcon && onClickSearch && | ||
<button onClick={onClickSearch}> | ||
<Magnifier width={21.5} color={iconColor} /> | ||
</button> | ||
} | ||
<NotificationContainer onClick={onClickNotification}> | ||
<Notification height={24} color={iconColor} /> | ||
{badge && <NotificationBadge width={8} height={8} borderRadius={8} backgroundColor={theme.palette.Alert} />} | ||
</NotificationContainer> | ||
</IconContainer> | ||
</HeightFitFlex> | ||
) | ||
} | ||
|
||
const IconContainer = styled(Flex)` | ||
width: fit-content; | ||
` | ||
|
||
const NotificationContainer = styled.button` | ||
position: relative; | ||
` | ||
|
||
const NotificationBadge = styled(Flex)` | ||
position: absolute; | ||
top: 0px; | ||
right: 0px; | ||
`; |
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 @@ | ||
export { Header } from './Header'; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { Card, Flex } from '@duri-fe/ui'; | ||
import type { Meta, StoryFn } from '@storybook/react'; | ||
|
||
/** | ||
* `Card` 컴포넌트의 스토리북 정의입니다. | ||
*/ | ||
const meta: Meta<typeof Card> = { | ||
title: 'components/Card', | ||
component: Card, | ||
tags: ['autodocs'], | ||
argTypes: { | ||
height: { control: 'number' }, | ||
borderRadius: { control: 'number' }, | ||
shadow: { control: 'select', options: ['small', 'large'] }, | ||
}, | ||
}; | ||
|
||
export default meta; | ||
|
||
const DuriDefaultTemplate: StoryFn<typeof Card> = (args) => ( | ||
<Card {...args}> | ||
<Flex>내부 요소</Flex> | ||
</Card> | ||
) | ||
|
||
/** | ||
* `DuriDefaultCard`는 고객 메인홈에 쓰이는 `Card` 스토리입니다. | ||
*/ | ||
export const DuriDefaultCard = DuriDefaultTemplate; | ||
DuriDefaultCard.args = { | ||
height: 172, | ||
borderRadius: 12, | ||
shadow: 'small', | ||
}; | ||
|
||
|
||
const SalonDefaultTemplate: StoryFn<typeof Card> = (args) => ( | ||
<Card {...args}> | ||
<Flex>내부 요소</Flex> | ||
</Card> | ||
) | ||
/** | ||
* `SalonDefaultCard`는 미용사 메인홈에 쓰이는 `Card` 스토리입니다. | ||
*/ | ||
export const SalonDefaultCard = SalonDefaultTemplate; | ||
SalonDefaultCard.args = { | ||
height: 200, | ||
borderRadius: 16, | ||
shadow: 'large', | ||
}; |
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,50 @@ | ||
import { Header, theme } from '@duri-fe/ui'; | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
type Story = StoryObj<typeof Header>; | ||
|
||
/** | ||
* `Header` 컴포넌트의 스토리북 정의입니다. | ||
*/ | ||
const meta: Meta<typeof Header> = { | ||
title: 'components/Header', | ||
component: Header, | ||
tags: ['autodocs'], | ||
argTypes: { | ||
logoColor: { control: 'color' }, | ||
iconColor: { control: 'color' }, | ||
searchIcon: { control: 'boolean' }, | ||
badge: { control: 'boolean' }, | ||
onClickLogo: { action: 'onClickLogo' }, | ||
onClickSearch: { action: 'onClickSearch' }, | ||
onClickNotification: { action: 'onClickNotification' }, | ||
}, | ||
}; | ||
|
||
export default meta; | ||
|
||
/** | ||
* `DuriDefaultHeader`는 `Header` 컴포넌트의 고객 스토리입니다. | ||
*/ | ||
export const DuriDefaultHeader: Story = { | ||
args: { | ||
logoColor: theme.palette.Black, | ||
iconColor: theme.palette.Normal700, | ||
searchIcon: true, | ||
onClickLogo: () => console.log('홈화면 라우팅'), | ||
onClickSearch: () => console.log('검색창 열기'), | ||
onClickNotification: () => console.log('알림창 열기'), | ||
} | ||
}; | ||
|
||
/** | ||
* `SalonDefaultHeader`는 `Header` 컴포넌트의 미용사 스토리입니다. | ||
*/ | ||
export const SalonDefaultHeader: Story = { | ||
args: { | ||
logoColor: theme.palette.Black, | ||
iconColor: theme.palette.White, | ||
onClickLogo: () => console.log('홈화면 라우팅'), | ||
onClickNotification: () => console.log('알림창 열기'), | ||
} | ||
}; |