5 |
27 | `;
28 |
--------------------------------------------------------------------------------
/src/components/base/hooks/useHeader.ts:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from 'react-redux';
2 | import { useCallback } from 'react';
3 | import { showAuthModal } from '../../../modules/core';
4 | import { RootState } from '../../../modules';
5 | import { logout } from '../../../lib/api/auth';
6 | import storage from '../../../lib/storage';
7 | import { useMutation } from '@apollo/react-hooks';
8 | import { LOGOUT } from '../../../lib/graphql/user';
9 |
10 | export default function useHeader() {
11 | const dispatch = useDispatch();
12 | const user = useSelector((state: RootState) => state.core.user);
13 | const customHeader = useSelector((state: RootState) => state.header);
14 | const [graphqlLogout] = useMutation(LOGOUT);
15 |
16 | const onLoginClick = useCallback(() => {
17 | dispatch(showAuthModal('LOGIN'));
18 | }, [dispatch]);
19 |
20 | const onLogout = useCallback(async () => {
21 | try {
22 | await Promise.all([logout(), graphqlLogout()]);
23 | } catch {}
24 | storage.removeItem('CURRENT_USER');
25 | window.location.href = '/';
26 | }, [graphqlLogout]);
27 |
28 | return { user, onLoginClick, onLogout, customHeader };
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/base/hooks/useThemeEffect.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import { RootState } from '../../../modules';
4 | import darkMode from '../../../modules/darkMode';
5 |
6 | export function useThemeEffect() {
7 | const dispatch = useDispatch();
8 | const theme = useSelector((state: RootState) => state.darkMode.theme);
9 |
10 | useEffect(() => {
11 | const systemPrefersDark = window.matchMedia(
12 | '(prefers-color-scheme: dark)',
13 | ).matches;
14 | dispatch(
15 | darkMode.actions.setSystemTheme(systemPrefersDark ? 'dark' : 'light'),
16 | );
17 | }, [dispatch]);
18 |
19 | useEffect(() => {
20 | if (theme !== 'default') {
21 | document.body.dataset.theme = theme;
22 | }
23 | }, [theme]);
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/base/hooks/useToggleTheme.ts:
--------------------------------------------------------------------------------
1 | import { useDispatch } from 'react-redux';
2 | import { useTheme } from '../../../lib/hooks/useTheme';
3 | import storage from '../../../lib/storage';
4 | import darkMode from '../../../modules/darkMode';
5 |
6 | export function useToggleTheme() {
7 | const dispatch = useDispatch();
8 | const theme = useTheme();
9 |
10 | const saveToStorage = (value: 'light' | 'dark') => {
11 | storage.setItem('theme', value); // For CSR
12 | // save to cookie
13 | document.cookie = `theme=${value}; path=/;`; // For SSR
14 | };
15 |
16 | const toggle = () => {
17 | if (!theme) return;
18 | if (theme === 'dark') {
19 | dispatch(darkMode.actions.enableLightMode());
20 | saveToStorage('light');
21 | } else {
22 | dispatch(darkMode.actions.enableDarkMode());
23 | saveToStorage('dark');
24 | }
25 | };
26 |
27 | return [theme, toggle] as const;
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/common/EditRemoveGroup.tsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { themedPalette } from '../../lib/styles/themes';
3 |
4 | const EditRemoveGroup = styled.div`
5 | button {
6 | padding: 0;
7 | outline: none;
8 | border: none;
9 | background: none;
10 | font-size: inherit;
11 | cursor: pointer;
12 | color: ${themedPalette.text3};
13 | &:hover {
14 | color: ${themedPalette.text1};
15 | }
16 | }
17 | button + button {
18 | margin-left: 0.5rem;
19 | }
20 | `;
21 |
22 | export default EditRemoveGroup;
23 |
--------------------------------------------------------------------------------
/src/components/common/FlatPostCardList.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import styled from 'styled-components';
3 | import PostCard, { PostCardSkeleton } from './FlatPostCard';
4 | import { PartialPost } from '../../lib/graphql/post';
5 | import { themedPalette } from '../../lib/styles/themes';
6 |
7 | const PostCardListBlock = styled.div``;
8 |
9 | interface PostCardListProps {
10 | posts: PartialPost[];
11 | hideUser?: boolean;
12 | }
13 |
14 | const PostCardList: React.FC
8 | 
12 |
25 |
26 |
12 |
25 |
5 |
8 |
39 | `;
40 |
--------------------------------------------------------------------------------
/src/components/error/CrashErrorScreen.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ErrorScreenTemplate from './ErrorScreenTemplate';
3 | import { undrawBugFixing } from '../../static/images';
4 | import { useHistory } from 'react-router-dom';
5 |
6 | export type CrashErrorScreenProps = {
7 | onResolve: () => void;
8 | };
9 |
10 | function CrashErrorScreen({ onResolve }: CrashErrorScreenProps) {
11 | const history = useHistory();
12 | return (
13 |
11 |
38 |
14 |
37 |
17 |
36 | 18 | 제목 19 |
20 | 25 | 35 |{title}
16 | {children} 17 |{count}개의 댓글
35 |환영합니다!
42 |기본 회원 정보를 등록해주세요.
43 | {children}
44 |
5 |
21 | `;
22 |
--------------------------------------------------------------------------------
/src/components/saves/SavesTemplate.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import VelogResponsive from '../velog/VelogResponsive';
3 | import styled from 'styled-components';
4 | import PageTemplate from '../base/PageTemplate';
5 | import { themedPalette } from '../../lib/styles/themes';
6 | import media from '../../lib/styles/media';
7 |
8 | export interface SavesTemplateProps {
9 | children: React.ReactNode;
10 | }
11 |
12 | const StyledVelogResponsive = styled(VelogResponsive)`
13 | margin-top: 5rem;
14 | & > h1 {
15 | line-height: 1.5;
16 | font-size: 3rem;
17 | margin-top: 0;
18 | margin-bottom: 3rem;
19 | color: ${themedPalette.text1};
20 | }
21 |
22 | ${media.medium} {
23 | padding-left: 1rem;
24 | padding-right: 1rem;
25 | }
26 | ${media.small} {
27 | width: 100%;
28 | margin-top: 2rem;
29 | & > h1 {
30 | font-size: 2.5rem;
31 | margin-bottom: 1.5rem;
32 | }
33 | }
34 | `;
35 |
36 | function SavesTemplate({ children }: SavesTemplateProps) {
37 | return (
38 |
8 |
20 | 9 | 환영합니다! 10 |
11 |
14 | 기본 회원 정보를 등록해주세요.
15 |
16 |
19 | 임시 글 목록
41 | {children} 42 |
11 | 메일이 전송되었습니다. 받은 편지함을 확인하세요.
12 |
13 | 28 | 확인을 누르시면 지금까지 입력하신 모든 내용이 마크다운 포맷으료 29 | 변환됩니다. 30 |
31 |
32 |
33 | 주의: 변환 후 코드블록의 언어 타입을 수동으로 입력해주셔야
34 | 합니다.
35 |
*/}
36 | {title}
35 |{children}
36 |
5 |
8 |
45 | `;
46 |
--------------------------------------------------------------------------------
/src/components/write/__tests__/__snapshots__/MarkdownPreview.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`MarkdownPreview matches snapshot 1`] = `
4 |
11 |
44 |
14 |
43 |
17 |
42 | 18 | 마크다운 에디터로 전환 19 |
20 | 25 | 41 |
5 |
21 | `;
22 |
--------------------------------------------------------------------------------
/src/components/write/__tests__/__snapshots__/PublishActionButtons.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`PublishActionButtons matches snapshot 1`] = `
4 |
9 |
12 |
20 |
15 |
18 |
19 |
5 |
24 | `;
25 |
--------------------------------------------------------------------------------
/src/components/write/__tests__/__snapshots__/PublishPreview.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`PublishPreview matches snapshot 1`] = `
4 |
8 |
15 |
22 |
23 |
5 |
8 |
53 |
54 | `;
55 |
--------------------------------------------------------------------------------
/src/components/write/__tests__/__snapshots__/PublishPrivacySetting.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`PublishPrivacySetting matches snapshot 1`] = `
4 | 9 | 포스트 미리보기 10 |
11 |
14 |
52 |
17 |
34 |
20 |
33 |
23 |
26 |
31 |
32 |
37 |
51 | 38 | 타이틀 39 |
40 | 44 |
47 | 0
48 | /150
49 |
50 |
5 |
8 |
40 |
41 | `;
42 |
--------------------------------------------------------------------------------
/src/components/write/__tests__/__snapshots__/PublishScreenTemplate.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`PublishScreenTemplate matches snapshot 1`] = `
4 | 9 | 공개 설정 10 |
11 |
14 |
26 |
38 |
39 |
5 |
27 | `;
28 |
--------------------------------------------------------------------------------
/src/components/write/__tests__/__snapshots__/PublishSection.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`PublishSection matches snapshot 1`] = `
4 |
8 |
26 |
11 |
25 |
14 | left
15 |
16 |
19 |
22 | right
23 |
24 |
5 |
8 |
17 |
18 | `;
19 |
--------------------------------------------------------------------------------
/src/components/write/__tests__/__snapshots__/PublishURLSetting.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`PublishURLSetting matches snapshot 1`] = `
4 | 9 | 섹션 제목 10 |
11 |
14 | 섹션 내용
15 |
16 |
5 |
8 |
31 |
32 | `;
33 |
--------------------------------------------------------------------------------
/src/components/write/__tests__/__snapshots__/TagInput.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`TagInput matches snapshot 1`] = `
4 | 9 | URL 설정 10 |
11 |
14 |
30 |
17 |
29 |
20 | /@
21 | velog
22 | /
23 |
24 |
28 |
5 |
19 | `;
20 |
--------------------------------------------------------------------------------
/src/components/write/__tests__/__snapshots__/WriteFooter.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`WriteFooter matches snapshot 1`] = `
4 |
8 |
14 |
17 |
18 |
5 |
46 | `;
47 |
--------------------------------------------------------------------------------
/src/containers/base/CommonPopup.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSelector, useDispatch } from 'react-redux';
3 | import { RootState } from '../../modules';
4 | import PopupOKCancel from '../../components/common/PopupOKCancel';
5 | import { closePopup } from '../../modules/core';
6 |
7 | export interface CommonPopupProps {}
8 |
9 | function CommonPopup(props: CommonPopupProps) {
10 | const popup = useSelector((state: RootState) => state.core.popup);
11 | const dispatch = useDispatch();
12 | const onConfirm = () => {
13 | dispatch(closePopup());
14 | };
15 | return (
16 |
8 |
28 |
45 |
31 |
37 |
43 |
44 |
14 |
19 |
5 |
19 | `;
20 |
--------------------------------------------------------------------------------
/src/containers/write/hooks/useSaveHotkey.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export default function useSaveHotKey
8 |
14 |
17 |
18 |