[홈화면] 슬라이드 뷰, Application 뷰 컴포넌트 #25 make ApplicationSection view

Network-Leader · Oct 31, 2022 · 0bfce52 · 0bfce52
1 parent 6c126bf
commit 0bfce52
Show file tree

Hide file tree

Showing 6 changed files with 263 additions and 1 deletion.
diff --git a/src/assets/application_image.png b/src/assets/application_image.png
diff --git a/src/components/mainpage/applicationSection/LeftSector.tsx b/src/components/mainpage/applicationSection/LeftSector.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import {
+  CategoryBox,
+  CategoryContents,
+  CategoryTitle,
+} from "../../../styles/mainpage/applicationSection";
+import { Text } from "../../common";
+
+function LeftSector() {
+  return (
+    <>
+      <CategoryBox>
+        <CategoryTitle>
+          <Text size="medium" color="white">
+            {`>`} 전공 및 학년
+          </Text>
+        </CategoryTitle>
+        <CategoryContents>
+          <Text size="medium" color="white">
+            컴퓨터공학과 신입생
+          </Text>
+        </CategoryContents>
+      </CategoryBox>
+      <CategoryBox>
+        <Text size="medium" color="white">
+          {`>`} 대상
+        </Text>
+        <Text size="medium" color="white">
+          제한없음
+        </Text>
+      </CategoryBox>
+    </>
+  );
+}
+
+export default LeftSector;
diff --git a/src/components/mainpage/applicationSection/RightSector.tsx b/src/components/mainpage/applicationSection/RightSector.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import {
+  CategoryBox,
+  CategoryContents,
+  CategoryTitle,
+} from "../../../styles/mainpage/applicationSection";
+import { Text } from "../../common";
+
+function RightSector() {
+  return (
+    <>
+      <CategoryBox>
+        <Text size="medium" color="white">
+          {`>`} 전공 및 학년
+        </Text>
+
+        <Text size="medium" color="white">
+          전공/학년 무관
+        </Text>
+      </CategoryBox>
+      <CategoryBox>
+        <CategoryTitle>
+          <Text size="medium" color="white">
+            {`>`} 대상
+          </Text>
+        </CategoryTitle>
+        <CategoryContents>
+          <Text size="medium" color="white">
+            개발자로 진로를 확정하신 분
+          </Text>
+        </CategoryContents>
+      </CategoryBox>
+    </>
+  );
+}
+
+export default RightSector;
diff --git a/src/components/mainpage/applicationSection/index.tsx b/src/components/mainpage/applicationSection/index.tsx
@@ -0,0 +1,93 @@
+import React from "react";
+import {
+  Category,
+  CategoryBox,
+  CategoryContents,
+  CategoryTitle,
+  CoverImageBox,
+  HeaderBox,
+  LeftPeriodBox,
+  LeftSectorBox,
+  PeriodBox,
+  RegularSector,
+  RightPeriodBox,
+  RightSectorBox,
+  SectorBox,
+} from "../../../styles/mainpage/applicationSection";
+import { MainBox } from "../../../styles/mainpage/applicationSection";
+import { Text } from "../../common";
+import CoverImg from "../../../assets/application_image.png";
+import RightSector from "./RightSector";
+import LeftSector from "./LeftSector";
+
+function ApplicationSection() {
+  return (
+    <CoverImageBox
+      img={CoverImg} // 이걸로 안댐
+      style={{
+        backgroundImage: `url(${CoverImg})`,
+      }}
+    >
+      <MainBox>
+        <HeaderBox>
+          <Text size="h1" weight="bold" color="white">
+            Application
+          </Text>
+        </HeaderBox>
+
+        <PeriodBox>
+          <LeftPeriodBox>
+            <Category>
+              <Text size="h4" color="white">
+                모집 시기
+              </Text>
+            </Category>
+
+            <CategoryTitle>
+              <Text size="h4" color="white">
+                정기 모집
+              </Text>
+            </CategoryTitle>
+            <CategoryContents>
+              <Text size="h4" color="white">
+                2~3월
+              </Text>
+            </CategoryContents>
+          </LeftPeriodBox>
+          <RightPeriodBox>
+            <Text size="h4" color="white">
+              수시 모집
+            </Text>
+          </RightPeriodBox>
+        </PeriodBox>
+        <SectorBox>
+          <LeftSectorBox>
+            <Category>
+              <Text size="h4" color="white">
+                모집 부문
+              </Text>
+            </Category>
+            <RegularSector>
+              <Text size="h4" color="white">
+                정기모집 부문
+              </Text>
+              <LeftSector />
+            </RegularSector>
+          </LeftSectorBox>
+
+          <RightSectorBox>
+            <div>
+              <Text size="h4" color="white">
+                수시모집 부문
+              </Text>
+
+              <RightSector />
+            </div>
+          </RightSectorBox>
+        </SectorBox>
+      </MainBox>
+    </CoverImageBox>
+  );
+}
+
+export default ApplicationSection;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import SlideSection from "../components/mainpage/slideSection";
 import VideoTextSection from "../components/mainpage/videoTextSection";
+import SlideSection from "../components/mainpage/slideSection";
+import ApplicationSection from "../components/mainpage/applicationSection";
 
 const MainPage = () => {
   return (
@@ -9,6 +10,7 @@ const MainPage = () => {
         <VideoTextSection />
       </div>
       <SlideSection />
+      <ApplicationSection />
     </>
   );
 };

diff --git a/src/styles/mainpage/applicationSection.ts b/src/styles/mainpage/applicationSection.ts
@@ -0,0 +1,94 @@
+import styled from "@emotion/styled";
+
+export const CoverImageBox = styled.div<{ img: string }>`
+  background-image: url({img});
+  background-repeat: no-repeat;
+  height: auto;
+  width: 100%;
+  background-size: cover;
+`;
+
+export const MainBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 700px;
+  margin-left: 15%;
+  margin-right: 15%;
+`;
+
+export const HeaderBox = styled.div`
+  justify-content: center;
+  text-align: center;
+  margin: 10%;
+  margin-top: 20%;
+`;
+
+export const Category = styled.div`
+  margin-right: 25%;
+  margin-bottom: 30px;
+  width: 95px;
+`;
+
+export const PeriodBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const LeftPeriodBox = styled.div`
+  display: flex;
+  width: 50%;
+  border-bottom: 2px solid gray;
+`;
+
+export const RightPeriodBox = styled.div`
+  display: flex;
+  width: 30%;
+  border-bottom: 2px solid gray;
+`;
+
+export const SectorBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 30px;
+`;
+
+export const LeftSectorBox = styled.div`
+  display: flex;
+  width: 50%;
+`;
+export const RightSectorBox = styled.div`
+  display: flex;
+  width: 30%;
+`;
+
+export const CategoryBox = styled.div`
+  display: flex;
+  height: 30px;
+  margin: 15px;
+  width: 100%;
+  justify-content: space-between;
+`;
+
+export const CategoryTitle = styled.div`
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const CategoryContents = styled.div`
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(74, 56, 244, 0.5);
+  border-radius: 5px;
+  padding: 10px;
+`;
+
+export const RegularSector = styled.div`
+  display: flex;
+  flex-direction: column;
+`;