Merge branch 'develop' into feat/#27-pretask-link-upload

src/assets/svg/IcGroup.tsx

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+const SvgIcGroup = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}>
+    <rect width={23} height={23} x={0.5} y={0.5} stroke='#EBE9EA' rx={11.5} />
+  </svg>
+);
+export default SvgIcGroup;

src/assets/svg/IcPlusImage.tsx

@@ -2,17 +2,17 @@ import type { SVGProps } from 'react';
 const SvgIcPlusImage = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23' {...props}>
     <path
-      fill='#222'
+      fill='#CAC6C8'
       d='M3.72 17.532a.75.75 0 1 0 1.06 1.06zm4.03-2.97.53-.53a.75.75 0 0 0-1.06 0zm1.75 1.75-.53.53a.75.75 0 0 0 1.06 0zm3.938-3.937.53-.53a.75.75 0 0 0-1.06 0zm2.97 4.03a.75.75 0 1 0 1.06-1.06zM4.78 18.593l3.5-3.5-1.06-1.06-3.5 3.5zm2.44-3.5 1.75 1.75 1.06-1.06-1.75-1.75zm2.81 1.75 3.938-3.938-1.06-1.06-3.938 3.937zm2.877-3.938 3.5 3.5 1.06-1.06-3.5-3.5zM6 6.125h8.75v-1.5H6zM16.625 8v8.75h1.5V8zM14.75 18.625H6v1.5h8.75zM4.125 16.75V8h-1.5v8.75zM6 18.625a1.875 1.875 0 0 1-1.875-1.875h-1.5A3.375 3.375 0 0 0 6 20.125zm10.625-1.875c0 1.035-.84 1.875-1.875 1.875v1.5a3.375 3.375 0 0 0 3.375-3.375zM14.75 6.125c1.036 0 1.875.84 1.875 1.875h1.5a3.375 3.375 0 0 0-3.375-3.375zM6 4.625A3.375 3.375 0 0 0 2.625 8h1.5c0-1.036.84-1.875 1.875-1.875zm1.875 4.688c0 .31-.252.562-.562.562v1.5c1.139 0 2.062-.923 2.062-2.062zm-.562.562a.563.563 0 0 1-.563-.562h-1.5c0 1.139.923 2.062 2.063 2.062zm-.563-.562c0-.311.252-.563.563-.563v-1.5c-1.14 0-2.063.923-2.063 2.063zm.563-.563c.31 0 .562.252.562.563h1.5c0-1.14-.923-2.063-2.062-2.063z'
     />
-    <circle cx={17.5} cy={5.5} r={3.5} fill='#222' />
-    <rect width={0.7} height={3.5} x={17.15} y={3.75} fill='#fff' rx={0.35} />
+    <circle cx={17.5} cy={5.5} r={3.5} fill='#CAC6C8' />
+    <rect width={0.7} height={3.5} x={17.15} y={3.75} fill='#CAC6C8' rx={0.35} />
     <rect
       width={0.7}
       height={3.5}
       x={15.75}
       y={5.85}
-      fill='#fff'
+      fill='#CAC6C8'
       rx={0.35}
       transform='rotate(-90 15.75 5.85)'
     />

