Vite 기반 ReactJS Student Client 예제

StudentTable.jsx

const StudentTable = ({ students, onDetail, onEdit, onDelete }) => {
  // 텍스트 잘라내기 + 툴팁 데이터 설정
  const renderCell = (content) => {
    if (!content || content === "-") return "-";
    
    return (
      <div className="truncate" title={content}>
        {content}
      </div>
    );
  };

  return (
    <div className="container">
      <h2>학생 목록</h2>
      <div className="table-container">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>이름</th>
              <th>학번</th>
              <th>주소</th>
              <th>전화번호</th>
              <th>이메일</th>
              <th>생년월일</th>
              <th>액션</th>
            </tr>
          </thead>
          <tbody>
            {students.length === 0 ? (
              <tr>
                <td colSpan="8" className="empty-message">
                  등록된 학생이 없습니다
                </td>
              </tr>
            ) : (
              students.map((student) => (
                <tr key={student.id}>
                  <td>{student.id}</td>
                  <td>{renderCell(student.name)}</td>
                  <td>{renderCell(student.studentNumber)}</td>
                  <td>{renderCell(student.detail?.address)}</td>
                  <td>{renderCell(student.detail?.phoneNumber)}</td>
                  <td>{renderCell(student.detail?.email)}</td>
                  <td>{renderCell(student.detail?.dateOfBirth)}</td>
                  <td>
                    <div className="action-buttons">
                      <button 
                        className="detail-btn" 
                        onClick={() => onDetail(student.id)}
                      >
                        상세
                      </button>
                      <button 
                        className="edit-btn" 
                        onClick={() => onEdit(student.id)}
                      >
                        수정
                      </button>
                      <button 
                        className="delete-btn" 
                        onClick={() => onDelete(student.id)}
                      >
                        삭제
                      </button>
                    </div>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default StudentTable;