🚀 Deploy (#45)

KakaoTech-BootCamp-Team-2 · Aug 19, 2024 · 0f047ae · 0f047ae
1 parent 914d4eb
commit 0f047ae
Show file tree

Hide file tree

Showing 41 changed files with 587 additions and 257 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/Kaboo-Connection-Front.iml b/.idea/Kaboo-Connection-Front.iml
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/README.md b/README.md
@@ -25,3 +25,14 @@
 | ✅ Test        | `:white_check_mark` | 로직 및 코드 테스트              |
 | ♻️ Refactoring | `:recycle`          | 코드 리팩토링                    |
 | 📘 Docs        | `:blue_book`        | Feature 이외에 문서 생성 및 수정 |
+
+### font
+
+KakaoBold 또는 KakaoRegular
+
+### color
+
+기본 노랑 : #FFF496
+기본 찐브라운 : #715F00
+기본 연브라운 : #D3CBA1
+블랙 : #000
diff --git a/dist/assets/index-BSSa90UF.js b/dist/assets/index-BSSa90UF.js
diff --git a/dist/assets/index-BqHKD4MV.js b/dist/assets/index-BqHKD4MV.js
diff --git a/dist/assets/index-DiwrgTda.css b/dist/assets/index-DiwrgTda.css
diff --git a/dist/assets/react-CHdo91hT.svg b/dist/assets/react-CHdo91hT.svg
diff --git a/dist/index.html b/dist/index.html
@@ -4,9 +4,8 @@
     <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" />
-    <title>Vite + React</title>
-    <script type="module" crossorigin src="/assets/index-BSSa90UF.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DiwrgTda.css">
+    <title>카부카부</title>
+    <script type="module" crossorigin src="/assets/index-BqHKD4MV.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/dist/vite.svg b/dist/vite.svg
diff --git a/public/fonts/KakaoBold.ttf b/public/fonts/KakaoBold.ttf
diff --git a/public/fonts/KakaoOTFBold.otf b/public/fonts/KakaoOTFBold.otf
diff --git a/public/fonts/KakaoOTFRegular.otf b/public/fonts/KakaoOTFRegular.otf
diff --git a/public/fonts/KakaoRegular.ttf b/public/fonts/KakaoRegular.ttf
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,24 +1,11 @@
-import Layout from "./components/Common/Layout";
-import { useState } from "react";
-import "./App.css";
-import {
-  BrowserRouter as Router,
-  Routes,
-  Route,
-  Link,
-  useLocation,
-} from "react-router-dom";
-
-import Header from "./components/Common/Header";
-import HomeMain from "./pages/homepages/HomeMain";
-
+import GlobalStyle from "./components/Common/GlobalStyle";
+import { PeopleListPage } from "./pages/PeopleListPage";
 function App() {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<HomeMain />}></Route>
-      </Routes>
-    </Router>
+    <>
+      <GlobalStyle />
+      <PeopleListPage></PeopleListPage>
+    </>
   );
 }
 

diff --git a/src/assets/dummyImages/peopleList.jpeg b/src/assets/dummyImages/peopleList.jpeg
diff --git a/src/assets/dummyImages/peoplelist2.png b/src/assets/dummyImages/peoplelist2.png
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/Common/Footer.jsx b/src/components/Common/Footer.jsx
@@ -1,12 +1,25 @@
 /** @jsxImportSource @emotion/react */
 import React from "react";
 import { footerStyle, strongTextStyle, normalTextStyle } from "./Footer.styled";
+import Text from "../Common/Text";
 
 const Footer = () => {
   return (
     <footer css={footerStyle}>
-      <p css={strongTextStyle}>카카오 부트캠프 2조: 춘식2</p>
-      <p css={normalTextStyle}>박세호 박지혁 안태진 정은채 한주리</p>
+      <Text
+        value="카카오 부트캠프 2조: 춘식2"
+        fontFamily="KakaoBold"
+        fontSize={15}
+        color="#000"
+        style={strongTextStyle}
+      />
+      <Text
+        value="박세호 박지혁 안태진 정은채 한주리"
+        fontFamily="KakaoRegular"
+        fontSize={15}
+        color="#715F00"
+        style={normalTextStyle}
+      />
     </footer>
   );
 };

