Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style: PageHeader 컴포넌트 제작 #59

Merged
merged 7 commits into from
Oct 31, 2023
Merged

style: PageHeader 컴포넌트 제작 #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
179048f
feature: ExitIcon 컴포넌트 추가
wukdddang Oct 31, 2023
768174f
feature: BackChevron 컴포넌트 추가
wukdddang Oct 31, 2023
74ee69e
feature: PageHeader 컴포넌트 추가
wukdddang Oct 31, 2023
64aca99
refactor: 사용하지 않는 코드 제거
wukdddang Oct 31, 2023
497e863
refactor: tsdoc 추가
wukdddang Oct 31, 2023
2aa4b91
refactor: tsdoc 추가 + exitClick으로 props명 변경
wukdddang Oct 31, 2023
533d286
refactor: PageHeader border-bottom 수정
wukdddang Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions src/assets/icons/ExitIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
export type IconProps = {
isDarkMode?: boolean
exitClick?: () => void
}

/**
* @param isDarkMode - (Optional) 다크모드 여부
* @param exitClick - (Optional) 나가기 클릭 이벤트
*/

const ExitIcon = ({ isDarkMode, exitClick }: IconProps) => (
<span
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
onClick={exitClick}
>
{isDarkMode ? (
<svg
width={'28'}
height={'32'}
viewBox={'0 0 28 32'}
fill={'none'}
xmlns={'http://www.w3.org/2000/svg'}
>
<path
d={
'M6.7085 12.3206V11.0891C6.7085 8.88304 6.7085 7.78003 7.42113 7.18064C8.13376 6.58125 9.22046 6.77024 11.3939 7.14822L15.1532 7.80202C17.529 8.2152 18.7169 8.42179 19.421 9.25895C20.1252 10.0961 20.1252 11.3018 20.1252 13.7133V22.2868C20.1252 24.6983 20.1252 25.904 19.421 26.7411C18.7169 27.5783 17.529 27.7849 15.1532 28.1981L11.3939 28.8519C9.22046 29.2298 8.13376 29.4188 7.42113 28.8194C6.7085 28.2201 6.7085 27.117 6.7085 24.911V23.9103'
}
stroke={'#FDFDFD'}
strokeWidth={'2'}
/>
<path
d={
'M15.3335 18L16.1692 17.4508L16.5301 18L16.1692 18.5491L15.3335 18ZM3.8335 19C3.28121 19 2.8335 18.5522 2.8335 18C2.8335 17.4477 3.28121 17 3.8335 17V19ZM12.3359 11.6174L16.1692 17.4508L14.4978 18.5491L10.6645 12.7158L12.3359 11.6174ZM16.1692 18.5491L12.3359 24.3825L10.6645 23.2841L14.4978 17.4508L16.1692 18.5491ZM15.3335 19H3.8335V17H15.3335V19Z'
}
fill={'#FDFDFD'}
/>
<path
fillRule={'evenodd'}
clipRule={'evenodd'}
d={
'M16.4375 10.5007C16.4375 6.42219 19.5179 3.8833 20.0949 3.44343C20.149 3.40225 20.2229 3.40505 20.2729 3.45102C20.516 3.67449 21.2384 4.38551 21.9179 5.5213C21.9767 5.61967 22.1207 5.62218 22.1838 5.5265C22.3521 5.27136 22.4964 5.09115 22.5869 4.98587C22.6409 4.92305 22.7331 4.92199 22.7871 4.9848C23.1749 5.43569 24.5625 7.2743 24.5625 10.4999V10.5007C24.5625 11.1409 24.4574 11.7748 24.2533 12.3662C24.0491 12.9577 23.7499 13.4951 23.3726 13.9478C22.9954 14.4005 22.5475 14.7596 22.0547 15.0046C21.5618 15.2496 21.0335 15.3757 20.5 15.3757C19.9665 15.3757 19.4382 15.2496 18.9453 15.0046C18.4525 14.7596 18.0046 14.4005 17.6274 13.9478C17.2501 13.4951 16.9509 12.9577 16.7467 12.3662C16.5426 11.7748 16.4375 11.1409 16.4375 10.5007Z'
}
fill={'#F15555'}
/>
<path
fillRule={'evenodd'}
clipRule={'evenodd'}
d={
'M18.3125 12.7504C18.3125 12.7504 18.3125 12.7503 18.3125 12.7503C18.3125 10.7835 19.9841 9.10325 20.4048 8.71146C20.459 8.66104 20.541 8.66092 20.5951 8.71133C21.0115 9.09905 22.6548 10.7505 22.687 12.6926C22.6874 12.7117 22.6875 12.7309 22.6875 12.7501C22.6875 14.1999 21.7082 15.3751 20.5 15.3751C19.292 15.3751 18.3126 14.2 18.3125 12.7504C18.3125 12.7504 18.3125 12.7504 18.3125 12.7504Z'
}
fill={'#FEE500'}
/>
</svg>
) : (
<svg
width={'28'}
height={'32'}
viewBox={'0 0 28 32'}
fill={'none'}
xmlns={'http://www.w3.org/2000/svg'}
>
<path
d={
'M6.7085 12.3206V11.089C6.7085 8.883 6.7085 7.77999 7.42113 7.1806C8.13376 6.58121 9.22046 6.7702 11.3939 7.14818L15.1532 7.80198C17.529 8.21516 18.7169 8.42176 19.421 9.25891C20.1252 10.0961 20.1252 11.3018 20.1252 13.7133V22.2868C20.1252 24.6982 20.1252 25.9039 19.421 26.7411C18.7169 27.5782 17.529 27.7848 15.1532 28.198L11.3939 28.8518C9.22046 29.2298 8.13376 29.4188 7.42113 28.8194C6.7085 28.22 6.7085 27.117 6.7085 24.911V23.9103'
}
stroke={'#33363B'}
strokeWidth={'2'}
/>
<path
d={
'M15.3335 18L16.1692 17.4508L16.5301 18L16.1692 18.5492L15.3335 18ZM3.8335 19C3.28121 19 2.8335 18.5523 2.8335 18C2.8335 17.4477 3.28121 17 3.8335 17V19ZM12.3359 11.6175L16.1692 17.4508L14.4978 18.5492L10.6645 12.7158L12.3359 11.6175ZM16.1692 18.5492L12.3359 24.3825L10.6645 23.2842L14.4978 17.4508L16.1692 18.5492ZM15.3335 19H3.8335V17H15.3335V19Z'
}
fill={'#33363B'}
/>
<path
fillRule={'evenodd'}
clipRule={'evenodd'}
d={
'M16.4375 10.5007C16.4375 6.42221 19.5179 3.88331 20.0949 3.44345C20.149 3.40227 20.2229 3.40506 20.2729 3.45103C20.516 3.67451 21.2384 4.38552 21.9179 5.52132C21.9767 5.61968 22.1207 5.6222 22.1838 5.52651C22.3521 5.27138 22.4964 5.09117 22.5869 4.98589C22.6409 4.92306 22.7331 4.92201 22.7871 4.98482C23.1749 5.43571 24.5625 7.27431 24.5625 10.4999V10.5007C24.5625 11.1409 24.4574 11.7748 24.2533 12.3663C24.0491 12.9577 23.7499 13.4951 23.3726 13.9478C22.9954 14.4005 22.5475 14.7596 22.0547 15.0046C21.5618 15.2496 21.0335 15.3757 20.5 15.3757C19.9665 15.3757 19.4382 15.2496 18.9453 15.0046C18.4525 14.7596 18.0046 14.4005 17.6274 13.9478C17.2501 13.4951 16.9509 12.9577 16.7467 12.3663C16.5426 11.7748 16.4375 11.1409 16.4375 10.5007Z'
}
fill={'#F15555'}
/>
<path
fillRule={'evenodd'}
clipRule={'evenodd'}
d={
'M18.3125 12.7503C18.3125 12.7503 18.3125 12.7503 18.3125 12.7503C18.3125 10.7835 19.9841 9.1032 20.4048 8.71141C20.459 8.66099 20.541 8.66086 20.5951 8.71128C21.0115 9.09899 22.6548 10.7504 22.687 12.6925C22.6874 12.7116 22.6875 12.7308 22.6875 12.7501C22.6875 14.1998 21.7082 15.3751 20.5 15.3751C19.292 15.3751 18.3126 14.2 18.3125 12.7503C18.3125 12.7503 18.3125 12.7503 18.3125 12.7503Z'
}
fill={'#FEE500'}
/>
</svg>
)}
</span>
)

