#6 [Style] SaveComplete page PC, Mobile UI

src/AppRouter.js

@@ -1,7 +1,15 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { Login, Main, Save, Vote, MyPage, SaveRecord } from 'pages';
+import {
+  Login,
+  Main,
+  Save,
+  Vote,
+  MyPage,
+  SaveRecord,
+  SaveComplete,
+} from 'pages';
 
 function AppRouter() {
   return (
@@ -14,6 +22,7 @@ function AppRouter() {
         {/* 추후 로그인 여부 확인 로직 필요 */}
 
         <Route path="/save" element={<Save />} />
+        <Route path="/complete" element={<SaveComplete />} />
         <Route path="/vote" element={<Vote />} />
         <Route path="/mypage" element={<MyPage />} />
         <Route path="/mypage/save/:date" element={<SaveRecord />} />

src/pages/Save/SaveComplete/index.js

@@ -0,0 +1,33 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import { SaveBear, WhiteClose } from 'assets';
+import {
+  StyledRoot,
+  MainText,
+  ImgBox,
+  HomeButton,
+  Text,
+  ExitButton,
+  ButtonBox,
+} from './style';
+
+function SaveComplete() {
+  return (
+    <StyledRoot>
+      <ButtonBox>
+        <button type="button">
+          <ExitButton src={WhiteClose} alt="창 닫기 버튼" />
+        </button>
+      </ButtonBox>
+      <MainText>날씨 기록이 저장되었어요</MainText>
+      <ImgBox>
+        <img src={SaveBear} alt="저장하는 곰돌이 이미지" />
+      </ImgBox>
+      <HomeButton>
+        <Text>홈으로 돌아가기</Text>
+      </HomeButton>
+    </StyledRoot>
+  );
+}
+
+export default SaveComplete;

src/pages/Save/SaveComplete/style.js

@@ -0,0 +1,103 @@
+/* eslint-disable import/no-unresolved */
+import styled from 'styled-components';
+import { applyMediaQuery } from 'styles/mediaQuery';
+
+const StyledRoot = styled.div`
+  width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: ${({ theme: { color } }) => color.greenDarker};
+`;
+
+const ButtonBox = styled.div`
+  ${applyMediaQuery('mobile')} {
+    button {
+      margin-bottom: 3rem;
+      margin-left: 37rem;
+    }
+  }
+`;
+
+const ExitButton = styled.img`
+  ${applyMediaQuery('desktop')} {
+    display: none;
+  }
+
+  ${applyMediaQuery('mobile')} {
+    width: 3rem;
+    height: 3rem;
+  }
+`;
+
+const MainText = styled.p`
+  font-family: 'Cafe24Ssurround';
+  font-size: ${({ theme: { font } }) => font.size.large};
+  color: ${({ theme: { color } }) => color.white};
+  /* margin-top: 7rem; */
+  margin-bottom: 5rem;
+
+  ${applyMediaQuery('mobile')} {
+    font-size: ${({ theme: { font } }) => font.size.semiLarge};
+    margin-bottom: 4rem;
+  }
+`;
+
+const ImgBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40rem;
+  height: 40rem;
+  background-color: ${({ theme: { color } }) => color.white};
+  border-radius: 0.6rem;
+  margin: 0rem;
+
+  img {
+    width: 92%;
+    height: 92%;
+  }
+
+  ${applyMediaQuery('mobile')} {
+    width: 40rem;
+    height: 40rem;
+  }
+`;
+
+const HomeButton = styled.button`
+  width: 20rem;
+  height: 5rem;
+  margin-top: 5rem;
+  border-radius: 0.6rem;
+  background-color: ${({ theme: { color } }) => color.white};
+
+  ${applyMediaQuery('mobile')} {
+    margin-top: 3rem;
+    width: 40rem;
+    height: 5rem;
+  }
+`;
+
+const Text = styled.p`
+  font-family: 'Cafe24Ssurround';
+  font-size: ${({ theme: { font } }) => font.size.small};
+  color: ${({ theme: { color } }) => color.greenDarker};
+
+  ${applyMediaQuery('mobile')} {
+    font-family: 'Noto';
+    font-size: ${({ theme: { font } }) => font.size.small};
+    font-weight: ${({ theme: { font } }) => font.weight.bold};
+  }
+`;
+
+export {
+  StyledRoot,
+  ButtonBox,
+  ExitButton,
+  MainText,
+  ImgBox,
+  HomeButton,
+  Text,
+};

src/pages/index.js

@@ -2,5 +2,6 @@ export { default as Login } from './Login';
 export { default as Main } from './Main';
 export { default as MyPage } from './MyPage';
 export { default as Save } from './Save';
+export { default as SaveComplete } from './Save/SaveComplete';
 export { default as Vote } from './Vote';
 export { default as SaveRecord } from './SaveRecord';