From dc83ef722150385de8dd7ada30b7cc8cd55174c1 Mon Sep 17 00:00:00 2001 From: seoAreum <1971236@hansung.ac.kr> Date: Tue, 9 Jan 2024 21:41:17 +0900 Subject: [PATCH 01/12] =?UTF-8?q?style:=20=EB=A1=9C=EA=B3=A0=20img=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/img_splash_logo.svg | 10 ++++++++++ src/assets/index.ts | 2 ++ yarn.lock | 12 ++++++++++++ 3 files changed, 24 insertions(+) create mode 100644 src/assets/img/img_splash_logo.svg 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 ecbc85f6..818ff166 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -15,6 +15,7 @@ import IcSharing from './icon/ic_sharing.svg?react'; import ImgBook from './img/img_book.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'; @@ -38,4 +39,5 @@ export { ImgStarPosit, ImgStarOrangeLine, 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" From 152a66de33b997f7dcb91084c03d018eee1d4337 Mon Sep 17 00:00:00 2001 From: seoAreum <1971236@hansung.ac.kr> Date: Tue, 9 Jan 2024 21:41:39 +0900 Subject: [PATCH 02/12] =?UTF-8?q?chore:=20lottie-react=20=EC=84=AA?= =?UTF-8?q?=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index c6d16e90..d85788ef 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", From d120b6211d6b839ec4457b57072910d16a80bd43 Mon Sep 17 00:00:00 2001 From: seoAreum <1971236@hansung.ac.kr> Date: Tue, 9 Jan 2024 21:42:14 +0900 Subject: [PATCH 03/12] =?UTF-8?q?feat:=20=EC=8A=A4=ED=94=8C=EB=9E=98?= =?UTF-8?q?=EC=8B=9C=EB=B7=B0=20=ED=97=A4=EB=8D=94=20=ED=8D=BC=EB=B8=94?= =?UTF-8?q?=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Splash/component/Bottom/index.tsx | 16 ++++++++++++++++ src/Splash/component/Header/Header.style.ts | 12 ++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 src/Splash/component/Bottom/index.tsx create mode 100644 src/Splash/component/Header/Header.style.ts diff --git a/src/Splash/component/Bottom/index.tsx b/src/Splash/component/Bottom/index.tsx new file mode 100644 index 00000000..2b2b3ac4 --- /dev/null +++ b/src/Splash/component/Bottom/index.tsx @@ -0,0 +1,16 @@ +import * as S from './Bottom.style'; + +function Bottom() { + return ( + + + 지금까지 120개의 + 포스트잇이 붙여졌어요! + + + 시작하기 + + ); +} + +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..edc8bf03 --- /dev/null +++ b/src/Splash/component/Header/Header.style.ts @@ -0,0 +1,12 @@ +import styled from '@emotion/styled'; + +export const Header = styled.header` + display: flex; + justify-content: left; + + width: 100vw; +`; + +export const Wrapper = styled.div` + margin: 1.8rem 0 0.8rem 1.8rem; +`; From f451d0473b368de51d5c6a0b0c7f5b71c1670849 Mon Sep 17 00:00:00 2001 From: seoAreum <1971236@hansung.ac.kr> Date: Tue, 9 Jan 2024 21:42:33 +0900 Subject: [PATCH 04/12] =?UTF-8?q?feat:=20=EC=8A=A4=ED=94=8C=EB=9E=98?= =?UTF-8?q?=EC=8B=9C=20=EB=B7=B0=20=EB=B0=94=EB=94=94=20=ED=8D=BC=EB=B8=94?= =?UTF-8?q?=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Splash/component/Body/Body.style.ts | 6 ++++++ src/Splash/component/Body/index.tsx | 13 +++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 src/Splash/component/Body/Body.style.ts create mode 100644 src/Splash/component/Body/index.tsx diff --git a/src/Splash/component/Body/Body.style.ts b/src/Splash/component/Body/Body.style.ts new file mode 100644 index 00000000..a5e1e986 --- /dev/null +++ b/src/Splash/component/Body/Body.style.ts @@ -0,0 +1,6 @@ +import styled from '@emotion/styled'; + +export const LottieWrapper = styled.section` + width: 100vw; + height: 39rem; +`; diff --git a/src/Splash/component/Body/index.tsx b/src/Splash/component/Body/index.tsx new file mode 100644 index 00000000..5c9b3412 --- /dev/null +++ b/src/Splash/component/Body/index.tsx @@ -0,0 +1,13 @@ +// import Lottie from 'lottie-react' + +import * as S from './Body.style'; + +function Body() { + return ( + + {/* */} + + ) +} + +export default Body; From e570b12ee612edcc86b89c4d700c430343454c08 Mon Sep 17 00:00:00 2001 From: seoAreum <1971236@hansung.ac.kr> Date: Tue, 9 Jan 2024 21:42:53 +0900 Subject: [PATCH 05/12] =?UTF-8?q?feat:=20=EC=8A=A4=ED=94=8C=EB=9E=98?= =?UTF-8?q?=EC=8B=9C=20=EB=B7=B0=20=ED=95=98=EB=8B=A8=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Splash/component/Bottom/Bottom.style.ts | 37 +++++++++++++++++++++ src/Splash/component/Header/index.tsx | 14 ++++++++ 2 files changed, 51 insertions(+) create mode 100644 src/Splash/component/Bottom/Bottom.style.ts create mode 100644 src/Splash/component/Header/index.tsx diff --git a/src/Splash/component/Bottom/Bottom.style.ts b/src/Splash/component/Bottom/Bottom.style.ts new file mode 100644 index 00000000..be0d7260 --- /dev/null +++ b/src/Splash/component/Bottom/Bottom.style.ts @@ -0,0 +1,37 @@ +import styled from '@emotion/styled'; + +export const BottomWrapper = styled.section` + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + margin: 2.3rem 1.5rem 2rem; + + gap: 4.7rem; +`; + +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}; +`; + +export const StartBtn = styled.button` + display: flex; + justify-content: center; + align-items: center; + + width: 100%; + 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/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; From 9706b8c2458ae6894e7b8e07c1c6307cac3f5920 Mon Sep 17 00:00:00 2001 From: seoAreum <1971236@hansung.ac.kr> Date: Tue, 9 Jan 2024 21:43:06 +0900 Subject: [PATCH 06/12] =?UTF-8?q?feat:=20=EC=8A=A4=ED=94=8C=EB=9E=98?= =?UTF-8?q?=EC=8B=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Splash/page/SplashPage/SplashPage.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/Splash/page/SplashPage/SplashPage.tsx diff --git a/src/Splash/page/SplashPage/SplashPage.tsx b/src/Splash/page/SplashPage/SplashPage.tsx new file mode 100644 index 00000000..1fc5475e --- /dev/null +++ b/src/Splash/page/SplashPage/SplashPage.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import Body from '../../component/Body'; +import Bottom from '../../component/Bottom'; +import Header from '../../component/Header'; + +function SplashPage() { + return ( + +
+ + + + ); +} + +export default SplashPage; From 8665d6c018412b300bb418bd21e13127e4f900cb Mon Sep 17 00:00:00 2001 From: seoAreum <1971236@hansung.ac.kr> Date: Tue, 9 Jan 2024 23:01:38 +0900 Subject: [PATCH 07/12] =?UTF-8?q?fix:=20=EC=A4=91=EC=95=99=EC=A0=95?= =?UTF-8?q?=EB=A0=AC=20=EC=95=88=20=EB=90=98=EB=8A=94=20=EC=9D=B4=EC=8A=88?= =?UTF-8?q?=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Splash/page/SplashPage/SplashPage.style.ts | 11 +++++++++++ .../page/SplashPage/{SplashPage.tsx => index.tsx} | 7 +++---- 2 files changed, 14 insertions(+), 4 deletions(-) create mode 100644 src/Splash/page/SplashPage/SplashPage.style.ts rename src/Splash/page/SplashPage/{SplashPage.tsx => index.tsx} (77%) diff --git a/src/Splash/page/SplashPage/SplashPage.style.ts b/src/Splash/page/SplashPage/SplashPage.style.ts new file mode 100644 index 00000000..286cb659 --- /dev/null +++ b/src/Splash/page/SplashPage/SplashPage.style.ts @@ -0,0 +1,11 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + width: 100vw; + height: 100dvh; +`; diff --git a/src/Splash/page/SplashPage/SplashPage.tsx b/src/Splash/page/SplashPage/index.tsx similarity index 77% rename from src/Splash/page/SplashPage/SplashPage.tsx rename to src/Splash/page/SplashPage/index.tsx index 1fc5475e..6fb0a1f8 100644 --- a/src/Splash/page/SplashPage/SplashPage.tsx +++ b/src/Splash/page/SplashPage/index.tsx @@ -1,16 +1,15 @@ -import React from 'react'; - import Body from '../../component/Body'; import Bottom from '../../component/Bottom'; import Header from '../../component/Header'; +import * as S from './SplashPage.style' function SplashPage() { return ( - +
- + ); } From b52e781b808ad123c4af1656217509d8ed25d359 Mon Sep 17 00:00:00 2001 From: seoAreum <1971236@hansung.ac.kr> Date: Wed, 10 Jan 2024 00:43:06 +0900 Subject: [PATCH 08/12] =?UTF-8?q?feat:=20=EB=85=B8=ED=8A=B8=20=EA=B0=9C?= =?UTF-8?q?=EC=88=98=20=EA=B0=80=EC=83=81=EC=9D=98=20=EC=83=81=EC=88=98?= =?UTF-8?q?=EB=A1=9C=20=EB=8C=80=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Splash/component/Bottom/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Splash/component/Bottom/index.tsx b/src/Splash/component/Bottom/index.tsx index 2b2b3ac4..35fd8a47 100644 --- a/src/Splash/component/Bottom/index.tsx +++ b/src/Splash/component/Bottom/index.tsx @@ -1,10 +1,12 @@ import * as S from './Bottom.style'; function Bottom() { + const noteNum = 30; + return ( - 지금까지 120개의 + 지금까지 {noteNum}개의 포스트잇이 붙여졌어요! From 70713020b241ddb5dfadd9a97dde369e786a28ad Mon Sep 17 00:00:00 2001 From: seoAreum <1971236@hansung.ac.kr> Date: Wed, 10 Jan 2024 04:28:52 +0900 Subject: [PATCH 09/12] =?UTF-8?q?chore:=20router=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Router.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Router.tsx b/src/Router.tsx index 16e4af3a..eb7f49c3 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -1,12 +1,12 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; -import HomePage from './Home/page/HomePage'; +import SplashPage from './Splash/page/SplashPage'; function Router() { return ( - } /> + } /> ); From 51b83b3d836291fbd16303b459cfff76678f0ca5 Mon Sep 17 00:00:00 2001 From: seoAreum <1971236@hansung.ac.kr> Date: Fri, 12 Jan 2024 20:07:14 +0900 Subject: [PATCH 10/12] =?UTF-8?q?fix:=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=84=B8=EB=A1=9C=20=EC=A4=91=EC=95=99=EC=A0=95?= =?UTF-8?q?=EB=A0=AC=20=ED=95=B4=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Splash/page/SplashPage/SplashPage.style.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Splash/page/SplashPage/SplashPage.style.ts b/src/Splash/page/SplashPage/SplashPage.style.ts index 286cb659..36038c42 100644 --- a/src/Splash/page/SplashPage/SplashPage.style.ts +++ b/src/Splash/page/SplashPage/SplashPage.style.ts @@ -2,10 +2,11 @@ import styled from '@emotion/styled'; export const Wrapper = styled.div` display: flex; - justify-content: center; align-items: center; flex-direction: column; width: 100vw; height: 100dvh; + + margin: 3rem 0 2rem; `; From 6e42d2615e4ddd0133f9bbbf2523c996857b5a51 Mon Sep 17 00:00:00 2001 From: seoAreum <1971236@hansung.ac.kr> Date: Fri, 12 Jan 2024 20:07:52 +0900 Subject: [PATCH 11/12] =?UTF-8?q?fix:=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=84=B8=EB=A1=9C=20=EC=A4=91=EC=95=99=EC=A0=95?= =?UTF-8?q?=EB=A0=AC=20=ED=95=B4=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Splash/component/Header/Header.style.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Splash/component/Header/Header.style.ts b/src/Splash/component/Header/Header.style.ts index edc8bf03..e055de6d 100644 --- a/src/Splash/component/Header/Header.style.ts +++ b/src/Splash/component/Header/Header.style.ts @@ -8,5 +8,6 @@ export const Header = styled.header` `; export const Wrapper = styled.div` - margin: 1.8rem 0 0.8rem 1.8rem; + margin-bottom: 0.8rem; + margin-left: 1.8rem; `; From 8d59bf91d51654a191d35c0063526fcb99bb30bb Mon Sep 17 00:00:00 2001 From: seoAreum <1971236@hansung.ac.kr> Date: Fri, 12 Jan 2024 20:09:05 +0900 Subject: [PATCH 12/12] =?UTF-8?q?chore:=20=EC=97=AD=ED=95=A0=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=9D=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=9E=AC=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Splash/component/Body/Body.style.ts | 26 +++++++++++++++++++-- src/Splash/component/Body/index.tsx | 15 ++++++++---- src/Splash/component/Bottom/Bottom.style.ts | 26 ++------------------- src/Splash/component/Bottom/index.tsx | 13 +---------- 4 files changed, 38 insertions(+), 42 deletions(-) diff --git a/src/Splash/component/Body/Body.style.ts b/src/Splash/component/Body/Body.style.ts index a5e1e986..aab980ed 100644 --- a/src/Splash/component/Body/Body.style.ts +++ b/src/Splash/component/Body/Body.style.ts @@ -1,6 +1,28 @@ import styled from '@emotion/styled'; -export const LottieWrapper = styled.section` +export const BodyWrapper = styled.section` + display: flex; + flex-direction: column; + justify-content: center; width: 100vw; - height: 39rem; + 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 index 5c9b3412..8319e3b3 100644 --- a/src/Splash/component/Body/index.tsx +++ b/src/Splash/component/Body/index.tsx @@ -3,11 +3,18 @@ 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 index be0d7260..069bc50a 100644 --- a/src/Splash/component/Bottom/Bottom.style.ts +++ b/src/Splash/component/Bottom/Bottom.style.ts @@ -1,33 +1,11 @@ import styled from '@emotion/styled'; -export const BottomWrapper = styled.section` +export const BottomWrapper = styled.button` display: flex; justify-content: center; align-items: center; - flex-direction: column; - margin: 2.3rem 1.5rem 2rem; - - gap: 4.7rem; -`; - -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}; -`; - -export const StartBtn = styled.button` - display: flex; - justify-content: center; - align-items: center; - - width: 100%; + width: calc(100% - 3rem); padding: 1.7rem 0; border-radius: 1rem; diff --git a/src/Splash/component/Bottom/index.tsx b/src/Splash/component/Bottom/index.tsx index 35fd8a47..8021866e 100644 --- a/src/Splash/component/Bottom/index.tsx +++ b/src/Splash/component/Bottom/index.tsx @@ -1,18 +1,7 @@ import * as S from './Bottom.style'; function Bottom() { - const noteNum = 30; - - return ( - - - 지금까지 {noteNum}개의 - 포스트잇이 붙여졌어요! - - - 시작하기 - - ); + return 시작하기; } export default Bottom;