diff --git a/src/components/introduce/IntroduceActionButtons.jsx b/src/components/introduce/IntroduceActionButtons.jsx
new file mode 100644
index 0000000..ab2809d
--- /dev/null
+++ b/src/components/introduce/IntroduceActionButtons.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+import palette from '../../styles/palette';
+
+const IntroduceActionButtonsWrapper = styled.div`
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 1rem;
+`;
+
+const ActionButton = styled.button`
+ font-weight: bold;
+ font-size: 0.875rem;
+ margin-left: 0.5rem;
+ padding: 0.25rem 1rem;
+ border-radius: 4px;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ color: ${palette.gray[6]};
+
+ ${({ revise }) => revise && css`
+ &:hover {
+ background: ${palette.gray[1]};
+ color: ${palette.teal[6]};
+ }
+ `};
+
+ ${({ remove }) => remove && css`
+ &:hover {
+ background: ${palette.gray[1]};
+ color: ${palette.warn[2]};
+ }
+ `};
+`;
+
+const IntroduceActionButtons = () => (
+
+ 수정
+ 삭제
+
+);
+
+export default IntroduceActionButtons;
diff --git a/src/components/introduce/IntroduceActionButtons.test.jsx b/src/components/introduce/IntroduceActionButtons.test.jsx
new file mode 100644
index 0000000..21f1c66
--- /dev/null
+++ b/src/components/introduce/IntroduceActionButtons.test.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import IntroduceActionButtons from './IntroduceActionButtons';
+
+describe('IntroduceActionButtons', () => {
+ const renderIntroduceActionButtons = () => render((
+
+ ));
+
+ it('renders revise button and delete button', () => {
+ const { container } = renderIntroduceActionButtons();
+
+ expect(container).toHaveTextContent('수정');
+ expect(container).toHaveTextContent('삭제');
+ });
+});
diff --git a/src/components/introduce/IntroduceForm.jsx b/src/components/introduce/IntroduceForm.jsx
index 3b4f519..bfca9d2 100644
--- a/src/components/introduce/IntroduceForm.jsx
+++ b/src/components/introduce/IntroduceForm.jsx
@@ -9,6 +9,7 @@ import { authorizedUsersNumber, changeDateToTime } from '../../util/utils';
import Tags from '../common/Tags';
import palette from '../../styles/palette';
import DateTimeChange from '../common/DateTimeChange';
+import IntroduceActionButtons from './IntroduceActionButtons';
const IntroduceReferenceWrapper = styled.div`
font-size: 1.1rem;
@@ -79,6 +80,11 @@ const IntroduceContent = styled.div`
padding: 1.5rem;
`;
+const IntroduceFooter = styled.div`
+ display: flex;
+ justify-content: space-between;
+`;
+
const IntroduceForm = ({
group, realTime,
}) => {
@@ -117,7 +123,10 @@ const IntroduceForm = ({
소개
-
+
+
+
+
>
);
};