[온보딩페이지] STEP01 이름 입력 컴포넌트 뷰 구현 & 나머지 단계 타이틀만 구현

src/App.tsx

@@ -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';
 

src/components/common/title/SubTitle.tsx

@@ -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;

src/components/common/title/Title.style.ts

@@ -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};
+`;

src/components/common/title/Title.tsx

@@ -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;

src/components/onboarding/step01/Step01.style.ts

@@ -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}
+`;

src/components/onboarding/step01/Step01.tsx

@@ -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;

src/components/onboarding/step02/Step02.tsx

@@ -0,0 +1,7 @@
+import Title from '../../common/title/Title';
+
+const ThumbnailInput = () => {
+  return <Title title='썸네일을 등록해주세요' />;
+};
+
+export default ThumbnailInput;

src/components/onboarding/step03/Step03.tsx

@@ -0,0 +1,13 @@
+import Title from '../../common/title/Title';
+
+const GiftDelivery = () => {
+  return (
+    <>
+      <Title title='님께' />
+      <Title title='언제 선물을' />
+      <Title title='전달하실 예정인가요?' />
+    </>
+  );
+};
+
+export default GiftDelivery;

src/components/onboarding/step04/Step04.tsx

@@ -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;

src/components/onboarding/step05/Step05.tsx

@@ -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;

src/core/onboarding.ts

@@ -0,0 +1,7 @@
+export const ONBOARDING_FORM_STEP = [
+  'NAME',
+  'THUMBNAIL',
+  'PRESENT',
+  'TOURNAMENT_SCHEDULE_REGISTRATION',
+  'TOURNAMENT_PROCEEDING',
+] as const;

src/main.tsx

@@ -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(

src/pages/OnBoardingPage.tsx

@@ -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;
+`;

src/router/Router.tsx

@@ -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([
   {
@@ -16,6 +17,10 @@ const router = createBrowserRouter([
         path: '/mypage',
         element: <Mypage />,
       },
+      {
+        path: '/onboarding',
+        element: <OnBoardingPage />,
+      },
     ],
   },
 ]);