Merge pull request #424 from kakao-tech-campus-3rd-step3/feature/member-management-ui#422

[FEAT] 동아리원 관리페이지 UI 및 반응형 (#422)

Author: ganimjeong

src/pages/admin/MemberManagement/Page.tsx

@@ -1,3 +1,73 @@
+import { useParams } from 'react-router-dom';
+import { LoadingSpinner } from '@/shared/components/LoadingSpinner';
+import { MemberHeaderSection } from './components/MemberHeaderSection';
+import { MemberTableSection } from './components/MemberTableSection';
+import { useMemberFilter } from './hooks/useMemberFilter';
+import { useMemberMutations } from './hooks/useMemberMutations';
+import * as S from './index.styled';
+import type { Member } from './types/member';
+
+// TODO: API 연동 시 삭제
+const MOCK_MEMBERS: Member[] = Array.from({ length: 10 }, (_, i) => ({
+  id: i + 1,
+  name: `홍길동${i + 1}`,
+  generation: `${(i % 3) + 1}기`,
+  department: '영어영문학과',
+  phoneNumber: '010-1234-5678',
+  role: ['회장단', '운영팀', '동아리원'][i % 3] as Member['role'],
+  joinDate: new Date(2024, 0, i + 1).toISOString(),
+}));
+
 export const MemberManagementPage = () => {
-  return <></>;
+  const { clubId } = useParams<{ clubId: string }>();
+
+  // TODO: API 연동
+  // const { data: members = [], isLoading, error } = useQuery({
+  //   queryKey: ['members', clubId],
+  //   queryFn: () => fetchMembers(clubId!),
+  //   enabled: !!clubId,
+  // });
+  const members = MOCK_MEMBERS;
+  const isLoading = false;
+  const error = null;
+
+  const { searchText, sortBy, filteredMembers, setSearchText, setSortBy } =
+    useMemberFilter(members);
+
+  const { handleRoleChange, handleDeleteMember } = useMemberMutations(clubId || '');
+
+  const handleAddMember = () => {
+    // TODO: 단건 추가 모달 열기
+    console.log('단건 추가 모달 열기');
+  };
+
+  const handleBulkUpload = () => {
+    // TODO: 엑셀 업로드 모달 열기
+    console.log('엑셀 업로드 모달 열기');
+  };
+
+  if (isLoading) return <LoadingSpinner />;
+  if (error) return <div>에러 발생</div>;
+
+  return (
+    <S.Container>
+      <S.ContentWrapper>
+        <MemberHeaderSection
+          clubName='인터엑스'
+          searchText={searchText}
+          sortBy={sortBy}
+          onSearchChange={setSearchText}
+          onSortChange={setSortBy}
+          onAddMember={handleAddMember}
+          onBulkUpload={handleBulkUpload}
+        />
+
+        <MemberTableSection
+          members={filteredMembers}
+          onRoleChange={handleRoleChange}
+          onDelete={handleDeleteMember}
+        />
+      </S.ContentWrapper>
+    </S.Container>
+  );
 };

src/pages/admin/MemberManagement/api/member.ts

@@ -0,0 +1,34 @@
+// TODO: API연동할 때 이름 세분화(변경)하고 파일 분리
+
+import { apiInstance } from '@/app/api/initInstance';
+import { handleAxiosError } from '@/shared/utils/handleAxiosError';
+import type { Member, MemberRole } from '../types/member';
+
+export const fetchMembers = async (clubId: string): Promise<Member[]> => {
+  try {
+    const { data } = await apiInstance.get(`/clubs/${clubId}/members`);
+    return data;
+  } catch (e: unknown) {
+    return handleAxiosError(e, '회원 목록을 가져오는데 실패했습니다.');
+  }
+};
+
+export const updateMemberRole = async (
+  clubId: string,
+  memberId: number,
+  role: MemberRole,
+): Promise<void> => {
+  try {
+    await apiInstance.patch(`/clubs/${clubId}/members/${memberId}/role`, { role });
+  } catch (e: unknown) {
+    return handleAxiosError(e, '회원 역할 변경에 실패했습니다.');
+  }
+};
+
+export const deleteMember = async (clubId: string, memberId: number): Promise<void> => {
+  try {
+    await apiInstance.delete(`/clubs/${clubId}/members/${memberId}`);
+  } catch (e: unknown) {
+    return handleAxiosError(e, '회원 삭제에 실패했습니다.');
+  }
+};

src/pages/admin/MemberManagement/components/MemberHeaderSection/index.styled.ts

@@ -0,0 +1,115 @@
+import styled from '@emotion/styled';
+
+export const Header = styled.div(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '1.5rem 2rem 2.5rem 0rem',
+  backgroundColor: theme.colors.bg,
+  gap: '1rem',
+
+  ['@media (max-width: 1018px)']: {
+    //동아리명이 7글자인 경우까지 핸들
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  },
+}));
+
+export const LeftGroup = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.75rem',
+});
+
+export const RightGroup = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.75rem',
+});
+
+export const AddButton = styled.button(({ theme }) => ({
+  fontSize: theme.font.size.sm,
+  fontWeight: theme.font.weight.medium,
+  color: theme.colors.primary,
+  backgroundColor: theme.colors.bg,
+  border: `1px solid ${theme.colors.primary}`,
+  borderRadius: theme.radius.md,
+  padding: '0.5rem 1rem',
+  cursor: 'pointer',
+  transition: 'background-color 0.2s',
+  height: '36px',
+
+  '&:hover': {
+    backgroundColor: theme.colors.primary100,
+  },
+  ['@media (max-width: 638px)']: {
+    display: 'none',
+  },
+}));
+
+// 플러스 아이콘 버튼 (638px 이하에만 표시)
+export const AddIconButton = styled.button(({ theme }) => ({
+  display: 'none',
+
+  ['@media (max-width: 638px)']: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '32px',
+    height: '32px',
+    cursor: 'pointer',
+    color: theme.colors.gray500,
+    fontSize: '24px',
+    backgroundColor: 'transparent',
+    border: 'none',
+    padding: '0',
+    transition: 'color 0.2s ease, transform 0.3s ease',
+
+    '&:hover': {
+      color: theme.colors.gray700,
+      transform: 'rotate(90deg)',
+    },
+  },
+}));
+
+export const SearchInputWrapper = styled.div(({ theme }) => ({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  width: '180px',
+  height: '40px',
+  border: `1px solid ${theme.colors.gray200}`,
+  borderRadius: theme.radius.md,
+  backgroundColor: theme.colors.bg,
+  padding: '0 0.75rem',
+  gap: '0.5rem',
+  transition: 'border-color 0.2s',
+
+  '&:focus-within': {
+    borderColor: theme.colors.primary,
+  },
+  [`@media (max-width: ${theme.breakpoints.mobile})`]: {
+    width: '50%',
+  },
+}));
+
+export const SearchIcon = styled.span(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  color: theme.colors.gray500,
+  fontSize: '1.2rem',
+  flexShrink: 0,
+}));
+
+export const SearchInput = styled.input(({ theme }) => ({
+  flex: 1,
+  border: 'none',
+  outline: 'none',
+  backgroundColor: 'transparent',
+  fontSize: theme.font.size.base,
+  color: theme.colors.textPrimary,
+
+  '&::placeholder': {
+    color: theme.colors.gray500,
+  },
+}));

