Merge pull request #96 from Team-INSERT/feat/home

홈 페이지 퍼블리싱 및 API 함수 정의 완료

src/apis/httpClient/httpClient.ts

@@ -180,4 +180,5 @@ export default {
   reserve: new HttpClient("api/ber", axiosConfig),
   meister: new HttpClient("api/meister", axiosConfig),
   ranking: new HttpClient("api/meister/ranking", axiosConfig),
+  main: new HttpClient("api/main", axiosConfig),
 };

src/assets/icons/BambooIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const BambooIcon = () => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 35 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.0408204 0.953125C0.33457 4.23438 0.331445 7.51562 0.0408204 10.7969H3.49551C3.13926 7.54688 3.20801 4.25937 3.51738 0.953125H0.0408204ZM14.2346 0.953125C14.4377 5.17969 14.6643 9.4375 14.2658 13.8203H17.7268C17.3361 9.5625 17.4377 5.26406 17.7502 0.953125H14.2346ZM23.0783 0.953125C23.4377 3.41484 23.3596 5.86562 23.0471 8.29688H26.4924C26.3049 5.84922 26.3049 3.40078 26.4924 0.953125H23.0783ZM32.1799 3.80156C32.1799 3.80156 28.9455 4.41172 28.0002 5.66562C27.7502 6.02578 27.5393 6.62812 27.7658 7.00781C28.008 7.38281 28.6018 7.39844 29.0002 7.26563C30.4299 6.79688 32.1799 3.80156 32.1799 3.80156ZM9.51582 7.35156C9.51582 7.35156 10.4533 10.6875 11.7111 11.5C12.0705 11.7422 12.6643 11.8594 12.9846 11.5547C13.3049 11.25 13.2502 10.6172 13.0939 10.2109C12.4846 8.75 9.51582 7.35156 9.51582 7.35156ZM29.9377 7.89063C29.5783 7.89844 29.2424 7.9375 28.9611 8.03125C28.4689 8.20312 27.8596 8.66406 27.883 9.17969C27.8908 9.69531 28.5236 10.1172 29.0393 10.2578C30.883 10.7422 34.6252 8.96094 34.6252 8.96094C34.6252 8.96094 31.8752 7.86719 29.9377 7.89063ZM23.0471 9.70312C23.5314 13.4297 23.6018 17.1328 23.0627 20.7969H26.4846C26.1721 17.0937 26.2111 13.3906 26.5002 9.70312H23.0471ZM28.3127 11.1797C28.1408 11.1875 27.9768 11.2422 27.8518 11.3594C27.5314 11.6641 27.5861 12.2969 27.7424 12.7031C28.3518 14.1641 31.3205 15.5625 31.3205 15.5625C31.3205 15.5625 30.383 12.2266 29.1252 11.4141C28.9221 11.2812 28.6486 11.1797 28.383 11.1797H28.3127ZM8.39082 12.1406C7.36738 12.1562 6.57832 12.2422 6.57832 12.2422C6.57832 12.2422 9.72676 14.9453 11.633 14.9609C12.1564 14.9531 12.883 14.7187 13.0236 14.2266C13.1877 13.7344 12.7268 13.125 12.2814 12.8281C11.4924 12.2969 10.0627 12.1562 8.83613 12.1406H8.39082ZM0.0634764 12.2031C0.408008 15.4922 0.369727 18.7734 0.0478517 22.0469H3.51816C3.21348 18.7422 3.13379 15.4531 3.49395 12.2031H0.0634764ZM14.2424 14.7031C14.5002 18.7734 14.5158 22.8828 14.2424 27.0469H17.7268C17.3361 22.8672 17.4377 18.7656 17.7502 14.7031H14.2424ZM8.27363 16.4688C8.27363 16.4688 5.30488 17.8672 4.69551 19.3281C4.53926 19.7344 4.48457 20.3672 4.80488 20.6719C5.1252 20.9766 5.71895 20.8594 6.07832 20.6172C7.33613 19.8047 8.27363 16.4688 8.27363 16.4688ZM6.27363 22.1016C5.7502 22.1172 5.10176 22.3438 4.95332 22.8047C4.78926 23.2891 5.23457 23.9063 5.66426 24.2109C7.21894 25.3047 11.3518 24.9453 11.3518 24.9453C11.3518 24.9453 8.28145 22.1641 6.3752 22.1016H6.27363ZM23.008 22.2031C23.2268 25.0547 23.2893 27.9219 23.0236 30.7969H26.4533C26.0939 27.8281 26.3205 24.9922 26.5002 22.2031H23.008ZM0.0322266 23.4531C0.341602 28 0.244727 32.5313 0.0166016 37.0469H3.54863C3.3541 32.5391 3.19238 28.0078 3.52676 23.4531H0.0322266ZM5.45332 25.3906C5.15645 25.3984 4.86738 25.4922 4.71895 25.7266C4.49238 26.1016 4.70332 26.7109 4.95332 27.0703C5.89863 28.3203 9.13301 28.9297 9.13301 28.9297C9.13301 28.9297 7.38301 25.9375 5.95332 25.4687C5.80488 25.4219 5.6252 25.3906 5.45332 25.3906ZM33.5549 26.9063C33.5549 26.9063 29.4221 27.3047 28.0939 28.6641C27.7346 29.0391 27.3986 29.7344 27.6564 30.1797C27.8986 30.6328 28.6564 30.7188 29.1799 30.6094C31.0393 30.2031 33.5549 26.9063 33.5549 26.9063ZM14.2814 28.4531C14.5627 31.3203 14.3127 34.2266 14.2268 37.0469H17.758C17.6252 34.25 17.3127 31.3906 17.6955 28.4531H14.2814ZM28.5002 31.9688C28.0939 31.9688 27.633 32.1484 27.508 32.5078C27.3596 32.9219 27.6955 33.4609 28.0236 33.7578C29.2268 34.7734 32.508 34.6641 32.508 34.6641C32.508 34.6641 30.1564 32.125 28.6643 31.9766C28.6096 31.9688 28.5549 31.9688 28.5002 31.9688ZM23.0314 32.2031C23.1955 33.7891 23.2893 35.4062 23.0783 37.0469H26.4221C26.2033 35.3984 26.3127 33.7813 26.4768 32.2031H23.0314Z"
+        fill="#3EF000"
+      />
+    </svg>
+  );
+};
+
+export default BambooIcon;

