Enhance Frontend UI/UX 화면 개선

frontend/README.md

@@ -1,54 +1,10 @@
 # React + TypeScript + Vite
 
-```js
-npm run dev
-```
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+### 설치 및 실행
+```bash
+# 의존성 설치
+npm install
 
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+# 개발 서버 실행
+npm run dev
+```

frontend/src/components/Navbar.tsx

@@ -16,7 +16,7 @@ export const Navbar = ({ style, link = "/" }: NavbarProps) => {
       style={style}
     >
       {/* 내부 컨텐츠 컨테이너 */}
-      <div className="max-w-[1280px] mx-auto flex items-center justify-between">
+      <div className="ml-0 flex items-center">
         <Link to={link}>
           {/* 로고 컨테이너 - 호버/클릭 애니메이션 적용 */}
           <motion.div

frontend/src/pages/Drawing.tsx

@@ -41,6 +41,15 @@ export default function Drawing() {
   // 캔버스 참조
   const canvasRef = useRef<ReactSketchCanvasRef>(null);
 
+  // Blob URL 메모리 정리 (cleanup)
+  useEffect(() => {
+    return () => {
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);
+
   // type 유효성 검사
   const validateType = (param: string | undefined): DrawingType => {
     if (!param || !['house', 'tree', 'person'].includes(param)) {
@@ -99,6 +108,8 @@ export default function Drawing() {
   // 파일 처리 함수
   const handleFileChange = (file: File) => {
     setUploadedFile(file);
+    const previewURL = URL.createObjectURL(file); // Blob URL 생성 (미리보기)
+    setPreviewUrl(previewURL);
   };
 
   const handleDragOver = (e: React.DragEvent) => {
@@ -230,9 +241,9 @@ export default function Drawing() {
             </motion.div>
 
             {/* 그리기/업로드 영역 */}
-            <div className="relative w-[900px] h-[500px] mx-auto">
+            <div className="relative w-full max-w-[900px] h-[500px] mx-auto overflow-hidden">
               {mode === 'draw' ? (
-                <div className="drawing-container relative">
+                <div className="drawing-container relative w-full h-full">
                   {/* ToolBar 컴포넌트 */}
                   <motion.div 
                     className="tools-container"
@@ -273,7 +284,7 @@ export default function Drawing() {
                   )}
 
                   {/* 캔버스 */}
-                  <div className="drawing-area">
+                  <div className="drawing-area w-full h-full">
                     <ReactSketchCanvas
                       ref={canvasRef}
                       width="100%"
@@ -287,7 +298,7 @@ export default function Drawing() {
               ) : (
                 // 업로드 모드
                 <div 
-                  className={`upload-area ${isDragging ? 'dragging' : ''}`}
+                  className={`upload-area w-full h-full ${isDragging ? 'dragging' : ''}`}
                   onDragOver={handleDragOver}
                   onDragLeave={handleDragLeave}
                   onDrop={handleDrop}
@@ -307,9 +318,9 @@ export default function Drawing() {
                           setUploadedFile(null);
                           setPreviewUrl(null);
                         }}
-                        className="absolute -top-3 -right-3 w-8 h-8 bg-white rounded-full 
+                        className="absolute -top-1 -right-1 w-8 h-8 bg-white rounded-full 
                                   flex items-center justify-center shadow-md hover:bg-gray-100 
-                                  transition-all duration-200 border border-gray-200 z-10"
+                                  transition-all duration-200 border border-gray-200 z-[1000]"
                       >
                         ❌
                       </button>