diff --git a/package.json b/package.json index f51ae401..e4f3c5d9 100644 --- a/package.json +++ b/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", diff --git a/src/Router.tsx b/src/Router.tsx index 9c43e9c5..431b540b 100644 --- a/src/Router.tsx +++ b/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 ( - } /> - }> + } /> + } /> } /> } /> } /> diff --git a/src/Splash/component/Body/Body.style.ts b/src/Splash/component/Body/Body.style.ts new file mode 100644 index 00000000..aab980ed --- /dev/null +++ b/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}; +`; diff --git a/src/Splash/component/Body/index.tsx b/src/Splash/component/Body/index.tsx new file mode 100644 index 00000000..8319e3b3 --- /dev/null +++ b/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 ( + + {/* */} + + + 지금까지 {noteNum}개의 + 포스트잇이 붙여졌어요! + + + ); +} + +export default Body; diff --git a/src/Splash/component/Bottom/Bottom.style.ts b/src/Splash/component/Bottom/Bottom.style.ts new file mode 100644 index 00000000..069bc50a --- /dev/null +++ b/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}; +`; diff --git a/src/Splash/component/Bottom/index.tsx b/src/Splash/component/Bottom/index.tsx new file mode 100644 index 00000000..8021866e --- /dev/null +++ b/src/Splash/component/Bottom/index.tsx @@ -0,0 +1,7 @@ +import * as S from './Bottom.style'; + +function Bottom() { + return 시작하기; +} + +export default Bottom; diff --git a/src/Splash/component/Header/Header.style.ts b/src/Splash/component/Header/Header.style.ts new file mode 100644 index 00000000..e055de6d --- /dev/null +++ b/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; +`; diff --git a/src/Splash/component/Header/index.tsx b/src/Splash/component/Header/index.tsx new file mode 100644 index 00000000..d9c5e060 --- /dev/null +++ b/src/Splash/component/Header/index.tsx @@ -0,0 +1,14 @@ +import { ImgSplashLogo } from '../../../assets'; +import * as S from './Header.style'; + +function Header() { + return ( + + + + + + ); +} + +export default Header; diff --git a/src/Splash/page/SplashPage/SplashPage.style.ts b/src/Splash/page/SplashPage/SplashPage.style.ts new file mode 100644 index 00000000..36038c42 --- /dev/null +++ b/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; +`; diff --git a/src/Splash/page/SplashPage/index.tsx b/src/Splash/page/SplashPage/index.tsx new file mode 100644 index 00000000..6fb0a1f8 --- /dev/null +++ b/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 ( + +
+ + + + ); +} + +export default SplashPage; diff --git a/src/assets/img/img_splash_logo.svg b/src/assets/img/img_splash_logo.svg new file mode 100644 index 00000000..2987e398 --- /dev/null +++ b/src/assets/img/img_splash_logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/index.ts b/src/assets/index.ts index 5aa0ae1a..f5968f3a 100644 --- a/src/assets/index.ts +++ b/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, }; diff --git a/yarn.lock b/yarn.lock index 2a6aa08e..2a0abfc3 100644 --- a/yarn.lock +++ b/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"