src/pages/admin/MemberManagement/components/MemberHeaderSection/index.tsx

@@ -0,0 +1,63 @@
+import { FiSearch, FiPlus } from 'react-icons/fi';
+import { Dropdown } from '@/shared/components/Dropdown';
+import { Text } from '@/shared/components/Text';
+import * as S from './index.styled';
+import type { SortOption } from '../../types/member';
+
+type Props = {
+  clubName: string;
+  searchText: string;
+  sortBy: SortOption;
+  onSearchChange: (text: string) => void;
+  onSortChange: (sort: SortOption) => void;
+  onAddMember: () => void;
+  onBulkUpload: () => void;
+};
+
+const SORT_OPTIONS: SortOption[] = ['이름순', '등록순'];
+
+export const MemberHeaderSection = ({
+  clubName,
+  searchText,
+  sortBy,
+  onSearchChange,
+  onSortChange,
+  onAddMember,
+  onBulkUpload,
+}: Props) => {
+  return (
+    <S.Header>
+      <S.LeftGroup>
+        <Text size='xl' weight='medium'>
+          {clubName} 동아리원 명단
+        </Text>
+        <S.AddButton onClick={onAddMember}>동아리원 추가</S.AddButton>
+        <S.AddButton onClick={onBulkUpload}>엑셀로 일괄 등록</S.AddButton>
+        <S.AddIconButton onClick={onAddMember}>
+          <FiPlus />
+        </S.AddIconButton>
+      </S.LeftGroup>
+
+      <S.RightGroup>
+        <S.SearchInputWrapper>
+          <S.SearchIcon>
+            <FiSearch />
+          </S.SearchIcon>
+          <S.SearchInput
+            type='text'
+            placeholder='검색'
+            value={searchText}
+            onChange={(e) => onSearchChange(e.target.value)}
+          />
+        </S.SearchInputWrapper>
+
+        <Dropdown
+          value={sortBy}
+          options={SORT_OPTIONS}
+          placeholder='정렬 기준'
+          onSelect={onSortChange}
+        />
+      </S.RightGroup>
+    </S.Header>
+  );
+};