Show RequireLogin when enter settings page without auth

src/components/common/RequireLogin.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { undrawLogin } from '../../static/images';
+import styled, { css } from 'styled-components';
+import Button from './Button';
+import useRequireLogin from '../../lib/hooks/useRequireLogin';
+import palette from '../../lib/styles/palette';
+import media from '../../lib/styles/media';
+
+export type RequireLoginProps = {
+  hasMargin?: boolean;
+};
+
+function RequireLogin({ hasMargin }: RequireLoginProps) {
+  const requireLogin = useRequireLogin();
+
+  return (
+    <Block hasMargin={hasMargin}>
+      <img src={undrawLogin} alt="Please login" />
+      <h2>로그인 후 이용해주세요.</h2>
+      <Button onClick={requireLogin}>로그인</Button>
+    </Block>
+  );
+}
+
+const Block = styled.div<{ hasMargin?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+
+  img {
+    width: 12rem;
+    height: auto;
+    display: block;
+    ${media.medium} {
+      width: 8rem;
+    }
+  }
+  h2 {
+    font-weight: 400;
+    color: ${palette.gray8};
+    margin-top: 2rem;
+    ${media.small} {
+      font-size: 1.25rem;
+    }
+  }
+  ${props =>
+    props.hasMargin &&
+    css`
+      margin-top: 10rem;
+      ${media.medium} {
+        margin-top: 4rem;
+      }
+    `}
+`;
+
+export default RequireLogin;

src/components/common/__tests__/RequireLogin.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import RequireLogin, { RequireLoginProps } from '../RequireLogin';
+import renderWithRedux from '../../../lib/renderWithRedux';
+
+describe('RequireLogin', () => {
+  const setup = (props: Partial<RequireLoginProps> = {}) => {
+    const initialProps: RequireLoginProps = {};
+    const utils = renderWithRedux(
+      <RequireLogin {...initialProps} {...props} />,
+    );
+    return {
+      ...utils,
+    };
+  };
+  it('renders properly', () => {
+    setup();
+  });
+  it('calls requireLogin on button click', () => {
+    const utils = setup();
+    const button = utils.getByText('로그인');
+    fireEvent.click(button);
+    expect(utils.store.getState().core.auth.visible).toBe(true);
+  });
+  it('has no margin when hasMargin props is omitted', () => {
+    const utils = setup();
+    expect(utils.container.firstChild).not.toHaveStyle('margin-top: 10rem');
+  });
+  it('has margin when hasMargin is true', () => {
+    const utils = setup({ hasMargin: true });
+    expect(utils.container.firstChild).toHaveStyle('margin-top: 10rem');
+  });
+});

src/containers/setting/SettingUserProfileContainer.tsx

@@ -4,10 +4,13 @@ import useUpload from '../../lib/hooks/useUpload';
 import useS3Upload from '../../lib/hooks/useS3Upload';
 import useUserProfile from './hooks/useUserProfile';
 import useUpdateThumbnail from './hooks/useUpdateThumbnail';
+import useUser from '../../lib/hooks/useUser';
+import RequireLogin from '../../components/common/RequireLogin';
 
 export type SettingUserProfileContainerProps = {};
 
 function SettingUserProfileContainer(props: SettingUserProfileContainerProps) {
+  const user = useUser();
   const { profile, loading, update } = useUserProfile();
   const [upload] = useUpload();
   const [s3Upload, image, error] = useS3Upload();
@@ -29,6 +32,10 @@ function SettingUserProfileContainer(props: SettingUserProfileContainerProps) {
     return update(params);
   };
 
+  if (!user) {
+    return <RequireLogin hasMargin />;
+  }
+
   if (!profile) return null;
 
   return (

src/static/images/index.ts

@@ -8,5 +8,6 @@ export { default as undrawBugFixing } from './undraw_bug_fixing_oc7a.svg';
 export { default as undrawPageNotFound } from './undraw_page_not_found_su7k.svg';
 export { default as undrawServerDown } from './undraw_server_down_s4lk.svg';
 export { default as undrawUpdate } from './undraw_update_uxn2.svg';
+export { default as undrawLogin } from './undraw_login_v483.svg';
 
 // export { default as undrawSearching } from './undraw_searching.svg';