Assignment Page for instructor

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,150 @@
+.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: 30px;
+
+    .project-item {
+      border: 1px solid #ddd;
+      padding: 12px;
+      margin-bottom: 10px;
+      border-radius: 6px;
+      background-color: #f9f9f9;
+
+      h4 {
+        margin: 0 0 5px 0;
+      }
+
+      button {
+        margin-right: 10px;
+        padding: 6px 10px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+
+        &:first-of-type {
+          background-color: #ffa500;
+          color: white;
+
+          &:hover {
+            background-color: #e59400;
+          }
+        }
+
+        &:last-of-type {
+          background-color: #e74c3c;
+          color: white;
+
+          &:hover {
+            background-color: #c0392b;
+          }
+        }
+      }
+    }
+  }
+
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .modal {
+      background: white;
+      padding: 20px;
+      border-radius: 10px;
+      width: 300px;
+
+      h3 {
+        margin-bottom: 10px;
+      }
+
+      input,
+      textarea {
+        width: 100%;
+        margin-bottom: 10px;
+        padding: 8px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+
+      .modal-buttons {
+        display: flex;
+        justify-content: space-between;
+
+        button {
+          padding: 6px 12px;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+
+          &:first-of-type {
+            background-color: #28a745;
+            color: white;
+
+            &:hover {
+              background-color: #218838;
+            }
+          }
+
+          &:last-of-type {
+            background-color: #6c757d;
+            color: white;
+
+            &:hover {
+              background-color: #5a6268;
+            }
+          }
+        }
+      }
+    }
+  }
+}