feat: main page section 생성

src/features/About/components/Result.tsx → src/components/Result/Result.tsx

@@ -6,7 +6,6 @@ import { theme } from '~/styles/theme';
 
 import { ResultCardList } from './ResultCardList';
 
-// TODO: 공통 컴포넌트 분리 / 반응형 작업
 export const Result = () => {
   const { isTargetSize: isMobileSize } = useCheckWindowSize('mobile');
   return (

src/components/Result/index.ts

@@ -0,0 +1 @@
+export * from './Result';

src/features/About/sections/AboutResultSection.tsx

@@ -1,29 +1,11 @@
-import { css, SerializedStyles, Theme } from '@emotion/react';
+import { css, Theme } from '@emotion/react';
 
-import { NarrowArrowIcon } from '~/components/Icons';
-import { LinkWrapper } from '~/components/Main/LinkWrapper';
+import { Result } from '~/components/Result';
 
-import { Result } from '../components/Result';
-
-interface AbountResultSection {
-  hasLinkButton?: boolean;
-  style?: SerializedStyles;
-}
-
-export const AboutResultSection = ({ hasLinkButton, style }: AbountResultSection) => {
+export const AboutResultSection = () => {
   return (
-    <section css={[layoutCss, style]}>
+    <section css={layoutCss}>
       <Result />
-
-      {/* NOTE: 개발 예정 */}
-      {hasLinkButton && (
-        <LinkWrapper href="/about" textColor="white" textHover={true}>
-          디프만 소개 보기
-          <span css={arrowImgContainerCss}>
-            <NarrowArrowIcon direction="right" color="black" fill="black" />
-          </span>
-        </LinkWrapper>
-      )}
     </section>
   );
 };
@@ -37,13 +19,3 @@ const layoutCss = (theme: Theme) => css`
   align-items: center;
   background-color: ${theme.colors.white};
 `;
-
-const arrowImgContainerCss = css`
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 400px;
-  background-color: white;
-`;

src/features/Blog/BlogSubscribeSection.tsx

@@ -49,7 +49,6 @@ const articleCss = () => css`
   max-width: 900px;
   height: auto;
   border-radius: 20px;
-}
 `;
 
 const descriptionCss = (theme: Theme) => css`

src/features/Main/sections/MainBlogSection.tsx

@@ -0,0 +1,6 @@
+/**
+ * * Main 페이지 블로그 section
+ */
+export const MainBlogSection = () => {
+  return <section>Blog</section>;
+};

src/features/Main/sections/MainIntroSection.tsx

@@ -0,0 +1,6 @@
+/**
+ * * Main 페이지 Intro + 지원 버튼 section
+ */
+export const MainIntroSection = () => {
+  return <section>디프만 Intro</section>;
+};

src/features/Main/sections/MainProjectSection.tsx

@@ -0,0 +1,6 @@
+/**
+ * * Main 페이지 프로젝트 section
+ */
+export const MainProjectSection = () => {
+  return <section>Project</section>;
+};

src/features/Main/sections/MainReasonSection.tsx

@@ -0,0 +1,6 @@
+/**
+ * * Main 페이지 합류해야 하는 이유 section
+ */
+export const MainReasonSection = () => {
+  return <section>reason</section>;
+};

src/features/Main/sections/MainRecruitSection.tsx

@@ -0,0 +1,6 @@
+/**
+ * * Main 페이지 지원하기 section
+ */
+export const MainRecruitSection = () => {
+  return <section>Recruit</section>;
+};

src/features/Main/sections/MainResultSection.tsx

@@ -0,0 +1,23 @@
+import { css, Theme } from '@emotion/react';
+
+import { Result } from '~/components/Result';
+
+export const MainResultSection = () => {
+  return (
+    <section css={layoutCss}>
+      <Result />
+
+      <button>디프만 소개 보기</button>
+    </section>
+  );
+};
+
+const layoutCss = (theme: Theme) => css`
+  padding: 140px 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 90px;
+  align-items: center;
+  background-color: ${theme.colors.white};
+`;

src/features/Main/sections/MainScheduleSection.tsx

@@ -0,0 +1,6 @@
+/**
+ * * Main 페이지 주차별 일정 section
+ */
+export const MainScheduleSection = () => {
+  return <section>Schedule</section>;
+};

src/features/Main/sections/MainSubscribeSection.tsx

@@ -0,0 +1,6 @@
+/**
+ * * Main 페이지 뉴스레터 구독 section
+ */
+export const MainSubscribeSection = () => {
+  return <section>Subscribe</section>;
+};

src/features/Main/sections/MainSupportSection.tsx

@@ -0,0 +1,6 @@
+/**
+ * * Main 페이지 후원사 section
+ */
+export const MainSupportSection = () => {
+  return <section>Support</section>;
+};

src/features/Main/sections/index.ts

@@ -0,0 +1,8 @@
+export * from './MainBlogSection';
+export * from './MainIntroSection';
+export * from './MainProjectSection';
+export * from './MainReasonSection';
+export * from './MainRecruitSection';
+export * from './MainResultSection';
+export * from './MainScheduleSection';
+export * from './MainSupportSection';

src/pages/index.tsx

@@ -1,14 +1,32 @@
-import { Intro } from '~/components/Intro';
-import { Ending, JourneyEntrance, RecruitEntrance, Subscribe } from '~/components/Main';
-import { ProjectCarousel } from '~/components/ProjectCarousel';
 import { SEO } from '~/components/SEO';
+import {
+  MainBlogSection,
+  MainIntroSection,
+  MainProjectSection,
+  MainReasonSection,
+  MainRecruitSection,
+  MainResultSection,
+  MainScheduleSection,
+  MainSupportSection,
+} from '~/features/Main/sections';
+import { MainSubscribeSection } from '~/features/Main/sections/MainSubscribeSection';
 
 export default function Root() {
   return (
     <>
       <SEO />
       <main>
-        <div>
+        <MainIntroSection />
+        <MainResultSection />
+        <MainReasonSection />
+        <MainScheduleSection />
+        <MainProjectSection />
+        <MainSupportSection />
+        <MainRecruitSection />
+        <MainBlogSection />
+        <MainSubscribeSection />
+        {/* NOTE: 기존 웹 구조 */}
+        {/* <div>
           <Intro
             imageUrl="/images/main/intro-img.svg"
             title="15기 모집 인트로"
@@ -21,7 +39,7 @@ export default function Root() {
           <ProjectCarousel />
           <Ending />
           <Subscribe />
-        </div>
+        </div> */}
       </main>
     </>
   );