feat : quiz result register button

kasterra · May 28, 2024 · 87b0c2e · 87b0c2e
1 parent d30337e
commit 87b0c2e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/app/components/Aside/LinkElement.tsx b/app/components/Aside/LinkElement.tsx
@@ -5,16 +5,45 @@ interface Props {
   title: string;
   link: string;
   level?: number;
+  showIcons?: boolean;
+  iconSrcList?: string[];
+  onIconClickList?: (() => void)[];
 }
 
-export const LinkElement = ({ title, link, level }: Props) => {
+export const LinkElement = ({
+  title,
+  link,
+  showIcons = true,
+  iconSrcList = [],
+  onIconClickList = [],
+  level,
+}: Props) => {
   return (
     <div className={styles["element-block"]}>
       <div style={{ marginLeft: level ? level * 12 : undefined }} />
       <div className={styles["element-title-block"]}>
         <Link to={link}>
           <h3 className={styles["element-title-span"]}>{title}</h3>
         </Link>
+        {showIcons ? (
+          <div className={styles["element-edit-icons-block"]}>
+            {iconSrcList?.map((iconSrc, idx) => (
+              <img
+                key={idx}
+                className={styles["element-icon"]}
+                src={iconSrc}
+                onClick={
+                  onIconClickList[idx]
+                    ? (e) => {
+                        e.stopPropagation();
+                        onIconClickList[idx]();
+                      }
+                    : () => {}
+                }
+              />
+            ))}
+          </div>
+        ) : null}
       </div>
     </div>
   );

diff --git a/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx b/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx
@@ -39,6 +39,7 @@ import TestCaseEditModal from "./TestCaseEditModal";
 import { deleteProblem } from "~/API/problem";
 import { deleteTestcase } from "~/API/testCase";
 import DownloadMyCodesModal from "./DownloadMyCodesModal";
+import { LinkElement } from "~/components/Aside/LinkElement";
 const LectureDetail = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [lectures, setLectures] = useState<LectureEntity[]>([]);
@@ -238,6 +239,7 @@ const PracticeDetail = ({
   const [isPracticeEditModalOpen, setIsPracticeEditModalOpen] = useState(false);
   const [isProblemAddModalOpen, setIsProblemAddModalOpen] = useState(false);
   const [isFoldableOpen, setIsFoldableOpen] = useState(false);
+  const { lectureId } = useParams();
   useEffect(() => {
     async function getData() {
       try {
@@ -294,6 +296,11 @@ const PracticeDetail = ({
               }}
               iconSrcList={[plusSVG]}
             />
+            <LinkElement
+              title="퀴즈 추가하기"
+              iconSrcList={[plusSVG]}
+              link={`/lectures/quiz/new?lecture_id=${lectureId}&practice_id=${id}`}
+            />
           </>
         ) : null}
       </FoldableSuperButtonElement>