Merge branch 'dev' into feature-황은지

eunji-0623 · Jun 1, 2024 · 8b46724 · 8b46724
2 parents 7ea37c7 + 2b140cc
commit 8b46724
Show file tree

Hide file tree

Showing 22 changed files with 587 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,18 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Abel&family=Acme&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:[email protected]&display=swap"
+      rel="stylesheet"
+    />
     <title>Taskify</title>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1",
     "sass": "^1.77.3"
   },
   "devDependencies": {

diff --git a/public/icon/logo_large_dark.svg b/public/icon/logo_large_dark.svg
diff --git a/public/img/DashBoardSetting.png b/public/img/DashBoardSetting.png
diff --git a/public/img/Invite.png b/public/img/Invite.png
diff --git a/public/img/Members.png b/public/img/Members.png
diff --git a/public/img/Point1.png b/public/img/Point1.png
diff --git a/public/img/Point2.png b/public/img/Point2.png
diff --git a/public/img/desktop.png b/public/img/desktop.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,19 @@
-import React from 'react';
+import './styles/global.scss';
+import './styles/reset.scss';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Home from './pages/Home/Home';
+
+/*
+페이지 라우팅 분리,
+*/
 
 function App() {
-  return <>eslint 테스트</>;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route index element={<Home />} />
+      </Routes>
+    </BrowserRouter>
+  );
 }
-
 export default App;
diff --git a/src/pages/Home/Home.module.scss b/src/pages/Home/Home.module.scss
@@ -0,0 +1,7 @@
+@import '../../styles/global.scss';
+
+.HomeBody {
+  width: 100%;
+  height: auto;
+  background-color: $black_000000;
+}
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -0,0 +1,20 @@
+import styles from './Home.module.scss';
+import Footer from './components/Footer/Footer';
+import HomeHeader from './components/Header/Header';
+import Main from './components/Main/Main';
+
+/*
+초기 랜더링 페이지 최상단 입니다.
+*/
+
+function Home() {
+  return (
+    <div className={styles.HomeBody}>
+      <HomeHeader />
+      <Main />
+      <Footer />
+    </div>
+  );
+}
+
+export default Home;
diff --git a/src/pages/Home/components/Card/Card.module.scss b/src/pages/Home/components/Card/Card.module.scss
@@ -0,0 +1,53 @@
+.Card {
+  width: 378px;
+  height: 383px;
+  border-radius: 8px;
+}
+
+.Image__Container {
+  width: 100%;
+  height: 260px;
+  background: var(--black-black_4B4B4B, #4b4b4b);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px 8px 0px 0px;
+}
+.Info_Img {
+  width: 300px;
+  height: 123.871px;
+  flex-shrink: 0;
+}
+.Text__Container {
+  width: 100%;
+  height: 124px;
+  flex-shrink: 0;
+  background: var(--black-black_171717, #171717);
+  border-radius: 0px 0px 8px 8px;
+}
+
+.Text__Container {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 32px 32px;
+}
+
+.Text_title {
+  color: var(--white-white_FFFFFF, #fff);
+  font-family: Pretendard;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+
+}
+.Text {
+  color: var(--white-white_FFFFFF, #fff);
+  font-family: Pretendard;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
diff --git a/src/pages/Home/components/Card/Card.tsx b/src/pages/Home/components/Card/Card.tsx
@@ -0,0 +1,32 @@
+import styles from './Card.module.scss';
+
+/*
+랜더링 페이지에 사용되는 Card 컴포넌트로
+ 이미지와 텍스트 내용을 Props로 받습니다.
+*/
+
+interface CardProps {
+  ImgSrc: string;
+  Title: string;
+  Text: string;
+}
+
+function Card({ ImgSrc, Title, Text }: CardProps) {
+  return (
+    <div className={styles.Card}>
+      <div className={styles.Image__Container}>
+        <img
+          src={ImgSrc}
+          alt={`${ImgSrc} 이미지`}
+          className={styles.Info_Img}
+        />
+      </div>
+      <div className={styles.Text__Container}>
+        <span className={styles.Text_title}>{Title}</span>
+        <span className={styles.Text}>{Text}</span>
+      </div>
+    </div>
+  );
+}
+
+export default Card;
diff --git a/src/pages/Home/components/Footer/Footer.module.scss b/src/pages/Home/components/Footer/Footer.module.scss
@@ -0,0 +1,27 @@
+.Footer {
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 140px 0 140px;
+}
+.Links {
+  display: flex;
+  gap: 32px;
+}
+
+.Footer_text {
+  color: var(--gray-gray_9FA6B2, #9fa6b2);
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-decoration: none;
+}
+
+.Footer_imgs {
+  display: flex;
+  gap: 14px;
+}
diff --git a/src/pages/Home/components/Footer/Footer.tsx b/src/pages/Home/components/Footer/Footer.tsx
@@ -0,0 +1,32 @@
+import { Link } from 'react-router-dom';
+import styles from './Footer.module.scss';
+import MailImg from '../../../../../public/icon/email_icon.svg';
+import FacebookImg from '../../../../../public/icon/facebook_logo.svg';
+import InstagramImg from '../../../../../public/icon/instagram_logo.svg';
+
+/*
+랜더링 페이지의 Footer 입니다.
+*/
+
+function Footer() {
+  return (
+    <footer className={styles.Footer}>
+      <span className={styles.Footer_text}>©codeit - 2024</span>
+      <div className={styles.Links}>
+        <Link to="/privacy" className={styles.Footer_text}>
+          Privacy Policy
+        </Link>
+        <Link to="/faq" className={styles.Footer_text}>
+          FAQ
+        </Link>
+      </div>
+      <div className={styles.Footer_imgs}>
+        <img src={MailImg} alt="메일 이미지" />
+        <img src={FacebookImg} alt="페이스북 로고 이미지" />
+        <img src={InstagramImg} alt="인스타그램 로고 이미지" />
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;
diff --git a/src/pages/Home/components/Header/Header.module.scss b/src/pages/Home/components/Header/Header.module.scss
@@ -0,0 +1,35 @@
+@import "../../../../styles/global.scss";
+
+.Home_Header {
+
+  height: 70px;
+  position: sticky;
+  top: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: 16px;
+  margin-right: 80px;
+  background-color: $black_000000;
+  z-index: 1;
+}
+
+.sign__container {
+  display: flex;
+  align-items: center;
+  gap: 36px;
+}
+
+.Header_login,
+.Header_signup {
+  color: var(--white-white_FFFFFF, #fff);
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
diff --git a/src/pages/Home/components/Header/Header.tsx b/src/pages/Home/components/Header/Header.tsx
@@ -0,0 +1,27 @@
+import { Link } from 'react-router-dom';
+import Logo from '../../../../../public/icon/logo_large_dark.svg';
+import styles from './Header.module.scss';
+
+/*
+랜더링 홈페이지의 header 컴포넌트입니다.
+*/
+
+function HomeHeader() {
+  return (
+    <header className={styles.Home_Header}>
+      <Link to="/" className={styles.Logo__conatiner}>
+        <img src={Logo} alt="로고이미지" width={120} height={40} />
+      </Link>
+      <div className={styles.sign__container}>
+        <Link to="/login">
+          <button className={styles.Header_login} type="button">로그인</button>
+        </Link>
+        <Link to="/signup">
+          <button className={styles.Header_signup} type="button">회원가입</button>
+        </Link>
+      </div>
+    </header>
+  );
+}
+
+export default HomeHeader;