diff --git a/public/svg/ic_group.svg b/public/svg/ic_group.svg new file mode 100644 index 00000000..e7378261 --- /dev/null +++ b/public/svg/ic_group.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svg/ic_plus_image_final.svg b/public/svg/ic_plus_image_final.svg new file mode 100644 index 00000000..78d4483e --- /dev/null +++ b/public/svg/ic_plus_image_final.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/svg/ic_unselected_calender.svg b/public/svg/ic_unselected_calender.svg new file mode 100644 index 00000000..422e913f --- /dev/null +++ b/public/svg/ic_unselected_calender.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svg/ic_unselected_clock.svg b/public/svg/ic_unselected_clock.svg new file mode 100644 index 00000000..3cdf2938 --- /dev/null +++ b/public/svg/ic_unselected_clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/IcGroup.tsx b/src/assets/svg/IcGroup.tsx new file mode 100644 index 00000000..7964c9a9 --- /dev/null +++ b/src/assets/svg/IcGroup.tsx @@ -0,0 +1,7 @@ +import type { SVGProps } from 'react'; +const SvgIcGroup = (props: SVGProps) => ( + + + +); +export default SvgIcGroup; diff --git a/src/assets/svg/IcPlusImage.tsx b/src/assets/svg/IcPlusImage.tsx index da114207..3bf48c65 100644 --- a/src/assets/svg/IcPlusImage.tsx +++ b/src/assets/svg/IcPlusImage.tsx @@ -2,17 +2,17 @@ import type { SVGProps } from 'react'; const SvgIcPlusImage = (props: SVGProps) => ( - - + + diff --git a/src/assets/svg/IcPlusImageFinal.tsx b/src/assets/svg/IcPlusImageFinal.tsx new file mode 100644 index 00000000..57b35ad3 --- /dev/null +++ b/src/assets/svg/IcPlusImageFinal.tsx @@ -0,0 +1,21 @@ +import type { SVGProps } from 'react'; +const SvgIcPlusImageFinal = (props: SVGProps) => ( + + + + + + +); +export default SvgIcPlusImageFinal; diff --git a/src/assets/svg/IcUnselectedCalender.tsx b/src/assets/svg/IcUnselectedCalender.tsx new file mode 100644 index 00000000..f230c83e --- /dev/null +++ b/src/assets/svg/IcUnselectedCalender.tsx @@ -0,0 +1,13 @@ +import type { SVGProps } from 'react'; +const SvgIcUnselectedCalender = (props: SVGProps) => ( + + + +); +export default SvgIcUnselectedCalender; diff --git a/src/assets/svg/IcUnselectedClock.tsx b/src/assets/svg/IcUnselectedClock.tsx new file mode 100644 index 00000000..6247a82c --- /dev/null +++ b/src/assets/svg/IcUnselectedClock.tsx @@ -0,0 +1,10 @@ +import type { SVGProps } from 'react'; +const SvgIcUnselectedClock = (props: SVGProps) => ( + + + +); +export default SvgIcUnselectedClock; diff --git a/src/assets/svg/Logo.tsx b/src/assets/svg/Logo.tsx index 80d269f8..ec9ab8b9 100644 --- a/src/assets/svg/Logo.tsx +++ b/src/assets/svg/Logo.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import type { SVGProps } from 'react'; const SvgLogo = (props: SVGProps) => ( diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 315f01f2..b0c17cb1 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -18,6 +18,7 @@ export { default as IcEdit } from './IcEdit'; export { default as IcEmptyBox } from './IcEmptyBox'; export { default as IcExternal } from './IcExternal'; export { default as IcGift } from './IcGift'; +export { default as IcGroup } from './IcGroup'; export { default as IcImg } from './IcImg'; export { default as IcImgAdd } from './IcImgAdd'; export { default as IcKakaoSmall } from './IcKakaoSmall'; @@ -27,9 +28,12 @@ export { default as IcLink } from './IcLink'; export { default as IcMenu } from './IcMenu'; export { default as IcPlus } from './IcPlus'; export { default as IcPlusImage } from './IcPlusImage'; +export { default as IcPlusImageFinal } from './IcPlusImageFinal'; export { default as IcRefresh } from './IcRefresh'; export { default as IcRight } from './IcRight'; export { default as IcSettings } from './IcSettings'; +export { default as IcUnselectedCalender } from './IcUnselectedCalender'; +export { default as IcUnselectedClock } from './IcUnselectedClock'; export { default as IcUp } from './IcUp'; export { default as IcUser } from './IcUser'; export { default as Logotype } from './Logotype'; diff --git a/src/components/common/title/Title.style.ts b/src/components/common/title/Title.style.ts index e4fe4d09..84cde53b 100644 --- a/src/components/common/title/Title.style.ts +++ b/src/components/common/title/Title.style.ts @@ -1,11 +1,15 @@ import styled from 'styled-components'; -import theme from '../../../style/theme'; export const Title = styled.p` - color: ${theme.colors.B_01}; - ${theme.fonts.heading_01}; + color: ${({ theme }) => theme.colors.black}; + ${({ theme }) => theme.fonts.heading_01}; `; export const SubTitle = styled.p` - color: ${theme.colors.G_10}; - ${theme.fonts.caption_02}; + color: ${({ theme }) => theme.colors.G_10}; + ${({ theme }) => theme.fonts.caption_02}; +`; + +export const Username = styled.p` + color: ${({ theme }) => theme.colors.P_06}; + ${({ theme }) => theme.fonts.heading_01}; `; diff --git a/src/components/common/title/Title.tsx b/src/components/common/title/Title.tsx index e6771279..8d1e5afa 100644 --- a/src/components/common/title/Title.tsx +++ b/src/components/common/title/Title.tsx @@ -2,10 +2,16 @@ import * as S from './Title.style'; interface TitleProps { title: string; + userName?: string; } -const Title = ({ title }: TitleProps) => { - return {title}; +const Title = ({ title, userName }: TitleProps) => { + return ( +
+ {userName && {userName}} + {title} +
+ ); }; export default Title; diff --git a/src/components/onboarding/step01/Step01.tsx b/src/components/onboarding/step01/Step01.tsx index 33f949d0..89b92355 100644 --- a/src/components/onboarding/step01/Step01.tsx +++ b/src/components/onboarding/step01/Step01.tsx @@ -12,6 +12,7 @@ const NameInput = () => { inputValue.length + unicodeChars <= 10 ? setText(inputValue) : e.preventDefault(); }; + // TODO 인풋창에 x 버튼 추가 및 클릭 시 값 삭제 return ( <> diff --git a/src/components/onboarding/step02/Step02.style.ts b/src/components/onboarding/step02/Step02.style.ts new file mode 100644 index 00000000..f3bbe78f --- /dev/null +++ b/src/components/onboarding/step02/Step02.style.ts @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +export const ThumbnailWrapper = styled.div` + ${({ theme }) => theme.mixin.flexCenter({})} + background-color: ${({ theme }) => theme.colors.G_01}; + width: 24rem; + height: 24rem; + margin: 0 auto; +`; diff --git a/src/components/onboarding/step02/Step02.tsx b/src/components/onboarding/step02/Step02.tsx index 0424e97c..2a9a3ead 100644 --- a/src/components/onboarding/step02/Step02.tsx +++ b/src/components/onboarding/step02/Step02.tsx @@ -1,7 +1,19 @@ import Title from '../../common/title/Title'; +import { IcPlusImageFinal } from '../../../assets/svg'; +import * as S from './Step02.style'; const ThumbnailInput = () => { - return <Title title='썸네일을 등록해주세요' />; + // TODO 이미지 클릭 시 사진 업로드 + return ( + <> + <Title title='썸네일을 등록해주세요' /> + <div style={{ width: '100%', marginTop: '11rem' }}> + <S.ThumbnailWrapper> + <IcPlusImageFinal style={{ width: '5rem', height: '5rem' }} /> + </S.ThumbnailWrapper> + </div> + </> + ); }; export default ThumbnailInput; diff --git a/src/components/onboarding/step03/Step03.style.ts b/src/components/onboarding/step03/Step03.style.ts new file mode 100644 index 00000000..fd20d334 --- /dev/null +++ b/src/components/onboarding/step03/Step03.style.ts @@ -0,0 +1,25 @@ +import styled from 'styled-components'; + +export const Wrapper = styled.div` + ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'center' })} + width: 100%; + height: 3.6rem; + margin-top: 7.2rem; + border-bottom: 0.1rem solid ${({ theme }) => theme.colors.G_02}; +`; + +export const TextField = styled.div` + width: 90%; +`; + +export const IconField = styled.div` + width: 10%; +`; + +export const Input = styled.input` + ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'center' })}; + width: 100%; + height: 3.5rem; + border: none; + outline: none; +`; diff --git a/src/components/onboarding/step03/Step03.tsx b/src/components/onboarding/step03/Step03.tsx index 3f21a54e..bcc292eb 100644 --- a/src/components/onboarding/step03/Step03.tsx +++ b/src/components/onboarding/step03/Step03.tsx @@ -1,11 +1,22 @@ import Title from '../../common/title/Title'; +import { IcUnselectedCalender } from '../../../assets/svg'; +import * as S from './Step03.style'; const GiftDelivery = () => { return ( <> - <Title title='님께' /> + {/* TODO 추후 로그인된 유저네임으로 변경 및 인풋창 클릭 시 켈린더 호출*/} + <Title userName='시동훈' title='님께' /> <Title title='언제 선물을' /> <Title title='전달하실 예정인가요?' /> + <S.Wrapper> + <S.TextField> + <S.Input placeholder='날짜를 선택해주세요' /> + </S.TextField> + <S.IconField> + <IcUnselectedCalender style={{ width: '2.4rem', height: '2.4rem' }} /> + </S.IconField> + </S.Wrapper> </> ); }; diff --git a/src/components/onboarding/step04/Step04.style.ts b/src/components/onboarding/step04/Step04.style.ts new file mode 100644 index 00000000..379d26b4 --- /dev/null +++ b/src/components/onboarding/step04/Step04.style.ts @@ -0,0 +1,32 @@ +import styled from 'styled-components'; + +export const SetTournamentScheduleWrapper = styled.div` + ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'center' })} + width: 100%; + height: 3.6rem; + margin-top: 4.6rem; + border-bottom: 0.1rem solid ${({ theme }) => theme.colors.G_02}; +`; +export const TextField = styled.div` + width: 90%; +`; + +export const IconField = styled.div` + width: 10%; +`; + +export const Input = styled.input` + ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'center' })}; + width: 100%; + height: 3.5rem; + border: none; + outline: none; +`; + +export const Container = styled.div` + ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'center' })} + width: 100%; + height: 3.6rem; + margin-top: 2.5rem; + border-bottom: 0.1rem solid ${({ theme }) => theme.colors.G_02}; +`; diff --git a/src/components/onboarding/step04/Step04.tsx b/src/components/onboarding/step04/Step04.tsx index 4e5b1bd6..39e8bcc2 100644 --- a/src/components/onboarding/step04/Step04.tsx +++ b/src/components/onboarding/step04/Step04.tsx @@ -1,12 +1,37 @@ import SubTitle from '../../common/title/SubTitle'; import Title from '../../common/title/Title'; +import { IcUnselectedCalender, IcUnselectedClock } from '../../../assets/svg'; +import * as S from './Step04.style'; const SetTournamentSchedule = () => { + // TODO 인풋창 클릭 시 캘린더 & 시간 선택 창 구현 return ( <> - <Title title='선물 토너먼트' /> - <Title title='시작 일정을 설정해주세요' /> - <SubTitle subTitle='토너먼트 시작 전까지 선물을 등록할 수 있어요.' /> + <div> + <div> + <Title title='선물 토너먼트' /> + <Title title='시작 일정을 설정해주세요' /> + </div> + <div style={{ marginTop: '0.8rem' }}> + <SubTitle subTitle='토너먼트 시작 전까지 선물을 등록할 수 있어요.' /> + </div> + </div> + <S.SetTournamentScheduleWrapper> + <S.TextField> + <S.Input placeholder='날짜를 선택해주세요' /> + </S.TextField> + <S.IconField> + <IcUnselectedCalender style={{ width: '2.4rem', height: '2.4rem' }} /> + </S.IconField> + </S.SetTournamentScheduleWrapper> + <S.Container> + <S.TextField> + <S.Input placeholder='시작 시간을 선택해주세요' /> + </S.TextField> + <S.IconField> + <IcUnselectedClock style={{ width: '2.4rem', height: '2.4rem' }} /> + </S.IconField> + </S.Container> </> ); }; diff --git a/src/components/onboarding/step05/Step05.style.ts b/src/components/onboarding/step05/Step05.style.ts new file mode 100644 index 00000000..ecea1e79 --- /dev/null +++ b/src/components/onboarding/step05/Step05.style.ts @@ -0,0 +1,38 @@ +import styled from 'styled-components'; + +export const SetTournamentDurationWrapper = styled.div` + ${({ theme }) => theme.mixin.flexCenter({})}; + gap: 1.2rem; + margin-top: 4.6rem; +`; + +export const DetailBox = styled.div` + ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'center' })}; + justify-content: space-between; + padding: 2rem; + width: 100%; + height: 5.6rem; + border-radius: 1.2rem; + border: 0.1rem solid ${({ theme }) => theme.colors.G_02}; +`; + +export const RadioBox = styled.section` + ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'space-between' })}; + width: 7.3rem; + height: 2.4rem; +`; + +export const TimeText = styled.p` + color: ${({ theme }) => theme.colors.black}; + ${({ theme }) => theme.fonts.body_09}; +`; + +export const InTodayDate = styled.p` + color: ${({ theme }) => theme.colors.B_02}; + ${({ theme }) => theme.fonts.caption_01}; +`; + +export const NotTodayDate = styled.p` + color: ${({ theme }) => theme.colors.P_06}; + ${({ theme }) => theme.fonts.caption_01}; +`; diff --git a/src/components/onboarding/step05/Step05.tsx b/src/components/onboarding/step05/Step05.tsx index 560d3d72..b4bcf862 100644 --- a/src/components/onboarding/step05/Step05.tsx +++ b/src/components/onboarding/step05/Step05.tsx @@ -1,12 +1,23 @@ import SubTitle from '../../common/title/SubTitle'; import Title from '../../common/title/Title'; +import * as S from './Step05.style'; +import TimeBox from './TimeBox'; const SetTournamentDuration = () => { + // TODO 오늘 기준 날짜로 수정 & map함수로 수정 + return ( <> - <Title title='선물 토너먼트' /> - <Title title='진행 시간을 설정해주세요' /> - <SubTitle subTitle='토너먼트가 아래 시간 동안 진행돼요.' /> + <div> + <Title title='선물 토너먼트' /> + <Title title='진행 시간을 설정해주세요' /> + </div> + <div style={{ marginTop: '0.8rem' }}> + <SubTitle subTitle='토너먼트가 아래 시간 동안 진행돼요.' /> + </div> + <S.SetTournamentDurationWrapper> + <TimeBox /> + </S.SetTournamentDurationWrapper> </> ); }; diff --git a/src/components/onboarding/step05/TimeBox.tsx b/src/components/onboarding/step05/TimeBox.tsx new file mode 100644 index 00000000..6321d87e --- /dev/null +++ b/src/components/onboarding/step05/TimeBox.tsx @@ -0,0 +1,30 @@ +import * as S from './Step05.style'; +import { IcGroup } from '../../../assets/svg'; + +const TimeBox = () => { + const timeOptions = [ + { text: '6시간', dateType: 'today' }, + { text: '12시간', dateType: 'today' }, + { text: '18시간', dateType: 'nottoday' }, + { text: '24시간', dateType: 'nottoday' }, + ]; + return ( + <> + {timeOptions.map((option, index) => ( + <S.DetailBox key={index}> + <S.RadioBox> + <IcGroup style={{ width: '2.4rem', height: '2.4rem' }} /> + <S.TimeText>{option.text}</S.TimeText> + </S.RadioBox> + {option.dateType === 'today' ? ( + <S.InTodayDate>6월 23일 당일</S.InTodayDate> + ) : ( + <S.NotTodayDate>6월 23일 이후</S.NotTodayDate> + )} + </S.DetailBox> + ))} + </> + ); +}; + +export default TimeBox;