-
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.
[온보딩페이지] STEP01 이름 입력 컴포넌트 뷰 구현 & 나머지 단계 타이틀만 구현 (#50)
* feat: onBoarding 페이지 라우터 처리 * feat: 온보딩 페이지 step01 뷰 구현(상태관리 등 구현x) * style: input값 글자 인식 추가(일단 div로) * style: 온보딩에서 공통으로 쓰일 스타일 코드 묶기 * feat: 온보딩 페이지'들' 임시 라우터 처리 * style: 타이틀 코드 구현 안에 세부 인풋창을 어떻게 꾸며야할지 몰라서 여러 자료를 찾고 여러 시도를 하다 시간이 너무 지체되어 일단 타이틀만 구현하였습니다. * feat: 글자수에 따른 인풋창 상태 변화 구현 * style: text length에 따른 border-bottom 색상 변경 * feat: useFunnel 훅 작성 * style: input창 스타일링 * feat: 온보딩 라우터 추가 * style: 공통 스타일 분리 * feat: Funnel 관리하는 최상위 온보딩페이지 추가(일단 빈 페이지) * feat: useFunnel 훅에 쓰이는 상수분리 기능은 funnel 패턴을 구현하는 이슈에서 진행하겠습니다 * style: STEP01 이름 입력 컴포넌트 타이틀 & 인풋창 구현 * style: STEP02~05까지 우선적으로 타이틀 구현 세부적인 인풋창과 같은 속성들은 추후 구현하겠습니다 * docs: 구현 방식 변경으로 인한 파일 삭제 * style: App.css와 index.css 제거 * feat: 한글 입력이 한 글자 더 입력되는 버그 해결 가능한 정규 표현식 작성 * style: 타이틀 스타일 공통 컴포넌트로 분리 및 새로 임포트 * feat: Title과 SubTitle 스타일 코드 공통 컴포넌트로 작성 추후 가져다 쓰실 때 꼭 S.TitleWrapper로 감싸주시고 사용해주세요!! * style: Step01~05 파일을 폴더로 분리하여 이동 * style: margin을 위해 존재하는 공통 Wrapper 삭제 최상위 컴포넌트인 OnBoardingPage에서 따로 Wrapper로 감싸주었습니다. * style: 최상위 컴포넌트에서 margin 값 주는 Wrapper 작성 * style: Step01 스타일 코드 분리 * style: 구조 분해 할당 사용하여 변수 불러오는 것으로 수정 * style: css 속성 순서 정렬 * style: 오타 수정
- Loading branch information
1 parent
b3489e1
commit 1f05bea
Showing
16 changed files
with
189 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