[Fix] - 6차 데모데이 1차 QA(리버) (#581)

* style(Icon): 가운데 정렬 추가

* style(FourthPage): 제목 줄바꿈 방지 설정 추가

* feat(LandingPage): TopButton 추가

---------

Co-authored-by: 손진영 <[email protected]>

frontend/src/components/common/Icon/Icon.styled.ts

@@ -2,6 +2,8 @@ import styled from "@emotion/styled";
 
 export const Wrapper = styled.div<{ size: string }>`
   display: flex;
+  justify-content: center;
   align-items: center;
+  width: ${({ size }) => size}px;
   height: ${({ size }) => size}px;
 `;

frontend/src/components/common/TopButton/TopButton.styled.ts

@@ -0,0 +1,26 @@
+import styled from "@emotion/styled";
+
+export const FloatingButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  position: fixed;
+  right: max(0vw + 2rem, calc(50vw - 22rem));
+  bottom: 2rem;
+  z-index: ${({ theme }) => theme.zIndex.floating};
+`;
+
+export const MainButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 6rem;
+  height: 6rem;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+
+  background-color: ${({ theme }) => theme.colors.primary};
+
+  cursor: pointer;
+`;

frontend/src/components/common/TopButton/TopButton.tsx

@@ -0,0 +1,29 @@
+import IconButton from "@components/common/IconButton/IconButton";
+
+import { PRIMITIVE_COLORS } from "@styles/tokens";
+
+import * as S from "./TopButton.styled";
+
+const TopButton = () => {
+  const handleScrollTop = () => {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: "smooth",
+    });
+  };
+  return (
+    <S.FloatingButtonContainer onClick={handleScrollTop}>
+      <S.MainButtonWrapper>
+        <IconButton
+          iconType="up-arrow"
+          color={PRIMITIVE_COLORS.white}
+          size="20"
+          title="여행 계획 및 여행기 작성 메뉴"
+        />
+      </S.MainButtonWrapper>
+    </S.FloatingButtonContainer>
+  );
+};
+
+export default TopButton;

frontend/src/components/pages/landing/FourthPage/FourthPage.styled.ts

@@ -19,6 +19,7 @@ export const largeText = css`
 
 export const titleStyle = css`
   text-align: center;
+  word-break: keep-all;
 `;
 
 export const subtitleStyle = css`

frontend/src/components/pages/landing/LandingPage.tsx

@@ -1,3 +1,5 @@
+import TopButton from "@components/common/TopButton/TopButton";
+
 import FirstPage from "./FirstPage/FirstPage";
 import FourthPage from "./FourthPage/FourthPage";
 import * as S from "./LandingPage.styled";
@@ -20,6 +22,7 @@ const LandingPage = () => {
       </S.PageWrapper>
       <ThirdPage />
       <FourthPage />
+      <TopButton />
     </S.Layout>
   );
 };