Merge pull request #111 from boostcampwm-2024/Feature/#106_Docker_and…

…_noctaCrdt

Feature/#106 Docker에서 noctaCrdt, pandaCSS 경로를 인식하지 못하는 문제 수정

client/Dockerfile

@@ -3,15 +3,17 @@ FROM node:20 AS build
 WORKDIR /app
 
 # 2. 모노레포 루트에서 필요한 파일 복사
-COPY ./package.json ./pnpm-lock.yaml ./pnpm-workspace.yaml ./
-COPY ./client/package.json ./client/
+COPY . .
+# COPY ./package.json ./pnpm-lock.yaml ./pnpm-workspace.yaml ./
+# COPY ./client/package.json ./client/panda.config.ts ./client/vite.config.ts ./client/tsconfig.json ./client/
+# COPY ./client/src/styles ./client/src/styles
+# COPY ./@noctaCrdt/package.json ./@noctaCrdt/
 
 # 3. pnpm 설치 및 의존성 설치
 RUN npm install -g pnpm
 RUN pnpm install
 
 # 4. 애플리케이션 빌드
-COPY . .
 RUN pnpm --filter client run build
 
 # 5. 빌드된 정적 파일 준비 (Nginx에서 제공)

client/panda.config.ts

@@ -1,12 +1,12 @@
 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";
-import { sizes } from "@styles/tokens/sizes";
+import { radii } from "./src/styles/tokens/radii";
+import { colors } from "./src/styles/tokens/color";
+import { shadows } from "./src/styles/tokens/shadow";
+import { spacing } from "./src/styles/tokens/spacing";
+import { sizes } from "./src/styles/tokens/sizes";
+import { textStyles } from "./src/styles/typography";
+import { globalStyles } from "./src/styles/global";
+import { glassContainerRecipe } from "./src/styles/recipes/glassContainerRecipe";
 
 export default defineConfig({
   preflight: true,

client/src/components/bottomNavigator/BottomNavigator.tsx

@@ -1,6 +1,6 @@
+import { Page } from "@src/types/page";
 import { motion } from "framer-motion";
 import { IconButton } from "@components/button/IconButton";
-import { Page } from "src/types/page";
 import { animation } from "./BottomNavigator.animation";
 import { bottomNavigatorContainer } from "./BottomNavigator.style";
 

client/src/components/sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
+import { useIsSidebarOpen, useSidebarActions } from "@src/stores/useSidebarStore";
+import { Page } from "@src/types/page";
 import { motion } from "framer-motion";
 import { IconButton } from "@components/button/IconButton";
-import { useIsSidebarOpen, useSidebarActions } from "src/stores/useSidebarStore";
-import { Page } from "src/types/page";
 import { MenuButton } from "./MenuButton";
 import { PageItem } from "./PageItem";
 import { animation, contentVariants, sidebarVariants } from "./Sidebar.animation";

client/src/features/page/Page.tsx

@@ -1,7 +1,7 @@
+import { Page as PageType } from "@src/types/page";
 import { motion, AnimatePresence } from "framer-motion";
 import { useRef } from "react";
 import { Editor } from "@features/editor/Editor";
-import { Page as PageType } from "src/types/page";
 import { pageAnimation, resizeHandleAnimation } from "./Page.animation";
 import { pageContainer, pageHeader, resizeHandle } from "./Page.style";
 

client/src/features/page/hooks/usePage.ts

@@ -1,8 +1,8 @@
+import { useIsSidebarOpen } from "@src/stores/useSidebarStore";
+import { Position, Size } from "@src/types/page";
 import { useEffect, useState } from "react";
 import { PAGE, SIDE_BAR } from "@constants/size";
 import { SPACING } from "@constants/spacing";
-import { useIsSidebarOpen } from "src/stores/useSidebarStore";
-import { Position, Size } from "src/types/page";
 
 const PADDING = SPACING.MEDIUM * 2;
 

client/src/features/workSpace/hooks/usePagesManage.ts

@@ -1,5 +1,5 @@
+import { Page } from "@src/types/page";
 import { useState } from "react";
-import { Page } from "src/types/page";
 
 interface usePagesManageProps {
   pages: Page[];

client/src/styles/tokens/color.ts

@@ -1,4 +1,4 @@
-import { COLOR } from "src/constants/color";
+import { COLOR } from "@constants/color";
 
 export const colors = {
   white: {

client/src/styles/tokens/sizes.ts

@@ -1,4 +1,4 @@
-import { SIDE_BAR } from "src/constants/size";
+import { SIDE_BAR } from "@constants/size";
 
 export const sizes = {
   sidebar: {

client/src/styles/tokens/spacing.ts

@@ -1,4 +1,4 @@
-import { SPACING } from "src/constants/spacing";
+import { SPACING } from "@constants/spacing";
 
 export const spacing = {
   sm: { value: `${SPACING.SMALL}px` },

client/tsconfig.json

@@ -19,6 +19,7 @@
     "types": ["vite/client"],
     "baseUrl": ".",
     "paths": {
+      "@src/*": ["src/*"],
       "@styled-system/*": ["styled-system/*"],
       "@components/*": ["src/components/*"],
       "@assets/*": ["src/assets/*"],

client/vite.config.ts

@@ -5,9 +5,5 @@ import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [react(), tsconfigPaths()],
-  resolve: {
-    alias: {
-      "@noctaCrdt": path.resolve(__dirname, "../@noctaCrdt"),
-    },
-  },
+  resolve: { alias: { "@noctaCrdt": path.resolve(__dirname, "../@noctaCrdt") } },
 });

pnpm-workspace.yaml

@@ -1,4 +1,4 @@
 packages:
   - "client"
   - "server"
-  - "@noctaCrdt"
+  - "./@noctaCrdt"

server/Dockerfile

@@ -5,6 +5,7 @@ WORKDIR /app
 # 2. 모노레포 루트에서 필요한 파일 복사
 COPY ./package.json ./pnpm-lock.yaml ./pnpm-workspace.yaml ./
 COPY ./server/package.json ./server/
+COPY ./@noctaCrdt/package.json ./@noctaCrdt/
 
 # 3. pnpm 설치 및 의존성 설치
 RUN npm install -g pnpm