Merge branch 'develop' into feat/#436-share-link-second-qa

SWEET-DEVELOPERS · Feb 29, 2024 · 832f2cb · 832f2cb
2 parents 8cb2d46 + c663808
commit 832f2cb
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 23 deletions.
diff --git a/src/assets/svg/IcDown.tsx b/src/assets/svg/IcDown.tsx
@@ -2,7 +2,7 @@ import type { SVGProps } from 'react';
 const SvgIcDown = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 40 40' {...props}>
     <path
-      stroke='#FF2176'
+      stroke={props.stroke || '#FF2176'}
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.5}

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -41,9 +41,9 @@ const Footer = ({ customStyle }: FooterType) => {
         <LongDivider />
         <S.Text>Copyright 2024. Sweet. all rights reserved.</S.Text>
         <S.Icon>
-          <IcInstagram style={{ width: '2.8rem' }} onClick={InstaGram} />
+          <IcInstagram style={{ width: '2.8rem', marginRight: '0.4rem' }} onClick={InstaGram} />
 
-          <IcPalmspring style={{ width: '2.8rem' }} onClick={PamSpring} />
+          <IcPalmspring style={{ width: '2.8rem', marginLeft: '0.5rem' }} onClick={PamSpring} />
         </S.Icon>
       </S.TextWrapper>
     </S.FooterWrapper>

diff --git a/src/components/OnBoardingSteps/Step06/OnboardingFinalFooter.tsx b/src/components/OnBoardingSteps/Step06/OnboardingFinalFooter.tsx
@@ -6,13 +6,19 @@ import useClipboard from '../../../hooks/useCopyClip';
 interface OnboardingFinalFooterProps {
   invitationCode: string;
   roomId?: number;
-  onClick: () => void;
+  onClick: (invitationCode: string) => void;
   giftee?: string;
 }
 const OnboardingFinalFooter = (props: OnboardingFinalFooterProps) => {
   const { onClick, giftee, invitationCode } = props;
   const { handleCopyToClipboard } = useClipboard();
 
+  const handleClick = () => {
+    if (onClick) {
+      onClick(invitationCode);
+    }
+  };
+
   return (
     <OnboardingFinalFooterWrapper>
       <BtnFill
@@ -34,7 +40,7 @@ const OnboardingFinalFooter = (props: OnboardingFinalFooterProps) => {
       >
         공유하기
       </BtnFill>
-      <BtnFill customStyle={{ width: '16.4rem', background: '#FF2176' }} onClick={onClick}>
+      <BtnFill customStyle={{ width: '16.4rem', background: '#FF2176' }} onClick={handleClick}>
         입장하기
       </BtnFill>
     </OnboardingFinalFooterWrapper>

diff --git a/src/pages/LoginError/LoginError.style.ts b/src/pages/LoginError/LoginError.style.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { IcKakoLarge } from '../../assets/svg';
+import { IcKakaoSmall } from '../../assets/svg';
 
 export const LoginErrorWrapper = styled.div`
   ${({ theme: { mixin } }) => mixin.flexCenter({})};
@@ -20,7 +20,7 @@ export const SubInfoText = styled.p`
   margin-bottom: 2rem;
 `;
 
-export const KakaoLogin = styled(IcKakoLarge)`
+export const KakaoLogin = styled(IcKakaoSmall)`
   display: inline-flex;
-  padding: 1rem 3.6rem;
+  padding: 0 9.4rem;
 `;
diff --git a/src/pages/Participants/ParticipantsView.tsx b/src/pages/Participants/ParticipantsView.tsx
@@ -145,7 +145,7 @@ const ParticipantsView = () => {
             <OnboardingFinalFooter
               invitationCode={data.data.invitationCode}
               roomId={data.data.roomId}
-              onClick={() => handleClickRoom}
+              onClick={handleClickRoom}
               giftee={data.data.gifteeName}
             />
           ) : (

diff --git a/src/pages/Start/LogoHeader/LogoHeader.style.ts b/src/pages/Start/LogoHeader/LogoHeader.style.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const LogoHeaderWrapper = styled.div`
-  ${({ theme: { mixin } }) => mixin.flexBox({ justify: 'center' })};
+  ${({ theme: { mixin } }) => mixin.flexBox({ justify: 'center', align: 'center' })};
   position: fixed;
   width: 100%;
   height: 5.6rem;
@@ -13,13 +13,14 @@ export const LogoHeaderWrapper = styled.div`
 export const IconWrapper = styled.div`
   ${({ theme: { mixin } }) => mixin.flexBox({ align: 'center' })};
   width: 37.5rem;
+  height: 100%;
   gap: 21.2rem;
   padding: 0 2rem;
 `;
 
 export const UserProfileImg = styled.img`
   ${({ theme: { mixin } }) => mixin.flexBox({})};
-  width: 3rem;
-  height: 3rem;
-  border-radius: 9rem;
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 99rem;
 `;
diff --git a/src/pages/Start/Start.style.ts b/src/pages/Start/Start.style.ts
@@ -10,7 +10,7 @@ import {
 import BtnFill from '../../components/common/Button/Cta/fill/BtnFill';
 
 export const Wrapper = styled.div`
-  width: 37.5rem;
+  width: 100%;
   height: 100vh;
   background-repeat: no-repeat;
   ${({ theme: { mixin } }) => mixin.flexCenter({})};

diff --git a/src/pages/Start/Start.tsx b/src/pages/Start/Start.tsx
@@ -25,7 +25,7 @@ const Start = () => {
       <S.Main2 />
       <LottieAnimation
         animation={TournamentAnimation}
-        customStyle={{ position: 'absolute', top: '157.5rem', zIndex: '1' }}
+        customStyle={{ position: 'absolute', top: '160rem', zIndex: '1' }}
       />
       <S.Main3 />
       <StartStepAnimation />

diff --git a/src/pages/Start/StartAnimation/DownIconAnimation/StartDownIconAnimation.style.ts b/src/pages/Start/StartAnimation/DownIconAnimation/StartDownIconAnimation.style.ts
@@ -1,13 +1,28 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { IcDown } from '../../../../assets/svg';
 
 export const DownIconWrapper = styled.div`
-  display: flex;
+  ${({ theme: { mixin } }) => mixin.flexCenter({})};
+  position: relative;
 `;
 
-export const DownIcon = styled(IcDown)`
+const frameInAnimationUp = keyframes`
+  0% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+
+  100%{
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+`;
+
+export const DownIcon = styled(IcDown)<{ $isVisible: boolean }>`
   position: absolute;
   top: 4rem;
   width: 4rem;
   color: ${({ theme: { colors } }) => colors.G_07};
+  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)}; /* 스크롤에 따라 투명도 조절 */
+  animation: ${({ $isVisible }) => ($isVisible ? 'none' : frameInAnimationUp)} 2s forwards; /* isVisible에 따라 애니메이션 적용 */
 `;
diff --git a/src/pages/Start/StartAnimation/DownIconAnimation/StartDownIconAnimation.tsx b/src/pages/Start/StartAnimation/DownIconAnimation/StartDownIconAnimation.tsx
@@ -1,12 +1,24 @@
-import { ScrollAnimationUpContainer } from '../../../../components/ScrollAnimationContainer/ScrollAnimationContainerUp';
+import { useEffect, useState } from 'react';
 import * as S from './StartDownIconAnimation.style';
 
 const StartDownIconAnimation = () => {
+  const [isTop, setIsTop] = useState(true);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      setIsTop(scrollTop === 0);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
   return (
     <S.DownIconWrapper>
-      <ScrollAnimationUpContainer>
-        <S.DownIcon />
-      </ScrollAnimationUpContainer>
+      <S.DownIcon $isVisible={isTop} />
     </S.DownIconWrapper>
   );
 };

diff --git a/src/pages/Start/StartAnimation/GiftAnimation/StartGiftAnimation.style.ts b/src/pages/Start/StartAnimation/GiftAnimation/StartGiftAnimation.style.ts
@@ -13,7 +13,7 @@ export const ImgWrapper = styled.div`
   }
 `;
 export const TextWrapper = styled.div`
-  ${({ theme: { mixin } }) => mixin.flexCenter};
+  ${({ theme: { mixin } }) => mixin.flexCenter({})};
   position: absolutes;
   margin-top: -11rem;