diff --git a/src/components/introduce/ModeratorViewButton.jsx b/src/components/introduce/ModeratorViewButton.jsx
new file mode 100644
index 0000000..e1dbe30
--- /dev/null
+++ b/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 (
+ <>
+
+ 스터디 참여 승인하기
+
+ >
+ );
+};
+
+export default ModeratorViewButton;
diff --git a/src/components/introduce/ModeratorViewButton.test.jsx b/src/components/introduce/ModeratorViewButton.test.jsx
new file mode 100644
index 0000000..76a4f26
--- /dev/null
+++ b/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((
+
+ ));
+
+ 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('스터디 참여 승인하기');
+ });
+ });
+});