refactor: 랜딩 페이지 디렉토리 구조 변경 (#767)

* refactor: 랜딩 페이지 디렉토리 구조 변경 * refactor: nav 관련 스타일 nav로 이동 * remove: 사용하지 않는 컴포넌트 제거 * style: div => section, article 태그로 변경 * style: 컴포넌트 이름 조금 더 의미있게 변경
woowacourse-teams · Oct 18, 2024 · 5394795 · 5394795
1 parent dbded65
commit 5394795
Show file tree

Hide file tree

Showing 32 changed files with 639 additions and 615 deletions.
diff --git a/client/src/pages/MainPage/MainPage.style.ts b/client/src/pages/MainPage/MainPage.style.ts
@@ -0,0 +1,9 @@
+import {css} from '@emotion/react';
+
+export const mainContainer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+});
diff --git a/client/src/pages/MainPage/MainPage.tsx b/client/src/pages/MainPage/MainPage.tsx
@@ -1,45 +1,17 @@
-import {css} from '@emotion/react';
-
 import useAmplitude from '@hooks/useAmplitude';
 
 import Nav from './Nav/Nav';
-import MainSection from './Section/MainSection';
-import DescriptionSection from './Section/DescriptionSection';
-import FeatureSection from './Section/FeatureSection';
-import CreatorSection from './Section/CreatorSection';
+import {MainSection} from './Section/MainSection';
+import {DescriptionSection} from './Section/DescriptionSection';
+import {FeatureSection} from './Section/FeatureSection';
+import {mainContainer} from './MainPage.style';
 
 const MainPage = () => {
   const {trackStartCreateEvent} = useAmplitude();
 
   return (
-    <div
-      css={css({
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-      })}
-    >
-      <div
-        css={css({
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          right: 0,
-          zIndex: 10,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          padding: '1rem 0',
-          width: '100%',
-          backgroundColor: 'white',
-        })}
-      >
-        <div css={css({maxWidth: '1200px', width: '100%'})}>
-          <Nav trackStartCreateEvent={trackStartCreateEvent} />
-        </div>
-      </div>
+    <div css={mainContainer}>
+      <Nav trackStartCreateEvent={trackStartCreateEvent} />
       <MainSection trackStartCreateEvent={trackStartCreateEvent} />
       <DescriptionSection />
       <FeatureSection />

diff --git a/client/src/pages/MainPage/Nav/Nav.style.ts b/client/src/pages/MainPage/Nav/Nav.style.ts
@@ -1,25 +1,27 @@
 import {css} from '@emotion/react';
 
-import {Theme} from '@components/Design/theme/theme.type';
-
-export const navStyle = (theme: Theme) =>
-  css({
-    position: 'fixed',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '1rem',
+export const navFixedStyle = css({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: 10,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: '1rem 0',
+  width: '100%',
+  backgroundColor: 'white',
+});
 
-    top: '0',
-    width: '100%',
-    maxWidth: '768px',
-    zIndex: theme.zIndex.navBackgroundColor,
-    height: '4rem',
-    backgroundColor: 'white',
-  });
+export const navWrapperStyle = css({
+  maxWidth: '1200px',
+  width: '100%',
+});
 
-export const logoStyle = css({
+export const navStyle = css({
   display: 'flex',
-  gap: '0.5rem',
+  justifyContent: 'space-between',
   alignItems: 'center',
+  height: '2.5rem',
 });
diff --git a/client/src/pages/MainPage/Nav/Nav.tsx b/client/src/pages/MainPage/Nav/Nav.tsx
@@ -4,6 +4,8 @@ import {Button, Text, Icon, TopNav, IconButton} from '@HDesign/index';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
+import {navFixedStyle, navStyle, navWrapperStyle} from './Nav.style';
+
 type NavProps = {
   trackStartCreateEvent: () => void;
 };
@@ -17,21 +19,25 @@ const Nav = ({trackStartCreateEvent}: NavProps) => {
   };
 
   return (
-    <header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '2.5rem'}}>
-      <TopNav>
-        <TopNav.Item routePath="/">
-          <IconButton variants="none" aria-label="행동대장 로고">
-            <Icon iconType="heundeut" />
-          </IconButton>
-        </TopNav.Item>
-        <TopNav.Item routePath="/">
-          <Text size="subTitle">행동대장</Text>
-        </TopNav.Item>
-      </TopNav>
-      <Button size="medium" variants="tertiary" onClick={StartCreateEvent} style={{marginRight: '1rem'}}>
-        정산 시작하기
-      </Button>
-    </header>
+    <div css={navFixedStyle}>
+      <div css={navWrapperStyle}>
+        <header css={navStyle}>
+          <TopNav>
+            <TopNav.Item routePath="/">
+              <IconButton variants="none" aria-label="행동대장 로고">
+                <Icon iconType="heundeut" />
+              </IconButton>
+            </TopNav.Item>
+            <TopNav.Item routePath="/">
+              <Text size="subTitle">행동대장</Text>
+            </TopNav.Item>
+          </TopNav>
+          <Button size="medium" variants="tertiary" onClick={StartCreateEvent} style={{marginRight: '1rem'}}>
+            정산 시작하기
+          </Button>
+        </header>
+      </div>
+    </div>
   );
 };
 

diff --git a/client/src/pages/MainPage/Nav/index.ts 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
diff --git a/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.style.ts 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
@@ -0,0 +1,21 @@
+import Text from '@HDesign/components/Text/Text';
+
+import {descriptionSectionStyle, imgStyle} from './DescriptionSection.style';
+
+const DescriptionSection = () => {
+  return (
+    <div css={descriptionSectionStyle}>
+      <img css={imgStyle} src={`${process.env.IMAGE_URL}/standingDog.svg`} alt="행댕이" />
+      <Text style={{textAlign: 'center'}} size="subTitle" responsive={true}>{`행동대장들을 위해
+        행동대장을 준비했어요
+          `}</Text>
+      <Text style={{textAlign: 'center'}} size="subTitle" responsive={true} textColor="gray">{`주환이가 먼저 집에 가도
+        소연이가 늦게 도착해도
+        건상이가 술을 마시지 않아도
+          `}</Text>
+      <Text style={{textAlign: 'center'}} size="subTitle" responsive={true}>{`간편하게 정산할 수 있어요`}</Text>
+    </div>
+  );
+};
+
+export default DescriptionSection;
diff --git a/client/src/pages/MainPage/Section/DescriptionSection/index.ts b/client/src/pages/MainPage/Section/DescriptionSection/index.ts
@@ -0,0 +1 @@
+export {default as DescriptionSection} from './DescriptionSection';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export {default as DescriptionSection} from './DescriptionSection';