chore(wiki): style import 위치 이동

.eslintignore

@@ -1 +1,6 @@
-.eslintrc.cjs
+jest.config.js
+jest.setup.js
+commitlint.config.js
+.eslintrc.js
+.eslintrc.cjs
+next.config.mjs

apps/wiki/app/(docs)/[classify]/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/app/(docs)/docs/[title]/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/app/(user)/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const contributeBox = style({

apps/wiki/app/coin/TradeHistory.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/app/coin/rank/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/app/coin/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/app/history/[title]/detail/[id]/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/app/history/[title]/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const historyBox = style({

apps/wiki/app/layout.css.ts

@@ -1,4 +1,4 @@
-import { theme, flex, screen } from "@/styles";
+import { theme, flex, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/app/oauth/OAuth.tsx

@@ -3,7 +3,7 @@
 import { useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import { MoonLoader } from "react-spinners";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import { useLoginMutation } from "@/services/auth/auth.mutation";
 import * as styles from "./style.css";
 

apps/wiki/app/oauth/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/app/page.css.ts

@@ -1,4 +1,4 @@
-import { theme, font, flex, screen } from "@/styles";
+import { theme, font, flex, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/app/search/[keyword]/SearchResult.tsx

@@ -8,7 +8,7 @@ import Container from "@/components/Container";
 import { useQuery } from "@tanstack/react-query";
 import { docsQuery } from "@/services/docs/docs.query";
 import { useRouter } from "next/navigation";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import { useDate } from "@/hooks";
 import { MoonLoader } from "react-spinners";
 import * as styles from "./style.css";

apps/wiki/app/search/[keyword]/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/components/(modal)/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/components/Accordion/index.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from "react";
-import * as styles from "@/styles/document.css";
+import * as styles from "@/utils/document.css";
 import { content } from "./style.css";
 
 interface Props extends PropsWithChildren {

apps/wiki/components/Accordion/style.css.ts

@@ -1,4 +1,4 @@
-import { flex } from "@/styles";
+import { flex } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const content = style({

apps/wiki/components/Aside/Aside.tsx

@@ -7,7 +7,7 @@ import { DocsListItemType } from "@/types";
 import Link from "next/link";
 import { ArrowIcon } from "@buma/icon";
 import { useDate } from "@/hooks";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import * as styles from "./style.css";
 
 const Aside = () => {

apps/wiki/components/Aside/style.css.ts

@@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css";
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 
 export const container = style({
   width: "300px",

apps/wiki/components/Board/style.css.ts

@@ -1,4 +1,4 @@
-import { theme, flex, font, screen } from "@/styles";
+import { theme, flex, font, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/components/Container/style.css.ts

@@ -1,4 +1,4 @@
-import { theme, font, flex, screen } from "@/styles";
+import { theme, font, flex, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/components/Editor/DocsExample.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/components/Editor/DocsExample.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { toast } from "react-toastify";
 import { ArrowIcon } from "@buma/icon";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import { documentCompiler } from "@/utils";
 import Toastify from "../Toastify";
 import * as styles from "./DocsExample.css";

apps/wiki/components/Editor/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 

apps/wiki/components/Footer/style.css.ts

@@ -1,4 +1,4 @@
-import { font, flex, theme, screen } from "@/styles";
+import { font, flex, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/components/FrameEditor/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/components/Header/style.css.ts

@@ -1,4 +1,4 @@
-import { theme, flex, font, screen } from "@/styles";
+import { theme, flex, font, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/components/Popular/style.css.ts

@@ -1,5 +1,5 @@
 import { style, styleVariants } from "@vanilla-extract/css";
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { popularAnimation } from "./keyframes.css";
 

apps/wiki/components/ScrollButton/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ArrowIcon } from "@buma/icon";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import * as styles from "./style.css";
 
 const ScrollButton = () => {

apps/wiki/components/ScrollButton/style.css.ts

@@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css";
-import { flex, theme } from "@/styles";
+import { flex, theme } from "@buma/style";
 
 export const container = style({
   position: "fixed",

apps/wiki/components/Toastify/style.css.ts

@@ -1,4 +1,4 @@
-import { flex, font, screen, theme } from "@/styles";
+import { flex, font, screen, theme } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({

apps/wiki/next.config.mjs

@@ -6,7 +6,7 @@ const withVanillaExtract = createVanillaExtractPlugin({
 
 /** @type {import('next').NextConfig} */
 const nextConfig = withVanillaExtract({
-  transpilePackages: ["@buma/icon"],
+  transpilePackages: ["@buma/icon", "@buma/style"],
   swcMinify: true,
   images: {
     domains: [

apps/wiki/package.json

@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@buma/style": "workspace:*",
     "@buma/icon": "workspace:*",
     "@next/third-parties": "^14.1.4",
     "@tanstack/react-query": "^5.24.6",

apps/wiki/utils/document.css.ts

@@ -0,0 +1,114 @@
+import { keyframes, style } from "@vanilla-extract/css";
+import { theme, font, flex, screen } from "@buma/style";
+
+export const details = style({
+  width: "100%",
+  paddingBottom: "10px",
+});
+
+export const summary = style({
+  width: "100%",
+  borderBottom: `1px solid ${theme.gray}`,
+  margin: "20px 0",
+  color: `${theme.primary}94`,
+  cursor: "pointer",
+  listStyle: "none",
+  ...font.H2,
+  ...flex.FLEX,
+
+  selectors: {
+    [`${details} > &::-webkit-details-marker`]: {
+      display: "none",
+    },
+    [`${details}[open] > &`]: {
+      color: theme.primary,
+    },
+    [`${details} > &:before`]: {
+      content: "",
+      display: "inline-block",
+      width: "40px",
+      height: "40px",
+      background: "url('/assets/arrow_right.svg')",
+    },
+    [`${details}[open] > &:before`]: {
+      background: "url('/assets/arrow_down.svg')",
+    },
+  },
+
+  "@media": {
+    [`screen and (max-width: ${screen.tablet})`]: {
+      lineHeight: "200%",
+    },
+    [`screen and (max-width: ${screen.phone})`]: {
+      lineHeight: "250%",
+    },
+  },
+});
+
+export const link = style({
+  color: theme.link,
+  display: "inline",
+  ":hover": {
+    textDecoration: "underline",
+  },
+});
+
+export const block = style({
+  width: "100%",
+  height: "fit-content",
+  border: `1px solid ${theme.black}`,
+  backgroundColor: `${theme.hover}`,
+  padding: "16px 20px",
+  margin: "10px 0",
+  ...font.H5,
+});
+
+export const quote = style({
+  width: "100%",
+  backgroundColor: theme.hover,
+  border: `1px solid ${theme.gray}`,
+  padding: "10px 20px",
+  ...font.H6,
+});
+
+const shakeAnimation = keyframes({
+  "0%": {
+    transform: "translateX(10px)",
+  },
+  "25%": {
+    transform: "translateX(-10px)",
+  },
+  "50%": {
+    transform: "translateX(30px)",
+  },
+  "75%": {
+    transform: "translateX(-10px)",
+  },
+  "100%": {
+    transform: "translateX(10px)",
+  },
+});
+
+export const shake = style({
+  animation: `${shakeAnimation} 1s linear infinite`,
+});
+
+const spinAnimation = keyframes({
+  "0%": {
+    transform: "rotate(0deg)",
+  },
+  "100%": {
+    transform: "rotate(360deg)",
+  },
+});
+
+export const spin = style({
+  width: "fit-content",
+  animation: `${spinAnimation} 1s linear infinite`,
+});
+
+export const rainbow = style({
+  backgroundImage: "linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple)",
+  WebkitBackgroundClip: "text",
+  color: "transparent",
+});

apps/wiki/utils/documentCompiler.ts

@@ -1,5 +1,5 @@
-import { theme } from "@/styles";
-import * as styles from "@/styles/document.css";
+import { theme } from "@buma/style";
+import * as styles from "@/utils/document.css";
 
 const deleteNotAllowedTag = (contents: string) => {
   return contents