[Feature] Button visible when you are the organizer

src/components/introduce/ModeratorViewButton.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import StyledApplyStatusButton from '../../styles/StyledApplyStatusButton';
+
+const ModeratorViewButton = ({ group, user }) => {
+  const { moderatorId } = group;
+
+  if (moderatorId !== user) {
+    return null;
+  }
+
+  return (
+    <>
+      <StyledApplyStatusButton
+        type="button"
+        className="confirm"
+      >
+        스터디 참여 승인하기
+      </StyledApplyStatusButton>
+    </>
+  );
+};
+
+export default ModeratorViewButton;

src/components/introduce/ModeratorViewButton.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import ModeratorViewButton from './ModeratorViewButton';
+
+import STUDY_GROUP from '../../../fixtures/study-group';
+
+describe('ModeratorViewButton', () => {
+  const renderModeratorViewButton = ({ group, user }) => render((
+    <ModeratorViewButton
+      user={user}
+      group={group}
+    />
+  ));
+
+  context('When the organizer and the logged-in user are different', () => {
+    const group = {
+      ...STUDY_GROUP,
+      moderatorId: 'user',
+    };
+
+    it('nothing renders', () => {
+      const { container } = renderModeratorViewButton({ group, user: 'user1' });
+
+      expect(container).toBeEmptyDOMElement();
+    });
+  });
+
+  context('When the host and logged in user are the same', () => {
+    const group = {
+      ...STUDY_GROUP,
+      moderatorId: 'user',
+    };
+
+    it('nothing renders', () => {
+      const { container } = renderModeratorViewButton({ group, user: 'user' });
+
+      expect(container).toHaveTextContent('스터디 참여 승인하기');
+    });
+  });
+});