@edu-tosel/design 1.0.5 → 1.0.6

package/src/_components/hook/useTyping.ts

@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+
+export default function useTyping(
+  text: string,
+  flag: boolean,
+  isTitleComplete: boolean,
+  delay = 100,
+) {
+  const [displayedText, setDisplayedText] = useState<string[]>([]);
+  const [index, setIndex] = useState<number>(0);
+  const [isStarted, setIsStarted] = useState<boolean>(false);
+  useEffect(() => {
+    if (flag && !isStarted) {
+      const startTimer = setTimeout(() => {
+        setIsStarted(true);
+      }, 1500);
+      return () => clearTimeout(startTimer);
+    }
+    if (isStarted && flag && index <= text.length) {
+      if (!isTitleComplete) {
+        setDisplayedText([]);
+        setIndex(0);
+        return;
+      }
+      const timer = setTimeout(() => {
+        const nextChar = text[index] || "";
+        setDisplayedText((prev) => {
+          if (nextChar === "\n") {
+            return [...prev, ""];
+          }
+          const last = prev[prev.length - 1] || "";
+          return [...prev.slice(0, -1), last + nextChar];
+        });
+        setIndex(index + 1);
+      }, delay);
+      return () => clearTimeout(timer);
+    }
+    return () => {
+      setDisplayedText([]);
+      setIndex(0);
+      setIsStarted(false);
+    };
+  }, [text, index, delay, flag, isTitleComplete, isStarted]);
+
+  return displayedText;
+}

package/src/_components/types/Level.ts

@@ -0,0 +1 @@
+export type Level = "" | "PS" | "ST" | "BA" | "JR" | "HJ";

package/src/_components/view/Explore.tsx

@@ -0,0 +1,16 @@
+import { Link } from "react-router-dom";
+
+export default function Explore() {
+  return (
+    <Link
+      to="/"
+      className="fixed bottom-16 right-16 flex h-20 w-20 z-50 items-center justify-center rounded-full bg-black/80 shadow-md duration-500 "
+    >
+      <img
+        src="/images/home/sun.png"
+        alt="explore another space"
+        className="h-16 w-16"
+      />
+    </Link>
+  );
+}

package/src/_components/view/Home.tsx

