feat: klmhyeonwoo#22 아젠다 상태창 추가

Author: klmhyeonwoo

package.json

@@ -21,7 +21,7 @@
     "react-calendar": "^5.0.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
-    "swiper": "^11.1.1"
+    "swiper": "^11.1.3"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.1",

pnpm-lock.yaml

@@ -28,6 +28,7 @@ import moment from "moment";
 import "moment/locale/ko";
 import { Beforeunload } from "react-beforeunload";
 import NotDataWithContentBox from "@/component/common/NotDataWithContentBox.tsx";
+import StatusBar from "@/component/main/StatusBar.tsx";
 
 export type ValuePiece = Date | null;
 export type Value = ValuePiece | [ValuePiece, ValuePiece];
@@ -231,6 +232,7 @@ export default function Main() {
                     text-align: center;
                   `}
                 />
+                <StatusBar todoList={todo} completeList={complete} />
               </ContentBox>
             </div>
             <ContentBox

src/app/main/index.tsx

@@ -15,6 +15,8 @@ import telemechine3D from "@/assets/3d/performence/telemechine.gif";
 
 import { css } from "@emotion/react";
 import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay } from "swiper/modules";
+
 import "swiper/css";
 import { DESIGN_SYSTEM_COLOR } from "@/style/variable.ts";
 import { useRef } from "react";
@@ -41,7 +43,16 @@ export default function Performence() {
 
   return (
     <div>
-      <Swiper spaceBetween={30} slidesPerView={3}>
+      <Swiper
+        modules={[Autoplay]}
+        spaceBetween={30}
+        slidesPerView={3.5}
+        autoplay={{
+          delay: 1500,
+          disableOnInteraction: false,
+        }}
+        loop={true}
+      >
         {mock.map((item) => {
           const key = useRef(Math.floor(Math.random() * GRAPHIC_LIST.length));
           return (

src/component/main/Performence.tsx

@@ -0,0 +1,75 @@
+import { css } from "@emotion/react";
+import { DESIGN_SYSTEM_COLOR } from "@/style/variable.ts";
+import { agendaProps } from "@/app/main";
+
+interface statusDataProps {
+  todoList: agendaProps[];
+  completeList: agendaProps[];
+}
+export default function StatusBar({ todoList, completeList }: statusDataProps) {
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        row-gap: 1.5rem;
+        width: 100%;
+      `}
+    >
+      <div
+        css={css`
+          position: relative;
+          width: 100%;
+          border-radius: 0.7rem;
+          height: 0.8rem;
+          background-color: ${DESIGN_SYSTEM_COLOR.grey100};
+        `}
+      >
+        <div
+          css={css`
+            position: absolute;
+            width: ${(completeList.length / (todoList.length + completeList.length)) * 100}%;
+            border-radius: 0.7rem;
+            height: 0.8rem;
+            background-color: ${DESIGN_SYSTEM_COLOR.kreamBlack};
+            transition: 0.4s all;
+          `}
+        />
+      </div>
+      <div
+        css={css`
+          width: 100%;
+          display: flex;
+          color: ${DESIGN_SYSTEM_COLOR.kreamBlack};
+          font-weight: 300;
+
+          #score {
+            font-weight: 500;
+          }
+
+          span:nth-of-type(1) {
+            margin-right: auto;
+          }
+
+          div:nth-of-type(1) {
+            margin-left: auto;
+            display: flex;
+            column-gap: 0.8rem;
+          }
+        `}
+      >
+        <span id="score">
+          {todoList.length && completeList.length ? Math.floor((completeList.length / (todoList.length + completeList.length)) * 100) : 0}%{" "}
+        </span>
+        <div>
+          <span>
+            완료된 아젠다 <span id="score">{completeList.length}</span>
+          </span>
+          <span>
+            오픈된 아젠다 <span id="score">{todoList.length}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}