Pull Request - Branch Landing: change back to top button

src/components/Landing/LandingPart-1/index.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import BackToTop from '../../../images/BackToTop.gif';
 
 import LoginModal from '../../Common/LoginModal';
 import Modal from '../../Common/Modal';
@@ -12,6 +11,8 @@ import {
 	ContentsWrapper,
 	BackToTopButton,
 	Dimed,
+	BackToTopButtonWrapper,
+	BackToTopIcon,
 } from './styles';
 
 const LandingFirst = (): JSX.Element => {
@@ -38,7 +39,7 @@ const LandingFirst = (): JSX.Element => {
 				}}
 			>
 				<Dimed>
-					<BackToTopButton
+					<BackToTopButtonWrapper
 						style={{
 							opacity: `${scrollPosition > 100 ? `1` : `0`}`,
 							color: `${
@@ -58,9 +59,11 @@ const LandingFirst = (): JSX.Element => {
 							}
 						}}
 					>
-						<img src={BackToTop} />
+						<BackToTopButton>
+							<BackToTopIcon />
+						</BackToTopButton>
 						<p>맨위로</p>
-					</BackToTopButton>
+					</BackToTopButtonWrapper>
 					<ContentsWrapper>
 						<MainMessage>토이 프로젝트의 에센셜</MainMessage>
 						<SubMessage>동료와 작업공간을 한 곳에서 만나보세요</SubMessage>

src/components/Landing/LandingPart-1/styles.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { IoIosArrowUp } from 'react-icons/io';
 
 export const LandingFirstContainer = styled.div`
 	${({ theme }) => theme.align.flexCenter};
@@ -65,8 +66,10 @@ export const FreeExpButton = styled.div`
 
 // ----------------TODO: 맨 위로 가기 버튼----------------
 
-export const BackToTopButton = styled.button`
+export const BackToTopButtonWrapper = styled.div`
 	cursor: pointer;
+	${({ theme }) => theme.align.flexCenter};
+	flex-direction: column;
 	position: fixed;
 	right: 2vw;
 	bottom: 4vh;
@@ -80,8 +83,20 @@ export const BackToTopButton = styled.button`
 	}
 
 	& > p {
-		margin-top: -8px;
+		margin-top: 2px;
 		font-family: NanumSquareB;
 		font-size: 14px;
 	}
 `;
+
+export const BackToTopButton = styled.div`
+	${({ theme }) => theme.align.flexCenter};
+	padding: 4px;
+	color: white;
+	background-color: rgba(0, 0, 0, 0.3);
+	border-radius: 3px;
+`;
+
+export const BackToTopIcon = styled(IoIosArrowUp)`
+	font-size: 20px;
+`;