활동 상태 변경 기능

src/components/ActivityScore/MemberStatusBadge/MemberStatusBadge.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { MemberStatusKeys } from '@/types';
+import * as Styled from './MemberStatusBadge.styled';
+
+interface MemberStatusBadgeProps {
+  text: MemberStatusKeys;
+}
+
+const MemberStatusBadge = ({ text }: MemberStatusBadgeProps) => {
+  const displayText = {
+    ACTIVE: '활동 중',
+    DROP_OUT: '중도하차',
+    END: '활동종료',
+    TRANSFER: '다음 기수 이관',
+  }?.[text];
+
+  if (!displayText) return null;
+  return <Styled.MemberStatusBadge text={text}>{displayText}</Styled.MemberStatusBadge>;
+};
+
+export default MemberStatusBadge;

src/components/ActivityScore/MemberStatusBadge/MemberStatusBadge.styled.tsx

@@ -0,0 +1,22 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { MemberStatus } from '@/types';
+
+interface MemberStatusBadgeProps {
+  text: keyof typeof MemberStatus;
+}
+
+export const MemberStatusBadge = styled.div<MemberStatusBadgeProps>`
+  ${({ theme, text }) => css`
+    ${theme.fonts.medium13}
+    ${theme.badge[text]}
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 8.6rem;
+    height: 2.8rem;
+    margin: 0 auto;
+    border-radius: 0.8rem;
+    cursor: default;
+  `}
+`;

src/components/ActivityScore/index.ts

@@ -1,5 +1,6 @@
 export { default as PersonalInfoCard } from './PersonalInfoCard/PersonalInfoCard.component';
 export { default as ScoreCard } from './ScoreCard/ScoreCard.component';
 export { default as Icon } from './Icon/Icon.component';
+export { default as MemberStatusBadge } from './MemberStatusBadge/MemberStatusBadge.component';
 export * from './utils';
 export * from './constants';

src/components/common/ModalViewer/ModalViewer.component.tsx

@@ -13,6 +13,7 @@ import {
   CreateQRCodeModalDialog,
   DisplayQRCodeModalDialog,
   CreateHelperAdminMemberDialog,
+  ChangeMemberStatusDialog,
 } from '@/components';
 import { AlertModalDialogProps } from '../AlertModalDialog/AlertModalDialog.component';
 import { ChangeResultModalDialogProps } from '@/components/modal/ChangeResultModalDialog/ChangeResultModalDialog.component';
@@ -24,6 +25,7 @@ import { ActivityScoreModalDialogProps } from '@/components/modal/ActivityScoreM
 import { CreateQRCodeModalDialogProps } from '@/components/modal/CreateQRCodeModalDialog/CreateQRCodeModalDialog.component';
 import { DisplayQRCodeModalDialogProps } from '@/components/modal/DisplayQRCodeModalDialog/DisplayQRCodeModalDialog.component';
 import { CreateHelperAdminMemberDialogProps } from '@/components/modal/CreateHelperAdminMemberDialog/CreateHelperAdminMemberDialog.component';
+import { ChangeMemberStatusDialogProps } from '@/components/modal/ChangeMemberStatusDialog/ChangeMemberStatusDialog.component';
 
 const Modal = ({ modalKey }: { modalKey: ModalKeyType }) => {
   const modal = useRecoilValue($modalByStorage(modalKey));
@@ -102,6 +104,15 @@ const Modal = ({ modalKey }: { modalKey: ModalKeyType }) => {
     );
   }
 
+  if (modalKey === ModalKey.changeMemberStatusDialog && modal.isOpen && modal.props) {
+    return (
+      <ChangeMemberStatusDialog
+        key={modalKey}
+        {...(modal.props as ChangeMemberStatusDialogProps)}
+      />
+    );
+  }
+
   return null;
 };
 

src/components/index.ts

@@ -3,3 +3,4 @@ export * from './ApplicationDetail';
 export * from './ApplicationForm';
 export * from './fields';
 export * from './modal';
+export * from './ActivityScore';

