@edu-tosel/design 1.0.4 → 1.0.6

package/src/app/agency/page.tsx

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

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

package/src/app/convention/page.tsx

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

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

package/{board/index.d.ts → src/board/index.tsx}

@@ -1,3 +1,4 @@
-import "../globals.css";
-export { default as CanvasBoard } from "./template/CanvasBoard";
-export { default as ManageBoard } from "./template/ManageBoard";
+import "../globals.css";
+
+export { default as CanvasBoard } from "./template/CanvasBoard";
+export { default as ManageBoard } from "./template/ManageBoard";

package/src/board/template/CanvasBoard.tsx

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

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

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

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

package/src/board/widget/Header.tsx

@@ -0,0 +1,63 @@
+import { cn } from "../../util";
+import { Input, Select } from "./Tags";
+import { BoardHeaderProps } from "./../../interface/Board";
+export default function BoardHeader({
+  title,
+  tags,
+  options,
+}: BoardHeaderProps) {
+  const { selects, inputs } = tags ?? {};
+  const { colors } = options ?? {};
+  const { bgColor, textColor } = colors ?? {
+    bgColor: "gray-200",
+    textColor: "black",
+  };
+
+  const container = {
+    positions: "fixed top-20 left-0 xl:static flex items-center",
+    paddings: "px-12",
+    styles: `bg-${bgColor} text-${textColor} pl-12 pr-9`,
+    sizes: "w-full h-20",
+  };
+
+  const block = {
+    displays: "xl:hidden block ",
+    sizes: container.sizes,
+  };
+
+  return (
+    <>
+      <div
+        className={cn(
+          container.positions,
+          container.paddings,
+          container.sizes,
+          container.styles
+        )}
+      >
+        <div className="text-xl font-bold">{title}</div>
+        <div className="flex items-center ml-auto gap-4">
+          {selects?.map(({ width, title, options, onChange }) => (
+            <Select
+              key={title}
+              width={width}
+              title={title}
+              selectOptions={options}
+              onChange={onChange}
+            />
+          ))}
+          {inputs?.map(({ width, title, placeholder, onChange }) => (
+            <Input
+              key={title + placeholder}
+              width={width}
+              title={title}
+              placeholder={placeholder}
+              onChange={onChange}
+            />
+          ))}
+        </div>
+      </div>
+      <div className={cn(block.sizes, block.displays)} />
+    </>
+  );
+}

