diff --git a/src/components/introduce/modals/ParticipantListModal.jsx b/src/components/introduce/modals/ParticipantListModal.jsx
index 54d9251..78cafa0 100644
--- a/src/components/introduce/modals/ParticipantListModal.jsx
+++ b/src/components/introduce/modals/ParticipantListModal.jsx
@@ -82,6 +82,13 @@ const ParticipantListWrapper = styled.div`
overflow-y: auto;
`;
+const NoExistListWrapper = styled.div`
+ color: ${palette.gray[6]};
+ font-size: 1.1rem;
+ text-align: center;
+ font-weight: bold;
+`;
+
const StyledButton = styled(Button)`
&:last-of-type {
margin-left: .7rem;
@@ -105,13 +112,17 @@ const ParticipantListModal = ({
승인 여부
- {participants.length && participants.map((participant) => (
+ {participants.length ? participants.map((participant) => (
onUpdate(participant.id)}
/>
- ))}
+ )) : (
+
+ 신청자가 존재하지 않습니다.
+
+ )}
닫기
diff --git a/src/components/introduce/modals/ParticipantListModal.test.jsx b/src/components/introduce/modals/ParticipantListModal.test.jsx
index 36c40f4..11f51f4 100644
--- a/src/components/introduce/modals/ParticipantListModal.test.jsx
+++ b/src/components/introduce/modals/ParticipantListModal.test.jsx
@@ -24,62 +24,74 @@ describe('ParticipantListModal', () => {
context('with visible', () => {
const visible = true;
- describe('Contents on the screen', () => {
- const participants = [{
- confirm: false,
- id: 'test',
- }];
+ context('with participants', () => {
+ describe('Contents on the screen', () => {
+ const participants = [{
+ confirm: false,
+ id: 'test',
+ }];
- it('renders Modal text', () => {
- const { container } = renderParticipantListModal({ visible, participants });
+ it('renders Modal text', () => {
+ const { container } = renderParticipantListModal({ visible, participants });
- expect(container).toHaveTextContent('스터디 신청자 목록 🙋♂️');
- expect(container).toHaveTextContent('신청서 보기');
- expect(container).toHaveTextContent('test');
- });
+ expect(container).toHaveTextContent('스터디 신청자 목록 🙋♂️');
+ expect(container).toHaveTextContent('신청서 보기');
+ expect(container).toHaveTextContent('test');
+ });
- it('click button call close', () => {
- const { getByText } = renderParticipantListModal({ visible, participants });
+ it('click button call close', () => {
+ const { getByText } = renderParticipantListModal({ visible, participants });
- const button = getByText('닫기');
+ const button = getByText('닫기');
- fireEvent.click(button);
+ fireEvent.click(button);
- expect(handleClose).toBeCalled();
+ expect(handleClose).toBeCalled();
+ });
});
- });
- context('When confirm is true', () => {
- const participants = [{
- confirm: true,
- id: 'test',
- }];
+ context('When confirm is true', () => {
+ const participants = [{
+ confirm: true,
+ id: 'test',
+ }];
- it('event is called with user ID after clicking cancel button', () => {
- const { getByText } = renderParticipantListModal({ visible, participants });
+ it('event is called with user ID after clicking cancel button', () => {
+ const { getByText } = renderParticipantListModal({ visible, participants });
- const button = getByText('취소하기');
+ const button = getByText('취소하기');
- fireEvent.click(button);
+ fireEvent.click(button);
- expect(handleUpdate).toBeCalledWith('test');
+ expect(handleUpdate).toBeCalledWith('test');
+ });
});
- });
- context('When confirm is false', () => {
- const participants = [{
- confirm: false,
- id: 'test',
- }];
+ context('When confirm is false', () => {
+ const participants = [{
+ confirm: false,
+ id: 'test',
+ }];
+
+ it('renders confirm button', () => {
+ const { getByText } = renderParticipantListModal({ visible, participants });
- it('renders confirm button', () => {
- const { getByText } = renderParticipantListModal({ visible, participants });
+ const button = getByText('승인하기');
- const button = getByText('승인하기');
+ fireEvent.click(button);
- fireEvent.click(button);
+ expect(handleUpdate).toBeCalledWith('test');
+ });
+ });
+ });
+
+ context('without participants', () => {
+ const participants = [];
+
+ it('renders "The applicant does not exist." text', () => {
+ const { container } = renderParticipantListModal({ visible, participants });
- expect(handleUpdate).toBeCalledWith('test');
+ expect(container).toHaveTextContent('신청자가 존재하지 않습니다.');
});
});
});