From a3346bd4ae8296affee015b245cb03e6173f8247 Mon Sep 17 00:00:00 2001 From: velopert Date: Mon, 16 Mar 2020 23:36:33 +0900 Subject: [PATCH] Show RequireLogin when enter settings page without auth --- src/components/common/RequireLogin.tsx | 57 +++++++++++++++++++ .../common/__tests__/RequireLogin.test.tsx | 33 +++++++++++ .../setting/SettingUserProfileContainer.tsx | 7 +++ src/static/images/index.ts | 1 + src/static/images/undraw_login_v483.svg | 1 + 5 files changed, 99 insertions(+) create mode 100644 src/components/common/RequireLogin.tsx create mode 100644 src/components/common/__tests__/RequireLogin.test.tsx create mode 100644 src/static/images/undraw_login_v483.svg diff --git a/src/components/common/RequireLogin.tsx b/src/components/common/RequireLogin.tsx new file mode 100644 index 00000000..82cdbc0a --- /dev/null +++ b/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 ( + + Please login +

로그인 후 이용해주세요.

+ + + ); +} + +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; diff --git a/src/components/common/__tests__/RequireLogin.test.tsx b/src/components/common/__tests__/RequireLogin.test.tsx new file mode 100644 index 00000000..078807c8 --- /dev/null +++ b/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 = {}) => { + const initialProps: RequireLoginProps = {}; + const utils = renderWithRedux( + , + ); + 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'); + }); +}); diff --git a/src/containers/setting/SettingUserProfileContainer.tsx b/src/containers/setting/SettingUserProfileContainer.tsx index 9c07ac70..e726ad7c 100644 --- a/src/containers/setting/SettingUserProfileContainer.tsx +++ b/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 ; + } + if (!profile) return null; return ( diff --git a/src/static/images/index.ts b/src/static/images/index.ts index 90472990..b653b3b6 100644 --- a/src/static/images/index.ts +++ b/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'; diff --git a/src/static/images/undraw_login_v483.svg b/src/static/images/undraw_login_v483.svg new file mode 100644 index 00000000..dda61f9e --- /dev/null +++ b/src/static/images/undraw_login_v483.svg @@ -0,0 +1 @@ +Login \ No newline at end of file