feat : style, ui package 모듈로 분리

apps/wiki/apis/index.ts

@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 import { ERROR } from "@/constants";
 import { refresh } from "@/services/auth/auth.api";
 
@@ -10,14 +10,15 @@ export const http = axios.create({
 http.interceptors.response.use(
   (response) => response,
   async (error) => {
-    const request = error.config;
-    const { code } = error.response.data;
-    const isAccessTokenExpiredError = code === ERROR.TOKEN_403_2;
+    if (error instanceof AxiosError) {
+      const request = error.config;
+      const { code } = error.response?.data || { code: null };
+      const isAccessTokenExpiredError = code === ERROR.TOKEN_403_2;
 
-    if (isAccessTokenExpiredError && !request.sent) {
-      request.sent = true;
-      request.headers.Authorization = await refresh();
-      return http(request);
+      if (isAccessTokenExpiredError && request) {
+        request.headers.Authorization = await refresh();
+        return http(request);
+      }
     }
     return Promise.reject(error);
   },

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/ui", "@buma/style"],
   swcMinify: true,
   images: {
     domains: [

apps/wiki/package.json

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

apps/wiki/styles/document.css.ts → apps/wiki/utils/document.css.ts

@@ -1,5 +1,5 @@
 import { keyframes, style } from "@vanilla-extract/css";
-import { theme, font, flex, screen } from ".";
+import { theme, font, flex, screen } from "@buma/style";
 
 export const details = style({
   width: "100%",

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 "./document.css";
 
 const deleteNotAllowedTag = (contents: string) => {
   return contents

packages/icon/package.json

@@ -17,5 +17,8 @@
     "eslint": "^8.57.0",
     "react": "^18.2.0",
     "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "next": "14.1.4"
   }
 }

packages/style/.eslintrc.cjs

@@ -0,0 +1,5 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@buma/eslint-config/react-ts"],
+};

packages/style/index.ts

@@ -0,0 +1,4 @@
+export { default as flex } from "./src/flex";
+export { default as font } from "./src/font";
+export { default as theme } from "./src/theme";
+export { default as screen } from "./src/screen";

packages/style/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@buma/style",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "generate:component": "turbo gen react-component"
+  },
+  "devDependencies": {
+    "@buma/eslint-config": "workspace:*",
+    "@buma/typescript-config": "workspace:*",
+    "@turbo/gen": "^1.12.4",
+    "@types/node": "^20.11.24",
+    "@types/eslint": "^8.56.5",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "eslint": "^8.57.0",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/next-plugin": "^2.3.6"
+  }
+}

packages/style/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@buma/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

packages/ui/.eslintrc.cjs

@@ -0,0 +1,5 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@buma/eslint-config/react-ts"],
+};

packages/ui/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@buma/ui",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "generate:component": "turbo gen react-component"
+  },
+  "devDependencies": {
+    "@buma/eslint-config": "workspace:*",
+    "@buma/typescript-config": "workspace:*",
+    "@turbo/gen": "^1.12.4",
+    "@types/node": "^20.11.24",
+    "@types/eslint": "^8.56.5",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "eslint": "^8.57.0",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/next-plugin": "^2.3.6"
+  }
+}

packages/ui/src/Navigator/index.tsx

@@ -0,0 +1,8 @@
+// import * as styles from "./style.css";
+
+const Navigator = () => {
+  // return <header className={styles.container}>asd</header>;
+  return <header>asd</header>;
+};
+
+export default Navigator;

packages/ui/src/Navigator/style.css.ts

@@ -0,0 +1,16 @@
+// import { style } from "@vanilla-extract/css";
+// import { flex, font } from "@buma/style";
+
+// export const container = style({
+//   width: "100%",
+//   height: "32px",
+//   padding: "0 4vw",
+//   gap: "14px",
+//   ...flex.VERTICAL,
+// });
+
+// export const hgroup = style({
+//   gap: "4px",
+//   ...font.H6,
+//   ...flex.VERTICAL,
+// });

packages/ui/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@buma/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}