src/assets/svg/IcPlusImageFinal.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+const SvgIcPlusImageFinal = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 54 54' {...props}>
+    <path
+      fill='#CAC6C8'
+      d='M8.21 41.844a1.5 1.5 0 0 0 2.122 2.122zm10.344-8.222 1.06-1.06a1.5 1.5 0 0 0-2.12 0zm4.642 4.642-1.061 1.06a1.5 1.5 0 0 0 2.121 0zM33.638 27.82 34.7 26.76a1.5 1.5 0 0 0-2.121 0zm8.222 10.343a1.5 1.5 0 1 0 2.122-2.121zm-31.528 5.802 9.283-9.283-2.121-2.121-9.283 9.282zm7.162-9.283 4.64 4.641 2.122-2.121-4.641-4.641zm6.762 4.641L34.7 28.881l-2.121-2.121-10.443 10.443zm8.322-10.443 9.282 9.283 2.122-2.121-9.283-9.283zM13.913 10.755h23.206v-3H13.913zm28.668 5.462v23.207h3V16.217zM37.12 44.886H13.913v3h23.206zM8.451 39.424V16.217h-3v23.207zm5.462 5.462a5.46 5.46 0 0 1-5.462-5.462h-3a8.46 8.46 0 0 0 8.462 8.462zm28.668-5.462a5.46 5.46 0 0 1-5.462 5.462v3a8.46 8.46 0 0 0 8.462-8.462zM37.12 10.755a5.46 5.46 0 0 1 5.462 5.462h3a8.46 8.46 0 0 0-8.462-8.462zm-23.206-3a8.46 8.46 0 0 0-8.462 8.462h3a5.46 5.46 0 0 1 5.462-5.462zm5.462 11.943a1.98 1.98 0 0 1-1.981 1.981v3c2.75 0 4.98-2.23 4.98-4.98zm-1.981 1.981a1.98 1.98 0 0 1-1.981-1.98h-3c0 2.75 2.23 4.98 4.98 4.98zm-1.981-1.98c0-1.095.887-1.982 1.98-1.982v-3a4.98 4.98 0 0 0-4.98 4.981zm1.98-1.982a1.98 1.98 0 0 1 1.982 1.981h3c0-2.75-2.23-4.98-4.981-4.98z'
+    />
+    <circle cx={44.413} cy={9.587} r={9.283} fill='#BDB8BA' />
+    <rect width={1.857} height={9.283} x={43.485} y={4.946} fill='#F8F8F8' rx={0.928} />
+    <rect
+      width={1.857}
+      height={9.283}
+      x={39.772}
+      y={10.515}
+      fill='#F8F8F8'
+      rx={0.928}
+      transform='rotate(-90 39.772 10.515)'
+    />
+  </svg>
+);
+export default SvgIcPlusImageFinal;

src/assets/svg/IcUnselectedCalender.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+const SvgIcUnselectedCalender = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}>
+    <path
+      stroke='#ACA7A9'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.5}
+      d='M7.75 17.22v-.077m8.5-4.114v-.078M4.75 8.914h14M6.56 3v1.543M16.75 3v1.543m0 0h-10c-1.657 0-3 1.381-3 3.086v10.285c0 1.704 1.343 3.086 3 3.086h10c1.657 0 3-1.381 3-3.086V7.63c0-1.705-1.343-3.086-3-3.086m-9 8.485v-.077m8.5 4.27v-.078M12 17.22v-.077m0-4.115v-.077'
+    />
+  </svg>
+);
+export default SvgIcUnselectedCalender;

src/assets/svg/IcUnselectedClock.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+const SvgIcUnselectedClock = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}>
+    <path
+      fill='#ACA7A9'
+      d='M15.638 14.962a.75.75 0 0 0 .474-1.423zM12.5 13.125h-.75c0 .323.207.61.513.711zm.75-4.704a.75.75 0 0 0-1.5 0zm2.862 5.118-3.375-1.125-.474 1.422 3.375 1.125zm-2.862-.414V8.421h-1.5v4.704zM20.75 12a8.25 8.25 0 0 1-8.25 8.25v1.5c5.385 0 9.75-4.365 9.75-9.75zm-8.25 8.25A8.25 8.25 0 0 1 4.25 12h-1.5c0 5.385 4.365 9.75 9.75 9.75zM4.25 12a8.25 8.25 0 0 1 8.25-8.25v-1.5c-5.385 0-9.75 4.365-9.75 9.75zm8.25-8.25A8.25 8.25 0 0 1 20.75 12h1.5c0-5.385-4.365-9.75-9.75-9.75z'
+    />
+  </svg>
+);
+export default SvgIcUnselectedClock;

src/assets/svg/Logo.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgLogo = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 51 42' {...props}>

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

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

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 <S.Title>{title}</S.Title>;
+const Title = ({ title, userName }: TitleProps) => {
+  return (
+    <div style={{ display: 'flex', whiteSpace: 'nowrap' }}>
+      {userName && <S.Username>{userName}</S.Username>}
+      <S.Title>{title}</S.Title>
+    </div>
+  );
 };
 
 export default Title;

src/components/onboarding/step01/Step01.tsx

@@ -12,6 +12,7 @@ const NameInput = () => {
     inputValue.length + unicodeChars <= 10 ? setText(inputValue) : e.preventDefault();
   };
 
+  // TODO 인풋창에 x 버튼 추가 및 클릭 시 값 삭제
   return (
     <>
       <Title title='선물 받을 분의' />

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

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;

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

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

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

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

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

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