Skip to content

Commit

Permalink
Merge pull request #300 from edu-pi/develop
Browse files Browse the repository at this point in the history 
front deploy
  • Loading branch information
@seroak
seroak authored Nov 19, 2024
2 parents 3a387ee + 9a522c1 commit 40fa474
Show file tree
Hide file tree
Showing 27 changed files with 1,228 additions and 717 deletions.
9 changes: 6 additions & 3 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ input[type="checkbox"] {
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
padding-bottom: 100px;
}

.view-section-title {
Expand Down Expand Up @@ -1406,6 +1406,9 @@ header .group-btn {
.btn-manual {
background-color: #9a9a9a;
}
.btn-complete-summit {
background-color: #959595;
}
.btn img {
width: 24px;
height: 24px;
Expand Down Expand Up @@ -1724,8 +1727,8 @@ gpt-icon-small {
}

.code-flow-func > .code-flow-title-wrap {
left: -0.5px;
top: -46px;
left: -0.9px;
top: -46.5px;
width: 100%;
}
.code-flow-func {
Expand Down
11 changes: 8 additions & 3 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,14 @@ import "./App.css";
import { setupMSW } from "./mocks/setup";

export interface User {
email: string;
name: string;
role: string;
code: string;
detail: string;
result: {
email: string;
name: string;
role: string;
provider: string;
} | null;
}

function App() {
Expand Down
144 changes: 84 additions & 60 deletions src/pages/Classroom/Classroom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useMswReadyStore } from "@/store/mswReady";
import { useParams, useNavigate } from "react-router-dom";
import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query";
import { useAccessRightStore } from "@/store/accessRight";
import { useCustomAlert } from "@/pages/components/CustomAlert";
import {
getClassGuestDataWithoutDefaultAction,
getTotalActionInfo,
Expand All @@ -12,9 +13,11 @@ import {
} from "@/services/api";
import Header from "../components/Header";

import ClassroomModal from "@/pages/Classroom/components/ClassroomModal.tsx";

const BASE_URL = import.meta.env.VITE_APP_BACKEND_BASE_URL;

interface GuestType {
export interface GuestType {
id: number;
email: string;
name: string;
Expand Down Expand Up @@ -55,7 +58,8 @@ const Classroom = () => {
const params = useParams();
const classroomId = Number(params.classroomId);
const setIsHost = useAccessRightStore((state) => state.setIsHost);

const [isConsentInformationModalOpen, setIsConsentInformationModalOpen] = useState<boolean>(false);
const [onClickGuest, setOnClickGuest] = useState<GuestType | null>(null);
const { data: guestData, refetch: guestDataRefetch } = useQuery<ClassroomDataType>({
queryKey: ["classGuestData", classroomId],
queryFn: () => getClassGuestDataWithoutDefaultAction(classroomId),
Expand Down Expand Up @@ -94,14 +98,16 @@ const Classroom = () => {
}
}, [classroomData]);

const { openAlert, CustomAlert } = useCustomAlert();

const classOverMutation = useMutation({
mutationFn: ClassEnd,
onSuccess: () => {
classroomDataRefetch();
navigate("/classroomdashboard");
},
onError: () => {
alert("정상적으로 수업이 종료되지 않았습니다");
openAlert("정상적으로 수업이 종료되지 않았습니다");
},
});

Expand Down Expand Up @@ -151,72 +157,90 @@ const Classroom = () => {
};

useSSE(`${BASE_URL}/edupi-lms/v1/progress/connect?classroomId=${classroomId}`);
const closeConsentInformationModal = (): void => {
setIsConsentInformationModalOpen(false);
};
const openConsentInformationModal = (guest: GuestType): void => {
if (guest.status === 1) return;
setIsConsentInformationModalOpen(true);
setOnClickGuest(guest);
};

return (
<div>
<Header />
<div className="group-wrap">
<div className="group-left">
<img src="/image/icon_group.svg" alt="그룹" />
<h2 className="group-title">{classroomData?.result.className}</h2>
</div>
</div>
<div className="s__container">
<div className="s__row">
<div className="progress-info">
<ul className="progress-data">
<li>
<img src="/image/progress01.svg" alt="전체" />
<div>
<p>전체</p>
<p>{actionInfo && actionInfo?.ing + actionInfo?.complete + actionInfo?.help}</p>
</div>
</li>
<li>
<img src="/image/progress02.svg" alt="미제출" />
<div>
<p>미제출</p>
<p>{actionInfo?.ing}</p>
</div>
</li>
<li>
<img src="/image/progress03.svg" alt="성공" />
<div>
<p>제출 완료</p>
<p>{actionInfo?.complete}</p>
</div>
</li>
<li>
<img src="/image/progress04.svg" alt="실패" />
<div>
<p>도움 요청</p>
<p>{actionInfo?.help}</p>
</div>
</li>
</ul>
<>
<div>
<Header />
<CustomAlert />
<ClassroomModal
isOpen={isConsentInformationModalOpen}
onClose={closeConsentInformationModal}
guest={onClickGuest!}
/>
<div className="group-wrap">
<div className="group-left">
<img src="/image/icon_group.svg" alt="그룹" />
<h2 className="group-title">{classroomData?.result.className}</h2>
</div>
<div className="section-title">
<div className="title-left">
<h3>제출현황</h3>
</div>

<div className="s__container">
<div className="s__row">
<div className="progress-info">
<ul className="progress-data">
<li>
<img src="/image/progress01.svg" alt="전체" />
<div>
<p>전체</p>
<p>{actionInfo && actionInfo?.ing + actionInfo?.complete + actionInfo?.help}</p>
</div>
</li>
<li>
<img src="/image/progress02.svg" alt="미제출" />
<div>
<p>미제출</p>
<p>{actionInfo?.ing}</p>
</div>
</li>
<li>
<img src="/image/progress03.svg" alt="성공" />
<div>
<p>제출 완료</p>
<p>{actionInfo?.complete}</p>
</div>
</li>
<li>
<img src="/image/progress04.svg" alt="실패" />
<div>
<p>도움 요청</p>
<p>{actionInfo?.help}</p>
</div>
</li>
</ul>
</div>
<div className="section-title">
<div className="title-left">
<h3>제출현황</h3>
</div>

<div className="classroom-right">
<div className="right-btns" style={{ marginRight: "15px" }}>
<button className="red" onClick={handleClassOver}>
<img src="/image/icon_on_off.svg" alt="그룹삭제" />
수업 종료
</button>
<div className="classroom-right">
<div className="right-btns" style={{ marginRight: "15px" }}>
<button className="red" onClick={handleClassOver}>
<img src="/image/icon_on_off.svg" alt="그룹삭제" />
수업 종료
</button>
</div>
<select name="" id="" className="s__select">
<option value="1">이름순</option>
<option value="2">제출순</option>
<option value="3">학번순</option>
</select>
</div>
<select name="" id="" className="s__select">
<option value="1">이름순</option>
<option value="2">제출순</option>
<option value="3">학번순</option>
</select>
</div>
</div>
{guests && guests.length > 0 ? (
<ul className="section-data section-data01">
{guests.map((guest) => (
<Guest key={guest.id} guest={guest} />
<Guest key={guest.id} guest={guest} onClick={() => openConsentInformationModal(guest)} />
))}
</ul>
) : (
Expand All @@ -226,7 +250,7 @@ const Classroom = () => {
)}
</div>
</div>
</div>
</>
);
};
export default Classroom;
142 changes: 142 additions & 0 deletions src/pages/Classroom/components/ClassroomModal.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
.popup__section {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: none;
}

.popup__section.is-open {
display: block;
}

.popup__dim {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}

.popup__inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 600px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}

.popup__inner.is-open {
opacity: 1;
visibility: visible;
}

.popup__container__group {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.popup__header__group {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #eee;
}

.popup__header__title {
font-size: 16px;
font-weight: 500;
color: #333;
margin: 0;
}

.popup__header__close {
background: none;
border: none;
padding: 8px;
cursor: pointer;
position: relative;
width: 24px;
height: 24px;
}

.popup__header__close::before,
.popup__header__close::after {
content: '';
position: absolute;
width: 16px;
height: 2px;
background-color: #666;
top: 50%;
left: 50%;
}

.popup__header__close::before {
transform: translate(-50%, -50%) rotate(45deg);
}

.popup__header__close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}

.screen-out {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

.popup__contents__group {
padding: 20px;
}

.popup__content__title {
font-size: 16px;
font-weight: 500;
color: #333;
margin-bottom: 16px;
}

.popup__display__code {
background-color: #f8f9fa;
border: 1px solid #eee;
border-radius: 4px;
padding: 16px;
margin: 0;
font-family: monospace;
font-size: 14px;
line-height: 1.5;
overflow-x: auto;
}

.code__line {
display: flex;
min-height: 24px;
}

.line__number {
color: #999;
text-align: right;
padding-right: 16px;
min-width: 40px;
user-select: none;
}

.line__content {
flex: 1;
white-space: pre;
}
Loading

0 comments on commit 40fa474

Please sign in to comment.