src/components/modal/ChangeMemberStatusDialog/ChangeMemberStatusDialog.component.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useRecoilCallback } from 'recoil';
+import { useForm } from 'react-hook-form';
+import { ModalWrapper, Select, TitleWithContent, MemberStatusBadge } from '@/components';
+import * as Styled from './ChangeMemberStatusDialog.styled';
+import { $modalByStorage, ModalKey } from '@/store';
+import { SelectOption, SelectSize } from '@/components/common/Select/Select.component';
+import { MemberResponse } from '@/types';
+
+export interface ChangeMemberStatusDialogProps {
+  selectedList: MemberResponse[];
+  refreshList?: () => void;
+}
+
+const ChangeMemberStatusDialog = ({ selectedList }: ChangeMemberStatusDialogProps) => {
+  const { setValue, handleSubmit } = useForm<any>();
+
+  const handleRemoveCurrentModal = useRecoilCallback(({ set }) => () => {
+    set($modalByStorage(ModalKey.changeMemberStatusDialog), {
+      key: ModalKey.changeMemberStatusDialog,
+      isOpen: false,
+    });
+  });
+
+  const handleMemberStatusSubmit = useRecoilCallback(() => () => {});
+
+  const props = {
+    heading: '활동 상태 변경',
+    footer: {
+      cancelButton: {
+        label: '취소',
+      },
+      confirmButton: {
+        label: '변경',
+        onClick: handleSubmit(handleMemberStatusSubmit),
+        type: 'submit',
+      },
+    },
+    handleCloseModal: handleRemoveCurrentModal,
+    isContentScroll: false,
+  };
+
+  const handleMemberStatusSelect = (option: SelectOption) => {
+    setValue(`memberStatus`, option.value);
+  };
+
+  return (
+    <ModalWrapper {...props}>
+      <Styled.ChangeMemberStatusContainer>
+        <TitleWithContent title="선택인원">{selectedList?.length}</TitleWithContent>
+        <Styled.SelectedResultArea title="선택된 활동 상태">
+          {[...new Set(selectedList.map(({ memberStatus }) => memberStatus))].map((each) => (
+            <MemberStatusBadge key={each} text={each} />
+          ))}
+        </Styled.SelectedResultArea>
+        <Styled.Divider />
+        <TitleWithContent title="변경할 활동 상태" isActive>
+          <Select
+            size={SelectSize.md}
+            options={[
+              { value: 'ACTIVE', label: '활동 중' },
+              { value: 'TRANSFER', label: '다음 기수 이관' },
+              { value: 'DROP_OUT', label: '중도하차' },
+            ]}
+            isFullWidth
+            onChangeOption={handleMemberStatusSelect}
+            placeholder="합격여부상태를 선택해주세요"
+          />
+        </TitleWithContent>
+      </Styled.ChangeMemberStatusContainer>
+    </ModalWrapper>
+  );
+};
+
+export default ChangeMemberStatusDialog;

src/components/modal/ChangeMemberStatusDialog/ChangeMemberStatusDialog.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChangeMemberStatusDialog, {
+  ChangeMemberStatusDialogProps,
+} from './ChangeMemberStatusDialog.component';
+
+export default {
+  title: 'Modal/Change Member Status Dialog',
+  component: ChangeMemberStatusDialog,
+} as ComponentMeta<typeof ChangeMemberStatusDialog>;
+
+const Template: ComponentStory<typeof ChangeMemberStatusDialog> = (
+  args: ChangeMemberStatusDialogProps,
+) => <ChangeMemberStatusDialog {...args} />;
+
+export const changeMemberStatusDialog = Template.bind({});
+
+changeMemberStatusDialog.args = {};

