[시작페이지] style qa 진행

src/assets/svg/GradientCta.tsx

@@ -0,0 +1,26 @@
+import type { SVGProps } from 'react';
+const SvgGradientCta = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 375 92' {...props}>
+    <path
+      fill='url(#gradient_CTA_svg__a)'
+      d='M375 92h375v92H375z'
+      transform='rotate(-180 375 92)'
+    />
+    <defs>
+      <linearGradient
+        id='gradient_CTA_svg__a'
+        x1={562.5}
+        x2={562.5}
+        y1={92}
+        y2={184}
+        gradientUnits='userSpaceOnUse'
+      >
+        <stop stopColor='#fff' />
+        <stop offset={0.23} stopColor='#fff' />
+        <stop offset={0.63} stopColor='#fff' stopOpacity={0.7} />
+        <stop offset={1} stopColor='#fff' stopOpacity={0} />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+export default SvgGradientCta;

src/assets/svg/IcHome.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+const SvgIcHome = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 40 40' {...props}>
+    <path
+      stroke='#868384'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.5}
+      d='M11 18.07a2 2 0 0 1 .89-1.664l7-4.666a2 2 0 0 1 2.22 0l7 4.666A2 2 0 0 1 29 18.07v9.53a1.4 1.4 0 0 1-1.4 1.4h-4.1a1 1 0 0 1-1-1v-4.5a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1V28a1 1 0 0 1-1 1h-4.1a1.4 1.4 0 0 1-1.4-1.4z'
+    />
+  </svg>
+);
+export default SvgIcHome;

src/assets/svg/IcMypage.tsx → src/assets/svg/IcProfile.tsx

@@ -1,17 +1,17 @@
 import type { SVGProps } from 'react';
-const SvgIcMypage = (props: SVGProps<SVGSVGElement>) => (
+const SvgIcProfile = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 40 40' {...props}>
     <path
-      stroke='#ACA7A9'
+      stroke='#868384'
       strokeLinecap='round'
       strokeWidth={1.5}
       d='M24 16a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z'
     />
     <path
-      stroke='#ACA7A9'
+      stroke='#868384'
       strokeWidth={1.5}
       d='M12 28.4a5.4 5.4 0 0 1 5.4-5.4h5.2a5.4 5.4 0 0 1 5.4 5.4.6.6 0 0 1-.6.6H12.6a.6.6 0 0 1-.6-.6Z'
     />
   </svg>
 );
-export default SvgIcMypage;
+export default SvgIcProfile;

src/assets/svg/Main02.tsx

@@ -1,7 +1,7 @@
 import type { SVGProps } from 'react';
 const SvgMain02 = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width='37.5rem'
+    width='100%'
     xmlns='http://www.w3.org/2000/svg'
     xmlnsXlink='http://www.w3.org/1999/xlink'
     fill='none'

src/assets/svg/index.ts

@@ -1,10 +1,14 @@
-export { default as IcHome2 } from './IcHome2';
-export { default as IcMypage } from './IcMypage';
+export { default as GradientCta } from './GradientCta';
+export { default as HomeBackground } from './HomeBackground';
+export { default as Step1 } from './Step1';
+export { default as Step2 } from './Step2';
+export { default as Step3 } from './Step3';
+export { default as IcHome } from './IcHome';
+export { default as IcProfile } from './IcProfile';
 export { default as Svg3Dicons } from './3Dicons';
 export { default as Divider } from './Divider';
 export { default as Favicon } from './Favicon';
 export { default as HomeBgGradientFix } from './HomeBgGradientFix';
-export { default as HomeCtaBgGradient } from './HomeCtaBgGradient';
 export { default as IcAdd } from './IcAdd';
 export { default as IcAlertCircle } from './IcAlertCircle';
 export { default as IcAlertSquare } from './IcAlertSquare';
@@ -69,9 +73,9 @@ export { default as Logo } from './Logo';
 export { default as Logotype } from './Logotype';
 export { default as LogoSweet } from './LogoSweet';
 export { default as LongDivider } from './LongDivider';
-export { default as Main02 } from './Main02';
 export { default as Main03 } from './Main03';
 export { default as Main04 } from './Main04';
+export { default as Main02 } from './Main02';
 export { default as MypageImage } from './MypageImage';
 export { default as Person1 } from './Person1';
 export { default as Person2 } from './Person2';

src/components/HomeMypageHeader/HomeMypageHeader.tsx

@@ -1,4 +1,4 @@
-import { IcMypage, IcHome2 } from '../../assets/svg';
+import { IcProfile, IcHome } from '../../assets/svg';
 import { useNavigate } from 'react-router';
 import * as S from './HomeMypageHeader.style';
 
