Skip to content

Commit e692508

Browse files
committed
Show custom logo
1 parent 6f21a00 commit e692508

File tree

2 files changed

+48
-5
lines changed

2 files changed

+48
-5
lines changed

src/components/base/HeaderLogo.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled from 'styled-components';
33
import { Link } from 'react-router-dom';
44
import { Logo } from '../../static/svg';
55
import { UserLogo } from '../../modules/header';
6+
import palette from '../../lib/styles/palette';
67

78
const createFallbackTitle = (username: string | null) => {
89
if (!username) return null;
@@ -17,6 +18,10 @@ const HeaderLogoBlock = styled(Link)`
1718
display: flex;
1819
align-items: center;
1920
justify-content: center;
21+
font-weight: bold;
22+
color: ${palette.gray8};
23+
font-size: 1.3125rem;
24+
text-decoration: none;
2025
`;
2126

2227
export interface HeaderLogoProps {
@@ -37,12 +42,12 @@ const HeaderLogo: React.FC<HeaderLogoProps> = ({
3742
</HeaderLogoBlock>
3843
);
3944
}
40-
45+
if (!userLogo) return null;
4146
if (!velogUsername) return null;
4247
const velogPath = `/@${velogUsername}`;
4348
return (
4449
<HeaderLogoBlock to={velogPath}>
45-
{createFallbackTitle(velogUsername)}
50+
{userLogo.title || createFallbackTitle(velogUsername)}
4651
</HeaderLogoBlock>
4752
);
4853
};

src/components/base/__tests__/HeaderLogo.test.tsx

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,45 @@ describe('HeaderLogo', () => {
2525
getByTestId('velog-logo');
2626
});
2727

28-
it('shows null when custom is true and data is not loaded', () => {});
29-
it('shows custom velog title when custom is true data is loaded', () => {});
30-
it('shows fallback velog title when velog title is null', () => {});
28+
it('shows null when custom is true and data is not loaded', () => {
29+
const utils = setup({
30+
custom: true,
31+
userLogo: null,
32+
velogUsername: 'velopert',
33+
});
34+
expect(utils.container.innerHTML).toBe('');
35+
});
36+
it('shows custom velog title when custom is true and data is loaded', () => {
37+
const { getByText } = setup({
38+
custom: true,
39+
userLogo: {
40+
logo_image: null,
41+
title: 'VELOPERT.LOG',
42+
},
43+
velogUsername: 'velopert',
44+
});
45+
getByText('VELOPERT.LOG');
46+
});
47+
it('shows fallback velog title when velog title is null', () => {
48+
const { getByText } = setup({
49+
custom: true,
50+
userLogo: {
51+
logo_image: null,
52+
title: null,
53+
},
54+
velogUsername: 'velopert',
55+
});
56+
getByText(`velopert's velog`);
57+
});
58+
it('shows fallback velog title with username ends with s', () => {
59+
const { getByText } = setup({
60+
custom: true,
61+
userLogo: {
62+
logo_image: null,
63+
title: null,
64+
},
65+
velogUsername: 'usernames',
66+
});
67+
getByText(`usernames' velog`);
68+
});
3169
});

0 commit comments

Comments
 (0)