Merge pull request #77 from Team-Lecue/feature/Splash

Merge Feature/splash into develop

package.json

@@ -14,6 +14,7 @@
     "@emotion/styled": "^11.11.0",
     "axios": "^1.6.5",
     "eslint-plugin-react": "^7.33.2",
+    "lottie-react": "^2.4.0",
     "postcss": "^8.4.33",
     "postcss-styled-syntax": "^0.6.3",
     "prettier": "^3.1.1",

src/Router.tsx

@@ -2,16 +2,16 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import DetailPage from './Detail/page/DetailPage';
 import HealthTest from './HealthTest';
-import HomePage from './Home/page/HomePage';
 import Login from './Login/page';
+import SplashPage from './Splash/page/SplashPage';
 import StickerPack from './StickerPack/page/StickerPack';
 
 function Router() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/login" element={<Login />}></Route>
+        <Route path="/" element={<SplashPage />} />
+        <Route path="/login" element={<Login />} />
         <Route path="/sticker-pack" element={<StickerPack />} />
         <Route path="/detail" element={<DetailPage />} />
         <Route path="/test" element={<HealthTest />} />

src/Splash/component/Body/Body.style.ts

@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+
+export const BodyWrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100vw;
+  height: calc(100dvh - 24.2rem);
+  margin-bottom: 5rem;
+
+  gap: 2rem;
+`;
+
+export const LottieWrapper = styled.article`
+  width: 100%;
+  height: 100%;
+`;
+
+export const TextWrapper = styled.article`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
+export const Text = styled.p`
+  ${({ theme }) => theme.fonts.Title2_M_16};
+`;

src/Splash/component/Body/index.tsx

@@ -0,0 +1,20 @@
+// import Lottie from 'lottie-react'
+
+import * as S from './Body.style';
+
+function Body() {
+  const noteNum = 30;
+
+  return (
+    <S.BodyWrapper>
+      <S.LottieWrapper>{/* <Lottie animationData={}/> */}</S.LottieWrapper>
+
+      <S.TextWrapper>
+        <S.Text>지금까지 {noteNum}개의</S.Text>
+        <S.Text>포스트잇이 붙여졌어요!</S.Text>
+      </S.TextWrapper>
+    </S.BodyWrapper>
+  );
+}
+
+export default Body;

src/Splash/component/Bottom/Bottom.style.ts

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+export const BottomWrapper = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: calc(100% - 3rem);
+  padding: 1.7rem 0;
+
+  border-radius: 1rem;
+  background-color: ${({ theme }) => theme.colors.BG};
+  ${({ theme }) => theme.fonts.Head2_SB_18};
+  color: ${({ theme }) => theme.colors.white};
+`;

src/Splash/component/Bottom/index.tsx

@@ -0,0 +1,7 @@
+import * as S from './Bottom.style';
+
+function Bottom() {
+  return <S.BottomWrapper type="button">시작하기</S.BottomWrapper>;
+}
+
+export default Bottom;

src/Splash/component/Header/Header.style.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+export const Header = styled.header`
+  display: flex;
+  justify-content: left;
+
+  width: 100vw;
+`;
+
+export const Wrapper = styled.div`
+  margin-bottom: 0.8rem;
+  margin-left: 1.8rem;
+`;

src/Splash/component/Header/index.tsx

@@ -0,0 +1,14 @@
+import { ImgSplashLogo } from '../../../assets';
+import * as S from './Header.style';
+
+function Header() {
+  return (
+    <S.Header>
+      <S.Wrapper>
+        <ImgSplashLogo />
+      </S.Wrapper>
+    </S.Header>
+  );
+}
+
+export default Header;

src/Splash/page/SplashPage/SplashPage.style.ts

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100vw;
+  height: 100dvh;
+
+  margin: 3rem 0 2rem;
+`;

src/Splash/page/SplashPage/index.tsx

@@ -0,0 +1,16 @@
+import Body from '../../component/Body';
+import Bottom from '../../component/Bottom';
+import Header from '../../component/Header';
+import * as S from './SplashPage.style'
+
+function SplashPage() {
+  return (
+    <S.Wrapper>
+      <Header />
+      <Body />
+      <Bottom />
+    </S.Wrapper>
+  );
+}
+
+export default SplashPage;

src/assets/index.ts

@@ -27,6 +27,7 @@ import ImgKakaoStarOrange from './img/img_kakao_star_orange.svg?react';
 import ImgKakaoStarWhite from './img/img_kakao_star_white.svg?react';
 import ImgLe from './img/img_le.svg?react';
 import ImgLogoLecue from './img/img_logo_lecue.svg?react';
+import ImgSplashLogo from './img/img_splash_logo.svg?react';
 import ImgStarOrangeLine from './img/img_star_orangeline.svg?react';
 import ImgStarPosit from './img/img_star_postit.svg?react';
 import ImgSticker from './img/img_sticker.svg?react';
@@ -62,4 +63,5 @@ export {
   ImgStarOrangeLine,
   ImgStarPosit,
   ImgSticker,
+  ImgSplashLogo,
 };

yarn.lock

@@ -2397,6 +2397,18 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-react@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lottie-react/-/lottie-react-2.4.0.tgz#f7249eee2b1deee70457a2d142194fdf2456e4bd"
+  integrity sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==
+  dependencies:
+    lottie-web "^5.10.2"
+
+lottie-web@^5.10.2:
+  version "5.12.2"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
+  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==
+
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"