Origin/feat/teacher main

click/src/App.js

@@ -1,7 +1,10 @@
 import "./App.css";
+import Login from "./components/teacherLogin/teacherLogin";
 
 function App() {
-  return <div className="App"></div>;
+  return(
+    <Login />
+  );
 }
 
-export default App;
+export default App;

click/src/components/Header/studentHeader.css

@@ -0,0 +1,23 @@
+.header {
+    margin-top: 2px;
+    padding-top: 5px;
+    padding-bottom: 8px;
+    top: 0;
+    left: 0;
+    position: absolute;
+    border-bottom: 1px solid #DBDCDE;
+    height: 58px;
+    position: fixed;
+}
+
+.logo {
+    align-items: left;
+    width: 95px;
+    height: 35px;
+    margin-left: 40px;
+}
+.alarm {
+    width: 38px;
+    margin-left: 20px;
+    margin-right: 35px;
+}

click/src/components/Header/studentHeader.jsx

@@ -0,0 +1,15 @@
+import "./studentHeader.css";
+import logo from "./img/logo.png";
+import alarm from "./img/alarm.png";
+
+
+const studentHeader = () => {
+    return(
+        <div class="header">
+            <img src={logo} alt="logo" class="logo" />
+            <img src={alarm} alt="alarm" class="alarm" />
+        </div>
+    );
+}
+
+export default studentHeader;

click/src/components/Header/teacherHeader.css

@@ -0,0 +1,36 @@
+.header {
+    margin-top: 2px;
+    padding-top: 5px;
+    padding-bottom: 8px;
+    top: 0;
+    left: 0;
+    position: absolute;
+    border-bottom: 1px solid #DBDCDE;
+    height: 58px;
+    position: fixed;
+}
+
+.logo {
+    align-items: left;
+    width: 95px;
+    height: 35px;
+    margin-left: 40px;
+}
+
+.addSchedule {
+    width:80px;
+    height: 35px;
+    margin-left: 1060px;
+}
+
+.writebutton {
+    width:80px;
+    height: 35px;
+    margin-left: 10px;
+}
+
+.alarm {
+    width: 35px;
+    margin-left: 10px;
+    margin-right: 35px;
+}

click/src/components/Header/teacherHeader.jsx

@@ -0,0 +1,22 @@
+import "./teacherHeader.css";
+import logo from "./img/logo.png";
+import schedule from "./img/addSchedule.png";
+import write from "./img/write.png";
+import alarm from "./img/alarm.png";
+
+const teacherHeader = () => {
+  return (
+    <div class="header">
+      <img src={logo} alt="logo" class="logo" />
+      <input
+        type="image"
+        src={schedule}
+        alt="Abutton"
+        class="addSchedule button" />
+      <input type="image" src={write} alt="Wbutton" class="writebutton" />
+      <img src={alarm} alt="alarm" class="alarm" />
+    </div>
+  );
+};
+
+export default teacherHeader;

click/src/components/Splash/splash.css

@@ -0,0 +1,63 @@
+body {
+    max-height: 1000px;
+}
+
+.splash {
+    position: absolute;
+    width: 850px;
+    height: 470px;
+    margin-left: 0px;
+    padding: 0px;
+}
+
+.splash1 {
+    margin-top: 0px;
+}
+
+.splash2 {
+    margin-top: 360px;
+    margin-left: 50px;
+}
+
+.box {
+    margin-right: 150px;
+    margin-left: 50px;
+}
+
+.logo {
+    height: 45px;
+    width: 120px;
+    margin-left: 1100px;
+    margin-top: 180px;
+}
+
+.text-box {
+    border-top: 0.1px solid #ffffff;
+}
+
+.text {
+    margin-left: 1000px;
+    font-size: 15px;
+    text-align: center;
+    font-family: pretendard;
+    border-top: 1px solid #DBDCDE;
+    width: 300px;
+    padding-top: 20px;
+    font-family: bold;
+}
+
+.signUp {
+    align-items: top;
+    text-align: top;
+    margin-left: 1050px;
+    margin-top: 130px;
+    width: 230px;
+    width: 220px;
+    height: 35px;
+    border-radius: 10px;
+    font-weight: bold;
+    font-size: 10px;
+    background-color: white;
+
+    border: 0.5px solid black;
+}

click/src/components/Splash/splash.jsx

