[EC-84] feat: 과정 관리자 학습자 관리 UI 구현 (#78)

Author: seun9yeon

client/src/components/listItem/baseListItem/BaseListItem.jsx

@@ -2,12 +2,17 @@ import React from 'react'
 import styles from "./BaseListItem.module.css"
 import Tag from '../../tag/Tag';
 
-export default function BaseListItem({ content, tagTitle }) {
+export default function BaseListItem({ content, phone, email, tagTitle }) {
   return (
+    <>
     <div className={styles.baseListItem}>
+    <div>
       <div>{content}</div>
-
+      <p>{phone}</p>
+      <p>{email}</p>
+    </div>
       <Tag title={tagTitle}></Tag>
     </div>
+    </>
   );
 }

client/src/components/listItem/baseListItem/BaseListItem.module.css

@@ -8,3 +8,10 @@
   border-radius: var(--border-radius-20);
   box-sizing: border-box;
 }
+
+.baseListItem p {
+  font-size: var(--font-size-12);
+  color: var(--text-200);
+  text-align: left;
+}
+

client/src/components/tag/Tag.jsx

@@ -8,19 +8,19 @@ export default function Tag({ title }) {
   const isClickable = getIsClickable(title);
 
   // TODO : 관리자 페이지의 학습자 관리 tag에만 사용
-  // const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-  // const handleOpenDropBox = () => {
-  //   setIsOpen(true);
-  // };
+  const handleOpenDropBox = () => {
+    setIsOpen(true);
+  };
 
-  // const handleCloseDropBox = () => {
-  //   setIsOpen(false);
-  // };
+  const handleCloseDropBox = () => {
+    setIsOpen(false);
+  };
 
-  // const dropBoxButtonList = tagList.map((item, index) => {
-  //   return <DropBoxButton key={index} title={item}></DropBoxButton>;
-  // });
+  const dropBoxButtonList = tagList.map((item, index) => {
+    return <DropBoxButton key={index} title={item}></DropBoxButton>;
+  });
 
   return (
     <div className={styles.tagBox}>
@@ -34,14 +34,14 @@ export default function Tag({ title }) {
       </button>
 
       {/* TODO : 관리자 페이지의 학습자 관리 tag에만 사용 */}
-      {/* <div
+      <div
         style={
           isClickable ? (isOpen ? { display: 'block' } : { display: 'none' }) : { display: 'none' }
         }
         className={styles.dropBox}
       >
         {dropBoxButtonList}
-      </div> */}
+      </div>
     </div>
   );
 }

client/src/pages/staffStudentManage/StaffStudentManage.jsx

@@ -1,8 +1,21 @@
 import React from 'react'
 import styles from "./StaffStudentManage.module.css"
+import MainButton from "../../components/buttons/mainButton/MainButton"
+import BaseListItem from '../../components/listItem/baseListItem/BaseListItem'
 
 export default function StaffStudentManage() {
   return (
-    <div>StaffStudentManage</div>
+    <>
+    <div>
+      <MainButton title="학습자 등록"></MainButton>
+    </div>
+      <div>
+        <BaseListItem content="홍길동" phone="010-1234-1234" email="educheck@educheck.com" tagTitle="수강중"></BaseListItem>
+        <BaseListItem content="홍길동" phone="010-1234-1234" email="educheck@educheck.com" tagTitle="결석"></BaseListItem>
+        <BaseListItem content="홍길동" phone="010-1234-1234" email="educheck@educheck.com" tagTitle="수강중"></BaseListItem>
+        <BaseListItem content="홍길동" phone="010-1234-1234" email="educheck@educheck.com" tagTitle="수료"></BaseListItem>
+        <BaseListItem content="홍길동" phone="010-1234-1234" email="educheck@educheck.com" tagTitle="수강중"></BaseListItem>
+      </div>
+    </>
   )
 }