[Feature] Introduce revise button and delete button

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 = () => (
+  <IntroduceActionButtonsWrapper>
+    <ActionButton revise>수정</ActionButton>
+    <ActionButton remove>삭제</ActionButton>
+  </IntroduceActionButtonsWrapper>
+);
+
+export default IntroduceActionButtons;

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((
+    <IntroduceActionButtons />
+  ));
+
+  it('renders revise button and delete button', () => {
+    const { container } = renderIntroduceActionButtons();
+
+    expect(container).toHaveTextContent('수정');
+    expect(container).toHaveTextContent('삭제');
+  });
+});

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 = ({
         소개
       </IntroduceContentTitle>
       <IntroduceContent dangerouslySetInnerHTML={{ __html: contents }} />
-      <Tags tags={tags} />
+      <IntroduceFooter>
+        <Tags tags={tags} />
+        <IntroduceActionButtons />
+      </IntroduceFooter>
     </>
   );
 };