fix: Merge Conflict

package.json

@@ -11,6 +11,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.1",
+    "konva": "^9.2.0",
+    "react-konva": "^18.2.10",
     "react-router-dom": "^6.14.0",
     "react-scripts": "5.0.1",
     "sass": "^1.63.6",

src/App.css

@@ -0,0 +1,5 @@
+.app {
+  background-image: url("/path/to/your/image.jpg"); /* 원하는 이미지 경로로 변경 */
+  background-repeat: no-repeat;
+  background-size: cover;
+}

src/App.jsx

@@ -5,6 +5,8 @@ import LandingPage from "./pages/LandingPage";
 import Header from "./components/Layout/Header";
 import LoginPage from "./pages/LoginPage";
 import SignupPage from "./pages/SignupPage";
+import ImageUpload from "./imageinput";
+import ImageSelect from "./imageselect";
 
 const StyledApp = styled.div`
   background-color: #000011;
@@ -21,6 +23,8 @@ function App() {
         <Route path="/" element={<LandingPage />} />
         <Route path="/login" element={<LoginPage />} />
         <Route path="/signup" element={<SignupPage />} />
+        <Route path="/user/imageinput" element={<ImageUpload />} />
+        <Route path="/user/imageselect" element={<ImageSelect />} />
       </Routes>
     </StyledApp>
   );

src/imageinput.jsx

@@ -0,0 +1,112 @@
+import React, { useState, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const ImageUpload = () => {
+  const [selectedImage, setSelectedImage] = useState(null);
+  const navigate = useNavigate();
+  const fileInputRef = useRef(null);
+
+  const handleImageChange = (event) => {
+    const file = event.target.files[0];
+    setSelectedImage(URL.createObjectURL(file));
+  };
+
+  const handleDrop = (event) => {
+    event.preventDefault();
+    const file = event.dataTransfer.files[0];
+    setSelectedImage(URL.createObjectURL(file));
+  };
+
+  const handleDragOver = (event) => {
+    event.preventDefault();
+  };
+
+  const handleSubmit = () => {
+    // 이미지 업로드 후 처리할 내용을 여기에 작성
+  };
+
+  const handleNavigate = () => {
+    navigate('/mypage'); // '/mypage'로 이동
+  };
+
+  const handleSelectImage = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleRemoveImage = () => {
+    setSelectedImage(null);
+  };
+
+  return (
+    <div style={{ backgroundColor: 'transparent', color: 'white' }}>
+      <h1>이미지 등록하기</h1>
+      <div
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        style={{
+          width: '1200px',
+          height: '650px',
+          border: '2px dashed gray',
+          borderRadius: '5px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          margin: '20px 0',
+          position: 'relative',
+          overflow: 'hidden',
+          backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        }}
+      >
+        <input
+          type="file"
+          onChange={handleImageChange}
+          style={{ display: 'none' }}
+          ref={fileInputRef}
+        />
+        <label htmlFor="file-input">
+          {!selectedImage && (
+            <p>이미지를 여기로 드래그 앤 드롭하거나 선택하세요.</p>
+          )}
+          {!selectedImage && (
+            <button type="button" onClick={handleSelectImage}>
+              이미지 선택
+            </button>
+          )}
+        </label>
+        {selectedImage && (
+          <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <img
+                src={selectedImage}
+                alt="Preview"
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+      {selectedImage && (
+        <button type="button" onClick={handleRemoveImage}>
+          이미지 변경
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ImageUpload;