+
+
+ 계산은 저희가 알아서 해드려요
+
+
+ {`인원이나 메뉴에 따라 직접 계산할 필요 없어요.
+ 지출 내역만 기록하면 알아서 나눠 계산해 드려요.
+ 복잡한 계산은 이제 행동대장에게 맡기세요!`}
+
+
+
-
+
-
-
-
+
-
-
-
-
-
-
- 행동대장
-
-
-
-
+
+
+
+
+
+ );
+};
+
+export default AutoCalculate;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/index.ts b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/index.ts
new file mode 100644
index 000000000..cd32fe5b8
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/index.ts
@@ -0,0 +1 @@
+export {default as AutoCalculate} from './AutoCalculate';
diff --git a/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.style.ts b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.style.ts
new file mode 100644
index 000000000..08e4619c0
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.style.ts
@@ -0,0 +1,52 @@
+import {css} from '@emotion/react';
+
+export const sectionStyle = css({
+ display: 'flex',
+ height: '100vh',
+ width: '100vw',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#DFC1FF',
+});
+
+export const articleStyle = css({
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ width: '100%',
+ padding: '0 4rem',
+ alignItems: 'center',
+ gap: '2rem',
+ maxWidth: '1200px',
+ '@media (max-width: 1024px)': {
+ flexDirection: 'column-reverse',
+ },
+ '@media (min-width: 1200px)': {
+ padding: '0',
+ },
+});
+
+export const textContainerStyle = css({
+ display: 'flex',
+ width: 'max-content',
+ flexDirection: 'column',
+ alignItems: 'start',
+ gap: '1rem',
+});
+
+export const imageStyle = css({
+ minWidth: '20rem',
+ maxWidth: '30rem',
+ width: '100%',
+ '@media (min-width: 768px)': {
+ minWidth: '25rem',
+ maxWidth: '30rem',
+ width: '100%',
+ },
+ '@media (min-width: 1600px)': {
+ minWidth: '30rem',
+ maxWidth: '35rem',
+ width: '100%',
+ },
+});
diff --git a/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.tsx b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.tsx
new file mode 100644
index 000000000..3f9e06d59
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.tsx
@@ -0,0 +1,25 @@
+import {Text} from '@components/Design';
+
+import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './CheckDeposit.style';
+
+const CheckDeposit = () => {
+ return (
+
+
+ 
+
+
+ );
+};
+
+export default CheckDeposit;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/index.ts b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/index.ts
new file mode 100644
index 000000000..abed95db9
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/index.ts
@@ -0,0 +1 @@
+export {default as CheckDeposit} from './CheckDeposit';
diff --git a/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx b/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx
new file mode 100644
index 000000000..4f2b3cac2
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx
@@ -0,0 +1,19 @@
+import {SimpleShare} from './SimpleShare';
+import {AutoCalculate} from './AutoCalculate';
+import {CheckDeposit} from './CheckDeposit';
+import {SimpleTransfer} from './SimpleTransfer';
+import {RecordMemoryWithPhoto} from './RecordMemoryWithPhoto';
+
+const FeatureSection = () => {
+ return (
+ <>
+
+
+ 
+
+
+ );
+};
+
+export default RecordMemoryWithPhoto;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/index.ts b/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/index.ts
new file mode 100644
index 000000000..d3a8ff8de
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/index.ts
@@ -0,0 +1 @@
+export {default as RecordMemoryWithPhoto} from './RecordMemoryWithPhoto';
diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.style.ts b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.style.ts
new file mode 100644
index 000000000..9d3623870
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.style.ts
@@ -0,0 +1,52 @@
+import {css} from '@emotion/react';
+
+export const sectionStyle = css({
+ display: 'flex',
+ height: '100vh',
+ width: '100vw',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#FFA5B8',
+});
+
+export const articleStyle = css({
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ width: '100%',
+ padding: '0 4rem',
+ alignItems: 'center',
+ gap: '2rem',
+ maxWidth: '1200px',
+ '@media (max-width: 1024px)': {
+ flexDirection: 'column-reverse',
+ },
+ '@media (min-width: 1200px)': {
+ padding: '0',
+ },
+});
+
+export const textContainerStyle = css({
+ display: 'flex',
+ width: 'max-content',
+ flexDirection: 'column',
+ alignItems: 'start',
+ gap: '1rem',
+});
+
+export const imageStyle = css({
+ minWidth: '15rem',
+ maxWidth: '25rem',
+ width: '100%',
+ '@media (min-width: 1024px)': {
+ minWidth: '20rem',
+ maxWidth: '25rem',
+ width: '100%',
+ },
+ '@media (min-width: 1600px)': {
+ minWidth: '25rem',
+ maxWidth: '30rem',
+ width: '100%',
+ },
+});
diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.tsx b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.tsx
new file mode 100644
index 000000000..472232dae
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.tsx
@@ -0,0 +1,25 @@
+import {Text} from '@components/Design';
+
+import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './SimpleShare.style';
+
+const SimpleAccount = () => {
+ return (
+
+
+ 
+
+
+ );
+};
+
+export default SimpleAccount;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/index.ts b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/index.ts
new file mode 100644
index 000000000..b1e58b134
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/index.ts
@@ -0,0 +1 @@
+export {default as SimpleShare} from './SimpleShare';
diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.style.ts b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.style.ts
new file mode 100644
index 000000000..368328043
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.style.ts
@@ -0,0 +1,52 @@
+import {css} from '@emotion/react';
+
+export const sectionStyle = css({
+ display: 'flex',
+ height: '100vh',
+ width: '100vw',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#ffffff',
+});
+
+export const articleStyle = css({
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ width: '100%',
+ padding: '0 4rem',
+ alignItems: 'center',
+ gap: '2rem',
+ maxWidth: '1200px',
+ '@media (max-width: 1024px)': {
+ flexDirection: 'column',
+ },
+ '@media (min-width: 1200px)': {
+ padding: '0',
+ },
+});
+
+export const textContainerStyle = css({
+ display: 'flex',
+ width: 'max-content',
+ flexDirection: 'column',
+ alignItems: 'start',
+ gap: '1rem',
+});
+
+export const imageStyle = css({
+ minWidth: '20rem',
+ maxWidth: '30rem',
+ width: '100%',
+ '@media (min-width: 768px)': {
+ minWidth: '25rem',
+ maxWidth: '30rem',
+ width: '100%',
+ },
+ '@media (min-width: 1600px)': {
+ minWidth: '30rem',
+ maxWidth: '35rem',
+ width: '100%',
+ },
+});
diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.tsx b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.tsx
new file mode 100644
index 000000000..e6bb9c275
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.tsx
@@ -0,0 +1,25 @@
+import {Text} from '@components/Design';
+
+import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './SimpleTransfer.style';
+
+const SimpleTransfer = () => {
+ return (
+
+
+ 
+
+
+ );
+};
+
+export default SimpleTransfer;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/index.ts b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/index.ts
new file mode 100644
index 000000000..8e72d81cc
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/index.ts
@@ -0,0 +1 @@
+export {default as SimpleTransfer} from './SimpleTransfer';
diff --git a/client/src/pages/MainPage/Section/FeatureSection/index.ts b/client/src/pages/MainPage/Section/FeatureSection/index.ts
new file mode 100644
index 000000000..baca9d1b1
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/index.ts
@@ -0,0 +1 @@
+export {default as FeatureSection} from './FeatureSection';
diff --git a/client/src/pages/MainPage/Section/MainSection.tsx b/client/src/pages/MainPage/Section/MainSection.tsx
deleted file mode 100644
index b4eaaff4e..000000000
--- a/client/src/pages/MainPage/Section/MainSection.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import {css, keyframes} from '@emotion/react';
-import {useNavigate} from 'react-router-dom';
-
-import Button from '@HDesign/components/Button/Button';
-import Text from '@HDesign/components/Text/Text';
-
-import {Icon} from '@components/Design';
-
-import {ROUTER_URLS} from '@constants/routerUrls';
-
-type MainSectionProps = {
- trackStartCreateEvent: () => void;
-};
-
-const MainSection = ({trackStartCreateEvent}: MainSectionProps) => {
- const navigate = useNavigate();
-
- const handleClick = () => {
- trackStartCreateEvent();
- navigate(ROUTER_URLS.createEvent);
- };
-
- return (
-
Date: Wed, 23 Oct 2024 11:25:33 +0900
Subject: [PATCH 02/14] =?UTF-8?q?refactor:=20App=EC=9D=84=20=EC=A0=9C?=
=?UTF-8?q?=EC=99=B8=ED=95=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4?=
=?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20lazy=20loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
client/src/router.tsx | 16 +++++++---------
1 file changed, 7 insertions(+), 9 deletions(-)
diff --git a/client/src/router.tsx b/client/src/router.tsx
index 9969ce139..afd4a78f8 100644
--- a/client/src/router.tsx
+++ b/client/src/router.tsx
@@ -1,19 +1,17 @@
import {createBrowserRouter} from 'react-router-dom';
import {lazy, Suspense} from 'react';
-import ErrorPage from '@pages/ErrorPage/ErrorPage';
-import EventLoginPage from '@pages/EventPage/AdminPage/EventLoginPage';
-import EventLoader from '@components/Loader/EventLoader';
-import SendErrorPage from '@pages/ErrorPage/SendErrorPage';
-import AuthGate from '@pages/EventPage/AuthGate';
-
-import {EventPage} from '@pages/EventPage';
-import SendPage from '@pages/SendPage';
-
import {ROUTER_URLS} from '@constants/routerUrls';
import App from './App';
+const ErrorPage = lazy(() => import('@pages/ErrorPage/ErrorPage'));
+const SendErrorPage = lazy(() => import('@pages/ErrorPage/SendErrorPage'));
+const EventLoginPage = lazy(() => import('@pages/EventPage/AdminPage/EventLoginPage'));
+const EventLoader = lazy(() => import('@components/Loader/EventLoader'));
+const AuthGate = lazy(() => import('@pages/EventPage/AuthGate'));
+const EventPage = lazy(() => import('@pages/EventPage/EventPageLayout'));
+const SendPage = lazy(() => import('@pages/SendPage'));
const MainPage = lazy(() => import('@pages/MainPage/MainPage'));
const HomePage = lazy(() => import('@pages/EventPage/HomePage/HomePage'));
const CreateEventFunnel = lazy(() => import('@pages/CreateEventPage/CreateEventFunnel'));
From 2dcdb8bb062beede0fa1483b4f2fb8c798efab62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=A7=84=ED=98=B8?=
Date: Wed, 23 Oct 2024 13:01:36 +0900
Subject: [PATCH 03/14] =?UTF-8?q?refactor:=20QueryClient=EA=B0=80=20?=
=?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=98=EC=A7=80=20=EC=95=8A=EC=9D=80=20?=
=?UTF-8?q?=EB=9E=9C=EB=94=A9=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?=
=?UTF-8?q?=EC=84=9C=20tanstack-query=20script=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
client/src/App.tsx | 22 ++-----
client/src/EssentialQueryApp.tsx | 20 +++++++
client/src/router.tsx | 98 +++++++++++++++++---------------
3 files changed, 79 insertions(+), 61 deletions(-)
create mode 100644 client/src/EssentialQueryApp.tsx
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 99e09da87..b2e25e706 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,10 +1,6 @@
import {Outlet} from 'react-router-dom';
import {Global} from '@emotion/react';
-import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
-import QueryClientBoundary from '@components/QueryClientBoundary/QueryClientBoundary';
-import ErrorCatcher from '@components/AppErrorBoundary/ErrorCatcher';
-import ToastContainer from '@components/Toast/ToastContainer';
import KakaoInitializer from '@components/KakaoInitializer/KakaoInitializer';
import AmplitudeInitializer from '@components/AmplitudeInitializer/AmplitudeInitializer';
@@ -20,18 +16,12 @@ const App: React.FC = () => {
-
-
-
-
-
-
-
+
+
+
+
);
diff --git a/client/src/EssentialQueryApp.tsx b/client/src/EssentialQueryApp.tsx
new file mode 100644
index 000000000..5a2d1011b
--- /dev/null
+++ b/client/src/EssentialQueryApp.tsx
@@ -0,0 +1,20 @@
+import {Outlet} from 'react-router-dom';
+import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
+
+import QueryClientBoundary from '@components/QueryClientBoundary/QueryClientBoundary';
+import ErrorCatcher from '@components/AppErrorBoundary/ErrorCatcher';
+import ToastContainer from '@components/Toast/ToastContainer';
+
+const EssentialQueryApp: React.FC = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default EssentialQueryApp;
diff --git a/client/src/router.tsx b/client/src/router.tsx
index afd4a78f8..d9268d5b0 100644
--- a/client/src/router.tsx
+++ b/client/src/router.tsx
@@ -22,6 +22,7 @@ const EditBillPage = lazy(() => import('@pages/EditBillPage/EditBillPage'));
const Account = lazy(() => import('@pages/AccountPage/Account'));
const ImagesPage = lazy(() => import('@pages/ImagesPage/ImagesPage'));
const AddImagesPage = lazy(() => import('@pages/AddImagesPage/AddImagesPage'));
+const EssentialQueryApp = lazy(() => import('./EssentialQueryApp'));
const router = createBrowserRouter([
{
@@ -38,58 +39,65 @@ const router = createBrowserRouter([
element:
-
- ),
+ element:
+
),
+ children: [
+ {
+ path: ROUTER_URLS.eventManage,
+ element: (
+
Date: Wed, 23 Oct 2024 13:02:10 +0900
Subject: [PATCH 04/14] =?UTF-8?q?refactor:=20tree=20shaking=EC=9D=84=20dee?=
=?UTF-8?q?p=ED=95=98=EA=B2=8C=20=EC=A0=81=EC=9A=A9=ED=95=98=EA=B8=B0=20?=
=?UTF-8?q?=EC=9C=84=ED=95=B4=20package.json=EC=97=90=20sideEffects=20fals?=
=?UTF-8?q?e=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
client/package.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/client/package.json b/client/package.json
index 059f75d8a..2dda6ac09 100644
--- a/client/package.json
+++ b/client/package.json
@@ -3,6 +3,7 @@
"version": "1.0.0",
"description": "",
"type": "module",
+ "sideEffects": false,
"scripts": {
"prod": "NODE_ENV=production webpack server --open --config webpack.prod.mjs",
"dev": "NODE_ENV=development webpack server --open --config webpack.dev.mjs",
From ba9a7d85e960343cf2cae3db40f5e8d31ea0ec35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=A7=84=ED=98=B8?=
Date: Wed, 23 Oct 2024 13:08:26 +0900
Subject: [PATCH 05/14] =?UTF-8?q?feat:=20prod=20build=20=ED=8C=8C=EC=9D=BC?=
=?UTF-8?q?=EC=97=90=EC=84=9C=20sourcemap=EA=B3=BC=20license=20=ED=8C=8C?=
=?UTF-8?q?=EC=9D=BC=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
client/webpack.prod.mjs | 3 +++
1 file changed, 3 insertions(+)
diff --git a/client/webpack.prod.mjs b/client/webpack.prod.mjs
index 1cf3bc7d1..e542fba63 100644
--- a/client/webpack.prod.mjs
+++ b/client/webpack.prod.mjs
@@ -26,6 +26,9 @@ export default merge(common, {
authToken: process.env.SENTRY_AUTH_TOKEN,
org: 'wtc-o6',
project: 'javascript-react',
+ sourcemaps: {
+ filesToDeleteAfterUpload: ['**/*.js.map', '**/*.css.map', '**/*.LICENSE.txt'],
+ },
}),
],
});
From 56bf5183942b0e9f3690ec4c79dd7a206f5fe58f Mon Sep 17 00:00:00 2001
From: Soyeon Choe <77609591+soi-ha@users.noreply.github.com>
Date: Wed, 23 Oct 2024 16:10:53 +0900
Subject: [PATCH 06/14] =?UTF-8?q?feat:=20=EB=AC=B8=EC=9D=98=ED=95=98?=
=?UTF-8?q?=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=20?=
=?UTF-8?q?(#772)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: 문의하기 구글 forms 페이지 링크 연결
* fix: chromatic 에러 해결
---
.../Design/components/Carousel/Carousel.stories.tsx | 1 +
.../Design/components/Carousel/CarouselDeleteButton.tsx | 1 +
.../Design/components/Carousel/CarouselIndicator.tsx | 1 +
.../components/Carousel/{useCarousel.tsx => useCarousel.ts} | 0
client/src/components/Footer/Footer.tsx | 5 +++--
5 files changed, 6 insertions(+), 2 deletions(-)
rename client/src/components/Design/components/Carousel/{useCarousel.tsx => useCarousel.ts} (100%)
diff --git a/client/src/components/Design/components/Carousel/Carousel.stories.tsx b/client/src/components/Design/components/Carousel/Carousel.stories.tsx
index 0a8b19930..235fc7f04 100644
--- a/client/src/components/Design/components/Carousel/Carousel.stories.tsx
+++ b/client/src/components/Design/components/Carousel/Carousel.stories.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
import type {Meta, StoryObj} from '@storybook/react';
import Carousel from './Carousel';
diff --git a/client/src/components/Design/components/Carousel/CarouselDeleteButton.tsx b/client/src/components/Design/components/Carousel/CarouselDeleteButton.tsx
index 9f7154395..828195095 100644
--- a/client/src/components/Design/components/Carousel/CarouselDeleteButton.tsx
+++ b/client/src/components/Design/components/Carousel/CarouselDeleteButton.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
import Icon from '../Icon/Icon';
import {deleteButtonStyle} from './Carousel.style';
diff --git a/client/src/components/Design/components/Carousel/CarouselIndicator.tsx b/client/src/components/Design/components/Carousel/CarouselIndicator.tsx
index 971fa7d3e..ea96b1043 100644
--- a/client/src/components/Design/components/Carousel/CarouselIndicator.tsx
+++ b/client/src/components/Design/components/Carousel/CarouselIndicator.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
import {useTheme} from '@components/Design/theme/HDesignProvider';
import {indicatorContainerStyle, indicatorStyle} from './Carousel.style';
diff --git a/client/src/components/Design/components/Carousel/useCarousel.tsx b/client/src/components/Design/components/Carousel/useCarousel.ts
similarity index 100%
rename from client/src/components/Design/components/Carousel/useCarousel.tsx
rename to client/src/components/Design/components/Carousel/useCarousel.ts
diff --git a/client/src/components/Footer/Footer.tsx b/client/src/components/Footer/Footer.tsx
index b75be7ed9..fb22c0b4a 100644
--- a/client/src/components/Footer/Footer.tsx
+++ b/client/src/components/Footer/Footer.tsx
@@ -15,8 +15,9 @@ const Footer: React.FC = () => {
행동대장 소개
- {/* TODO: (@soha) 문의 페이지 링크로 꼭!! 추후 수정 */}
- 문의하기
+
+ 문의하기
+
이메일
+
);
};
diff --git a/client/src/pages/MainPage/Nav/index.ts b/client/src/pages/MainPage/Nav/index.ts
new file mode 100644
index 000000000..8f9ae28e7
--- /dev/null
+++ b/client/src/pages/MainPage/Nav/index.ts
@@ -0,0 +1 @@
+export {default as Nav} from './Nav';
diff --git a/client/src/pages/MainPage/Section/DescriptionSection.tsx b/client/src/pages/MainPage/Section/DescriptionSection.tsx
deleted file mode 100644
index 8af204140..000000000
--- a/client/src/pages/MainPage/Section/DescriptionSection.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import {css} from '@emotion/react';
-
-import {useTheme} from '@components/Design/theme/HDesignProvider';
-import Text from '@HDesign/components/Text/Text';
-
-const DescriptionSection = () => {
- const {theme} = useTheme();
-
- return (
-
+
+
+
+
+
+
+
+ 행동대장
+
+
+
+
+
+
- 
-
- {`행동대장들을 위해
- 행동대장을 준비했어요
- `}
- {`주환이가 먼저 집에 가도
- 소연이가 늦게 도착해도
- 건상이가 술을 마시지 않아도
- `}
- {`간편하게 정산할 수 있어요`}
-
- );
-};
-
-export default DescriptionSection;
diff --git a/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.style.ts b/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.style.ts
new file mode 100644
index 000000000..4b21b4ac9
--- /dev/null
+++ b/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.style.ts
@@ -0,0 +1,27 @@
+import {css} from '@emotion/react';
+
+export const descriptionSectionStyle = css({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100vh',
+ width: '100vw',
+ gap: '1.5rem',
+ padding: '3rem 1.5rem',
+ backgroundColor: 'white',
+});
+
+export const imgStyle = css({
+ width: '10rem',
+ '@media (min-width: 768px)': {
+ minWidth: '10rem',
+ maxWidth: '15rem',
+ width: '100%',
+ },
+ '@media (min-width: 1600px)': {
+ minWidth: '15rem',
+ maxWidth: '20rem',
+ width: '100%',
+ },
+});
diff --git a/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.tsx b/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.tsx
new file mode 100644
index 000000000..9b9cb37c4
--- /dev/null
+++ b/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.tsx
@@ -0,0 +1,21 @@
+import Text from '@HDesign/components/Text/Text';
+
+import {descriptionSectionStyle, imgStyle} from './DescriptionSection.style';
+
+const DescriptionSection = () => {
+ return (
+
-
-
+
+ {`행동대장들을 위해
+ 행동대장을 준비했어요
+ `}
+ {`주환이가 먼저 집에 가도
+ 소연이가 늦게 도착해도
+ 건상이가 술을 마시지 않아도
+ `}
+ {`간편하게 정산할 수 있어요`}
+
+ );
+};
+
+export default DescriptionSection;
diff --git a/client/src/pages/MainPage/Section/DescriptionSection/index.ts b/client/src/pages/MainPage/Section/DescriptionSection/index.ts
new file mode 100644
index 000000000..ce78c7b93
--- /dev/null
+++ b/client/src/pages/MainPage/Section/DescriptionSection/index.ts
@@ -0,0 +1 @@
+export {default as DescriptionSection} from './DescriptionSection';
diff --git a/client/src/pages/MainPage/Section/FeatureSection.tsx b/client/src/pages/MainPage/Section/FeatureSection.tsx
deleted file mode 100644
index cf5e50282..000000000
--- a/client/src/pages/MainPage/Section/FeatureSection.tsx
+++ /dev/null
@@ -1,351 +0,0 @@
-import {css} from '@emotion/react';
-
-import Text from '@components/Design/components/Text/Text';
-
-const FeatureSection = () => {
- return (
- <>
-
+
-
-
-
-
-
-
-
- 누구와도 간편하게 정산하세요
-
-
- {`연락처가 없어도 링크만 보내면 끝!,
- 모르는 사람과도 손쉽게 정산할 수 있어요.
- 복잡한 절차 없이, 빠르게 정산을 마치세요.`}
-
-
-
-
-
-
-
-
-
-
-
-
- 계산은 저희가 알아서 해드려요
-
-
- {`인원이나 메뉴에 따라 직접 계산할 필요 없어요.
- 지출 내역만 기록하면 알아서 나눠 계산해 드려요.
- 복잡한 계산은 이제 행동대장에게 맡기세요!`}
-
-
-
-
-
-
-
-
-
-
- 입금 확인도 걱정 없어요
-
-
- {`매번 누가 입금했는지 따로 기억할 필요 없어요.
- 참여자 관리 메뉴를 통해 더 이상 놓치는 사람 없이
- 간편하게 관리할 수 있어요.`}
-
-
-
-
-
-
-
-
-
-
-
-
- 몇 번의 클릭으로 송금 완료!
-
-
- {`계좌번호나 금액을 일일이 확인하지 않아도 돼요.
- 클릭 몇 번으로 바로 송금할 수 있어요.
- 언제 어디서든 쉽게 정산을 끝내세요.`}
-
-
-
-
-
- );
-};
-
-export default FeatureSection;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.style.ts b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.style.ts
new file mode 100644
index 000000000..d847764e8
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.style.ts
@@ -0,0 +1,52 @@
+import {css} from '@emotion/react';
+
+export const sectionStyle = css({
+ display: 'flex',
+ height: '100vh',
+ width: '100vw',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#ffffff',
+});
+
+export const articleStyle = css({
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ width: '100%',
+ padding: '0 4rem',
+ alignItems: 'center',
+ gap: '2rem',
+ maxWidth: '1200px',
+ '@media (max-width: 1024px)': {
+ flexDirection: 'column',
+ },
+ '@media (min-width: 1200px)': {
+ padding: '0',
+ },
+});
+
+export const imageStyle = css({
+ minWidth: '15rem',
+ maxWidth: '25rem',
+ width: '100%',
+ '@media (min-width: 768px)': {
+ minWidth: '20rem',
+ maxWidth: '25rem',
+ width: '100%',
+ },
+ '@media (min-width: 1600px)': {
+ minWidth: '25rem',
+ maxWidth: '30rem',
+ width: '100%',
+ },
+});
+
+export const textContainerStyle = css({
+ display: 'flex',
+ width: 'max-content',
+ flexDirection: 'column',
+ alignItems: 'start',
+ gap: '1rem',
+});
diff --git a/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx
new file mode 100644
index 000000000..f3925e972
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx
@@ -0,0 +1,25 @@
+import {Text} from '@components/Design';
+
+import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './AutoCalculate.style';
+
+const AutoCalculate = () => {
+ return (
+
-
-
-
-
- 추억도 간편하게 공유하세요
-
-
- {`모임에서 지출한 내역은 물론,
- 그날의 사진과 추억도 함께 나눠보세요.
- 정산은 투명하게, 추억은 오래오래 간직할 수 있어요.`}
-
-
-
-
+
+
+ 입금 확인도 걱정 없어요
+
+
+ {`매번 누가 입금했는지 따로 기억할 필요 없어요.
+ 참여자 관리 메뉴를 통해 더 이상 놓치는 사람 없이
+ 간편하게 관리할 수 있어요.`}
+
+
+
+
+
+ 추억도 간편하게 공유하세요
+
+
+ {`모임에서 지출한 내역은 물론,
+ 그날의 사진과 추억도 함께 나눠보세요.
+ 정산은 투명하게, 추억은 오래오래 간직할 수 있어요.`}
+
+
+
+
+
+ 누구와도 간편하게 정산하세요
+
+
+ {`연락처가 없어도 링크만 보내면 끝!,
+ 모르는 사람과도 손쉽게 정산할 수 있어요.
+ 복잡한 절차 없이, 빠르게 정산을 마치세요.`}
+
+
+
+
+
+
+ 몇 번의 클릭으로 송금 완료!
+
+
+ {`계좌번호나 금액을 일일이 확인하지 않아도 돼요.
+ 클릭 몇 번으로 바로 송금할 수 있어요.
+ 언제 어디서든 쉽게 정산을 끝내세요.`}
+
+
+
-
- );
-};
-
-const fadeIn = keyframes`
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-`;
-
-const slideIn = keyframes`
- from {
- transform: translateY(1rem);
- }
- to {
- transform: translateY(0);
- }
-`;
-
-const bounce = keyframes`
- 0%, 100% {
- transform: translate(-50%, 0);
- }
- 50% {
- transform: translate(-50%, -1rem);
- }
-`;
-
-const animateWithDelay = (delay: number) => css`
- opacity: 0;
- animation:
- ${fadeIn} 1s ease-in-out ${delay}s forwards,
- ${slideIn} 1s ease-in-out ${delay}s forwards;
-`;
-
-export default MainSection;
diff --git a/client/src/pages/MainPage/Section/MainSection/MainSection.style.ts b/client/src/pages/MainPage/Section/MainSection/MainSection.style.ts
new file mode 100644
index 000000000..8db38b97d
--- /dev/null
+++ b/client/src/pages/MainPage/Section/MainSection/MainSection.style.ts
@@ -0,0 +1,71 @@
+import {css, keyframes} from '@emotion/react';
+
+const fadeIn = keyframes`
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+`;
+
+const slideIn = keyframes`
+ from {
+ transform: translateY(1rem);
+ }
+ to {
+ transform: translateY(0);
+ }
+`;
+
+const bounce = keyframes`
+ 0%, 100% {
+ transform: translate(-50%, 0);
+ }
+ 50% {
+ transform: translate(-50%, -1rem);
+ }
+`;
+
+export const animateWithDelay = (delay: number) => css`
+ opacity: 0;
+ animation:
+ ${fadeIn} 1s ease-in-out ${delay}s forwards,
+ ${slideIn} 1s ease-in-out ${delay}s forwards;
+`;
+
+export const mainSectionStyle = css({
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100vh',
+ width: '100vw',
+});
+
+export const backgroundStyle = css({
+ position: 'fixed',
+ height: '100vh',
+ top: 0,
+ zIndex: -1,
+});
+
+export const backgroundImageStyle = css({
+ height: '100vh',
+ objectFit: 'cover',
+});
+
+export const sectionStyle = css({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ gap: '2rem',
+ padding: '1.5rem',
+ height: '100%',
+});
+
+export const chevronStyle = css({
+ position: 'absolute',
+ bottom: '2rem',
+ left: '50%',
+ animation: `${bounce} 2s infinite ease-in-out`,
+});
diff --git a/client/src/pages/MainPage/Section/MainSection/MainSection.tsx b/client/src/pages/MainPage/Section/MainSection/MainSection.tsx
new file mode 100644
index 000000000..e6e476336
--- /dev/null
+++ b/client/src/pages/MainPage/Section/MainSection/MainSection.tsx
@@ -0,0 +1,51 @@
+import {useNavigate} from 'react-router-dom';
+
+import Button from '@HDesign/components/Button/Button';
+import Text from '@HDesign/components/Text/Text';
+
+import {Icon} from '@components/Design';
+
+import {ROUTER_URLS} from '@constants/routerUrls';
+
+import {
+ animateWithDelay,
+ backgroundImageStyle,
+ backgroundStyle,
+ chevronStyle,
+ mainSectionStyle,
+ sectionStyle,
+} from './MainSection.style';
+
+type MainSectionProps = {
+ trackStartCreateEvent: () => void;
+};
+
+const MainSection = ({trackStartCreateEvent}: MainSectionProps) => {
+ const navigate = useNavigate();
+
+ const handleClick = () => {
+ trackStartCreateEvent();
+ navigate(ROUTER_URLS.createEvent);
+ };
+
+ return (
+
- 
-
-
-
- {`행동대장으로
- 간편하게 정산하세요
- `}
-
-
-
-
-
+
+ );
+};
+
+export default MainSection;
diff --git a/client/src/pages/MainPage/Section/MainSection/index.ts b/client/src/pages/MainPage/Section/MainSection/index.ts
new file mode 100644
index 000000000..aedde2c0f
--- /dev/null
+++ b/client/src/pages/MainPage/Section/MainSection/index.ts
@@ -0,0 +1 @@
+export {default as MainSection} from './MainSection';
diff --git a/client/src/pages/MainPage/Section/ReportSection.tsx b/client/src/pages/MainPage/Section/ReportSection.tsx
deleted file mode 100644
index cbf150b96..000000000
--- a/client/src/pages/MainPage/Section/ReportSection.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {css} from '@emotion/react';
-
-import Text from '@components/Design/components/Text/Text';
-
-const ReportSection = () => {
- return (
-
+
+
+
+
+ {`행동대장으로
+ 간편하게 정산하세요
+ `}
+
+
+
+
+
- 
-
- );
-};
-
-export default ReportSection;
From 8f8a925744276de727fcf393e2a99bfb817df268 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=A7=84=ED=98=B8?=
- 친구에게 링크를 공유하세요
-
- {`지출내역과 인원변동을 통해
- 금액은 자동으로 계산돼요`}
-
-
-
-
+
+
+
+ );
+ },
],
};
diff --git a/client/index.html b/client/index.html
index 7f96b23c5..610cb08a1 100644
--- a/client/index.html
+++ b/client/index.html
@@ -32,6 +32,9 @@
+
+
+
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 99e09da87..2872860cd 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -5,7 +5,6 @@ import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
import QueryClientBoundary from '@components/QueryClientBoundary/QueryClientBoundary';
import ErrorCatcher from '@components/AppErrorBoundary/ErrorCatcher';
import ToastContainer from '@components/Toast/ToastContainer';
-import KakaoInitializer from '@components/KakaoInitializer/KakaoInitializer';
import AmplitudeInitializer from '@components/AmplitudeInitializer/AmplitudeInitializer';
import {HDesignProvider} from '@HDesign/index';
@@ -26,9 +25,7 @@ const App: React.FC = () => {