src/components/modal/ChangeMemberStatusDialog/ChangeMemberStatusDialog.styled.tsx

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { Textarea, TitleWithContent } from '@/components';
+
+export const ChangeMemberStatusContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  width: 70rem;
+  height: 23.6rem;
+  padding: 1.2rem 2.4rem;
+`;
+
+export const CustomTextarea = styled(Textarea)`
+  ${({ theme }) => css`
+    width: 100%;
+
+    & textarea {
+      ${theme.fonts.regular13}
+
+      color: ${theme.colors.gray70};
+    }
+  `}
+`;
+
+export const SelectedResultArea = styled(TitleWithContent)`
+  & > span {
+    display: inline-flex;
+    gap: 0.6rem;
+    width: unset !important;
+
+    & > div {
+      margin: unset;
+    }
+  }
+`;
+
+export const Divider = styled.div`
+  ${({ theme }) => css`
+    height: 0.1rem;
+    background-color: ${theme.colors.gray30};
+  `}
+`;

src/components/modal/index.ts

@@ -6,3 +6,4 @@ export { default as ActivityScoreModalDialog } from './ActivityScoreModalDialog/
 export { default as CreateQRCodeModalDialog } from './CreateQRCodeModalDialog/CreateQRCodeModalDialog.component';
 export { default as DisplayQRCodeModalDialog } from './DisplayQRCodeModalDialog/DisplayQRCodeModalDialog.component';
 export { default as CreateHelperAdminMemberDialog } from './CreateHelperAdminMemberDialog/CreateHelperAdminMemberDialog.component';
+export { default as ChangeMemberStatusDialog } from './ChangeMemberStatusDialog/ChangeMemberStatusDialog.component';

src/pages/ActivityScoreList/ActivityScoreList.page.tsx

@@ -1,18 +1,29 @@
 import React, { useMemo, useState } from 'react';
 import { useLocation, useSearchParams } from 'react-router-dom';
-import { useRecoilStateLoadable, useRecoilValue } from 'recoil';
-import { BottomCTA, Pagination, SearchOptionBar, Table, TeamNavigationTabs } from '@/components';
+import { useRecoilStateLoadable, useRecoilValue, useSetRecoilState } from 'recoil';
+import {
+  BottomCTA,
+  Pagination,
+  SearchOptionBar,
+  Table,
+  TeamNavigationTabs,
+  Button,
+  MemberStatusBadge,
+} from '@/components';
 import * as Styled from './ActivityScoreList.styled';
 import { SortType, TableColumn } from '@/components/common/Table/Table.component';
 import { PATH, SORT_TYPE } from '@/constants';
 import { usePagination } from '@/hooks';
-import { $generationNumber } from '@/store';
-import { MemberRequest, MemberResponse } from '@/types';
+import { $generationNumber, $modalByStorage, ModalKey } from '@/store';
+import { MemberRequest, MemberResponse, MemberStatusKeys } from '@/types';
 import { $members } from '@/store/member';
+import * as api from '@/api';
+import { ButtonSize, ButtonShape } from '@/components/common/Button/Button.component';
 
 const ActivityScoreList = () => {
   const [searchParams] = useSearchParams();
   const generationNumber = useRecoilValue($generationNumber);
+  const [selectedRows, setSelectedRows] = useState<MemberResponse[]>([]);
 
   const page = searchParams.get('page') || '1';
   const size = searchParams.get('size') || '20';
@@ -92,8 +103,30 @@ const ActivityScoreList = () => {
       widthRatio: '25%',
       accessor: 'score',
     },
+    {
+      title: '활동 상태',
+      widthRatio: '20%',
+      accessor: 'memberStatus',
+      renderCustomCell: ({ cellValue }) => (
+        <MemberStatusBadge text={cellValue as MemberStatusKeys} />
+      ),
+    },
   ];
 
+  const handleSelectAll = async (checkedValue: boolean) => {
+    if (checkedValue) {
+      setSelectedRows([]);
+      return;
+    }
+    const newMemberParams = { ...membersParams, size: totalCount };
+    const allMemberContents = await api.getMembers(newMemberParams);
+    setSelectedRows(allMemberContents.data);
+  };
+
+  const handleChangeMemberStatusDialog = useSetRecoilState(
+    $modalByStorage(ModalKey.changeMemberStatusDialog),
+  );
+
   return (
     <Styled.PageWrapper>
       <Styled.Heading>활동점수</Styled.Heading>
@@ -106,14 +139,47 @@ const ActivityScoreList = () => {
         topStickyHeight={14.1}
         columns={columns}
         rows={tableRows}
-        supportBar={{ totalSummaryText: '총 인원', totalCount }}
+        supportBar={{
+          totalSummaryText: '총 인원',
+          totalCount,
+          selectedSummaryText: '명 선택',
+          buttons: [
+            <Button
+              $size={ButtonSize.xs}
+              shape={ButtonShape.defaultLine}
+              onClick={() => {
+                handleChangeMemberStatusDialog({
+                  key: ModalKey.changeMemberStatusDialog,
+                  props: { refreshList: () => {}, selectedList: selectedRows },
+                  isOpen: true,
+                });
+              }}
+              disabled={selectedRows.length === 0}
+            >
+              활동 상태
+            </Button>,
+            <Button
+              $size={ButtonSize.xs}
+              shape={ButtonShape.defaultLine}
+              disabled={selectedRows.length === 0}
+            >
+              삭제
+            </Button>,
+          ],
+        }}
         sortOptions={{
           sortTypes,
           disableMultiSort: true,
           handleSortColumn: (_sortTypes) => {
             setSortTypes(_sortTypes);
           },
         }}
+        selectableRow={{
+          selectedCount: selectedRows.length,
+          selectedRows,
+          setSelectedRows,
+          handleSelectAll,
+        }}
         pagination={
           <Pagination
             pageOptions={pageOptions}

src/store/modal.ts

@@ -12,6 +12,7 @@ import { ActivityScoreModalDialogProps } from '@/components/modal/ActivityScoreM
 import { CreateQRCodeModalDialogProps } from '@/components/modal/CreateQRCodeModalDialog/CreateQRCodeModalDialog.component';
 import { DisplayQRCodeModalDialogProps } from '@/components/modal/DisplayQRCodeModalDialog/DisplayQRCodeModalDialog.component';
 import { CreateHelperAdminMemberDialogProps } from '@/components/modal/CreateHelperAdminMemberDialog/CreateHelperAdminMemberDialog.component';
+import { ChangeMemberStatusDialogProps } from '@/components/modal/ChangeMemberStatusDialog/ChangeMemberStatusDialog.component';
 
 export const ModalKey = {
   alertModalDialog: 'alertModalDialog',
@@ -24,6 +25,7 @@ export const ModalKey = {
   createQRCodeModalDialog: 'createQRCodeModalDialog',
   displayQRCodeModalDialog: 'displayQRCodeModalDialog',
   createHelperAdminMemberDialog: 'createHelperAdminMemberDialog',
+  changeMemberStatusDialog: 'changeMemberStatusDialog',
 } as const;
 
 export type ModalKeyType = ValueOf<typeof ModalKey>;
@@ -37,7 +39,8 @@ export type ModalProps =
   | ActivityScoreModalDialogProps
   | CreateQRCodeModalDialogProps
   | DisplayQRCodeModalDialogProps
-  | CreateHelperAdminMemberDialogProps;
+  | CreateHelperAdminMemberDialogProps
+  | ChangeMemberStatusDialogProps;
 
 export interface Modal {
   key: ModalKeyType;