Merge pull request #6 from JBB0807/homepage-2nd-sprint

assignment page

src/hooks/useAuth.js

@@ -0,0 +1,7 @@
+// src/hooks/useAuth.js
+import { useContext } from "react";
+import { AuthContext } from "../contexts/AuthContext";
+
+export const useAuth = () => {
+  return useContext(AuthContext);
+};

src/pages/AssignmentPage.jsx

@@ -1,107 +1,191 @@
-// Page - Assignment
+import React, { useState } from "react";
-import { useEffect, useState } from 'react';
+import "../scss/components/_assignment.scss";
-import '../scss/styles.scss';
 
 const AssignmentPage = () => {
-    const [files, setFiles] = useState([]);
+  const [studentName, setStudentName] = useState("");
+  const [campID, setCampID] = useState("");
+  const [programID, setProgramID] = useState("");
+  const [password, setPassword] = useState("");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [file, setFile] = useState(null);
+  const [projects, setProjects] = useState([]);
+  const [showModal, setShowModal] = useState(false);
+  const [editingIndex, setEditingIndex] = useState(null);
 
-    useEffect(() => {
+  const resetForm = () => {
-        document.title = 'Assignment';
+    setStudentName("");
-    }, []);
+    setCampID("");
+    setProgramID("");
+    setPassword("");
+    setTitle("");
+    setDescription("");
+    setFile(null);
+    setEditingIndex(null);
+  };
 
-    const handleFileChange = (e) => {
+  const handleSubmit = (e) => {
-        if (e.target.files) {
+    e.preventDefault();
-            const newFiles = Array.from(e.target.files);
+
-            setFiles(prevFiles => [...prevFiles, ...newFiles]);
+    const newProject = {
-        }
+      studentName,
+      campID,
+      programID,
+      title,
+      description,
+      fileName: file ? file.name : null,
     };
 
-    const handleRemoveFile = (index) => {
+    if (editingIndex !== null) {
-        setFiles(prevFiles => prevFiles.filter((_, i) => i !== index));
+      // Edit mode: update the project at the index
-    };
+      const updatedProjects = [...projects];
+      updatedProjects[editingIndex] = newProject;
+      setProjects(updatedProjects);
+    } else {
+      // New submission
+      setProjects([...projects, newProject]);
+    }
 
-    const handleSubmit = (e) => {
+    alert(editingIndex !== null ? "Assignment updated!" : "Assignment submitted!");
-        e.preventDefault();
+    resetForm();
-        // Here you would typically send the files to a server
+    setShowModal(false);
-        console.log('Files to submit:', files);
+  };
-        alert('Assignment submitted successfully!');
-    };
 
-    return (
+  const handleEdit = (index) => {
-        <main className="assignment-page">
+    const project = projects[index];
-            <section>
+    setStudentName(project.studentName);
-                <div className="assignment-header">
+    setCampID(project.campID);
-                    <h2>Assignment Submission</h2>
+    setProgramID(project.programID);
-                    <div className="due-date">
+    setTitle(project.title);
-                        <p>Due on Jan 16, 2025 11:59 PM</p>
+    setDescription(project.description);
-                    </div>
+    setFile(null); // File can't be set again for editing, usually. You could add note about this.
-                </div>
+    setEditingIndex(index);
+    setShowModal(true);
+  };
 
-                <div className="assignment-container">
+  const handleDelete = (index) => {
-                    <div className="assignment-info">
+    const updated = projects.filter((_, i) => i !== index);
-                        <h3>Submit Assignment</h3>
+    setProjects(updated);
-                        <p className="files-count">({files.length}) file(s) to submit</p>
+  };
-                        <p className="submission-note">After uploading, you must click Submit to complete the submission.</p>
-                    </div>
 
-                    <div className="file-upload-section">
+  return (
-                        <div className="upload-buttons">
+    <div className="assignment-page">
-                            <label className="file-upload-btn">
+      <h2>📘 Assignments</h2>
-                                <input 
+      <button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
-                                    type="file" 
-                                    multiple 
-                                    onChange={handleFileChange} 
-                                    style={{ display: 'none' }}
-                                />
-                                Add a File
-                            </label>
-                            <button className="record-audio-btn">Record Audio</button>
-                            <button className="record-video-btn">Record Video</button>
-                        </div>
 
-                        {files.length > 0 && (
+      {showModal && (
-                            <div className="files-list">
+        <div className="modal-overlay">
-                                <h4>Selected Files:</h4>
+          <div className="modal">
-                                <ul>
+            <h3>{editingIndex !== null ? "Edit Assignment" : "New Assignment"}</h3>
-                                    {files.map((file, index) => (
+            <form onSubmit={handleSubmit}>
-                                        <li key={index} className="file-item">
+              <div>
-                                            <span className="file-name">{file.name}</span>
+                <label>Student Name</label>
-                                            <span className="file-size">({(file.size / 1024).toFixed(2)} KB)</span>
+                <input
-                                            <button 
+                  type="text"
-                                                className="remove-file-btn"
+                  value={studentName}
-                                                onClick={() => handleRemoveFile(index)}
+                  onChange={(e) => setStudentName(e.target.value)}
-                                            >
+                  required
-                                                Remove
+                />
-                                            </button>
+              </div>
-                                        </li>
-                                    ))}
-                                </ul>
-                            </div>
-                        )}
-                    </div>
 
-                    <div className="comments-section">
+              <div>
-                        <h4>Comments</h4>
+                <label>Camp ID</label>
-                        <textarea 
+                <input
-                            placeholder="Add a comment (optional)"
+                  type="text"
-                            rows="4"
+                  value={campID}
-                        ></textarea>
+                  onChange={(e) => setCampID(e.target.value)}
-                    </div>
+                  required
+                />
+              </div>
 
-                    <div className="submission-buttons">
+              <div>
-                        <button 
+                <label>Program ID</label>
-                            className="submit-btn"
+                <input
-                            onClick={handleSubmit}
+                  type="text"
-                            disabled={files.length === 0}
+                  value={programID}
-                        >
+                  onChange={(e) => setProgramID(e.target.value)}
-                            Submit
+                  required
-                        </button>
+                />
-                        <button className="cancel-btn">Cancel</button>
+              </div>
-                    </div>
+
-                </div>
+              <div>
-            </section>
+                <label>Password</label>
-        </main>
+                <input
-    );
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div>
+                <label>Assignment Title</label>
+                <input
+                  type="text"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div>
+                <label>Description</label>
+                <textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  required
+                ></textarea>
+              </div>
+
+              <div>
+                <label>File Upload (optional)</label>
+                <input
+                  type="file"
+                  onChange={(e) => setFile(e.target.files[0])}
+                />
+              </div>
+
+              <div className="modal-buttons">
+                <button type="submit">{editingIndex !== null ? "Update" : "Submit"}</button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    resetForm();
+                    setShowModal(false);
+                  }}
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      <div className="project-list">
+  <h3>📋 Projects</h3>
+  {projects.map((project, index) => (
+    <div key={index} className="project-item">
+      <div className="project-meta">
+        <strong>Student Name: {project.studentName}</strong> | CampID: {project.campID} | ProgramID: {project.programID}
+      </div>
+      <h4>{project.title}</h4>
+      <p>{project.description}</p>
+      {project.fileName && (
+        <p><strong>Uploaded File:</strong> {project.fileName}</p>
+      )}
+
+      <div className="action-buttons">
+        <button onClick={() => handleEdit(index)}>✏️ Edit</button>
+        <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
+        <button onClick={() => alert("QR feature coming soon!")}>📎 QR</button>
+      </div>
+    </div>
+  ))}
+</div>
+
+    </div>
+  );
 };
 
 export default AssignmentPage;

src/routers/AppRouter.jsx

@@ -16,6 +16,7 @@ import Hero from "../components/Hero";
 import Navbar from "../components/Navbar";
 import Services from "../components/Services";
 
+
 const AppRouter = () => {
   return (
     <BrowserRouter>
@@ -31,7 +32,15 @@ const AppRouter = () => {
               </>
             }
           />
-          <Route path="/login" element={<LoginPage />} />
+            <Route
+              path="assignment"
+              element={
+                // <ProtectedRoute role="instructor">
+                  <AssignmentPage />
+                // </ProtectedRoute>
+              }
+            />
+          <Route path="login" element={<LoginPage />} />
           <Route
             path="/editor"
             element={
@@ -40,7 +49,7 @@ const AppRouter = () => {
               </ProtectedRoute>
             }
           />
-          <Route path="/assignment" element={<AssignmentPage />} />
+          
           <Route path="*" element={<PageNotFound />} />
         </Routes>
 

src/scss/components/ProtectedRoute.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Navigate } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth"; // 예시 훅: 너의 프로젝트에 맞게 수정!
+
+const ProtectedRoute = ({ children, role }) => {
+  const { user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return <div>loading...</div>;
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  if (role && user.role !== role) {
+    return <Navigate to="/" replace />;
+  }
+
+  return children;
+};
+
+export default ProtectedRoute;

src/scss/components/_assignment.scss

@@ -0,0 +1,238 @@
+.assignment-page {
+  max-width: 600px;
+  margin: auto;
+  padding: 20px;
+
+  form {
+    margin-bottom: 20px;
+
+    div {
+      margin-bottom: 15px;
+
+      label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+
+      input[type="text"],
+      textarea,
+      input[type="file"] {
+        width: 100%;
+        padding: 8px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+
+      textarea {
+        height: 80px;
+        resize: vertical;
+      }
+    }
+
+    button {
+      padding: 8px 16px;
+      background-color: #4285f4;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #3367d6;
+      }
+    }
+  }
+
+  .project-list {
+    margin-top: 2rem;
+
+    h3 {
+      color: #4a90e2;
+    }
+  
+    .project-item {
+      background: #ffffff;
+      border: 1px solid #e0e0e0;
+      border-radius: 12px;
+      padding: 1.5rem;
+      margin-bottom: 1.5rem;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+  
+      // &:hover {
+      //   transform: translateY(-2px);
+      //   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+      // }
+  
+      .project-meta {
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.75rem;
+        flex-wrap: wrap;
+  
+        strong {
+          color: #34495e;
+        }
+      }
+  
+      h4 {
+        margin: 0.5rem 0;
+        font-size: 1.2rem;
+        color: #2d3436;
+      }
+  
+      p {
+        margin: 0.25rem 0;
+        color: #555;
+        line-height: 1.4;
+  
+        strong {
+          color: #2d3436;
+        }
+      }
+  
+      .action-buttons {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 0.75rem;
+  
+        button {
+          background-color: #f4f4f4;
+          border: 1px solid #ddd;
+          border-radius: 6px;
+          padding: 0.4rem 0.8rem;
+          cursor: pointer;
+          font-size: 0.9rem;
+          transition: background-color 0.2s ease;
+  
+          &:hover {
+            background-color: #e9ecef;
+          }
+  
+          &:nth-child(1) {
+            color: #2c3e50;
+          }
+  
+          &:nth-child(2) {
+            color: #c0392b;
+          }
+  
+          &:nth-child(3) {
+            color: #16a085;
+          }
+        }
+      }
+    }
+  }
+  
+
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+  
+  .modal {
+    background: #fff;
+    padding: 2rem;
+    border-radius: 12px;
+    max-width: 500px;
+    width: 100%;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    animation: fadeIn 0.3s ease;
+  }
+  
+  .modal h3 {
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #333;
+  }
+  
+  .modal form > div {
+    margin-bottom: 1rem;
+  }
+  
+  .modal label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin-bottom: 0.4rem;
+    color: #555;
+  }
+  
+  .modal input[type="text"],
+  .modal input[type="password"],
+  .modal input[type="file"],
+  .modal textarea {
+    width: 100%;
+    padding: 0.6rem 0.8rem;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    font-size: 0.95rem;
+    transition: border-color 0.2s ease;
+  
+    &:focus {
+      border-color: #007bff;
+      outline: none;
+    }
+  }
+  
+  .modal textarea {
+    resize: vertical;
+    min-height: 80px;
+  }
+  
+  .modal-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    margin-top: 1.5rem;
+  }
+  
+  .modal-buttons button {
+    padding: 0.6rem 1.2rem;
+    font-size: 0.95rem;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+  
+  .modal-buttons button[type="submit"] {
+    background-color: #ff4b2b;
+    color: #fff;
+  
+    &:hover {
+      background-color: #FF2600;
+    }
+  }
+  
+  .modal-buttons button[type="button"] {
+    background-color: #e0e0e0;
+    color: #333;
+  
+    &:hover {
+      background-color: #cfcfcf;
+    }
+  }
+  
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}