release

container/Dockerfile

@@ -0,0 +1,59 @@
+# Build stage
+FROM node:20-slim AS builder
+ARG PROJECT_FOLDER
+ARG REACT_APP_MEMBER_URL
+ARG REACT_APP_MYSUB_URL
+ARG REACT_APP_RECOMMEND_URL
+
+ENV NODE_ENV=production
+
+WORKDIR /app
+
+# Install dependencies
+COPY ${PROJECT_FOLDER}/package*.json ./
+RUN npm ci --only=production
+
+# Build application
+COPY ${PROJECT_FOLDER} .
+RUN npm run build
+
+# Run stage
+FROM nginx:stable-alpine
+
+# 시스템 환경변수 셋팅: api.js에서 사용하는 시스템 환경변수를 build시 셋팅해야 생성됨  
+ENV REACT_APP_MEMBER_URL=${REACT_APP_MEMBER_URL}
+ENV REACT_APP_MYSUB_URL=${REACT_APP_MYSUB_URL}
+ENV REACT_APP_RECOMMEND_URL=${REACT_APP_RECOMMEND_URL}
+
+ARG BUILD_FOLDER
+ARG EXPORT_PORT
+
+# Create nginx user if it doesn't exist
+RUN adduser -S nginx || true
+
+# Copy build files
+COPY --from=builder /app/build /usr/share/nginx/html
+
+# Copy and process nginx configuration
+COPY ${BUILD_FOLDER}/nginx.conf /etc/nginx/templates/default.conf.template
+
+# Add custom nginx settings
+RUN echo "client_max_body_size 100M;" > /etc/nginx/conf.d/client_max_body_size.conf
+RUN echo "proxy_buffer_size 128k;" > /etc/nginx/conf.d/proxy_buffer_size.conf
+RUN echo "proxy_buffers 4 256k;" > /etc/nginx/conf.d/proxy_buffers.conf
+RUN echo "proxy_busy_buffers_size 256k;" > /etc/nginx/conf.d/proxy_busy_buffers_size.conf
+
+# Set permissions
+RUN chown -R nginx:nginx /usr/share/nginx/html && \
+    chmod -R 755 /usr/share/nginx/html && \
+    chown -R nginx:nginx /var/cache/nginx && \
+    chown -R nginx:nginx /var/log/nginx && \
+    chown -R nginx:nginx /etc/nginx/conf.d && \
+    touch /var/run/nginx.pid && \
+    chown -R nginx:nginx /var/run/nginx.pid
+
+USER nginx
+
+EXPOSE ${EXPORT_PORT}
+
+CMD ["nginx", "-g", "daemon off;"]

container/nginx.conf

@@ -0,0 +1,29 @@
+server {
+    listen 18080;
+    server_name localhost;
+    
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html;
+        
+        # Cache static files
+        location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
+            expires 1y;
+            add_header Cache-Control "public, no-transform";
+        }
+    }
+    
+    # Health check endpoint
+    location /health {
+        access_log off;
+        return 200 'healthy\n';
+        add_header Content-Type text/plain;
+    }
+    
+    # Error pages
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}

package-lock.json

@@ -17224,16 +17224,16 @@
             }
         },
         "node_modules/typescript": {
-            "version": "5.7.3",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
-            "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+            "version": "4.9.5",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+            "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
             "peer": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
             },
             "engines": {
-                "node": ">=14.17"
+                "node": ">=4.2.0"
             }
         },
         "node_modules/unbox-primitive": {

src/components/auth/LoginForm.js

@@ -11,99 +11,99 @@ import {
 import { Visibility, VisibilityOff } from '@mui/icons-material';
 
 const LoginForm = ({ onSubmit, error }) => {
- const [userId, setUserId] = useState('');
- const [password, setPassword] = useState('');
- const [showPassword, setShowPassword] = useState(false);
+  const [userId, setUserId] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
 
- const handleSubmit = (e) => {
-   e.preventDefault();
-   onSubmit(userId, password);
- };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit(userId, password);
+  };
 
- return (
-   <Box 
-     component="form" 
-     onSubmit={handleSubmit}
-     sx={{
-       display: 'flex',
-       flexDirection: 'column',
-       gap: 2,
-       width: '100%',
-       maxWidth: 400,
-       margin: '0 auto'
-     }}
-   >
-     <Box 
-       sx={{ 
-         display: 'flex', 
-         justifyContent: 'center', 
-         mb: 3 
-       }}
-     >
-       <img 
-         src="/images/logo192.png" 
-         alt="마이구독 로고" 
-         style={{ 
-           width: '100px',
-           height: '100px',
-           objectFit: 'contain'
-         }} 
-       />
-     </Box>
+  return (
+    <Box 
+      component="form" 
+      onSubmit={handleSubmit}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        width: '100%',
+        maxWidth: 400,
+        margin: '0 auto'
+      }}
+    >
+      <Box 
+        sx={{ 
+          display: 'flex', 
+          justifyContent: 'center', 
+          mb: 3 
+        }}
+      >
+        <img 
+          src="/images/logo192.png" 
+          alt="마이구독 로고" 
+          style={{ 
+            width: '100px',
+            height: '100px',
+            objectFit: 'contain'
+          }} 
+        />
+      </Box>
 
-     <TextField
-       label="아이디"
-       variant="outlined"
-       fullWidth
-       value={userId}
-       onChange={(e) => setUserId(e.target.value)}
-       error={!!error}
-       autoComplete="username"
-       required
-     />
+      <TextField
+        label="아이디"
+        variant="outlined"
+        fullWidth
+        value={userId}
+        onChange={(e) => setUserId(e.target.value)}
+        error={!!error}
+        autoComplete="username"
+        required
+      />
       
-     <TextField
-       label="비밀번호"
-       type={showPassword ? 'text' : 'password'}
-       variant="outlined"
-       fullWidth
-       value={password}
-       onChange={(e) => setPassword(e.target.value)}
-       error={!!error}
-       autoComplete="current-password"
-       required
-       InputProps={{
-         endAdornment: (
-           <InputAdornment position="end">
-             <IconButton
-               onClick={() => setShowPassword(!showPassword)}
-               edge="end"
-             >
-               {showPassword ? <VisibilityOff /> : <Visibility />}
-             </IconButton>
-           </InputAdornment>
-         ),
-       }}
-     />
+      <TextField
+        label="비밀번호"
+        type={showPassword ? 'text' : 'password'}
+        variant="outlined"
+        fullWidth
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        error={!!error}
+        autoComplete="current-password"
+        required
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                onClick={() => setShowPassword(!showPassword)}
+                edge="end"
+              >
+                {showPassword ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+      />
 
-     {error && (
-       <Typography color="error" variant="body2">
-         {error}
-       </Typography>
-     )}
+      {error && (
+        <Typography color="error" variant="body2">
+          {error}
+        </Typography>
+      )}
 
-     <Button 
-       type="submit" 
-       variant="contained" 
-       color="primary" 
-       size="large"
-       fullWidth
-       sx={{ mt: 2 }}
-     >
-       로그인
-     </Button>
-   </Box>
- );
+      <Button 
+        type="submit" 
+        variant="contained" 
+        color="primary" 
+        size="large"
+        fullWidth
+        sx={{ mt: 2 }}
+      >
+        로그인
+      </Button>
+    </Box>
+  );
 };
 
 export default LoginForm;