feat: Add Table, Cell Components

[eunjeong821]

🔗 관련 이슈

🔧 작업 내용

1. components/table에 세로형 테이블(VerticalTable.jsx) 추가

2. components/table에 체크박스 열(SelectionColumn.jsx) 추가

3. components/table/cells에 아래의 cell들 추가

• input (InputCell.jsx)
• dropdown (DropdownCell.jsx)
• plus (PlusCell.jsx)

4. assets/icons의 plus.svg 색상을 red로 변경

---

5. components/table의 세로형 테이블(VerticalTable.jsx)에 대해 새 행 추가 방식을 배열로 변경

6. components/table에 가로형 테이블(HorizontalTable.jsx) 추가

7. components/table/cells에 아래의 cell들 추가 및 변경

• search (SearchCell.jsx) 추가
• input (InputCell.jsx) 변경 : disabled 속성 추가, 내부 상태 관리 -> 제어 컴포넌트로 변경

8. Index.css에 inputCell-disable 색상 값 추가

📋 리뷰 참고사항

1. componetns/table에 있는 아래 파일들은 피그마에 있는 테이블을 구현해본 테스트 테이블임 (스크린샷)

• Admin_EditClassRoomTable.jsx
• Prof_UndeterminedSubjex.jsx
• Prof_1stExamTable.jsx
• SY_ClassRoomTable.jsx
• SY_SearchTable.jsx

📸 스크린샷

✅ 체크리스트

• 로컬 환경에서 정상적으로 동작하나요?
• 불필요한 코드를 정리하였나요? (주석, print 함수 등)
• 커밋 메시지가 컨벤션을 따르고 있나요?

[eunjeong821]

• 참고사항 : DropdownCell.jsx는 1학기/2학기 같은 목록에 사용할 예정이고, 테스트 테이블에는 아직 DateTimePicker Dropdown이 없어 임시로 DropdownCell을 사용했습니다.

[jhssong]

셀의 padding이 상하좌우 모두 4입니다 (통정시 기준)

파일명 일부가 snack case (_)로 작성되었던데 특별한 이유가 있을까요?
React 컴포넌트는 일반적으로 항상 대문자로 시작하며 각 단어의 첫 글자도 대문자로 쓰는 파스칼 케이스를 사용합니다.

Table cell의 높이가 1px 오차가 있어서 40px로 통일하던가 41px로 통일할 필요가 있을 것 같습니다.
텍스트가 아닌 요소를 포함하는 경우 41px로 높이가 측정됩니다.

[eunjeong821]

1. table cell의 패딩 모두 4로 수정하였습니다.
2. snack case가 들어간 파일은 테스트용으로 페이지를 구분하기 위해 사용했는데, 아예 test 폴더로 옮기면서 파스칼 케이스로 통일하였습니다.
3. table 각 행의 높이가 내부에 들어가는 cell의 테두리로 인해 조금씩 달라지는 것 같아 모든 행의 높이를 41px로 통일하였습니다.
4. plus.svg의 stroke-width를 2로 변경하였습니다.
5. App.jsx 8라인의 ComponentTest 제거하였습니다.

감사합니다.