@@ -15,11 +15,11 @@ const HomeMypageHeader = () => {
 
   return (
     <S.HomeMypageHeaderWrapper>
-      <IcHome2 style={{ width: '2.4rem' }} onClick={handleSettingHomeIcon} />
+      <IcHome style={{ width: '2.4rem' }} onClick={handleSettingHomeIcon} />
       {userImg ? (
         <S.UserProfileImg src={userImg} onClick={handleMyPageIcon} />
       ) : (
-        <IcMypage style={{ width: '4.3rem' }} onClick={handleMyPageIcon} />
+        <IcProfile style={{ width: '4.3rem' }} onClick={handleMyPageIcon} />
       )}
     </S.HomeMypageHeaderWrapper>
   );

src/components/ScrollAnimationContainer/ScrollAnimation.style.ts

@@ -3,23 +3,13 @@ import styled, { keyframes } from 'styled-components';
 const frameInAnimation = keyframes`
   0% {
     opacity: 0;
-    transform: translateX(-100%);
-  }
-
-  100%{
-    opacity: 1;
-    transform: translateX(-5%);
+    transform: translateX(-1rem);
   }
 `;
 const frameInAnimationLeft = keyframes`
   0% {
     opacity: 0;
-    transform: translateX(100%);
-  }
-
-  100%{
-    opacity: 1;
-    transform: translate(25%);
+    transform: translateX(1.5rem);
   }
 `;
 const frameInAnimationUp = keyframes`
@@ -37,28 +27,23 @@ const frameInAnimationUp = keyframes`
 export const Container = styled.div`
   ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column' })};
   max-width: 37.5rem;
-  margin: 2.4rem;
 
   &.frame-in {
     animation: ${frameInAnimation} 2s forwards;
   }
 `;
 
 export const LeftContainer = styled.div`
-  ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column' })};
+  ${({ theme: { mixin } }) => mixin.flexBox({ justify: 'flex-end' })};
   max-width: 37.5rem;
-  margin-top: 4.9rem;
 
   &.frame-in {
     animation: ${frameInAnimationLeft} 2s forwards;
   }
 `;
 
 export const UpContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  ${({ theme: { mixin } }) => mixin.flexCenter({})};
 
   &.frame-in {
     animation: ${frameInAnimationUp} 2s forwards;

src/pages/Start/LogoHeader/LogoHeader.style.ts

@@ -1,15 +1,20 @@
 import styled from 'styled-components';
 
 export const LogoHeaderWrapper = styled.div`
-  ${({ theme: { mixin } }) => mixin.flexBox({ align: 'center' })};
+  ${({ theme: { mixin } }) => mixin.flexBox({ justify: 'center' })};
   position: fixed;
   width: 100%;
-  padding: 0 2rem;
   height: 5.6rem;
-  gap: 21.2rem;
   z-index: 999;
   top: 0rem;
-  background-color: #fafafa;
+  background-color: white;
+`;
+
+export const IconWrapper = styled.div`
+  ${({ theme: { mixin } }) => mixin.flexBox({ align: 'center' })};
+  width: 37.5rem;
+  gap: 21.2rem;
+  padding: 0 2rem;
 `;
 
 export const UserProfileImg = styled.img`

src/pages/Start/LogoHeader/LogoHeader.tsx

@@ -1,4 +1,4 @@
-import { IcMypage, SweetLogoPink } from '../../../assets/svg';
+import { IcProfile, SweetLogoPink } from '../../../assets/svg';
 import { useNavigate } from 'react-router';
 import * as S from './LogoHeader.style';
 
@@ -12,13 +12,15 @@ const LogoHeader = () => {
 
   return (
     <S.LogoHeaderWrapper>
-      <SweetLogoPink style={{ width: '9.9rem' }} />
+      <S.IconWrapper>
+        <SweetLogoPink style={{ width: '9.9rem' }} />
 
-      {userImg ? (
-        <S.UserProfileImg src={userImg} onClick={handleMyPageIcon} />
-      ) : (
-        <IcMypage style={{ width: '4.8rem' }} onClick={handleMyPageIcon} />
-      )}
+        {userImg ? (
+          <S.UserProfileImg src={userImg} onClick={handleMyPageIcon} />
+        ) : (
+          <IcProfile style={{ width: '4.8rem' }} onClick={handleMyPageIcon} />
+        )}
+      </S.IconWrapper>
     </S.LogoHeaderWrapper>
   );
 };

src/pages/Start/Start.style.ts

@@ -1,33 +1,30 @@
 import styled from 'styled-components';
-import HomeBg from '../../assets/img/home_bg11.png';
 import {
+  HomeBackground,
   HomeBgGradientFix,
-  HomeCtaBgGradient,
-  IcDown,
+  GradientCta,
   Main02,
   Main03,
   Main04,
 } from '../../assets/svg';
 import BtnFill from '../../components/common/Button/Cta/fill/BtnFill';
 
 export const Wrapper = styled.div`
-  background-image: url(${HomeBg});
-  background-size: cover;
-  width: 100%;
+  width: 37.5rem;
   height: 100vh;
   background-repeat: no-repeat;
   ${({ theme: { mixin } }) => mixin.flexCenter({})};
-  margin: auto;
-  background-color: #fafafa;
+  margin: auto 0;
 `;
 
 export const Gradient = styled(HomeBgGradientFix)`
   position: absolute;
-  top: 55rem;
+  top: 54rem;
   z-index: 2;
+  width: 100%;
 `;
 
-export const BtnGradient = styled(HomeCtaBgGradient)`
+export const BtnGradient = styled(GradientCta)`
   position: fixed;
   z-index: 2;
   bottom: 0;
@@ -40,9 +37,13 @@ export const BtnFillStyle = styled(BtnFill)`
   margin: 2rem;
 `;
 
+export const Main1 = styled(HomeBackground)`
+  position: absolute;
+`;
+
 export const Main2 = styled(Main02)`
   position: absolute;
-  top: 62rem;
+  top: 61rem;
 `;
 
 export const Main3 = styled(Main03)`
@@ -54,10 +55,3 @@ export const Main4 = styled(Main04)`
   position: absolute;
   top: 211rem;
 `;
-
-export const DownIcon = styled(IcDown)`
-  position: absolute;
-  top: 53rem;
-  width: 4rem;
-  color: ${({ theme: { colors } }) => colors.G_07};
-`;