@edu-tosel/design 1.0.6 → 1.0.8

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

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

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

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

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

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

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

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

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

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

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

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

package/src/app/agency/layout.tsx

@@ -1,55 +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: "",
-    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 />
-    </>
-  );
-}

package/src/app/agency/page.tsx

@@ -1,68 +0,0 @@
-import { CanvasBoard, Deck, Shelf, TableCard, TrumpCard } from "../..";
-
-export default function PartnerPage() {
-  return (
-    <CanvasBoard>
-      <Shelf>
-        <Deck titles={{ title: "이번달 집중 실적" }}>
-          <TrumpCard
-            titles={{
-              title: "이번달 정기시험 성과는",
-              subTitle: ["0원입니다."],
-            }}
-            options={{ width: "xl" }}
-          />
-          <TrumpCard
-            titles={{
-              title: "이번달 기관시험 성과는",
-              subTitle: ["1000원입니다."],
-            }}
-            options={{ width: "sm" }}
-          />
-        </Deck>
-      </Shelf>
-      <Shelf>
-        <Deck titles={{ title: "정기시험" }}>
-          <TrumpCard
-            titles={{
-              title: "정기시험",
-              subTitle: [
-                "고사장 마감까지 D-1입니다.",
-                "접수 마감까지 D-7입니다.",
-              ],
-            }}
-            options={{ width: "md" }}
-          />
-        </Deck>
-        <Deck titles={{ title: "우리 TOSEL MVP" }}>
-          <TableCard
-            data={data}
-            fields={{ name: "이름", sales: "매출액" }}
-            sizes={{ name: "1/3" }}
-          />
-        </Deck>
-      </Shelf>
-    </CanvasBoard>
-  );
-}
-
-interface Data extends Record<string, string | number> {
-  name: string;
-  sales: string;
-}
-
-const data: Data[] = [
-  {
-    name: "최광주",
-    sales: "13,000,000",
-  },
-  {
-    name: "장호성",
-    sales: "2,000,000",
-  },
-
-  {
-    name: "안혜진",
-    sales: "1,200,000",
-  },
-];

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

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

package/src/app/convention/page.tsx

