Merge pull request #73 from joog-lim/develop

v1.0.2
joog-lim · Oct 19, 2021 · 5d74f6b · 5d74f6b
2 parents 617e50f + ec73fbd
commit 5d74f6b
Show file tree

Hide file tree

Showing 20 changed files with 332 additions and 53 deletions.
diff --git a/src/assets/svg/Spinner.tsx b/src/assets/svg/Spinner.tsx
@@ -0,0 +1,159 @@
+const Spinner: React.FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="100px"
+      height="100px"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+    >
+      <g transform="rotate(0 50 50)">
+        <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#57cc4d">
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            keyTimes="0;1"
+            dur="1s"
+            begin="-0.9166666666666666s"
+            repeatCount="indefinite"
+          ></animate>
+        </rect>
+      </g>
+      <g transform="rotate(30 50 50)">
+        <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#57cc4d">
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            keyTimes="0;1"
+            dur="1s"
+            begin="-0.8333333333333334s"
+            repeatCount="indefinite"
+          ></animate>
+        </rect>
+      </g>
+      <g transform="rotate(60 50 50)">
+        <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#57cc4d">
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            keyTimes="0;1"
+            dur="1s"
+            begin="-0.75s"
+            repeatCount="indefinite"
+          ></animate>
+        </rect>
+      </g>
+      <g transform="rotate(90 50 50)">
+        <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#57cc4d">
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            keyTimes="0;1"
+            dur="1s"
+            begin="-0.6666666666666666s"
+            repeatCount="indefinite"
+          ></animate>
+        </rect>
+      </g>
+      <g transform="rotate(120 50 50)">
+        <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#57cc4d">
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            keyTimes="0;1"
+            dur="1s"
+            begin="-0.5833333333333334s"
+            repeatCount="indefinite"
+          ></animate>
+        </rect>
+      </g>
+      <g transform="rotate(150 50 50)">
+        <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#57cc4d">
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            keyTimes="0;1"
+            dur="1s"
+            begin="-0.5s"
+            repeatCount="indefinite"
+          ></animate>
+        </rect>
+      </g>
+      <g transform="rotate(180 50 50)">
+        <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#57cc4d">
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            keyTimes="0;1"
+            dur="1s"
+            begin="-0.4166666666666667s"
+            repeatCount="indefinite"
+          ></animate>
+        </rect>
+      </g>
+      <g transform="rotate(210 50 50)">
+        <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#57cc4d">
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            keyTimes="0;1"
+            dur="1s"
+            begin="-0.3333333333333333s"
+            repeatCount="indefinite"
+          ></animate>
+        </rect>
+      </g>
+      <g transform="rotate(240 50 50)">
+        <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#57cc4d">
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            keyTimes="0;1"
+            dur="1s"
+            begin="-0.25s"
+            repeatCount="indefinite"
+          ></animate>
+        </rect>
+      </g>
+      <g transform="rotate(270 50 50)">
+        <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#57cc4d">
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            keyTimes="0;1"
+            dur="1s"
+            begin="-0.16666666666666666s"
+            repeatCount="indefinite"
+          ></animate>
+        </rect>
+      </g>
+      <g transform="rotate(300 50 50)">
+        <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#57cc4d">
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            keyTimes="0;1"
+            dur="1s"
+            begin="-0.08333333333333333s"
+            repeatCount="indefinite"
+          ></animate>
+        </rect>
+      </g>
+      <g transform="rotate(330 50 50)">
+        <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#57cc4d">
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            keyTimes="0;1"
+            dur="1s"
+            begin="0s"
+            repeatCount="indefinite"
+          ></animate>
+        </rect>
+      </g>
+    </svg>
+  );
+};
+
+export default Spinner;
diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
@@ -1 +1,2 @@
 export { default as Logo } from "./Logo";
