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 = ({ 소개 - + + + + ); };