package/src/board/widget/Tab.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { Button } from "../../interface";
+import { cn } from "../../util";
+
+export default function Tab({ tabs }: { tabs: Button[] }) {
+  const [tabsSelection, setTabsSelection] = useState(
+    tabs.map((_, i) => i === 0)
+  );
+
+  const positions = "xl:absolute xl:-bottom-14 xl:left-0 z-5";
+  const displays = "hidden xl:flex xl:items-end xl:gap-4";
+  const sizes = "xl:h-16";
+  const paddings = "xl:px-8 xl:pb-2 ";
+  const styles = "bg-white/50 rounded-b-xl ";
+
+  return (
+    <div className={cn(displays, positions, sizes, paddings, styles)}>
+      {tabs.map(([title, onClick], index) => (
+        <button
+          key={title}
+          onClick={() => {
+            setTabsSelection(tabsSelection.map((_, i) => i === index));
+            return onClick();
+          }}
+          className={`h-9 w-32 rounded-md ${
+            tabsSelection[index]
+              ? "border-4 border-blue-500"
+              : "border-4 border-red-500"
+          }`}
+        >
+          {title}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/board/widget/Tags.tsx

@@ -0,0 +1,81 @@
+import { useId } from "react";
+import {
+  HTMLInputElement,
+  HTMLSelectElement,
+} from "../../interface/HTMLElement";
+
+export function Select({
+  title,
+  width,
+  onChange,
+  selectOptions,
+}: HTMLSelectElement) {
+  const id = useId();
+
+  const widthSize = {
+    xs: "w-32",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+  };
+
+  const classNames = `${widthSize[width ?? "md"]} h-10 rounded-full pl-4`;
+
+  return (
+    <div className="flex justify-center items-center gap-4">
+      <label htmlFor={id} className="font-bold">
+        {title}
+      </label>
+      <select
+        id={id}
+        onChange={(e) => onChange(e.target.value)}
+        className={classNames}
+      >
+        {selectOptions?.map(([id, title]) => (
+          <option key={id} value={id}>
+            {title}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+export function Input({
+  title,
+  onChange,
+  placeholder,
+  width,
+}: HTMLInputElement) {
+  const id = useId();
+
+  const widthSize = {
+    xs: "w-28",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+  };
+
+  const classNames = `${widthSize[width ?? "md"]} h-10 rounded-full pl-4`;
+
+  return (
+    <div className="flex justify-center items-center gap-4">
+      <label htmlFor={id} className="font-bold">
+        {title}
+      </label>
+      <input
+        className={classNames}
+        id={id}
+        type="text"
+        placeholder={placeholder ?? ""}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  );
+}

package/{card/index.d.ts → src/card/index.tsx}

@@ -1,5 +1,6 @@
-export { default as ProfileCard } from "./template/ProfileCard";
-export { default as TrumpCard } from "./template/TrumpCard";
-export { default as ChartCard } from "./template/ChartCard";
-export { default as TableCard } from "./template/TableCard";
-export { default as RowCard } from "./template/RowCard";
+export { default as ProfileCard } from "./template/ProfileCard";
+export { default as TrumpCard } from "./template/TrumpCard";
+export { default as ChartCard } from "./template/ChartCard";
+export { default as TableCard } from "./template/TableCard";
+export { default as RowCard } from "./template/RowCard";
+export { default as InfoCard } from "./template/InfoCard";

package/src/card/template/ChartCard.tsx

@@ -0,0 +1,42 @@
+import {
+  Area,
+  Bar,
+  ComposedChart,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { Card } from "../widget/Card";
+import { ChartCardProps } from "../../interface/Card";
+
+export default function ChartCard({
+  data,
+  xAxis,
+  yAxis,
+  lines,
+  bars,
+  areas,
+}: ChartCardProps) {
+  return (
+    <Card options={{ width: "xl", height: "lg", text: { size: "xs" } }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <ComposedChart data={data}>
+          <XAxis dataKey={xAxis} />
+          <YAxis dataKey={yAxis} />
+          <Tooltip />
+          {lines?.map((line) => (
+            <Line key={line.dataKey} {...line} />
+          ))}
+          {bars?.map((bar) => (
+            <Bar key={bar.dataKey} {...bar} />
+          ))}
+          {areas?.map((area) => (
+            <Area key={area.dataKey} {...area} />
+          ))}
+        </ComposedChart>
+      </ResponsiveContainer>
+    </Card>
+  );
+}

package/src/card/template/InfoCard.tsx

@@ -0,0 +1,22 @@
+import { Deck } from "../..";
+import { InfoCardProps } from "../../interface/Card";
+import { Card } from "../widget/Card";
+
+export default function InfoCard({ type }: InfoCardProps) {
+  return (
+    <Deck>
+      <Card options={{ width: "xs", height: "lg" }}>
+        <div className="p-5">
+          <div>{type}</div>
+          <div>{}</div>
+        </div>
+      </Card>
+      <Card options={{ width: "md" }}>
+        <div className="p-5">
+          <div>{type}</div>
+          <div>{}</div>
+        </div>
+      </Card>
+    </Deck>
+  );
+}

package/src/card/template/ProfileCard.tsx

@@ -0,0 +1,36 @@
+import { Card } from "../widget/Card";
+import { center, between, colorsByLevel } from "../../util";
+type Level = "PS" | "ST" | "BA" | "JR" | "HJ";
+
+export default function ProfileCard({
+  info,
+  gradeData,
+}: {
+  info: { name: string; birthday: string; image?: string };
+  gradeData?: { level?: Level; score?: number; grade?: number };
+}) {
+  const { name, birthday, image } = info;
+  const { level, score, grade } = gradeData ?? {};
+
+  return (
+    <Card options={{ width: "sm" }}>
+      <div className="flex">
+        <img
+          src={image}
+          alt="profile"
+          className="h-20 w-20 overflow-hidden rounded-full object-cover "
+        />
+        <div className="ml-auto flex flex-col gap-4">
+          <div className="flex w-52 items-end gap-2 border-b-2 border-blue-navy pb-2">
+            <div className="text-xl font-bold">{name}</div>
+            <div>{birthday}</div>
+          </div>
+          <div>
+            <div>학원생</div>
+            <div>{level ? colorsByLevel[level] : ""}</div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}