+export { default as Spinner } from "./Spinner";
diff --git a/src/components/algorithms/item/headerContainer.tsx b/src/components/algorithms/item/headerContainer.tsx
@@ -13,7 +13,8 @@ export const getDate = (timestamp: number): string => {
   let time: string;
   if (date.getHours() < 7) time = "새벽";
   else if (date.getHours() < 12) time = "오전";
-  else time = "오후";
+  else if (date.getHours() < 19) time = "오후";
+  else time = "저녁";
   return `${date.getFullYear()}년 ${
     date.getMonth() + 1
   }월 ${date.getDate()}일 ${time}`;

diff --git a/src/components/algorithms/item/headerPresenter.tsx b/src/components/algorithms/item/headerPresenter.tsx
@@ -45,6 +45,8 @@ const Header: React.FC<HeaderProps> = (p: HeaderProps) => {
                   isHeading={false}
                   isReason
                   algorithmId={p.id}
+                  title={p.title}
+                  content={p.content}
                 >
                   수정
                 </AlgorithmModal>
@@ -65,6 +67,8 @@ const Header: React.FC<HeaderProps> = (p: HeaderProps) => {
                   isHeading={false}
                   isReason
                   algorithmId={p.id}
+                  title={p.title}
+                  content={p.content}
                 >
                   수정
                 </AlgorithmModal>

diff --git a/src/components/algorithms/style.module.scss b/src/components/algorithms/style.module.scss
@@ -2,7 +2,7 @@
 
 .algorithmsBox {
   @include c.every-box;
-  width: 45vw;
+  width: calc(100vw - 32vw - 350px);
   padding: 15px;
   margin-bottom: 20px;
   h4 {

diff --git a/src/components/index/index.module.scss b/src/components/index/index.module.scss
@@ -10,16 +10,22 @@
 }
 
 .algorithms {
+  position: relative;
+  width: 100%;
   margin-top: 130px;
   padding-left: 20px;
   margin-bottom: 100px;
   @media (max-width: c.$laptop) {
     padding: 0;
     margin-top: 20px;
+    width: calc(100vw - 40px);
   }
 }
 
 .heading {
   margin-bottom: 20px;
   font-weight: 700;
+  @media (max-width: c.$laptop) {
+    margin: 15px 0 30px 0;
+  }
 }
diff --git a/src/components/index/indexPresenter.tsx b/src/components/index/indexPresenter.tsx
@@ -1,21 +1,26 @@
 import React, { useEffect, useState } from "react";
-import { useRecoilValue } from "recoil";
+import { useRecoilValue, useRecoilState } from "recoil";
 
 import s from "./index.module.scss";
 import Algorithms from "components/algorithms/algorithms";
 import SideBar from "./item/sidebarPresenter";
 import AlgorithmFilter from "./item/algorithmFilter";
 import { algorithm } from "types/api";
 import Post from "utils/api/post";
-import { isAdminState, algorithmFilterState } from "src/recoil/atom";
+import {
+  isAdminState,
+  algorithmFilterState,
+  algorithmState,
+  reLoadingState,
+} from "recoil/atom";
+import SpinnerBar from "components/spinner/spinnerPresenter";
 
 const IndexPresenter: React.FC = () => {
   const isAdmin = useRecoilValue(isAdminState);
   const algorithmFilter = useRecoilValue(algorithmFilterState);
+  const [isReLoading, setReLoading] = useRecoilState(reLoadingState);
 
-  const [data, setData] = useState<algorithm[]>([
-    { number: 0, createdAt: 0, id: "", status: "" },
-  ]);
+  const [data, setData] = useRecoilState(algorithmState);
   const [isHasNext, setIsHasNext] = useState(true);
   let hasNext = true;
   let cursor2: number | undefined;
@@ -53,6 +58,11 @@ const IndexPresenter: React.FC = () => {
     getPostList();
   }, []);
 
+  useEffect(() => {
+    getPostList();
+    setReLoading(false);
+  }, [isReLoading]);
+
   cursor2 = data.length - 1 === 0 ? undefined : data[data.length - 1].number;
   hasNext = isHasNext;
 
@@ -67,7 +77,13 @@ const IndexPresenter: React.FC = () => {
         {React.Children.toArray(
           data.slice(1)?.map((item: algorithm) => <Algorithms data={item} />)
         )}
-        <p>{hasNext ? "로딩 중..." : "더 이상 알고리즘이 존재하지 않아요!"}</p>
+        <p>
+          {hasNext ? (
+            <SpinnerBar background={false} />
+          ) : (
+            "더 이상 알고리즘이 존재하지 않아요!"
+          )}
+        </p>
       </article>
     </main>
   );

diff --git a/src/components/index/item/algorithmFilter.module.scss b/src/components/index/item/algorithmFilter.module.scss
@@ -5,8 +5,9 @@
 .algoritmFilterBtn {
   @include c.drop-down-btn;
   @include c.black-shadow;
-  top: 150px;
-  right: 16vw;
+  position: absolute;
+  top: -20px;
+  right: 0;
   z-index: 1;
   color: c.$black-color;
   background-color: c.$white-color;
@@ -18,7 +19,6 @@
     font-weight: 400;
   }
   @media (max-width: c.$laptop) {
-    top: 335px;
-    right: 5px;
+    top: 0;
   }
 }
diff --git a/src/components/index/item/algorithmFilter.tsx b/src/components/index/item/algorithmFilter.tsx
@@ -2,7 +2,11 @@ import React from "react";
 import { useRecoilState } from "recoil";
 
 import s from "./algorithmFilter.module.scss";
-import { algorithmFilterState } from "src/recoil/atom";
+import {
+  algorithmFilterState,
+  algorithmState,
+  reLoadingState,
+} from "recoil/atom";
 import { AlgorithmType } from "src/types/types";
 
 const AlgorithmFilter: React.FC = () => {
@@ -22,8 +26,12 @@ const AlgorithmFilter: React.FC = () => {
     DELETED: "삭제",
   };
 
-  const [algorithmFilter, setAlgorithmFilter] =
-    useRecoilState(algorithmFilterState);
+  const [algorithmFilter, setAlgorithmFilter] = useRecoilState(
+    algorithmFilterState
+  );
+
+  const [data, setData] = useRecoilState(algorithmState);
+  const [isReLoading, setReLoading] = useRecoilState(reLoadingState);
 
   return (
     <button className={s.algoritmFilterBtn}>
@@ -32,7 +40,9 @@ const AlgorithmFilter: React.FC = () => {
         {React.Children.map(tags, (child: string) => (
           <li
             onClick={() => {
+              setData([{ number: 0, createdAt: 0, id: "", status: "" }]);
               setAlgorithmFilter(algorithmsState[child]);
+              setReLoading(true);
             }}
           >
             {child}

diff --git a/src/components/modal/AlgorithmModal/AlgorithmModalContainer.ts b/src/components/modal/AlgorithmModal/AlgorithmModalContainer.ts
@@ -16,4 +16,6 @@ export interface algorithmModalProps {
   isReason: boolean;
   children: React.ReactNode;
   algorithmId: string;
+  title?: string;
+  content?: string;
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default as Logo } from "./Logo";
		export { default as Spinner } from "./Spinner";