export default ExitIcon
62 changes: 62 additions & 0 deletions src/components/common/BackChevron/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import styled from '@emotion/styled'
import { BsChevronLeft } from 'react-icons/bs'

import { palette } from '@/styles/palette'

const StyleBackChevron = styled.div<BackChevronProps>`
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
background-color: ${({ hasBackground, isDarkMode }) =>
isDarkMode
? hasBackground
? `${palette.GRAY600}`
: 'transparent'
: hasBackground
? `${palette.WHITE}`
: 'transparent'};
border: ${({ hasBackground, isDarkMode }) =>
isDarkMode
? hasBackground
? `1px solid ${palette.GRAY500}`
: `1px solid ${palette.DARK_TERTIARY}`
: hasBackground
? `1px solid ${palette.GRAY300}`
: `1px solid ${palette.TERTIARY}`};
`

type BackChevronProps = {
hasBackground?: boolean
isDarkMode?: boolean
prevClick?: () => void
}

/**
* @param hasBackground - (Optional) 배경색 여부
* @param isDarkMode - (Optional) 다크모드 여부
* @param prevClick - (Optional) 뒤로가기 클릭 이벤트
*/

const BackChevron = ({ hasBackground, isDarkMode, prevClick }: BackChevronProps) => {
return (
<StyleBackChevron hasBackground={hasBackground} isDarkMode={isDarkMode} onClick={prevClick}>
<BsChevronLeft
size={20}
style={{
color: isDarkMode
? hasBackground
? `${palette.DARK_WHITE}`
: `${palette.DARK_WHITE}`
: hasBackground
? `${palette.BLACK}`
: `${palette.WHITE}`,
}}
/>
</StyleBackChevron>
)
}

