Skip to content

Commit

Permalink
Merge branch 'develop' into feat/#46-gift-detail-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
urjimyu authored Jan 9, 2024
2 parents abf9b13 + 1f05bea commit 17f8a52
Show file tree
Hide file tree
Showing 16 changed files with 188 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;
`;
4 changes: 4 additions & 0 deletions src/router/Router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Mypage from '../pages/Mypage';
import Layout from '../layouts/Layout';
import GiftHomeDetailFriends from '../pages/GiftHomeDetail/GiftHomeDetailFriends';
import GiftHomeDetail2030 from '../pages/GiftHomeDetail/GiftHomeDetail2030';
import OnBoardingPage from '../pages/OnBoardingPage';

const router = createBrowserRouter([
{
Expand All @@ -27,6 +28,9 @@ const router = createBrowserRouter([
// 임의로 세부페이지 추가
path: '/giftdetail2030',
element: <GiftHomeDetail2030 />,
},
path: '/onboarding',
element: <OnBoardingPage />,
},
],
},
Expand Down

0 comments on commit 17f8a52

Please sign in to comment.