diff --git a/src/components/Common/Footer.styled.js b/src/components/Common/Footer.styled.js
@@ -9,18 +9,19 @@ export const footerStyle = css`
   padding: 20px 0;
   position: relative;
   bottom: 0;
-  z-index: 1000; // 다른 요소들 위로 보이도록 z-index 설정
+  z-index: 1000;
+
   width: 100%;
-  height: 130px;
+  height: 100px;
+
+  display: flex;
+  flex-direction: column;
 `;
 
 export const strongTextStyle = css`
-  font-size: 14px;
-  font-weight: bold;
   margin: 20px 0px 0px 50px;
 `;
 
 export const normalTextStyle = css`
-  font-size: 14px;
   margin: 10px 0px 0px 50px;
 `;
diff --git a/src/components/Common/GlobalStyle.jsx b/src/components/Common/GlobalStyle.jsx
@@ -0,0 +1,28 @@
+/** @jsxImportSource @emotion/react */
+import { Global, css } from "@emotion/react";
+
+const GlobalStyle = () => (
+  <Global
+    styles={css`
+      @font-face {
+        font-family: "KakaoBold";
+        src: url("public/fonts/KakaoBold.ttf") format("truetype");
+        font-weight: normal;
+        font-style: normal;
+      }
+      @font-face {
+        font-family: "KakaoRegular";
+        src: url("public/fonts/KakaoRegular.ttf") format("truetype");
+        font-weight: normal;
+        font-style: normal;
+      }
+      body {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+    `}
+  />
+);
+
+export default GlobalStyle;
diff --git a/src/components/Common/Text.jsx b/src/components/Common/Text.jsx
@@ -0,0 +1,25 @@
+/** @jsxImportSource @emotion/react */
+import { getTextStyle } from "./Text.style";
+
+// KakaoBold 또는 KakaoRegular
+
+// 기본 노랑 :   #FFF496
+// 기본 찐브라운 : #715F00
+// 기본 연브라운 :  #D3CBA1
+// 블랙 :  #000
+
+const Text = ({
+  value,
+  fontFamily = "KakaoRegular",
+  fontSize = 16,
+  color = "#000",
+  style: customCss,
+}) => {
+  return (
+    <span css={[getTextStyle({ fontFamily, fontSize, color }), customCss]}>
+      {value}
+    </span>
+  );
+};
+
+export default Text;
diff --git a/src/components/Common/Text.style.js b/src/components/Common/Text.style.js
@@ -0,0 +1,8 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+export const getTextStyle = ({ fontFamily, fontSize, color }) => css`
+  font-family: ${fontFamily};
+  font-size: ${fontSize}px;
+  color: ${color};
+`;
diff --git a/src/components/Common/miniLayout.jsx b/src/components/Common/miniLayout.jsx
@@ -0,0 +1,17 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import Text from "../Common/Text";
+import { LayoutContainer, Line, CenterContent } from "./miniLayout.styled";
+
+const MiniLayout = ({ text, children, layerWidth }) => {
+  return (
+    <LayoutContainer width={layerWidth}>
+      <Text value={text} fontFamily="KakaoBold" fontSize={30} color="#000" />
+      <Line />
+      <CenterContent>{children}</CenterContent>
+      <Line />
+    </LayoutContainer>
+  );
+};
+
+export default MiniLayout;
diff --git a/src/components/Common/miniLayout.styled.js b/src/components/Common/miniLayout.styled.js
@@ -0,0 +1,23 @@
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+
+export const LayoutContainer = styled.div`
+  width: ${({ width }) => width || "100%"};
+  box-sizing: border-box;
+`;
+
+export const Line = styled.div`
+  width: 100%;
+  height: 3px;
+  background-color: #715f00;
+  margin: 15px 0px 15px 0px;
+`;
+
+export const CenterContent = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  // justify-content: space-between; 별로임
+  justify-content: center;
+  gap: 20px;
+  margin: 10px;
+`;
diff --git a/src/components/PeopleListComponents/peopleCard.jsx b/src/components/PeopleListComponents/peopleCard.jsx
@@ -0,0 +1,33 @@
+/** @jsxImportSource @emotion/react */
+import Text from "../Common/Text";
+import React from "react";
+import {
+  CardContainer,
+  ProfileImage,
+  Name,
+  Affiliation,
+} from "./peopleCard.styled";
+
+const PeopleCard = ({ image, name, affiliation, onClick }) => {
+  return (
+    <CardContainer onClick={onClick}>
+      <ProfileImage src={image} alt={name} />
+      <Text
+        value={name}
+        fontFamily="KakaoBold"
+        fontSize={15}
+        color="#000"
+        style={Name}
+      />
+      <Text
+        value={affiliation}
+        fontFamily="KakaoRegular"
+        fontSize={13}
+        color="#715F00"
+        style={Affiliation}
+      />
+    </CardContainer>
+  );
+};
+
+export default PeopleCard;