export default BackChevron
87 changes: 87 additions & 0 deletions src/components/common/PageHeader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import styled from '@emotion/styled'

import { Text } from '@/components/common/Text'
import { palette } from '@/styles/palette'

const StylePageHeader = styled.div<{
isDarkMode?: boolean
hasBackground?: boolean
}>`
width: 100%;
height: 72px;
padding: 0 18px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 20px 20px 0 0;
border-bottom: 1px solid
${({ isDarkMode, hasBackground }) =>
isDarkMode
? hasBackground
? palette.GRAY500
: 'none'
: hasBackground
? palette.GRAY300
: 'none'};
background-color: ${({ isDarkMode, hasBackground }) =>
isDarkMode
? hasBackground
? `${palette.DARK_BLUE}`
: 'transparent'
: hasBackground
? `${palette.GRAY100}`
: 'transparent'};
`

const StyleIcon = styled.div`
width: 38px;
height: 38px;
display: flex;
justify-content: center;
align-items: center;
`

type PageHeaderProps = {
title: string
leftIcon?: React.ReactNode
rightIcon?: React.ReactNode
isDarkMode?: boolean
hasBackground?: boolean
onClick?: () => void
}

/**
* @param title - 타이틀
* @param leftIcon - (Optional) 왼쪽 아이콘
* @param rightIcon - (Optional) 오른쪽 아이콘
* @param isDarkMode - (Optional) 다크모드 여부
* @param hasBackground - (Optional) 배경색 여부
* @param onClick - (Optional) 클릭 이벤트
*/

const PageHeader = ({ leftIcon, rightIcon, title, isDarkMode, hasBackground }: PageHeaderProps) => {
return (
<StylePageHeader isDarkMode={isDarkMode} hasBackground={hasBackground}>
<StyleIcon>{leftIcon}</StyleIcon>
<Text
font={'Body_20'}
fontWeight={600}
letterSpacing={-1}
style={{
color: isDarkMode
? hasBackground
? `${palette.DARK_WHITE}`
: `${palette.DARK_WHITE}`
: hasBackground
? `${palette.BLACK}`
: `${palette.WHITE}`,
}}
>
{title}
</Text>
<StyleIcon>{rightIcon}</StyleIcon>
</StylePageHeader>
)
}

export default PageHeader