@edu-tosel/design 1.0.6 → 1.0.8

package/src/_components/asset/people.ts

@@ -1,226 +0,0 @@
-export const people = [
-  {
-    info: {
-      name: "이상혁",
-      birthday: "1996-05-07",
-      image: "/images/faker.jpg",
-    },
-  },
-  {
-    info: {
-      name: "젠킨스",
-      birthday: "1997-05-08",
-      image: "/images/jenkins.png",
-    },
-  },
-  {
-    info: {
-      name: "댕댕이",
-      birthday: "2012-04-13",
-      image: "/images/daeng.jpg",
-    },
-  },
-  {
-    info: {
-      name: "김민지",
-      birthday: "2004-05-07",
-      image: "/images/minji.png",
-    },
-  },
-  {
-    info: {
-      name: "팜하니",
-      birthday: "2004-10-06",
-      image: "/images/hani.png",
-    },
-  },
-  {
-    info: {
-      name: "오해원",
-      birthday: "2003-02-25",
-      image: "/images/haewon.png",
-    },
-  },
-  {
-    info: {
-      name: "안유진",
-      birthday: "2003-09-01",
-      image: "/images/yujin.png",
-    },
-  },
-  {
-    info: {
-      name: "강슬기",
-      birthday: "1994-02-10",
-      image: "/images/seulgi.png",
-    },
-  },
-  {
-    info: {
-      name: "강해린",
-      birthday: "2006-05-15",
-      image: "/images/haerin.png",
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-  {
-    info: {
-      name: "TOSEL",
-      birthday: "2006-05-15",
-      image: null,
-    },
-  },
-];

package/src/_components/asset/planets.ts

@@ -1,49 +0,0 @@
-import { Planet } from "./interface";
-
-export const planets: Record<Planet, Record<string, string>> = {
-  olympiad: {
-    title: "PROJECT: OLYMPIAD",
-    href: "https://olympiad.tosel.co.kr",
-    description: `
-    올림피아드는 IBT방식의 영어단어 경시대회 및 영어말하기 대회로 기획되었다.
-    브라우저에서 도입할 수 있는 치팅 방지 시스템을 개발하였다.
-    또한, 영어말하기 대회에서는 녹음을 통해 음성을 전송할 예정이다.
-
-    올림피아드를 참고하여 토셀 IBT 시험도 개발될 예정이다.
-    `,
-  },
-  admin: {
-    title: "PROJECT: ADMIN",
-    href: "/admin",
-    description: `
-      와썹폐기
-      `,
-  },
-  partner: {
-    title: "PROJECT: PARTNER",
-    href: "/partner",
-    description: `
-      지본용
-      `,
-  },
-  report: {
-    title: "PROJECT: REPORT",
-    href: "/report",
-    description: `
-      기존의 성적 분석 자료 및 성적표를 대체할 새로운 성적 분석 자료로 기획되었다.
-      온라인 친화적인 웹뷰와 함께, 다양한 기능을 제공할 것이다.
-      또한, 기존의 출력물을 대체할 수 있도록, 다양한 출력물을 제공할 것이다.
-
-      성적표 프로젝트를 진행하면서 성적 처리 시스템도 보완하였다.
-    `,
-  },
-  homepage: {
-    title: "PROJECT: HOMEPAGE (NEW)",
-    href: "/homepage",
-    description: `
-    TOSEL의 신규사이트이다.
-    기존의 사이트는 불필요한 정보가 많아서 사용자가 원하는 정보를 찾기 어려웠다.
-    이를 개선하기 위해 새로운 사이트를 기획하였다.
-    `,
-  },
-};

package/src/_components/controller/store.ts

@@ -1,11 +0,0 @@
-import { create } from "zustand";
-
-interface PreviewProps {
-  planet: string;
-  setPlanet: (planet: string) => void;
-}
-
-export const usePreviewStore = create<PreviewProps>((set) => ({
-  planet: "",
-  setPlanet: (planet) => set({ planet }),
-}));

package/src/_components/hook/useRoute.ts

@@ -1,47 +0,0 @@
-import { useState, useEffect, ComponentType } from "react";
-
-type PageComponent = ComponentType<any>;
-
-type RouteItem = {
-  path: string;
-  component: PageComponent;
-  layout: PageComponent | null;
-};
-const LAYOUTS = import.meta.glob("/src/app/**/layout.tsx") as Record<
-  string,
-  () => Promise<{ default: PageComponent }>
->;
-const COMPONENTS = import.meta.glob("/src/app/**/[a-z[]*.tsx") as Record<
-  string,
-  () => Promise<{ default: PageComponent }>
->;
-
-export default function useRoute() {
-  const [routes, setRoutes] = useState<RouteItem[]>([]);
-  useEffect(() => {
-    const loadRoutes = async () => {
-      const routeItems: RouteItem[] = await Promise.all(
-        Object.keys(COMPONENTS).map(async (key) => {
-          const path = key
-            .replace(/\/src\/app|page|\.tsx$/g, "")
-            .replace(/\[\.{3}.+\]/, "*")
-            .replace(/\[(.+)\]/, ":$1");
-          const Component = (await COMPONENTS[key]()).default;
-          const layoutPath = Object.keys(LAYOUTS).find((layoutKey) =>
-            key.startsWith(layoutKey.replace(/layout.tsx$/, ""))
-          );
-          const Layout = layoutPath
-            ? (await LAYOUTS[layoutPath]()).default
-            : null;
-
-          return { path, component: Component, layout: Layout };
-        })
-      );
-
-      setRoutes(routeItems);
-    };
-    loadRoutes();
-  }, []);
-
-  return routes;
-}

package/src/_components/hook/useTyping.ts

@@ -1,46 +0,0 @@
-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

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

package/src/_components/view/Explore.tsx

@@ -1,16 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

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

package/src/app/admin/layout.tsx

@@ -1,56 +0,0 @@
-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 />
-    </>
-  );
-}