Merge pull request #91 from boostcampwm-2024/Feature/#080_panda_css_라…

…이브러리_설정

Feature/#80 panda css 라이브러리 설정

.prettierrc

@@ -3,5 +3,10 @@
   "printWidth": 100,
   "tabWidth": 2,
   "jsxSingleQuote": false,
-  "singleQuote": false
+  "singleQuote": false,
+
+  "plugins": ["@pandabox/prettier-plugin"],
+  "pandaFirstProps": ["as", "className", "layerStyle", "textStyle"],
+  "pandaStylePropsFirst": true,
+  "pandaSortOtherProps": true
 }

client/.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+## Panda
+styled-system
+styled-system-studio

client/eslint.config.js

@@ -4,6 +4,8 @@ import jsxA11y from "eslint-plugin-jsx-a11y";
 import { fileURLToPath } from "url";
 import { dirname, resolve } from "path";
 import rootConfig from "../eslint.config.js";
+import panda from "@pandacss/eslint-plugin";
+import pandabox from "@pandabox/prettier-plugin";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -14,10 +16,13 @@ export default [
 
   {
     files: ["src/**/*.{ts,tsx}"],
+    ignores: ["styled-system"],
     plugins: {
       react,
       "react-hooks": reactHooks,
       "jsx-a11y": jsxA11y,
+      "@pandacss": panda,
+      "@pandabox": pandabox,
     },
     languageOptions: {
       parserOptions: {
@@ -70,17 +75,54 @@ export default [
       "jsx-a11y/click-events-have-key-events": "warn",
       "jsx-a11y/no-static-element-interactions": "warn",
       "jsx-a11y/label-has-associated-control": "warn",
+
+      // import 순서
+      "import/order": [
+        "error",
+        {
+          groups: [
+            "builtin",
+            "external",
+            "internal",
+            "parent",
+            "sibling",
+            "index",
+            "object",
+            "type",
+          ],
+          pathGroups: [
+            {
+              pattern: "@/**",
+              group: "internal",
+            },
+          ],
+          alphabetize: {
+            order: "asc",
+          },
+        },
+      ],
+
+      ...panda.configs.recommended.rules,
+      "@pandacss/no-config-function-in-source": "off",
+      "@pandacss/prefer-longhand-properties": "error",
     },
     settings: {
       "import/resolver": {
         typescript: {
           alwaysTryTypes: true,
-          project: resolve(__dirname, "./tsconfig.json"),
+          project: "./tsconfig.json",
         },
       },
       react: {
         version: "detect",
       },
+      node: {
+        extensions: [".js", ".jsx", ".ts", ".tsx"],
+      },
+      "import/parsers": {
+        "@typescript-eslint/parser": [".ts", ".tsx"],
+      },
+      "import/internal-regex": "^@/",
     },
   },
 ];

client/package.json

@@ -7,14 +7,19 @@
     "dev": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --fix",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prepare": "panda codegen"
   },
   "dependencies": {
+    "@pandabox/panda-plugins": "^0.0.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "socket.io-client": "^4.8.1"
   },
   "devDependencies": {
+    "@pandabox/prettier-plugin": "^0.1.3",
+    "@pandacss/dev": "^0.47.1",
+    "@pandacss/eslint-plugin": "^0.2.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
@@ -23,6 +28,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "prettier": "^3.0.0",
     "vite": "^5.4.10",
     "vite-tsconfig-paths": "^5.1.0"
   }

client/panda.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from "@pandacss/dev";
+import { radii } from "@styles/tokens/radii";
+import { colors } from "@styles/tokens/color";
+import { shadows } from "@styles/tokens/shadow";
+import { spacing } from "@styles/tokens/spacing";
+import { textStyles } from "@styles/typography";
+import { globalStyles } from "@styles/global";
+import { glassContainerRecipe } from "@styles/recipes/glassContainerRecipe";
+
+export default defineConfig({
+  preflight: true,
+  include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
+  exclude: [],
+  globalCss: globalStyles,
+  theme: {
+    extend: {
+      tokens: {
+        colors,
+        radii,
+        shadows,
+        spacing,
+      },
+      recipes: {
+        glassContainer: glassContainerRecipe,
+      },
+      textStyles,
+    },
+  },
+  outdir: "styled-system",
+});

client/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@pandacss/dev/postcss': {},
+  },
+}

