Show custom logo

Author: velopert

src/components/base/HeaderLogo.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { Logo } from '../../static/svg';
 import { UserLogo } from '../../modules/header';
+import palette from '../../lib/styles/palette';
 
 const createFallbackTitle = (username: string | null) => {
   if (!username) return null;
@@ -17,6 +18,10 @@ const HeaderLogoBlock = styled(Link)`
   display: flex;
   align-items: center;
   justify-content: center;
+  font-weight: bold;
+  color: ${palette.gray8};
+  font-size: 1.3125rem;
+  text-decoration: none;
 `;
 
 export interface HeaderLogoProps {
@@ -37,12 +42,12 @@ const HeaderLogo: React.FC<HeaderLogoProps> = ({
       </HeaderLogoBlock>
     );
   }
-
+  if (!userLogo) return null;
   if (!velogUsername) return null;
   const velogPath = `/@${velogUsername}`;
   return (
     <HeaderLogoBlock to={velogPath}>
-      {createFallbackTitle(velogUsername)}
+      {userLogo.title || createFallbackTitle(velogUsername)}
     </HeaderLogoBlock>
   );
 };

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

@@ -25,7 +25,45 @@ describe('HeaderLogo', () => {
     getByTestId('velog-logo');
   });
 
-  it('shows null when custom is true and data is not loaded', () => {});
-  it('shows custom velog title when custom is true data is loaded', () => {});
-  it('shows fallback velog title when velog title is null', () => {});
+  it('shows null when custom is true and data is not loaded', () => {
+    const utils = setup({
+      custom: true,
+      userLogo: null,
+      velogUsername: 'velopert',
+    });
+    expect(utils.container.innerHTML).toBe('');
+  });
+  it('shows custom velog title when custom is true and data is loaded', () => {
+    const { getByText } = setup({
+      custom: true,
+      userLogo: {
+        logo_image: null,
+        title: 'VELOPERT.LOG',
+      },
+      velogUsername: 'velopert',
+    });
+    getByText('VELOPERT.LOG');
+  });
+  it('shows fallback velog title when velog title is null', () => {
+    const { getByText } = setup({
+      custom: true,
+      userLogo: {
+        logo_image: null,
+        title: null,
+      },
+      velogUsername: 'velopert',
+    });
+    getByText(`velopert's velog`);
+  });
+  it('shows fallback velog title with username ends with s', () => {
+    const { getByText } = setup({
+      custom: true,
+      userLogo: {
+        logo_image: null,
+        title: null,
+      },
+      velogUsername: 'usernames',
+    });
+    getByText(`usernames' velog`);
+  });
 });