src/assets/icons/BerIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const BerIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="21"
+      viewBox="0 0 20 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.9999 1.78137H4.99992C4.08325 1.78137 3.33325 2.53137 3.33325 3.44804V16.7814C3.33325 17.698 4.08325 18.448 4.99992 18.448H14.9999C15.9166 18.448 16.6666 17.698 16.6666 16.7814V3.44804C16.6666 2.53137 15.9166 1.78137 14.9999 1.78137ZM12.9166 11.3647C12.2249 11.3647 11.6666 10.8064 11.6666 10.1147C11.6666 9.42304 12.2249 8.86471 12.9166 8.86471C13.6083 8.86471 14.1666 9.42304 14.1666 10.1147C14.1666 10.8064 13.6083 11.3647 12.9166 11.3647Z"
+        fill="#73AEE3"
+      />
+    </svg>
+  );
+};
+
+export default BerIcon;

src/assets/icons/CalenderIcon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+const CalenderIcon = () => {
+  return (
+    <svg
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        opacity="0.5"
+        d="M2.47266 15.8333V8.83329H18.1393V15.8333C18.1393 16.3637 17.9286 16.8724 17.5535 17.2475C17.1785 17.6226 16.6698 17.8333 16.1393 17.8333H4.47266C3.94222 17.8333 3.43352 17.6226 3.05844 17.2475C2.68337 16.8724 2.47266 16.3637 2.47266 15.8333ZM6.13932 6.16663C6.05092 6.16663 5.96613 6.13151 5.90362 6.06899C5.84111 6.00648 5.80599 5.9217 5.80599 5.83329V2.49996C5.80599 2.41155 5.84111 2.32677 5.90362 2.26426C5.96613 2.20174 6.05092 2.16663 6.13932 2.16663C6.22773 2.16663 6.31251 2.20174 6.37502 2.26426C6.43754 2.32677 6.47266 2.41155 6.47266 2.49996V5.83329C6.47266 5.9217 6.43754 6.00648 6.37502 6.06899C6.31251 6.13151 6.22773 6.16663 6.13932 6.16663ZM14.4727 6.16663C14.3843 6.16663 14.2995 6.13151 14.237 6.06899C14.1744 6.00648 14.1393 5.9217 14.1393 5.83329V2.49996C14.1393 2.41155 14.1744 2.32677 14.237 2.26426C14.2995 2.20175 14.3843 2.16663 14.4727 2.16663C14.5611 2.16663 14.6458 2.20175 14.7084 2.26426C14.7709 2.32677 14.806 2.41155 14.806 2.49996V5.83329C14.806 5.9217 14.7709 6.00648 14.7084 6.06899C14.6458 6.13151 14.5611 6.16663 14.4727 6.16663Z"
+        fill="white"
+        stroke="#D5D5D5"
+      />
+      <path
+        d="M16.1393 3.33337H15.306V5.83337C15.306 6.05439 15.2182 6.26635 15.0619 6.42263C14.9056 6.57891 14.6937 6.66671 14.4727 6.66671C14.2516 6.66671 14.0397 6.57891 13.8834 6.42263C13.7271 6.26635 13.6393 6.05439 13.6393 5.83337V3.33337H6.97266V5.83337C6.97266 6.05439 6.88486 6.26635 6.72858 6.42263C6.5723 6.57891 6.36034 6.66671 6.13932 6.66671C5.91831 6.66671 5.70635 6.57891 5.55007 6.42263C5.39379 6.26635 5.30599 6.05439 5.30599 5.83337V3.33337H4.47266C3.80962 3.33337 3.17373 3.59677 2.70489 4.06561C2.23605 4.53445 1.97266 5.17033 1.97266 5.83337V8.33337H18.6393V5.83337C18.6393 5.17033 18.3759 4.53445 17.9071 4.06561C17.4382 3.59677 16.8024 3.33337 16.1393 3.33337Z"
+        fill="#FEBC56"
+      />
+    </svg>
+  );
+};
+
+export default CalenderIcon;

