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 (
+
+ 
+ 로그인 후 이용해주세요.
+
+
+ );
+}
+
+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 @@
+
\ No newline at end of file