@@ -0,0 +1,25 @@
+import './splash.css';
+import splash from './assets/img/splash.png';
+import splash2 from './assets/img/splash2.png';
+import logo from "./assets/img/logo.png";
+import DAuth from "/assets/img/input.png";
+
+const Splash = () => {
+    return(
+        <div>
+            <img src={splash} class="splash splash1" />
+            <img src={splash2} class="splash splash2" />
+            <div>
+                <img src={logo} alt="logo" class="logo" />
+                <div class="text-box">
+                    <p class="text">단 한 번의 C!ick으로 수행평가 일정을 손쉽게,<br/>수행평가 관리 플랫폼 C!ick</p>
+                </div>
+                <input type='image' src={DAuth} class="signUp" onClick="location.href='http://127.0.0.1:3002/%08teacherModal/teacherModal.html'" />
+
+            </div>
+        </div>
+    );
+}
+
+export default Splash;
+

click/src/components/StudentMain/studentMain.jsx

@@ -0,0 +1,135 @@
+import 'studentMain.css';
+import Header from './Header/studentHeader';
+
+const studentMain = () => {
+    const [date, setDate] = useState(new Date());
+    const yearMonthRef = useRef(null);
+    const datesRef = useRef(null);
+    const modalRef = useRef(null);
+
+    useEffect(() => {
+      renderCalendar();
+    }, [date]);
+
+    const renderCalendar = () => {
+      const viewYear = date.getFullYear();
+      const viewMonth = date.getMonth();
+
+      if (yearMonthRef.current) {
+        yearMonthRef.current.textContent = `${viewYear}년 ${viewMonth + 1}월`;
+      }
+
+      const prevLast = new Date(viewYear, viewMonth, 0);
+      const thisLast = new Date(viewYear, viewMonth + 1, 0);
+
+      const PLDate = prevLast.getDate();
+      const PLDay = prevLast.getDay();
+
+      const TLDate = thisLast.getDate();
+      const TLDay = thisLast.getDay();
+
+      const prevDates = [];
+      const thisDates = [...Array(TLDate + 1).keys()].slice(1);
+      const nextDates = [];
+
+      if (PLDay !== 6) {
+        for (let i = 0; i < PLDay + 1; i++) {
+          prevDates.unshift(PLDate - i);
+        }
+      }
+
+      for (let i = 1; i < 7 - TLDay; i++) {
+        nextDates.push(i);
+      }
+
+      const dates = prevDates.concat(thisDates, nextDates);
+      const firstDateIndex = dates.indexOf(1);
+      const lastDateIndex = dates.lastIndexOf(TLDate);
+
+      const formattedDates = dates.map((date, i) => {
+        const condition = i >= firstDateIndex && i < lastDateIndex + 1 ? "this" : "other";
+        return `<div class="date"><span class="${condition}">${date}</span></div>`;
+      });
+
+      if (datesRef.current) {
+        datesRef.current.innerHTML = formattedDates.join("");
+      }
+
+      const today = new Date();
+      if (viewMonth === today.getMonth() && viewYear === today.getFullYear()) {
+        const todayElement = datesRef.current.querySelector('.this.today');
+        if (todayElement) {
+          todayElement.classList.remove('today');
+        }
+        const todayDates = datesRef.current.querySelectorAll(".this");
+        for (let date of todayDates) {
+          if (+date.innerText === today.getDate()) {
+            date.classList.add("today");
+            break;
+          }
+        }
+      }
+    };
+
+    const prevMonth = () => {
+      setDate(new Date(date.getFullYear(), date.getMonth() - 1));
+    };
+
+    const nextMonth = () => {
+      setDate(new Date(date.getFullYear(), date.getMonth() + 1));
+    };
+
+    const goToday = () => {
+      setDate(new Date());
+    };
+
+    const openModal = () => {
+      console.log('open')
+      if (modalRef.current) {
+        modalRef.current.classList.add('on');
+      }
+      setModalOpen(true)
+    };
+
+    const closeModal = () => {
+      if (modalRef.current) {
+        modalRef.current.classList.remove('on');
+      }
+    };
+
+    const [modalOpen, setModalOpen] = useState(false);
+
+    const eventModalOpen = () => {
+      setModalOpen(!modalOpen);
+    }
+
+    return(
+        <div>
+            <Header />
+            <div className="calendar">
+                <div className='title'>
+                <div className="year-month"></div>
+                <div className="nav">
+                    <button className="nav-btn go-prev">&lt;</button>
+                    <button className="nav-btn go-today">오늘</button>
+                    <button className="nav-btn go-next">&gt;</button>
+                </div>
+                </div>
+                <div className="main">
+                <div className="days">
+                    <div className="day">일</div>
+                    <div className="day">월</div>
+                    <div className="day">화</div>
+                    <div className="day">수</div>
+                    <div className="day">목</div>
+                    <div className="day">금</div>
+                    <div className="day">토</div>
+                </div>
+                <div className="dates"role="button"></div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default studentMain;