[Improve & Refactor] Create common Styled component for button and Link

src/App.test.jsx

@@ -41,6 +41,7 @@ describe('App', () => {
           userEmail: '',
           password: '',
         },
+        user: given.user,
       },
     }));
   });
@@ -71,6 +72,7 @@ describe('App', () => {
 
   context('with path /write', () => {
     given('group', () => (null));
+    given('user', () => ('user1'));
     it('renders the study write page', () => {
       const { container } = renderApp({ path: '/write' });
 

src/components/common/DateTimeChange.jsx

@@ -48,7 +48,7 @@ const DateTimeChange = ({ group, page, time }) => {
 
     return (
       <DateTimeStatus status="introduceRecruit">
-        <Moment fromNow>{applyEndTime}</Moment>
+        <Moment fromNow style={{ fontFamily: 'Gamja Flower, cursive' }}>{applyEndTime}</Moment>
         &nbsp;모집 마감
       </DateTimeStatus>
     );

src/components/common/Header.jsx

@@ -6,6 +6,7 @@ import styled from '@emotion/styled';
 
 import Responsive from '../../styles/Responsive';
 import palette from '../../styles/palette';
+import Button from '../../styles/Button';
 
 const HeaderWrapper = styled.div`
   position: fixed;
@@ -19,8 +20,11 @@ const Wrapper = styled(Responsive)`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  div{
-    margin-right: 4rem;
+`;
+
+const UserStatusWrapper = styled.div`
+  span {
+    margin-right: 1rem;
   }
 `;
 
@@ -29,16 +33,6 @@ const TitleWrapper = styled(Link)`
   font-size: 1.8rem;
 `;
 
-const LinkWrapper = styled(Link)`
-  :first-of-type{
-    margin-right: 1rem;
-  }
-  :hover {
-    color: ${palette.gray[6]};
-  }
-  font-weight: bold;
-`;
-
 const Spacer = styled.div`
   height: 6rem;
 `;
@@ -49,19 +43,19 @@ const Header = ({ user, onLogout }) => (
       <Wrapper>
         <TitleWrapper to="/">제목(미정)</TitleWrapper>
         {user ? (
-          <div>
+          <UserStatusWrapper>
             <span>{user}</span>
-            <button
+            <Button
+              warn
               onClick={onLogout}
-              type="button"
             >
               로그아웃
-            </button>
-          </div>
+            </Button>
+          </UserStatusWrapper>
         ) : (
           <div>
-            <LinkWrapper to="/login">로그인</LinkWrapper>
-            <LinkWrapper to="/register">회원가입</LinkWrapper>
+            <Button to="/login" style={{ marginRight: '0.5rem' }}>로그인</Button>
+            <Button to="/register" success>회원가입</Button>
           </div>
         )}
       </Wrapper>

src/components/introduce/ApplyStatusButton.jsx

@@ -2,7 +2,46 @@ import React from 'react';
 
 import styled from '@emotion/styled';
 
-const ApplyStatusButtonWrapper = styled.button``;
+import palette from '../../styles/palette';
+
+const ApplyStatusButtonWrapper = styled.button`
+  display: inline-flex;
+  align-items: center;
+  margin: .5rem 0 .5rem 0;
+  padding: 0.25rem 5rem;
+  font-size: 1.5em;
+  line-height: 0;
+  font-family: 'Gamja Flower', cursive;
+  border-radius: 0.4rem;
+  border: none;
+  outline: none;
+
+  &.deadline {
+    cursor: not-allowed;
+    background: ${palette.gray[3]};
+    color: ${palette.gray[5]};
+  }
+
+  &.apply-complete {
+    background: ${palette.gray[1]};
+    border: 2px solid #a5d8ff;
+    color: #74c0fc;
+  }
+
+  &.apply {
+    color: white;
+    cursor: pointer;
+    background: ${palette.teal[5]};
+    &:hover{
+      background: ${palette.teal[4]};
+    }
+  }
+
+  &.no-login{
+    cursor: not-allowed;
+    color: ${palette.gray[5]};
+  }
+`;
 
 const ApplyStatusButton = ({
   timeStatus, onApply, user, applyStatus,
@@ -11,7 +50,7 @@ const ApplyStatusButton = ({
     return (
       <ApplyStatusButtonWrapper
         type="button"
-        className="deadline"
+        className="apply-complete"
       >
         신청 완료
       </ApplyStatusButtonWrapper>
@@ -33,7 +72,7 @@ const ApplyStatusButton = ({
     return (
       <ApplyStatusButtonWrapper
         type="button"
-        className="deadline"
+        className="no-login"
       >
         로그인 후 신청 가능합니다.
       </ApplyStatusButtonWrapper>

src/components/introduce/StudyIntroduceForm.jsx

@@ -26,32 +26,6 @@ const IntroduceHeaderWrapper = styled.div`
     line-height: 1.5;
     margin: 0;
   }
-  // TODO: 추후 공통 버튼 style component로 변경
-  button {
-    display: inline-flex;
-    align-items: center;
-    margin: .5rem 0 .5rem 0;
-    padding: 0.25rem 5rem;
-    font-size: 1.5em;
-    line-height: 0;
-    font-family: 'Gamja Flower', cursive;
-    border-radius: 0.4rem;
-    border: none;
-    outline: none;
-  }
-  .deadline{
-    cursor: not-allowed;
-    background: ${palette.gray[3]};
-    color: ${palette.gray[5]};
-  }
-  .apply{
-    color: white;
-    cursor: pointer;
-    background: ${palette.teal[5]};
-    &:hover{
-      background: ${palette.teal[4]};
-    }
-  }
 `;
 
 const IntroduceReferenceWrapper = styled.div`

src/components/main/StudyGroups.jsx

@@ -1,12 +1,9 @@
 import React from 'react';
 
-import { Link } from 'react-router-dom';
-
 import styled from '@emotion/styled';
 
-import palette from '../../styles/palette';
-
 import StudyGroup from './StudyGroup';
+import Button from '../../styles/Button';
 
 const StudyGroupsWrapper = styled.div`
   display: flex;
@@ -19,28 +16,18 @@ const TitleHeader = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  // TODO: Link 공통 style component 만들기
-  a {
-    margin-right: 4rem;
-    padding: .6rem .9rem .6rem .9rem;
-    border: 1px solid ${palette.gray[7]};
-    background: white;
-    color: ${palette.gray[7]};
-    font-weight: bold;
-    border-radius: .7rem;
-    :hover {
-      color: white;
-      background: ${palette.gray[7]};
-    }
-  }
 `;
 
 const StudyGroups = ({ groups, realTime, user }) => (
   <>
     <TitleHeader>
       <h2>지금 바로 시작하세요!</h2>
       {user && (
-        <Link to="/write">스터디 개설하기</Link>
+        <Button
+          to="/write"
+        >
+          스터디 개설하기
+        </Button>
       )}
     </TitleHeader>
     <StudyGroupsWrapper>

src/containers/common/HeaderContainer.jsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
 
-import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getAuth } from '../../util/utils';
@@ -10,15 +9,12 @@ import Header from '../../components/common/Header';
 
 const HeaderContainer = () => {
   const dispatch = useDispatch();
-  const history = useHistory();
 
   const user = useSelector(getAuth('user'));
 
   const onLogout = useCallback(() => {
     dispatch(requestLogout());
-
-    history.push('/');
-  }, [dispatch, history]);
+  }, [dispatch]);
 
   return (
     <Header

src/containers/common/HeaderContainer.test.jsx

@@ -7,21 +7,11 @@ import { fireEvent, render } from '@testing-library/react';
 
 import HeaderContainer from './HeaderContainer';
 
-const mockPush = jest.fn();
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory() {
-    return { push: mockPush };
-  },
-}));
-
 describe('HeaderContainer', () => {
   const dispatch = jest.fn();
 
   beforeEach(() => {
     dispatch.mockClear();
-    mockPush.mockClear();
 
     useDispatch.mockImplementation(() => dispatch);
 
@@ -58,7 +48,6 @@ describe('HeaderContainer', () => {
       fireEvent.click(button);
 
       expect(dispatch).toBeCalled();
-      expect(mockPush).toBeCalledWith('/');
     });
   });
 

src/containers/write/WriteButtonsContainer.jsx

@@ -11,9 +11,7 @@ import WriteButtons from '../../components/write/WriteButtons';
 
 const isCheckApplyEndDate = (applyDate) => Date.now() - applyDate >= 0;
 
-const {
-  NO_INPUT, NO_TAG, FAST_APPLY_DEADLINE, NO_LOGGED_IN,
-} = ERROR_MESSAGE;
+const { NO_INPUT, NO_TAG, FAST_APPLY_DEADLINE } = ERROR_MESSAGE;
 
 const WriteButtonsContainer = () => {
   const [error, setError] = useState(null);
@@ -31,13 +29,13 @@ const WriteButtonsContainer = () => {
 
   const applyEndTime = new Date(applyEndDate).getTime();
 
-  const onSubmit = () => {
-    // TODO: 모달창으로 처리 후 redirection 시키기?
+  useEffect(() => {
     if (!user) {
-      setError(NO_LOGGED_IN);
-      return;
+      history.push('/');
     }
+  }, [user, history]);
 
+  const onSubmit = () => {
     if (isCheckValidate([title, applyEndDate, personnel])) {
       setError(NO_INPUT);
       return;

src/containers/write/WriteButtonsContainer.test.jsx

@@ -185,12 +185,10 @@ describe('WriteButtonsContainer', () => {
         ],
       }));
 
-      it('renders error message "Please use after logging in"', () => {
-        const { container, getByText } = renderWriteButtonsContainer();
+      it('go to redirection main page', () => {
+        renderWriteButtonsContainer();
 
-        fireEvent.click(getByText('등록하기'));
-
-        expect(container).toHaveTextContent('로그인 후 이용하세요.');
+        expect(mockPush).toBeCalledWith('/');
       });
     });
   });

src/index.css

@@ -4,10 +4,12 @@ font-family: 'Gamja Flower', cursive;
 font-family: 'Nanum Pen Script', cursive;
 */
 @import url('//cdn.jsdelivr.net/gh/wan2land/d2coding/d2coding-full.css');
-
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap');
+/* font-family: 'Noto Sans KR', sans-serif; */
 
 * {
   box-sizing: inherit;
+  font-family: 'Noto Sans KR', sans-serif;
 }
 
 a {

src/pages/WritePage.test.jsx

@@ -21,7 +21,7 @@ describe('WritePage', () => {
         },
       },
       authReducer: {
-        user: null,
+        user: 'user1',
       },
     }));
   });