@@ -0,0 +1,180 @@
+import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { absolute } from "../../util/position";
+import { links } from "../asset/links";
+import { center } from "../../util/display";
+import { Planet, Status } from "../asset/interface";
+import { planets } from "../asset/planets";
+import useTyping from "../hook/useTyping";
+import Explore from "./Explore";
+import { useWidgetStore } from "../../store";
+
+export default function Home() {
+  const { setView } = useWidgetStore();
+  const [planet, setPlanet] = useState<Planet>("homepage");
+  const [clickSun, setClickSun] = useState<boolean>(false);
+  const [clickPlanet, setClickPlanet] = useState<boolean>(false);
+  const [planetStatus, setPlanetStatus] = useState<Status>("waiting");
+  const { title, description } = planets[planet];
+
+  const [hover, setHover] = useState<string>("");
+
+  const toggleSun = () => setClickSun(true);
+  const togglePlanet = (planet: string) => {
+    setClickPlanet(!clickPlanet);
+    setView("preview");
+    setPlanet(planet as Planet);
+  };
+
+  useEffect(() => {
+    if (clickPlanet) {
+      const timerDoing = setTimeout(() => {
+        setPlanetStatus("doing");
+        const timerDone = setTimeout(() => setPlanetStatus("done"), 1500);
+        return () => clearTimeout(timerDone);
+      }, 1500);
+      return () => clearTimeout(timerDoing);
+    }
+  }, [clickPlanet]);
+
+  const toselClassNames = () => {
+    const classNames =
+      "text-white text-center text-8xl animate-in duration-2000 font-nicomoji ";
+    if (clickPlanet) return classNames + absolute.full.tl(-48, 0);
+    if (clickSun) return classNames + absolute.full.tl("1/10", 0);
+    return classNames + absolute.full.tl("1/5", 0);
+  };
+
+  const sunClassNames = [
+    clickSun ? "" : "cursor-pointer",
+    "h-48 w-48 animate-spin duration-300000",
+  ].join(" ");
+  const sunMoveClassNames = () => {
+    const classNames =
+      "absolute top-2/5 animate-in duration-1000 flex justify-center w-full ";
+    if (clickPlanet) return classNames + "-left-3/4";
+    if (clickSun) return classNames + "-left-1/2";
+    return classNames + "left-0";
+  };
+
+  const designSpaceClassNames = [
+    clickSun ? absolute.full.bl("5/100", 0) : absolute.full.bl("1/5", 0),
+    "text-white text-center text-3xl animate-in duration-2000 font-kostar ",
+  ].join(" ");
+  const planetsContainerClassNames = (index: number) =>
+    [
+      clickSun && !clickPlanet
+        ? `top-43/100 delay-${600 * (index + 1.5)}`
+        : "-top-36",
+      `left-${72 + 48 * index}`,
+      "absolute cursor-pointer animate-in duration-1000 z-40",
+    ].join(" ");
+
+  const planetsClassName = ["h-36 w-36 "].join(" ");
+  const planetContainerClassNames = () => {
+    // const classNames = "border-4 border-white rounded-full duration-2000 delay-3000";
+    const hide = absolute.tl("1/4", -500) + "duration-500";
+    const appear = absolute.tl("1/4", "5/100") + "duration-2000";
+    if (planetStatus === "waiting") {
+      return hide;
+    }
+    if (planetStatus === "doing") return [appear].join(" ");
+    return [appear, "hover:scale-110"].join(" ");
+  };
+  const planetClassNames = "animate-spin duration-60000";
+
+  const descriptionClassNames = () => {
+    if (!clickPlanet) return "hidden";
+    return [
+      absolute.tr("1/3", "5/100"),
+      center.col(6),
+      "font-kostar text-green-500 w-240",
+    ].join(" ");
+  };
+
+  const displayedTitle = useTyping(title, clickPlanet, true);
+  const isTitleComplete = displayedTitle.join("") === title;
+  const displayedDescription = useTyping(
+    description,
+    clickPlanet,
+    isTitleComplete,
+    50
+  );
+  return (
+    <div
+      className={`${center.screen.default} relative min-h-screen animate-[slideBackground_20s_ease-in-out_infinite] bg-image-space bg-contain `}
+    >
+      <div className={toselClassNames()}>TOSEL</div>
+      <div className={sunMoveClassNames()}>
+        <img
+          onClick={toggleSun}
+          src="/images/home/sun.png"
+          alt="sun"
+          className={sunClassNames}
+        />
+      </div>
+      <div className={designSpaceClassNames}>DESIGN SPACE</div>
+      {links.map(({ title }, index) => (
+        <div key={title} className={planetsContainerClassNames(index)}>
+          <div className="relative h-full w-full delay-200 duration-500 hover:scale-110">
+            <img
+              src={"/images/home/" + title + ".png"}
+              onClick={() => togglePlanet(title)}
+              alt={title}
+              className={planetsClassName}
+              onMouseEnter={() => setHover(title)}
+              onMouseLeave={() => setHover("")}
+            />
+            {hover === title && !clickPlanet && (
+              <div className="absolute bottom-40 left-28 z-10 flex h-26 w-75 flex-col items-end gap-2">
+                <div className="font-megrim text-4xl text-white">{title}</div>
+                <img
+                  src="/images/home/detection.png"
+                  alt="prject"
+                  className="z-0 h-full w-full"
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+      <div className={planetContainerClassNames()}>
+        <Link to={planets[planet].href} className="relative h-full w-full">
+          <img
+            src={"/images/home/" + planet + ".png"}
+            alt={planet}
+            className={planetClassNames}
+          />
+        </Link>
+      </div>
+      {clickPlanet ? (
+        <div className={descriptionClassNames()}>
+          {displayedTitle.map((line, index) => (
+            <div key={`title-${index}`} className="text-5xl font-bold">
+              {line}
+            </div>
+          ))}
+          <div className={center.col(2)}>
+            {isTitleComplete &&
+              displayedDescription &&
+              displayedDescription.map((line, index) => (
+                <div key={`desc-${index}`} className="text-2xl">
+                  {line}
+                </div>
+              ))}
+          </div>
+        </div>
+      ) : null}
+      {planetStatus === "done" ? (
+        <button
+          onClick={() => {
+            setPlanetStatus("waiting");
+            setClickPlanet(!clickPlanet);
+          }}
+        >
+          <Explore />
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/_components/view/LottiePlayer.tsx

@@ -0,0 +1,17 @@
+import Lottie from "react-lottie-player";
+import loading from "../../asset/json/loading-lottie.json";
+import test from "../../asset/json/test.svg";
+
+export default function LottiePlayer() {
+  return (
+    <div className="flex">
+      <Lottie
+        animationData={loading}
+        style={{ width: 1920, height: 1080 }}
+        play={true}
+        placeholder={test}
+      />
+      <img src={"/videos/loading.gif"} />
+    </div>
+  );
+}

package/src/app/admin/exam/page.tsx

@@ -0,0 +1,36 @@
+import { Exam, exams } from "../../../_components/asset/mock/exams";
+import { ManageBoard } from "../../../board";
+import { Card } from "../../../card/widget/Card";
+
+export default function Exams() {
+  return (
+    <ManageBoard
+      data={{
+        gap: 7.5,
+        dataSets: [
+          {
+            title: "진행 중인 시험",
+            items: exams.filter((exam) => exam.status === "active"),
+            renderItem: (exam) => <ExamComponent key={exam.id} {...exam} />,
+          },
+          {
+            title: "종료된 시험",
+            items: exams.filter((exam) => exam.status === "inactive"),
+            renderItem: (exam) => <ExamComponent key={exam.id} {...exam} />,
+          },
+        ],
+      }}
+    />
+  );
+}
+
+function ExamComponent({ title, type, managerUserId, createdAt }: Exam) {
+  return (
+    <Card>
+      <div>{title}</div>
+      <div>{type}</div>
+      <div>{managerUserId}</div>
+      <div>{createdAt}</div>
+    </Card>
+  );
+}

package/src/app/admin/grade/page.tsx

@@ -0,0 +1,5 @@
+import { CanvasBoard } from "../../../board";
+
+export default function Grade() {
+  return <CanvasBoard>Grade</CanvasBoard>;
+}

package/src/app/admin/layout.tsx

@@ -0,0 +1,56 @@
+import { Link, useLocation } from "react-router-dom";
+import { buttonClassNames } from "../../navigation";
+import Explore from "../../_components/view/Explore";
+import { DashboardLayout } from "../../layout";
+
+const navigations = [
+  {
+    href: "/admin",
+    title: "홈",
+  },
+  {
+    href: "/admin/user",
+    title: "회원관리",
+  },
+  {
+    href: "/admin/exam",
+    title: "시험관리",
+  },
+  {
+    href: "/admin/rnd",
+    title: "연구/개발",
+  },
+  {
+    href: "/admin/news",
+    title: "마케팅/이벤트",
+  },
+  {
+    href: "/admin/statistics",
+    title: "통계",
+  },
+];
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const { pathname: nowPath } = useLocation();
+  const [title] = nowPath.split("/").slice(-1);
+  return (
+    <>
+      <DashboardLayout
+        subject={[title, "/images/tosel.png", "https://tosel.org"]}
+        colors={["gray-300", "black"]}
+        navigations={navigations.map(({ href, title }) => (
+          <Link
+            key={href}
+            to={href}
+            className={buttonClassNames(href, nowPath)}
+          >
+            {title}
+          </Link>
+        ))}
+      >
+        {children}
+      </DashboardLayout>
+      <Explore />
+    </>
+  );
+}

package/src/app/admin/news/page.tsx

@@ -0,0 +1,15 @@
+import { Deck, Shelf } from "../../..";
+import { CanvasBoard } from "../../../board";
+import InfoCard from "../../../card/template/InfoCard";
+
+export default function News() {
+  return (
+    <CanvasBoard>
+      <Shelf>
+        <Deck>
+          <InfoCard type="prpfileSmall" />
+        </Deck>
+      </Shelf>
+    </CanvasBoard>
+  );
+}

package/src/app/admin/page.tsx

@@ -0,0 +1,42 @@
+import {
+  CanvasBoard,
+  ChartCard,
+  Deck,
+  Shelf,
+  TableCard,
+  TrumpCard,
+} from "../..";
+import { chartData, academies } from "../../_components/asset/mock";
+import { useWidgetStore } from "./../../store";
+
+export default function Admin() {
+  return (
+    <CanvasBoard>
+      <Shelf>
+        <Deck titles={{ title: "정기시험 접수자 추이" }}>
+          <ChartCard
+            data={chartData}
+            xAxis="date"
+            yAxis="pv"
+            lines={[
+              { dataKey: "uv", stroke: "blue" },
+              { dataKey: "pv", stroke: "red" },
+            ]}
+          />
+        </Deck>
+        <Deck titles={{ title: "학원 목록" }}>
+          <TrumpCard titles={{ title: "학원 목록" }} />
+        </Deck>
+      </Shelf>
+      <Shelf>
+        <Deck titles={{ title: "토셀랩 심사 대기" }}>
+          <TableCard
+            data={academies}
+            fields={{ a: "학원명", b: "학원장", c: "전화번호" }}
+            sizes={{ a: "1/3", b: "3/10" }}
+          />
+        </Deck>
+      </Shelf>
+    </CanvasBoard>
+  );
+}

package/src/app/admin/rnd/monthly-test/page.tsx

@@ -0,0 +1,5 @@
+import { CanvasBoard } from "../../../..";
+
+export default function MonthlyTestPage() {
+  return <CanvasBoard>Monthly fst-normal</CanvasBoard>;
+}

package/src/app/admin/rnd/page.tsx

@@ -0,0 +1,17 @@
+import { TrumpCard } from "../../..";
+import { CanvasBoard } from "../../../board";
+import { useWidgetStore } from "../../../store";
+
+export default function Rnd() {
+  const { setModal } = useWidgetStore();
+  return (
+    <CanvasBoard>
+      <TrumpCard
+        titles={{ title: "Monthly Test" }}
+        options={{
+          onClick: () => setModal("test"),
+        }}
+      />
+    </CanvasBoard>
+  );
+}

package/src/app/admin/statistics/page.tsx

@@ -0,0 +1,5 @@
+import { CanvasBoard } from "../../../board";
+
+export default function StatisticsPage() {
+  return <CanvasBoard>statistics</CanvasBoard>;
+}

package/src/app/admin/user/page.tsx

@@ -0,0 +1,147 @@
+import { User, users } from "../../../_components/asset/mock/people";
+import { Level } from "../../../_components/types/Level";
+import { ManageBoard } from "../../../board";
+import { useEffect, useState } from "react";
+import SideMenu from "./../../../menu/SideMenu";
+import RowCard from "../../../card/template/RowCard";
+import { AlertModal } from "../../../modal";
+import { LoadingSpinner } from "../../../interaction";
+import NoData from "../../../interaction/NoData";
+import { settings, userLogs } from "./../../../_components/asset/mock/test";
+
+export default function Users() {
+  const [name, setName] = useState<string>("");
+  const [birthday, setBirthday] = useState<string>("");
+  const [level, setLevel] = useState<string>("");
+
+  const selectOptions: [Level, string][] = [
+    ["", "선택해주세요."],
+    ["PS", "Pre-Starter"],
+    ["ST", "Starter"],
+    ["BA", "Basic"],
+    ["JR", "Junior"],
+    ["HJ", "High Junior"],
+  ];
+
+  const selectUserOptions: [Level, string][] = [
+    ["PS", "Pre-Starter"],
+    ["ST", "Starter"],
+    ["BA", "Basic"],
+    ["JR", "Junior"],
+    ["HJ", "High Junior"],
+  ];
+
+  const [isLoading, setIsActive] = useState<boolean>(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsActive(false);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const userTest = (prop?: "y" | "n") => {
+    return prop === "n" ? undefined : users;
+  };
+
+  const userTestValue = userTest("y");
+
+  return (
+    <ManageBoard
+      widgets={{
+        exceptions: [
+          [!userTestValue && !isLoading, <NoData />],
+          [isLoading, <LoadingSpinner />],
+        ],
+        components: [
+          [
+            "isLoading",
+            <AlertModal title="TITLE" scripts={{ script: "Script" }} />,
+          ],
+        ],
+        tabs: [
+          ["전체", () => {}],
+          ["학생", () => {}],
+          ["선생님", () => {}],
+        ],
+        menu: (
+          <SideMenu
+            log={{
+              prints: ["title"],
+              logs: userLogs,
+            }}
+            setting={settings}
+          />
+        ),
+      }}
+      header={{
+        title: "유저 관리",
+        tags: {
+          selects: [
+            {
+              width: "xs",
+              title: "레벨",
+              options: selectOptions,
+              onChange: setLevel,
+            },
+          ],
+          inputs: [
+            {
+              width: "xs",
+              title: "생년월일",
+              placeholder: "생일 입력",
+              onChange: setBirthday,
+            },
+            {
+              width: "sm",
+              title: "이름",
+              placeholder: "이름을 입력해주세요.",
+              onChange: setName,
+            },
+          ],
+        },
+      }}
+      data={{
+        dataField: {
+          fields: {
+            id: "ID",
+            name: "이름",
+            level: "레벨",
+          },
+          sizes: {
+            id: "8",
+            name: "25",
+            level: "33",
+          },
+        },
+        dataSets: [
+          {
+            items: userTestValue?.filter(
+              (user) =>
+                user.level.includes(level) &&
+                user.birthday.includes(birthday) &&
+                user.name.includes(name)
+            ),
+            renderItem: (user) => (
+              <RowCard
+                key={user.id}
+                row={user}
+                fields={{
+                  id: "text",
+                  name: "text",
+                  level: ["select", selectUserOptions],
+                }}
+                sizes={{
+                  id: "8",
+                  name: "25",
+                  level: "33",
+                }}
+              />
+            ),
+          },
+        ],
+      }}
+    />
+  );
+}

package/src/app/agency/exam/page.tsx

@@ -0,0 +1,5 @@
+import { CanvasBoard } from "../../..";
+
+export default function Exam() {
+  return <CanvasBoard>group</CanvasBoard>;
+}

package/src/app/agency/group/page.tsx

@@ -0,0 +1,5 @@
+import { CanvasBoard } from "../../..";
+
+export default function User() {
+  return <CanvasBoard>Test</CanvasBoard>;
+}

package/src/app/agency/layout.tsx

@@ -0,0 +1,55 @@
+import { Link, useLocation } from "react-router-dom";
+import { buttonClassNames } from "../../navigation";
+import Explore from "../../_components/view/Explore";
+import { DashboardLayout } from "../../layout";
+
+const navigations = [
+  {
+    href: "",
+    title: "홈",
+  },
+  {
+    href: "/user",
+    title: "단체관리",
+  },
+  {
+    href: "/exam",
+    title: "시험관리",
+    // 학생 관리, 학생 정보 수정 정기시험-기관시험-경시대회
+  },
+  {
+    href: "/sales",
+    title: "매출 현황",
+    // 본인지역 얼마나 잘됐는지
+  },
+  {
+    href: "/headquarter",
+    title: "소통해요",
+    // 소통해요
+  },
+];
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const { pathname: nowPath } = useLocation();
+  const [title] = nowPath.split("/").slice(-1);
+  return (
+    <>
+      <DashboardLayout
+        subject={[title, "/images/tosel.png", "https://tosel.org"]}
+        colors={["green-dark/60", "green-dark"]}
+        navigations={navigations.map(({ href, title }) => (
+          <Link
+            key={href}
+            to={"/agency" + href}
+            className={buttonClassNames(href, nowPath, ["white", "green-dark"])}
+          >
+            {title}
+          </Link>
+        ))}
+      >
+        {children}
+      </DashboardLayout>
+      <Explore />
+    </>
+  );
+}