client/src/App.tsx

@@ -1,29 +1,11 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
+import WorkSpace from "@features/workSpace/WorkSpace";
 
 const App = () => {
-  const [count, setCount] = useState(0);
+  // TODO 라우터, react query 설정
 
   return (
     <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
+      <WorkSpace />
     </>
   );
 };

client/src/components/bottomNavigator/BottomNavigator.style.ts

@@ -0,0 +1,24 @@
+import { css, cx } from "@styled-system/css";
+import { glassContainer } from "@styled-system/recipes";
+
+export const bottomNavigatorContainer = cx(
+  glassContainer({
+    borderRadius: "top",
+  }),
+  css({
+    display: "flex",
+    zIndex: 1000,
+    position: "fixed",
+    left: "50%",
+    bottom: 0,
+    transform: "translateX(-50%)",
+    gap: "lg",
+    justifyContent: "center",
+    alignItems: "center",
+    minWidth: "360px",
+    height: "88px",
+    padding: "sm",
+    paddingBottom: "lg",
+    background: "white/60",
+  }),
+);

client/src/components/bottomNavigator/BottomNavigator.tsx

@@ -0,0 +1,30 @@
+import { IconButton } from "@components/button/IconButton";
+import { bottomNavigatorContainer } from "./BottomNavigator.style";
+
+interface NavItem {
+  id: number;
+  icon: string;
+}
+
+export const BottomNavigator = () => {
+  const items: NavItem[] = [
+    {
+      id: 1,
+      icon: "🏠",
+    },
+    {
+      id: 2,
+      icon: "🔍",
+    },
+    {
+      id: 3,
+      icon: "📚",
+    },
+  ];
+
+  return (
+    <div className={bottomNavigatorContainer}>
+      {items?.map(({ id, icon }) => <IconButton icon={icon} key={id} size="md" />)}
+    </div>
+  );
+};

client/src/components/button/IconButton.style.ts

@@ -0,0 +1,48 @@
+import { cva } from "@styled-system/css";
+
+export const iconButtonContainer = cva({
+  base: {
+    display: "flex",
+
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: "xs",
+    background: "white",
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        width: "44px",
+        height: "44px",
+        boxShadow: "sm",
+      },
+      md: {
+        width: "52px",
+        height: "52px",
+        boxShadow: "md",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const iconBox = cva({
+  variants: {
+    size: {
+      sm: {
+        fontSize: "24px",
+      },
+      md: {
+        fontSize: "30px",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

client/src/components/button/IconButton.tsx

@@ -0,0 +1,16 @@
+import { iconButtonContainer, iconBox } from "./IconButton.style";
+
+interface IconButtonProps {
+  icon: string;
+  size: "sm" | "md";
+  onClick?: () => void;
+}
+
+export const IconButton = ({ icon, size, onClick }: IconButtonProps) => {
+  // TODO 추후 svg 파일을 받아올 수 있도록 수정 (사이드바 - 페이지 추가 버튼)
+  return (
+    <button className={iconButtonContainer({ size })} onClick={onClick}>
+      <span className={iconBox({ size })}>{icon}</span>
+    </button>
+  );
+};

client/src/components/sidebar/MenuButton.style.ts

@@ -0,0 +1,23 @@
+import { css } from "@styled-system/css";
+
+export const menuItemWrapper = css({
+  display: "flex",
+  gap: "lg",
+  alignItems: "center",
+  borderRightRadius: "md",
+  width: "300px",
+  padding: "md",
+  boxShadow: "sm",
+});
+
+export const imageBox = css({
+  borderRadius: "sm",
+  width: "50px",
+  height: "50px",
+  overflow: "hidden",
+});
+
+export const textBox = css({
+  textStyle: "display-medium20",
+  color: "gray.900",
+});