diff --git a/app/components/Aside/LinkElement.tsx b/app/components/Aside/LinkElement.tsx index 68e446d..ec9d5a5 100644 --- a/app/components/Aside/LinkElement.tsx +++ b/app/components/Aside/LinkElement.tsx @@ -5,9 +5,19 @@ 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 (
@@ -15,6 +25,25 @@ export const LinkElement = ({ title, link, level }: Props) => {

{title}

+ {showIcons ? ( +
+ {iconSrcList?.map((iconSrc, idx) => ( + { + e.stopPropagation(); + onIconClickList[idx](); + } + : () => {} + } + /> + ))} +
+ ) : null}
); diff --git a/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx b/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx index bd37880..855ee68 100644 --- 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([]); @@ -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]} /> + ) : null}