@@ -1,58 +0,0 @@
-import tovention from "../../../tailwind.config";
-
-export default function Convention() {
-  const {
-    extend: { fontFamily, screens, fontSize, colors, inset },
-  } = tovention.theme;
-
-  const scripts = [
-    {
-      name: "colors",
-      help: "기본적으로 color-description 형태로 설정되어 있다.",
-      value: colors,
-      display: "bg-",
-    },
-    {
-      name: "screens",
-      help: "화면 크기에 따른 breakpoint 설정",
-      value: screens,
-      display: "",
-    },
-    {
-      name: "fontSize",
-      help: "rem은 px을 16으로 나눈 값이다. 16px = 1rem",
-      value: fontSize,
-      display: "text-",
-    },
-    {
-      name: "fontFamily",
-      help: "",
-      value: fontFamily,
-      display: "font-",
-    },
-  ];
-
-  return (
-    <div className="min-h-screen w-full flex flex-col items-center text-xl pt-16">
-      <div className="border-2 w-9/10 p-4 flex flex-col gap-4">
-        {scripts.map(({ name, help, value, display }) => (
-          <div key={name} className="flex flex-col gap-4">
-            <div className="text-3xl font-bold">{`${name}: ${help}`}</div>
-            <div className="text-xl">
-              {Object.entries(value).map(([innerKey, innerValue]) => {
-                return (
-                  <div key={innerKey} className="flex gap-4">
-                    <div>{innerKey}</div>
-                    <div className={display ? `${display}${innerKey}` : ""}>
-                      {innerValue}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/app/page.tsx

@@ -1,4 +0,0 @@
-import Home from "../_components/view/Home";
-export default function Page() {
-  return <Home />;
-}

package/src/board/template/CanvasBoard.tsx

@@ -1,17 +0,0 @@
-import { BoardProps } from "../../interface/Board";
-import { cn } from "../../util";
-import { Board } from "../widget/Board";
-
-export default function CanvasBoard({ children, options }: BoardProps) {
-  const layouts = "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ";
-  const sizes = "h-full ";
-  const paddings =
-    "pb-36 xl:pb-0 px-2 xs:px-4 xl:pl-8 xl:pr-2 pt-2 xs:pt-4 xl:pt-8";
-  const styles = "overflow-y-scroll ";
-
-  return (
-    <Board options={options}>
-      <div className={cn(layouts, sizes, paddings, styles)}>{children}</div>
-    </Board>
-  );
-}

package/src/board/template/ManageBoard.tsx

@@ -1,56 +0,0 @@
-import { Deck } from "../../deck";
-import { cn } from "../../util";
-import { Board } from "../widget/Board";
-import BoardHeader from "../widget/Header";
-import BoardDataField from "../widget/DataField";
-import { ManageBoardProps } from "../../interface/Board";
-import { useWidgetStore } from "../../store";
-import { Exception } from "../../interaction";
-
-type Item = Record<string, any>;
-export default function ManageBoard<T extends Item>({
-  header,
-  data,
-  widgets,
-}: ManageBoardProps<T>) {
-  const {
-    order: [orderBy, orderHow],
-  } = useWidgetStore();
-  const { dataSets, dataField, gap } = data;
-  const positions = `flex flex-col gap-${gap ?? 0}`;
-  const sizes = `h-full ${dataField ? "xl:h-135" : "xl:h-158"}`;
-  const paddings = "pb-60 xl:pb-0 px-2 xs:px-4 xl:px-8";
-  const styles = "overflow-y-scroll";
-  return (
-    <Board widgets={widgets}>
-      <BoardHeader {...header} />
-      {dataField && <BoardDataField dataField={dataField} />}
-      <div className={cn(positions, sizes, paddings, styles)}>
-        <Exception exceptions={widgets?.exceptions}>
-          {dataSets.map(({ title: deckTitle, items, renderItem }) =>
-            deckTitle ? (
-              <div key={deckTitle} className="pt-4">
-                <Deck titles={{ title: deckTitle ?? "" }}>
-                  {items?.map((item) => renderItem(item))}
-                </Deck>
-              </div>
-            ) : (
-              items
-                ?.slice()
-                .sort((a, b) => {
-                  if (orderBy) {
-                    if (orderHow === "asc")
-                      return a[orderBy] > b[orderBy] ? 1 : -1;
-                    return a[orderBy] < b[orderBy] ? 1 : -1;
-                  }
-                  return 0;
-                })
-                .map((item) => renderItem(item))
-            )
-          )}
-        </Exception>
-      </div>
-      {widgets?.menu}
-    </Board>
-  );
-}

package/src/board/widget/Board.tsx

@@ -1,28 +0,0 @@
-import { useWidgetStore } from "../../store";
-import { BoardProps } from "../../interface/Board";
-import Tab from "./Tab";
-
-export function Board({ children, widgets }: BoardProps) {
-  const { events } = useWidgetStore();
-  const { components, tabs } = widgets ?? {};
-
-  const classNames = [
-    `h-full xl:min-h-0 `,
-    "xl:rounded-xl bg-white relative w-full z-10 overflow-hidden",
-  ].join(" ");
-
-  return (
-    <div className="h-full xl:min-h-0 xl:h-178 w-full relative ">
-      <div className={classNames}>
-        {children}
-        {components?.map(([flag, Component]) => {
-          if (typeof flag === "boolean") return flag ? <>{Component}</> : null;
-          return events?.some(({ event }) => event === flag) ? (
-            <>{Component}</>
-          ) : null;
-        })}
-      </div>
-      {tabs && <Tab tabs={tabs} />}
-    </div>
-  );
-}

package/src/board/widget/DataField.tsx

@@ -1,70 +0,0 @@
-import { cn } from "../../util";
-import { useWidgetStore } from "./../../store";
-
-export default function BoardDataField({
-  dataField,
-}: {
-  dataField: {
-    fields: Record<string, string>;
-    sizes: Record<string, string>;
-  };
-}) {
-  const {
-    order: [orderBy, orderHow],
-    setOrder,
-  } = useWidgetStore();
-  const { fields, sizes } = dataField;
-
-  const container = {
-    positions: "fixed top-40 left-0  xl:static",
-    displays: "flex items-center",
-    styles: `bg-gray-200`,
-    sizes: "w-full h-23",
-  };
-  const dataFieldContainer = {
-    displays: "flex items-center",
-    sizes: "w-full h-12",
-    paddings: "px-2 xs:px-4 xl:px-8",
-    styles: "bg-white-off",
-  };
-  const block = {
-    displays: "xl:hidden block ",
-    sizes: container.sizes,
-  };
-  return (
-    <>
-      <div
-        className={cn(
-          container.positions,
-          container.displays,
-          container.sizes,
-          container.styles
-        )}
-      >
-        <div
-          className={cn(
-            dataFieldContainer.displays,
-            dataFieldContainer.sizes,
-            dataFieldContainer.paddings,
-            dataFieldContainer.styles
-          )}
-        >
-          {Object.entries(fields).map(([key, value]) => (
-            <div key={key} className={`w-${`${sizes[key]}/100` ?? "auto"}`}>
-              <button
-                onClick={() => setOrder(key)}
-                className="flex items-center gap-1"
-              >
-                <div>{value}</div>
-                <div className="text-xs">
-                  {orderBy === key ? (orderHow === "asc" ? "▼" : "▲") : ""}
-                </div>
-              </button>
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className={cn(block.sizes, block.displays)} />
-    </>
-  );
-}