-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' into feat/#46-gift-detail-ui
- Loading branch information
Showing
16 changed files
with
188 additions
and
112 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
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,11 @@ | ||
import * as S from './Title.style'; | ||
|
||
interface SubTitleProps { | ||
subTitle: string; | ||
} | ||
|
||
const SubTitle = ({ subTitle }: SubTitleProps) => { | ||
return <S.SubTitle>{subTitle}</S.SubTitle>; | ||
}; | ||
|
||
export default SubTitle; |
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,11 @@ | ||
import styled from 'styled-components'; | ||
import theme from '../../../style/theme'; | ||
|
||
export const Title = styled.p` | ||
color: ${theme.colors.B_01}; | ||
${theme.fonts.heading_01}; | ||
`; | ||
export const SubTitle = styled.p` | ||
color: ${theme.colors.G_10}; | ||
${theme.fonts.caption_02}; | ||
`; |
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,11 @@ | ||
import * as S from './Title.style'; | ||
|
||
interface TitleProps { | ||
title: string; | ||
} | ||
|
||
const Title = ({ title }: TitleProps) => { | ||
return <S.Title>{title}</S.Title>; | ||
}; | ||
|
||
export default Title; |
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,46 @@ | ||
import styled, { css } from 'styled-components'; | ||
import theme from '../../../style/theme'; | ||
|
||
export const Input = styled.input<{ hasContent: boolean; maxLengthReached: boolean }>` | ||
display: flex; | ||
justify-content: center; | ||
align-items: flex-start; | ||
width: 100%; | ||
margin-top: 7.2rem; | ||
border: none; | ||
border-bottom: 0.1rem solid ${theme.colors.G_02}; | ||
outline: none; | ||
gap: 0.8rem; | ||
${(props) => | ||
props.hasContent && | ||
css` | ||
border-bottom: 0.1rem solid ${theme.colors.P_06}; | ||
`} | ||
${(props) => | ||
props.maxLengthReached && | ||
css` | ||
border-bottom: 0.1rem solid ${theme.colors.G_02}; | ||
`} | ||
input::placeholder { | ||
color: ${theme.colors.G_07}; | ||
${theme.fonts.body_06} | ||
} | ||
&::-webkit-input-placeholder { | ||
color: ${theme.colors.G_07}; | ||
${theme.fonts.body_06} | ||
} | ||
&:-ms-input-placeholder { | ||
color: ${theme.colors.G_07}; | ||
${theme.fonts.body_06} | ||
} | ||
`; | ||
|
||
export const LetterLength = styled.p` | ||
color: ${theme.colors.G_07}; | ||
${theme.fonts.body_10} | ||
`; |
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,32 @@ | ||
import { useState } from 'react'; | ||
import Title from '../../common/title/Title'; | ||
import * as S from './Step01.style'; | ||
|
||
const NameInput = () => { | ||
const [text, setText] = useState<string>(''); | ||
|
||
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
const inputValue = e.target.value; | ||
const unicodeChars = [...inputValue].filter((char) => /[\ud800-\udfff]/.test(char)).length; | ||
|
||
inputValue.length + unicodeChars <= 10 ? setText(inputValue) : e.preventDefault(); | ||
}; | ||
|
||
return ( | ||
<> | ||
<Title title='선물 받을 분의' /> | ||
<Title title='이름, 혹은 닉네임을 알려주세요' /> | ||
<S.Input | ||
type='text' | ||
onChange={onChange} | ||
maxLength={10} | ||
placeholder='이름을 입력해주세요' | ||
hasContent={text.length > 0} | ||
maxLengthReached={text.length === 10} | ||
/> | ||
<S.LetterLength>({text.length}/10)</S.LetterLength> | ||
</> | ||
); | ||
}; | ||
|
||
export default NameInput; |
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,7 @@ | ||
import Title from '../../common/title/Title'; | ||
|
||
const ThumbnailInput = () => { | ||
return <Title title='썸네일을 등록해주세요' />; | ||
}; | ||
|
||
export default ThumbnailInput; |
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,13 @@ | ||
import Title from '../../common/title/Title'; | ||
|
||
const GiftDelivery = () => { | ||
return ( | ||
<> | ||
<Title title='님께' /> | ||
<Title title='언제 선물을' /> | ||
<Title title='전달하실 예정인가요?' /> | ||
</> | ||
); | ||
}; | ||
|
||
export default GiftDelivery; |
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,14 @@ | ||
import SubTitle from '../../common/title/SubTitle'; | ||
import Title from '../../common/title/Title'; | ||
|
||
const SetTournamentSchedule = () => { | ||
return ( | ||
<> | ||
<Title title='선물 토너먼트' /> | ||
<Title title='시작 일정을 설정해주세요' /> | ||
<SubTitle subTitle='토너먼트 시작 전까지 선물을 등록할 수 있어요.' /> | ||
</> | ||
); | ||
}; | ||
|
||
export default SetTournamentSchedule; |
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,14 @@ | ||
import SubTitle from '../../common/title/SubTitle'; | ||
import Title from '../../common/title/Title'; | ||
|
||
const SetTournamentDuration = () => { | ||
return ( | ||
<> | ||
<Title title='선물 토너먼트' /> | ||
<Title title='진행 시간을 설정해주세요' /> | ||
<SubTitle subTitle='토너먼트가 아래 시간 동안 진행돼요.' /> | ||
</> | ||
); | ||
}; | ||
|
||
export default SetTournamentDuration; |
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,7 @@ | ||
export const ONBOARDING_FORM_STEP = [ | ||
'NAME', | ||
'THUMBNAIL', | ||
'PRESENT', | ||
'TOURNAMENT_SCHEDULE_REGISTRATION', | ||
'TOURNAMENT_PROCEEDING', | ||
] as const; |
This file was deleted.
Oops, something went wrong.
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,18 @@ | ||
//온보딩 모든 컴포넌트를 funnel로 관리하는 최상위 페이지 | ||
|
||
import styled from 'styled-components'; | ||
import NameInput from '../components/onboarding/step01/Step01'; | ||
|
||
const OnBoardingPage = () => { | ||
return ( | ||
<OnBoardingPageWrapper> | ||
<NameInput /> | ||
</OnBoardingPageWrapper> | ||
); | ||
}; | ||
|
||
export default OnBoardingPage; | ||
|
||
const OnBoardingPageWrapper = styled.div` | ||
margin: 2rem; | ||
`; |
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