Skip to content

Commit

Permalink
[온보딩페이지] STEP01 이름 입력 컴포넌트 뷰 구현 & 나머지 단계 타이틀만 구현 (#50)
Browse files Browse the repository at this point in the history
* 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
ExceptAnyone authored Jan 9, 2024
1 parent b3489e1 commit 1f05bea
Show file tree
Hide file tree
Showing 16 changed files with 189 additions and 112 deletions.
42 changes: 0 additions & 42 deletions src/App.css

This file was deleted.

1 change: 0 additions & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useState } from 'react';
import { RouterProvider } from 'react-router-dom';
import { RecoilRoot } from 'recoil';
import './App.css';
import router from './router/Router';
import GlobalStyle from './style/GlobalStyle';

Expand Down
11 changes: 11 additions & 0 deletions src/components/common/title/SubTitle.tsx
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;
11 changes: 11 additions & 0 deletions src/components/common/title/Title.style.ts
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};
`;
11 changes: 11 additions & 0 deletions src/components/common/title/Title.tsx
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;
46 changes: 46 additions & 0 deletions src/components/onboarding/step01/Step01.style.ts
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}
`;
32 changes: 32 additions & 0 deletions src/components/onboarding/step01/Step01.tsx
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;
7 changes: 7 additions & 0 deletions src/components/onboarding/step02/Step02.tsx
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;
13 changes: 13 additions & 0 deletions src/components/onboarding/step03/Step03.tsx
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;
14 changes: 14 additions & 0 deletions src/components/onboarding/step04/Step04.tsx
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;
14 changes: 14 additions & 0 deletions src/components/onboarding/step05/Step05.tsx
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;
7 changes: 7 additions & 0 deletions src/core/onboarding.ts
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;
68 changes: 0 additions & 68 deletions src/index.css

This file was deleted.

1 change: 0 additions & 1 deletion src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import Styles from './style/index.tsx';

ReactDOM.createRoot(document.getElementById('root')!).render(
Expand Down
18 changes: 18 additions & 0 deletions src/pages/OnBoardingPage.tsx
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;
`;
5 changes: 5 additions & 0 deletions src/router/Router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { createBrowserRouter } from 'react-router-dom';
import Main from '../pages/Main';
import Mypage from '../pages/Mypage';
import Layout from '../layouts/Layout';
import OnBoardingPage from '../pages/OnBoardingPage';

const router = createBrowserRouter([
{
Expand All @@ -16,6 +17,10 @@ const router = createBrowserRouter([
path: '/mypage',
element: <Mypage />,
},
{
path: '/onboarding',
element: <OnBoardingPage />,
},
],
},
]);
Expand Down

0 comments on commit 1f05bea

Please sign in to comment.