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

src/components/onboarding/Onboarding.style.ts

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import theme from '../../style/theme';
+
+export const TitleWrapper = styled.div`
+  margin-left: 2rem;
+  margin-right: 2rem;
+`;
+
+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/onboarding/Step01.tsx

@@ -0,0 +1,111 @@
+import styled, { css } from 'styled-components';
+import theme from '../../style/theme';
+import { useState } from 'react';
+
+const NameInput = () => {
+  const [text, setText] = useState<string>('');
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setText(e.target.value);
+  };
+  return (
+    <>
+      <TitleWrapper>
+        <Title>선물 받을 분의</Title>
+        <Title>이름, 혹은 닉네임을 알려주세요</Title>
+        <NameInputWrapper>
+          <Input
+            type='text'
+            onChange={onChange}
+            maxLength={10}
+            placeholder='이름을 입력해주세요'
+            hasContent={text.length > 0}
+            maxLengthReached={text.length === 10}
+          />
+          {/* 여기 입력되는 input text의 색상과 폰트 어떻게 설정하지... */}
+          <LetterLength>({text.length}/10)</LetterLength>
+        </NameInputWrapper>
+        {/* <NextBtn type='button'>
+          <BtnLetter>다음</BtnLetter>
+        </NextBtn> */}
+      </TitleWrapper>
+    </>
+  );
+};
+
+export default NameInput;
+
+const TitleWrapper = styled.div`
+  /* background-color: pink; */
+  margin-left: 2rem;
+  margin-right: 2rem;
+`;
+
+const Title = styled.p`
+  color: ${theme.colors.B_01};
+  ${theme.fonts.heading_01};
+`;
+
+const NameInputWrapper = styled.div`
+  /* background-color: skyblue; */
+  width: 100%;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.4rem;
+  margin-top: 7.2rem;
+`;
+
+const Input = styled.input<{ hasContent: boolean; maxLengthReached: boolean }>`
+  width: 100%;
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0.8rem;
+  outline: none;
+  border-bottom: 0.1rem solid ${theme.colors.G_02};
+
+  ${(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};
+    `}
+
+    &::focus {
+    color: ${theme.colors.P_05};
+    ${theme.fonts.body_05}
+  }
+
+  &::placeholder {
+    font-family: 'SUIT';
+    color: ${theme.colors.G_07};
+    ${theme.fonts.body_06}
+  }
+`;
+
+const LetterLength = styled.p`
+  color: ${theme.colors.G_07};
+  ${theme.fonts.body_10}
+`;
+
+// const NextBtn = styled.button`
+//   display: inline-flex;
+//   height: 4.4rem;
+//   padding: 1rem 1.1rem 1rem 2rem;
+//   align-items: center;
+//   flex-shrink: 0;
+//   border-radius: 9.9rem;
+//   margin-right: 2rem;
+//   background-color: ${theme.colors.Grayscale.G_02};
+// `;
+
+// const BtnLetter = styled.p`
+//   color: ${theme.colors.Grayscale.G_07};
+// `;

src/components/onboarding/Step02.tsx

@@ -0,0 +1,11 @@
+import * as S from './Onboarding.style';
+
+const ThumbnailInput = () => {
+  return (
+    <S.TitleWrapper>
+      <S.Title>썸네일을 등록해주세요</S.Title>
+    </S.TitleWrapper>
+  );
+};
+
+export default ThumbnailInput;

src/components/onboarding/Step03.tsx

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

src/components/onboarding/Step04.tsx

@@ -0,0 +1,13 @@
+import * as S from './Onboarding.style';
+
+const SetTournamentSchedule = () => {
+  return (
+    <S.TitleWrapper>
+      <S.Title>선물 토너먼트</S.Title>
+      <S.Title>시작 일정을 설정해주세요</S.Title>
+      <S.SubTitle>토너먼트 시작 전까지 선물을 등록할 수 있어요.</S.SubTitle>
+    </S.TitleWrapper>
+  );
+};
+
+export default SetTournamentSchedule;

src/components/onboarding/Step05.tsx

@@ -0,0 +1,13 @@
+import * as S from './Onboarding.style';
+
+const SetTournamentDuration = () => {
+  return (
+    <S.TitleWrapper>
+      <S.Title>선물 토너먼트</S.Title>
+      <S.Title>진행 시간을 설정해주세요</S.Title>
+      <S.SubTitle>토너먼트가 아래 시간 동안 진행돼요.</S.SubTitle>
+    </S.TitleWrapper>
+  );
+};
+
+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/pages/OnBoardingPage.tsx

@@ -0,0 +1,7 @@
+//온보딩 모든 컴포넌트를 funnel로 관리하는 최상위 페이지
+
+const OnBoardingPage = () => {
+  return <div></div>;
+};
+
+export default OnBoardingPage;

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 />,
+      },
     ],
   },
 ]);