Merge pull request #21 from Pseudo-Lab/feat/frontend-theme-and-docker

Feat/frontend theme and docker

Author: ed-kyu

docker-compose.yaml

@@ -0,0 +1,17 @@
+version: '3.8'
+
+services:
+  frontend:
+    build:
+      context: ./frontend
+    ports:
+      - "8080:80"  # 내부 80포트를 8080으로 매핑
+    restart: always
+
+      #  backend:
+      #    build:
+      #      context: ./backend
+      #    container_name: backend
+      #    ports:
+      #      - "8000:8000"
+      #    restart: always

frontend/Dockerfile

@@ -0,0 +1,17 @@
+# 1단계: 빌드
+FROM node:20 AS builder
+WORKDIR /app
+
+COPY package*.json .
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+# 2단계: nginx로 정적 파일 서빙
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -0,0 +1,16 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri /index.html;
+    }
+
+    location ~* \.(?:js|css|jpg|jpeg|gif|png|ico|svg|woff|woff2)$ {
+        expires 7d;
+        add_header Cache-Control "public, max-age=604800, immutable";
+    }
+}

frontend/src/modules/Home/components/Services.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, CardContent, Typography, Button, Box } from '@mui/material';
+import { Typography, Button, Box } from '@mui/material';
 import Grid2 from '@mui/material/Grid2';
 import { colors } from '../../../styles/theme';
 

frontend/src/styles/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useMemo, useState, ReactNode, useContext } from 'react';
+import { createContext, useMemo, useState, ReactNode, useContext } from 'react';
 import { createTheme, ThemeProvider, CssBaseline } from '@mui/material';
 import { colors } from './theme';
 

frontend/src/styles/theme.ts

@@ -1,10 +1,48 @@
+import { createTheme } from '@mui/material/styles';
+
 export const colors = {
-    primary: '#F2913B',
-    secondary: '#21709A',
-    success: '#10b981',
-    dark: '#1f2937',
-    light: '#f3f4f6',
-    shadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
-    borderRadius: '8px',
-    transition: 'all 0.3s ease',
-  };
+  primary: '#F2913B',
+  secondary: '#21709A',
+  success: '#10b981',
+  dark: '#1f2937',
+  light: '#f3f4f6',
+  shadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+  borderRadius: '8px',
+  transition: 'all 0.3s ease',
+};
+
+// 타입 확장
+declare module '@mui/material/styles' {
+  interface Palette {
+    custom: {
+      primary: string;
+      secondary: string;
+      success: string;
+    };
+  }
+
+  interface PaletteOptions {
+    custom?: {
+      primary?: string;
+      secondary?: string;
+      success?: string;
+    };
+  }
+}
+
+// MUI 테마 생성
+const theme = createTheme({
+  palette: {
+    mode: 'light',
+    custom: {
+      primary: colors.primary,
+      secondary: colors.secondary,
+      success: colors.success,
+    },
+  },
+  shape: {
+    borderRadius: 8,
+  },
+});
+
+export default theme;