chore: 로띠 라이브러리 import 방법 변경, welcom로띠 우선 제거

src/components/commons/Loading.tsx

@@ -1,14 +1,18 @@
-import { useEffect, useRef } from 'react';
-import Lottie from 'lottie-web';
 import styled from '@emotion/styled';
+import { useEffect, useRef } from 'react';
+
+import * as lottie from 'lottie-web/build/player/lottie_light';
 import SpinnerJson from '../../assets/lottie/spinner.json';
 
+type LottiePlayer = typeof lottie.default;
+const lottiePlayer = lottie as any as LottiePlayer;
+
 const Loading = () => {
   //lottie
   const likecontainer = useRef<HTMLDivElement>(null!);
   useEffect(() => {
     if (likecontainer.current !== null) {
-      const animation = Lottie.loadAnimation({
+      const animation = lottiePlayer.loadAnimation({
         container: likecontainer.current,
         renderer: 'svg',
         loop: true,

src/pages/join/JoinPage.tsx

@@ -1,15 +1,14 @@
 import { BigMainLogoIc } from '@assets/svgs';
 import styled from '@emotion/styled';
 import JoinButton from '@pages/join/components/Button';
-import Welcome from '@pages/join/components/Welcome';
-import { Gap } from '@pages/login/SignupPage';
+// import Welcome from '@pages/join/components/Welcome';
 import googleLogin from '@pages/login/utils/googleLogin';
 import { JoinBgImgSvg } from '@assets/svgs';
 
 const JoinPage = () => {
   return (
     <>
-      <Welcome />
+      {/* <Welcome /> */}
       <JoinBgImgSvgIcon />
       <Wrapper>
         <BigMainLogoIcon />
@@ -118,3 +117,7 @@ const Underline = styled.hr`
   margin-top: -1px;
   border: 0.5px solid;
 `;
+
+const Gap = styled.div`
+  flex-grow: 1;
+`;

src/pages/join/components/Welcome.tsx

@@ -1,13 +1,17 @@
 import styled from '@emotion/styled';
-import Lottie from 'lottie-web';
 import { useRef, useEffect } from 'react';
+
+import * as lottie from 'lottie-web/build/player/lottie_light';
 import WelcomeJson from '@assets/lottie/welcome.json';
 
+type LottiePlayer = typeof lottie.default;
+const lottiePlayer = lottie as any as LottiePlayer;
+
 const Welcome = () => {
   const likecontainer = useRef<HTMLDivElement>(null!);
   useEffect(() => {
     if (likecontainer.current !== null) {
-      const animation = Lottie.loadAnimation({
+      const animation = lottiePlayer.loadAnimation({
         container: likecontainer.current,
         renderer: 'svg',
         loop: true,

src/pages/login/SignupPage.tsx

@@ -61,10 +61,6 @@ const SignUpContainer = styled.div`
   padding: 6rem 2rem 3.6rem;
 `;
 
-export const Gap = styled.div`
-  flex-grow: 1;
-`;
-
 const JoinSbBgSvgIcon = styled(JoinSbBgSvg)`
   position: fixed;