src/assets/icons/ChatIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const ChatIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.0967 6H19.0967V14C19.0967 14.55 18.6467 15 18.0967 15H6.09668V16C6.09668 17.1 6.99668 18 8.09668 18H18.0967L22.0967 22V8C22.0967 6.9 21.1967 6 20.0967 6ZM17.0967 11V4C17.0967 2.9 16.1967 2 15.0967 2H4.09668C2.99668 2 2.09668 2.9 2.09668 4V17L6.09668 13H15.0967C16.1967 13 17.0967 12.1 17.0967 11Z"
+        fill="#FEBC56"
+      />
+    </svg>
+  );
+};
+
+export default ChatIcon;

src/assets/icons/Logo.tsx

@@ -5,6 +5,8 @@ const Logo = ({ isPointable }: SVGAttribute) => {
   return (
     <StyledSVG
       cursor={isPointable ? "pointer" : ""}
+      width={20}
+      height={20}
       viewBox="0 0 41 40"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

src/assets/icons/MealIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const MealIcon = () => {
+  return (
+    <svg
+      width="19"
+      height="15"
+      viewBox="0 0 19 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.45564 9.83447C2.00781 9.83447 1.6243 9.68747 1.30511 9.39347C0.985928 9.09947 0.826607 8.74648 0.82715 8.33447V1.58447C0.82715 1.17197 0.986742 0.818724 1.30593 0.524724C1.62511 0.230724 2.00835 0.0839739 2.45564 0.0844739H17.1121C17.5599 0.0844739 17.9434 0.231474 18.2626 0.525474C18.5818 0.819474 18.7411 1.17247 18.7406 1.58447V8.33447C18.7406 8.74697 18.581 9.10022 18.2618 9.39423C17.9426 9.68822 17.5594 9.83498 17.1121 9.83447H2.45564ZM2.51671 12.4595L2.45564 11.3345L17.0917 10.622L17.1528 11.747L2.51671 12.4595ZM2.45564 14.3157V13.1907H17.1121V14.3157H2.45564ZM8.35893 7.20947C9.36317 7.20947 10.3302 7.04698 11.2601 6.72197C12.19 6.39698 13.0007 5.89698 13.6922 5.22197C13.7737 5.74697 14.0722 6.14697 14.5879 6.42197C15.1036 6.69697 15.6736 6.83447 16.2978 6.83447V3.08447C15.6736 3.08447 15.1036 3.22522 14.5879 3.50672C14.0722 3.78822 13.7737 4.19747 13.6922 4.73447C12.973 4.08447 12.1552 3.58447 11.2389 3.23447C10.3226 2.88447 9.36262 2.70947 8.35893 2.70947C7.28684 2.70947 6.25546 2.88147 5.26479 3.22547C4.27413 3.56947 3.47345 4.14747 2.86277 4.95947C3.47345 5.77197 4.27413 6.35022 5.26479 6.69422C6.25546 7.03822 7.28684 7.20997 8.35893 7.20947Z"
+        fill="#E54F5A"
+      />
+    </svg>
+  );
+};
+
+export default MealIcon;

src/assets/icons/NoticeIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const NoticeIcon = () => {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.1938 11C16.133 11 15.1156 10.5786 14.3654 9.82843C13.6153 9.07828 13.1938 8.06087 13.1938 7C13.1938 5.93913 13.6153 4.92172 14.3654 4.17157C15.1156 3.42143 16.133 3 17.1938 3C18.2547 3 19.2721 3.42143 20.0223 4.17157C20.7724 4.92172 21.1938 5.93913 21.1938 7C21.1938 8.06087 20.7724 9.07828 20.0223 9.82843C19.2721 10.5786 18.2547 11 17.1938 11ZM5.19385 5H11.1938V7H5.19385V19H17.1938V13H19.1938V19C19.1938 19.5304 18.9831 20.0391 18.6081 20.4142C18.233 20.7893 17.7243 21 17.1938 21H5.19385C4.66341 21 4.15471 20.7893 3.77963 20.4142C3.40456 20.0391 3.19385 19.5304 3.19385 19V7C3.19385 6.46957 3.40456 5.96086 3.77963 5.58579C4.15471 5.21071 4.66341 5 5.19385 5Z"
+        fill="#73AEE3"
+      />
+    </svg>
+  );
+};
+
+export default NoticeIcon;

src/assets/icons/index.ts

@@ -21,3 +21,9 @@ export { default as HistorySeparator } from "./HistorySeparator";
 export { default as UploadIcon } from "./UploadIcon";
 export { default as AddCommentIcon } from "./AddCommentIcon";
 export { default as DesktopIcon } from "./DesktopIcon";
+export { default as MealIcon } from "./MealIcon";
+export { default as BerIcon } from "./BerIcon";
+export { default as CalenderIcon } from "./CalenderIcon";
+export { default as NoticeIcon } from "./NoticeIcon";
+export { default as ChatIcon } from "./ChatIcon";
+export { default as BambooIcon } from "./BambooIcon";

src/assets/images/index.ts

@@ -6,3 +6,5 @@ export { default as QR } from "./QR.png";
 export { default as ShushingFace } from "./shushing_face.png";
 export { default as ThinkingFace } from "./thinking_face.png";
 export { default as HuggingFace } from "./hugging_face.png";
+export { default as TestBanner } from "./test_banner.png";
+export { default as TestSmallBanner } from "./test_small_banner.png";

src/components/common/Aside/InfomationBox.tsx

@@ -62,10 +62,10 @@ const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => {
 const Container = styled.main`
   ${flex.CENTER};
   width: 100%;
-  height: 85px;
+  height: 100%;
   background-color: ${color.white};
   gap: 8px;
-  padding: 0px 22px;
+  padding: 14px 22px;
   border-radius: 5px;
 
   @media screen and (max-width: 1074px) {

src/components/common/Aside/JoinCheckBox.tsx

@@ -19,7 +19,7 @@ const Container = styled.section`
   border-radius: 5px;
   background-color: ${color.white};
   display: flex;
-  padding: 18px 0;
+  padding: 22px 0;
   justify-content: space-between;
   flex-direction: column;
   align-items: center;

src/components/common/Aside/MeisterBox.tsx

@@ -36,7 +36,7 @@ const Container = styled.section`
   border-radius: 5px;
   background-color: ${color.white};
   display: flex;
-  padding: 6px 0 6px 18px;
+  padding: 10px 0 10px 18px;
   flex-direction: column;
   justify-content: center;
   gap: 6px;

src/components/common/Aside/index.tsx

@@ -9,20 +9,27 @@ const Aside = () => {
   const { user, isLogined } = useUser();
 
   return (
-    <Container>
-      <InfomationBox user={user} isLogined={isLogined} />
-      {isLogined && (
-        <Row gap="6px">
-          <MeisterBox />
-          <JoinCheckBox />
-        </Row>
-      )}
-    </Container>
+    <Layout>
+      <Container>
+        <InfomationBox user={user} isLogined={isLogined} />
+        {isLogined && (
+          <Row gap="6px" height="100%">
+            <MeisterBox />
+            <JoinCheckBox />
+          </Row>
+        )}
+      </Container>
+    </Layout>
   );
 };
 
+const Layout = styled.div`
+  display: flex;
+`;
+
 const Container = styled.aside`
-  width: 30vw;
+  width: 22vw;
+  height: 30vh;
   display: flex;
   gap: 6px;
   margin-left: auto;

src/constants/key.constant.ts

@@ -12,6 +12,7 @@ const KEY = {
   MEISTER: "useMeister",
   MEISTER_DETAIL: "useMeisterDetail",
   RANKING: "useRanking",
+  MAIN: "useMain",
 } as const;
 
 export default KEY;

src/templates/bamboo/index.tsx

@@ -62,7 +62,6 @@ const Container = styled.div`
 `;
 
 const AsideButtonBox = styled.div`
-  width: 21.4vw;
   ${flex.COLUMN};
   gap: 12px;
   margin-left: auto;

src/templates/home/index.tsx

@@ -1,11 +1,47 @@
+import React from "react";
 import styled from "styled-components";
 import { Aside } from "@/components/common";
+import { flex } from "@/styles";
+import { Column, Row } from "@/components/Flex";
+import { useMainQuery } from "./services/query.service";
+import HomeMeal from "./layouts/HomeMeal";
+import HomeReserve from "./layouts/HomeReserve";
+import HomeMainBanner from "./layouts/HomeMainBanner";
+import HomeCalender from "./layouts/HomeCalender";
+import HomePost from "./layouts/HomePost";
+import HomeRadarChart from "./layouts/HomeRadarChart";
+import HomeBamboo from "./layouts/HomeBamboo";
+import HomeMiniBanner from "./layouts/HomeMiniBanner";
 
 const HomePage = () => {
+  const { data } = useMainQuery();
+
+  React.useEffect(() => {
+    if (data) console.log(data);
+  }, [data]);
+
   return (
     <Layout>
       <Container>
-        <Aside />
+        <Row gap="8px" width="100%">
+          <HomeMeal />
+          <HomeReserve />
+          <Aside />
+        </Row>
+        <Row gap="8px" width="100%">
+          <Column gap="8px" width="100%">
+            <HomeMainBanner href="/post" />
+            <Row gap="8px" width="100%">
+              <HomeCalender />
+              <HomePost />
+            </Row>
+          </Column>
+          <HomeRadarChart />
+        </Row>
+        <Row gap="8px" width="100%">
+          <HomeBamboo />
+          <HomeMiniBanner href="https://buma.wiki" />
+        </Row>
       </Container>
     </Layout>
   );
@@ -20,6 +56,8 @@ const Layout = styled.div`
 const Container = styled.div`
   width: 76%;
   height: 100vh;
+  ${flex.COLUMN};
+  gap: 8px;
 `;
 
 export default HomePage;

src/templates/home/layouts/HomeBamboo.tsx

@@ -0,0 +1,50 @@
+import { color, font } from "@/styles";
+import React from "react";
+import styled from "styled-components";
+import { BambooIcon } from "@/assets/icons";
+import HomeHead from "./HomeHead";
+
+const HomeBamboo = () => {
+  return (
+    <Container>
+      <HomeHead
+        icon={<BambooIcon />}
+        title="#34번째 부마숲 이야기"
+        href="/bamboo"
+      />
+      <StyledContent>
+        코로나 정책이 완화된 요즘, 인프런에서 주최하는 컨퍼런스 ‘인프콘’,
+        안드로이드 개발자를 위한 ‘드로이드 나이츠’, … 그 외 많은 IT인들을 위한
+        행사들이 곳곳에서 열리고 있습니다. 여러분은 컨퍼런스, IT 대회 등 각종 IT
+        행사들에 관심이 있으신가요? 특히 컨퍼런스는 IT 업계의 능력있는 사람들이
+        모여 지식을 공유하고, 네트워킹하며 지식의 뿌리를 넓힐 수 있는 매력적인
+        행사입니다. 공모전과 같은 대회 역시 자신의 역량을 시험하고 경험을 넓힐
+        수 있는 귀중한 기회가 되기도 합니다. 여러분은 개발자 컨퍼런스, 대회를
+        찾을 때 어떻게 찾으시나요? 어쩌다가 생각나서 행사 모음 사이트를
+        검색하거나 지인에게 건너 듣진 않으신가요? 이런 IT 행사 정보를 간편하게
+        한 데 모아볼 수 있다면 좋지 않을까요?
+      </StyledContent>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  height: 20vh;
+  background-color: ${color.white};
+  border-radius: 4px;
+`;
+
+const StyledContent = styled.p`
+  ${font.p2};
+  padding: 6px 26px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-height: 180%;
+  -webkit-line-clamp: 3; /* 라인수 */
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+`;
+
+export default HomeBamboo;