[온보딩] STEP06 마지막 온보딩 뷰 구현

src/assets/svg/IcKakaoShare.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+const SvgIcKakaoShare = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 19' {...props}>
+    <path
+      fill='#000'
+      fillRule='evenodd'
+      d='M9 1.1c-4.97 0-9 3.113-9 6.952 0 2.388 1.558 4.493 3.932 5.745l-.999 3.648c-.088.322.28.579.563.392l4.377-2.889q.555.055 1.127.057c4.97 0 9-3.113 9-6.953C18 4.213 13.97 1.1 9 1.1'
+      clipRule='evenodd'
+    />
+  </svg>
+);
+export default SvgIcKakaoShare;

src/assets/svg/index.ts

@@ -21,6 +21,7 @@ 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 IcKakaoShare } from './IcKakaoShare';
 export { default as IcKakaoSmall } from './IcKakaoSmall';
 export { default as IcKakoLarge } from './IcKakoLarge';
 export { default as IcLeft } from './IcLeft';
@@ -36,7 +37,7 @@ 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';
 export { default as Logo } from './Logo';
 export { default as LogoSweet } from './LogoSweet';
+export { default as Logotype } from './Logotype';
 export { default as Vite } from './Vite';

src/components/common/title/Title.tsx

@@ -3,6 +3,7 @@ import * as S from './Title.style';
 interface TitleProps {
   title: string;
   userName?: string;
+  customStyle?: React.CSSProperties;
 }
 
 const Title = ({ title, userName }: TitleProps) => {

src/components/onboarding/step06/Step06.style.ts

@@ -0,0 +1,107 @@
+import styled from 'styled-components';
+import imageSample from './image_sample.png';
+
+export const Wrapper = styled.div`
+  ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'center' })}
+  width: 100%;
+  border-bottom: 0.1rem solid ${({ theme }) => theme.colors.G_02};
+  position: relative;
+  overflow: hidden;
+`;
+
+export const GradientImg = styled.div`
+  background-image: url(${imageSample});
+  background-size: cover;
+  background-blend-mode: overlay;
+  opacity: 0.7;
+  /* 이렇게 height를 의도적으로 주는 방법밖에 없나... 하 */
+  height: 36.5rem;
+  width: 100%;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
+    z-index: 1;
+  }
+`;
+
+export const TitleContainer = styled.div`
+  ${({ theme }) => theme.mixin.flexBox({ direction: 'column', align: 'flex-start' })}
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: white;
+  z-index: 999;
+  gap: 1.6rem;
+  margin-left: 2rem;
+`;
+
+export const InfoWrapper = styled.div`
+  ${({ theme }) =>
+    theme.mixin.inlineFlexBox({ direction: 'column', align: 'center', justify: 'center' })};
+  gap: 1.2rem;
+  width: 100%;
+  height: 12.8rem;
+  margin-top: 2.8rem;
+`;
+
+export const InfoDetailWrapper = styled.div`
+  ${({ theme }) =>
+    theme.mixin.flexBox({ direction: 'row', align: 'center', justify: 'space-between' })};
+  gap: 5rem;
+  width: 31.5rem;
+`;
+
+export const InfoTitle = styled.p`
+  color: ${({ theme }) => theme.colors.G_07};
+  ${({ theme }) => theme.fonts.body_10};
+`;
+
+export const InfoDetail = styled.p`
+  color: ${({ theme }) => theme.colors.black};
+  ${({ theme }) => theme.fonts.body_07};
+`;
+
+export const KakaoLinkCopyBtn = styled.button`
+  ${({ theme }) =>
+    theme.mixin.flexCenter({ direction: 'row', align: 'center', justify: 'center' })};
+  width: 16.3rem;
+  padding: 1.5rem 2.2rem 1.6rem 2.2rem;
+  gap: 1rem;
+
+  border-radius: 10rem;
+  border: none;
+  background: #fee500;
+  color: (0, 0, 0, 0.85);
+  ${({ theme }) => theme.fonts.body_09};
+`;
+
+export const BtnWrapper = styled.div`
+  ${({ theme }) =>
+    theme.mixin.flexCenter({ direction: 'row', align: 'center', justify: 'center' })};
+  gap: 1.2rem;
+  width: 100%;
+  margin-top: 1.7rem;
+`;
+
+export const LinkCopyBtn = styled.button`
+  ${({ theme }) =>
+    theme.mixin.flexCenter({ direction: 'row', align: 'center', justify: 'center' })};
+  width: 16.3rem;
+  padding: 1.5rem 2.2rem 1.6rem 2.2rem;
+  gap: 1rem;
+
+  border-radius: 10rem;
+  border: none;
+  background: ${({ theme }) => theme.colors.G_02};
+  color: (0, 0, 0, 0.85);
+  ${({ theme }) => theme.fonts.body_09};
+`;

src/components/onboarding/step06/Step06.tsx

@@ -0,0 +1,52 @@
+import Title from '../../common/title/Title';
+import BtnNext from '../../common/Button/Next/BtnNext';
+import * as S from './Step06.style';
+import { IcKakaoShare, IcLink } from '../../../assets/svg';
+
+const OnboardingFinal = () => {
+  // TODO 추후 이전 STEP에서 유저가 입력한 값으로 변경
+  const infoDetails = [
+    { title: '선물 받을 사람', detail: '가나다라마바사아자차님' },
+    { title: '선물 등록 마감', detail: '2023.12.29(금) 13시' },
+    { title: '토너먼트 진행 시간', detail: '6시간' },
+    { title: '선물 전달일', detail: '2023.12.31(일)' },
+  ];
+
+  return (
+    <>
+      <S.Wrapper>
+        <S.GradientImg>
+          <S.TitleContainer>
+            <div>
+              <Title userName='가나다라마사아자차' title='님을 위한' />
+              <Title title='선물 준비방이 개설됐어요' />
+            </div>
+            {/* TODO 추후 지민이 버튼으로 변경(항상 활성화) */}
+            <BtnNext customStyle={{ marginBottom: '1.6rem' }} disabled={false}>
+              입장
+            </BtnNext>
+          </S.TitleContainer>
+        </S.GradientImg>
+      </S.Wrapper>
+      <S.InfoWrapper>
+        {infoDetails.map((item, index) => (
+          <S.InfoDetailWrapper key={index}>
+            <S.InfoTitle>{item.title}</S.InfoTitle>
+            <S.InfoDetail>{item.detail}</S.InfoDetail>
+          </S.InfoDetailWrapper>
+        ))}
+      </S.InfoWrapper>
+      <S.BtnWrapper>
+        <S.LinkCopyBtn>
+          <IcLink style={{ width: '1.8rem', height: '1.8rem' }} />
+          링크 복사
+        </S.LinkCopyBtn>
+        <S.KakaoLinkCopyBtn>
+          <IcKakaoShare style={{ width: '1.8rem', height: '1.8rem' }} />
+          카카오톡 공유
+        </S.KakaoLinkCopyBtn>
+      </S.BtnWrapper>
+    </>
+  );
+};
+export default OnboardingFinal;

src/pages/OnBoardingPage.tsx

@@ -8,6 +8,7 @@ import ThumbnailInput from '../components/onboarding/step02/Step02';
 import GiftDelivery from '../components/onboarding/step03/Step03';
 import SetTournamentSchedule from '../components/onboarding/step04/Step04';
 import SetTournamentDuration from '../components/onboarding/step05/Step05';
+import OnboardingFinal from '../components/onboarding/step06/Step06';
 
 const OnBoardingPage = () => {
   const { Funnel, setStep } = useFunnel(ONBOARDING_FORM_STEP, ONBOARDING_FORM_STEP[0]);
@@ -16,19 +17,33 @@ const OnBoardingPage = () => {
     <OnBoardingPageWrapper>
       <Funnel>
         <Funnel.Step name='NAME'>
-          <NameInput onNext={() => setStep(() => 'THUMBNAIL')} />
+          <div style={{ margin: '2rem' }}>
+            <NameInput onNext={() => setStep(() => 'THUMBNAIL')} />
+          </div>
         </Funnel.Step>
+
         <Funnel.Step name='THUMBNAIL'>
-          <ThumbnailInput onNext={() => setStep(() => 'PRESENT')} />
+          <div style={{ margin: '2rem' }}>
+            <ThumbnailInput onNext={() => setStep(() => 'PRESENT')} />
+          </div>
         </Funnel.Step>
         <Funnel.Step name='PRESENT'>
-          <GiftDelivery onNext={() => setStep(() => 'TOURNAMENT_SCHEDULE_REGISTRATION')} />
+          <div style={{ margin: '2rem' }}>
+            <GiftDelivery onNext={() => setStep(() => 'TOURNAMENT_SCHEDULE_REGISTRATION')} />
+          </div>
         </Funnel.Step>
         <Funnel.Step name='TOURNAMENT_SCHEDULE_REGISTRATION'>
-          <SetTournamentSchedule onNext={() => setStep(() => 'TOURNAMENT_PROCEEDING')} />
+          <div style={{ margin: '2rem' }}>
+            <SetTournamentSchedule onNext={() => setStep(() => 'TOURNAMENT_PROCEEDING')} />
+          </div>
         </Funnel.Step>
         <Funnel.Step name='TOURNAMENT_PROCEEDING'>
-          <SetTournamentDuration onNext={() => setStep(() => 'GIFT_ROOM_FIX')} />
+          <div style={{ margin: '2rem' }}>
+            <SetTournamentDuration onNext={() => setStep(() => 'GIFT_ROOM_FIX')} />
+          </div>
+        </Funnel.Step>
+        <Funnel.Step name='GIFT_ROOM_FIX'>
+          <OnboardingFinal />
         </Funnel.Step>
       </Funnel>
     </OnBoardingPageWrapper>
@@ -38,5 +53,5 @@ const OnBoardingPage = () => {
 export default OnBoardingPage;
 
 const OnBoardingPageWrapper = styled.div`
-  margin: 2rem;
+  /* margin: 2rem; */
 `;