[Feat/#14] 학생회비 납부자 페이지 구현

.gitignore

@@ -38,3 +38,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*.idea

package.json

@@ -16,7 +16,10 @@
     "*.{ts,tsx,js,jsx}": "eslint"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.2",
     "@tanstack/react-query": "^5.52.2",
     "@tanstack/react-query-devtools": "^5.52.2",
     "@testing-library/react": "^16.0.1",

src/app/desktop/payer-inquiry/_components/TableComponent/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Table,
   TableBody,
@@ -6,42 +7,125 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 
 interface Invoice {
   name: string;
   student_id: string;
-  admin: boolean;
+  admin?: boolean;
 }
 
 interface TableComponentProps {
   data: Invoice[];
+  showCheckboxes?: boolean; // 고민이에요... ESLint: propType "handleDelete" is not required, but has no corresponding defaultProps declaration 에러가 뜸
+  headers?: string[];
+  selected: string[];
+  setSelected: (selectedIds: (prev: string[]) => string[]) => void;
+  handleDelete?: (selectedIds: string[]) => void; // 22
 }
 
-export default function TableComponent({ data }: TableComponentProps) {
+export default function TableComponent({
+  data,
+  showCheckboxes = true,
+  headers = ['이름', '학번', '관리자 여부'], // 기본값을 설정
+  selected,
+  setSelected,
+  handleDelete = () => {}, // 기본값으로 빈 함수 설정
+}: TableComponentProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const rowsPerPage = 10;
+
+  const handleSelect = (student_id: string) => {
+    setSelected((prev: string[]) =>
+      prev.includes(student_id)
+        ? prev.filter((id) => id !== student_id)
+        : [...prev, student_id],
+    );
+  };
+
+  const paginatedData = data.slice(
+    (currentPage - 1) * rowsPerPage,
+    currentPage * rowsPerPage,
+  );
+
+  const handleSelectAll = () => {
+    const visibleIds = paginatedData.map((item) => item.student_id);
+    setSelected((prev: string[]) =>
+      prev.length === visibleIds.length ? [] : visibleIds,
+    );
+  };
+
   return (
-    <div className="flex justify-between p-10">
+    <div className="flex w-full flex-col p-10">
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead className="w-30 text-center">이름</TableHead>
-            <TableHead className="w-30 text-center">학번</TableHead>
-            <TableHead className="w-30 text-center">관리자 여부</TableHead>
+            {showCheckboxes && (
+              <TableHead className="w-10 text-center">
+                <Checkbox
+                  checked={selected.length === paginatedData.length}
+                  onCheckedChange={handleSelectAll}
+                />
+              </TableHead>
+            )}
+            {headers.map((header) => (
+              <TableHead key={header} className="w-30 text-center">
+                {header}
+              </TableHead>
+            ))}
           </TableRow>
         </TableHeader>
         <TableBody>
-          {data.map((item, index) => (
-            <TableRow key={index}>
+          {paginatedData.map((item) => (
+            <TableRow key={item.student_id}>
+              {showCheckboxes && (
+                <TableCell className="w-10 text-center">
+                  <Checkbox
+                    checked={selected.includes(item.student_id)}
+                    onCheckedChange={() => handleSelect(item.student_id)}
+                  />
+                </TableCell>
+              )}
               <TableCell className="w-30 text-center">{item.name}</TableCell>
               <TableCell className="w-30 text-center">
                 {item.student_id}
               </TableCell>
-              <TableCell className="w-30 text-center">
-                {item.admin ? '⭕' : '❌'}
-              </TableCell>
+              {headers.includes('관리자 여부') && (
+                <TableCell className="w-30 text-center">
+                  {item.admin !== undefined && (item.admin ? 'o' : 'x')}
+                </TableCell>
+              )}
             </TableRow>
           ))}
         </TableBody>
       </Table>
+      <div className="flex items-center justify-center pt-4">
+        <Button
+          className="bg-transparent shadow-transparent hover:bg-transparent"
+          disabled={currentPage === 1}
+          onClick={() => setCurrentPage((prev) => prev - 1)}
+        >
+          <ChevronLeftIcon className="h-10 w-10 cursor-pointer text-black-primary" />
+        </Button>
+        <span>
+          {currentPage} / {Math.ceil(data.length / rowsPerPage)}
+        </span>
+        <Button
+          className="bg-transparent shadow-transparent hover:bg-transparent"
+          size="chevron"
+          disabled={currentPage === Math.ceil(data.length / rowsPerPage)}
+          onClick={() => setCurrentPage((prev) => prev + 1)}
+        >
+          <ChevronRightIcon className="h-6 w-6 cursor-pointer text-black-primary" />
+        </Button>
+      </div>
     </div>
   );
 }
+
+// defaultProps를 사용하여 headers에 기본값 설정
+TableComponent.defaultProps = {
+  headers: ['이름', '학번', '관리자 여부'],
+};

src/app/desktop/payer-inquiry/page.tsx

@@ -1,30 +1,193 @@
-import Sidebar from '@/components/desktop/SideBar';
+'use client';
+
+import Sidebar from 'src/components/desktop/Sidebar';
 import Search from '@/components/desktop/Search';
+import { useState } from 'react';
+import AddStudentId from '@/components/desktop/AddStudentId';
+import { Button } from '@/components/ui/button';
 import TableComponent from './_components/TableComponent';
+import AddInput from '../../../components/desktop/AddInput';
 
 const dummyData = [
   { name: '조다운', student_id: '20223139', admin: true },
-  { name: '조다운', student_id: '20223139', admin: true },
-  { name: '조다운', student_id: '20223139', admin: false },
+  { name: '이정욱', student_id: '20223888', admin: true },
+  { name: '윤신지', student_id: '20223122', admin: false },
+  { name: '황수민', student_id: '20223130', admin: true },
+];
+
+const dummyData2 = [
+  { name: '조다운', student_id: '20223139' },
+  { name: '황현진', student_id: '20223158' },
 ];
 
 export default function PayerInquiryPage() {
+  const [data, setData] = useState(dummyData); // 기존 데이터
+  const [addedData, setAddedData] = useState(dummyData2); // 추가된 데이터
+  const [isDeleteModeOriginal, setIsDeleteModeOriginal] = useState(false); // 기존 데이터 삭제 모드
+  const [isDeleteModeAdded, setIsDeleteModeAdded] = useState(false); // 추가된 데이터 삭제 모드
+  const [selectedOriginal, setSelectedOriginal] = useState<string[]>([]); // 기존 데이터에서 선택된 항목
+  const [selectedAdded, setSelectedAdded] = useState<string[]>([]); // 추가된 데이터에서 선택된 항목
+
+  const [newStudentId, setNewStudentId] = useState('');
+  const [newStudentName, setNewStudentName] = useState('');
+
+  // 학번 입력 핸들러
+  const handleStudentIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNewStudentId(e.target.value);
+  };
+
+  // 이름 입력 핸들러
+  const handleStudentNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNewStudentName(e.target.value);
+  };
+
+  // 추가 버튼 클릭 시 실행될 함수
+  const handleAddStudent = () => {
+    if (!newStudentId || !newStudentName) {
+      alert('이름과 학번을 입력해주세요.');
+      return;
+    }
+
+    // 학번이 8자리 숫자인지 검증
+    const studentIdPattern = /^\d{8}$/;
+    if (!studentIdPattern.test(newStudentId)) {
+      alert('학번은 8자리 숫자로 입력해야 합니다.');
+      return;
+    }
+
+    const newEntry = { name: newStudentName, student_id: newStudentId };
+    setAddedData([...addedData, newEntry]); // 추가된 데이터 업데이트
+    setNewStudentId('');
+    setNewStudentName('');
+  };
+
+  // 기존 데이터 삭제
+  const handleDeleteOriginal = () => {
+    const updatedData = data.filter(
+      (item) => !selectedOriginal.includes(item.student_id),
+    );
+    setData(updatedData);
+    setIsDeleteModeOriginal(false);
+    setSelectedOriginal([]);
+  };
+
+  // 추가된 데이터 삭제
+  const handleDeleteAdded = () => {
+    const updatedData = addedData.filter(
+      (item) => !selectedAdded.includes(item.student_id),
+    );
+    setAddedData(updatedData);
+    setIsDeleteModeAdded(false);
+    setSelectedAdded([]);
+  };
+
+  // 기존 데이터 삭제 모드 토글
+  const toggleDeleteModeOriginal = () => {
+    setIsDeleteModeOriginal((prev) => !prev);
+    setSelectedOriginal([]);
+  };
+
+  // 추가된 데이터 삭제 모드 토글
+  const toggleDeleteModeAdded = () => {
+    setIsDeleteModeAdded((prev) => !prev);
+    setSelectedAdded([]);
+  };
+
+  const api = () => {
+    console.log('api 적용할 곳입니다.');
+  };
+
   return (
-    <div className="flex flex-col justify-center gap-8 px-64">
+    <div className="flex flex-col justify-center gap-8 px-4 md:px-16 lg:px-64">
       <div className="pt-20 text-center">
         <p className="text-2xl">학생회비 납부자 조회하기</p>
       </div>
-      <div className="flex justify-center gap-4">
+      <div className="flex flex-wrap justify-center gap-2">
         <Search />
         <Sidebar
           triggerText="새로운 납부자 추가하기"
-          title="Settings"
-          description="Manage your preferences"
+          title="학생회비 납부자 추가하기"
+          description="설명"
         >
-          <p>Here you can change your account settings.</p>
+          <div className="flex w-full flex-col items-center justify-center">
+            <div className="flex items-end justify-center gap-4">
+              <AddStudentId
+                value={newStudentId}
+                onChange={handleStudentIdChange}
+              />
+              <AddInput
+                value={newStudentName}
+                onChange={handleStudentNameChange}
+                onClick={handleAddStudent}
+              />
+            </div>
+            <div className="flex w-full flex-col">
+              <TableComponent
+                data={addedData}
+                headers={['추가된 이름', '추가된 학번']}
+                showCheckboxes={isDeleteModeAdded}
+                selected={selectedAdded}
+                setSelected={setSelectedAdded}
+              />
+              <div className="flex justify-end gap-2">
+                <Button
+                  size="sm"
+                  type="button"
+                  variant="deleteSecondary"
+                  onClick={toggleDeleteModeAdded}
+                >
+                  {isDeleteModeAdded ? '취소' : '삭제'}
+                </Button>
+                {isDeleteModeAdded && (
+                  <Button
+                    size="sm"
+                    variant="deletePrimary"
+                    type="button"
+                    onClick={handleDeleteAdded}
+                  >
+                    완료
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="bottom-0 flex justify-center gap-2 pt-10">
+            <Button type="button" variant="primary" onClick={api}>
+              적용하기
+            </Button>
+          </div>
         </Sidebar>
       </div>
-      <TableComponent data={dummyData} />
+      <div className="flex flex-col justify-between">
+        <TableComponent
+          data={data}
+          showCheckboxes={isDeleteModeOriginal}
+          selected={selectedOriginal}
+          setSelected={setSelectedOriginal}
+        />
+        <div className="flex justify-end gap-2">
+          <Button
+            size="sm"
+            type="button"
+            variant="deleteSecondary"
+            onClick={toggleDeleteModeOriginal}
+          >
+            {isDeleteModeOriginal ? '취소' : '삭제'}
+          </Button>
+
+          {isDeleteModeOriginal && (
+            <Button
+              type="button"
+              size="sm"
+              variant="deleteSecondary"
+              className={`btn whitespace-nowrap rounded-md px-3 py-2 text-sm text-white-primary ${isDeleteModeOriginal ? 'bg-gray-primary' : 'bg-gray-secondary'}`}
+              onClick={handleDeleteOriginal}
+            >
+              완료
+            </Button>
+          )}
+        </div>
+      </div>
     </div>
   );
 }

src/components/desktop/AddInput/index.tsx

@@ -0,0 +1,24 @@
+import { Input } from '@/components/ui/input';
+import { Plus } from 'lucide-react';
+
+interface AddInputProps {
+  value: string;
+  onClick: () => void;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function AddInput({ onClick, value, onChange }: AddInputProps) {
+  return (
+    <Input
+      Icon={
+        <Plus
+          className="h-5 w-5 cursor-pointer text-muted-foreground"
+          onClick={onClick}
+        />
+      }
+      value={value}
+      onChange={onChange}
+      placeholder="이름을 입력해주세요."
+    />
+  );
+}