~23.03.29 작업사항

client/components/ChallengeIcon/index.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import Image from 'next/image';
 import { DDRAGON_BASE_URL } from '../../utils/ddragon';
+import LazyImage from '../LazyImage';
 
 interface ChallengIconProps {
   id: number;
@@ -12,8 +12,8 @@ interface ChallengIconProps {
 
 export default function ChallengeIcon({ id, tier, value, width, height }: ChallengIconProps) {
   return (
-    <Image
-      css={css`
+    <LazyImage
+      innerCss={css`
         border-radius: 50%;
       `}
       src={`${DDRAGON_BASE_URL}img/challenges-images/${id}-${tier}.png`}

client/components/ChampionPic/index.tsx

@@ -1,8 +1,8 @@
-import Image from 'next/image';
 import { css } from '@emotion/react';
 import { useRecoilValueLoadable } from 'recoil';
 import { ddragonChampions } from '../../states/ddragon';
 import { DDRAGON_BASE_URL, DEAFULT_PLACEHOLDER } from '../../utils/ddragon';
+import LazyImage from '../LazyImage';
 
 interface ChampionPicProps {
   championKey: string | number;
@@ -33,8 +33,8 @@ export default function ChampionPic({
       : DEAFULT_PLACEHOLDER;
 
   return (
-    <Image
-      css={style[shape]}
+    <LazyImage
+      innerCss={style[shape]}
       src={src}
       width={width}
       height={height}

client/components/Footer/index.tsx

@@ -0,0 +1,54 @@
+import { css } from '@emotion/react';
+import { useGlobalTheme } from '../../styles/GlobalThemeContext';
+import { Theme } from '../../styles/theme';
+import Github from '/assets/github-mark.svg';
+
+const style = (theme: Theme) => css`
+  height: 100px;
+  width: auto;
+  margin-top: 30px;
+  padding: 0 40px 0 40px;
+  user-select: none;
+
+  text-align: center;
+  * {
+    text-decoration: none;
+    display: inline;
+    line-height: 40px;
+    font-size: 15px;
+    color: ${theme.foreground};
+    margin-right: 15px;
+  }
+  svg {
+    vertical-align: middle;
+    margin-right: 5px;
+    height: 20px;
+  }
+  p {
+    margin: 0;
+    line-height: 40px;
+    font-size: 12px;
+  }
+`;
+
+export default function Footer() {
+  const { theme } = useGlobalTheme();
+  const github = 'https://github.com/chococookie-lol/BARAM/';
+  return (
+    <div css={style(theme)}>
+      <span>© 2023 BARAM</span>
+      <span>·</span>
+      <a href="mailto: [email protected]">[email protected]</a>
+      <span>·</span>
+      <Github href={github} />
+      <a href={github}>Github</a>
+      <br />
+      <p>
+        BARAM isn&apos;t endorsed by Riot Games and doesn&apos;t reflect the views or opinions of
+        Riot Games or anyone officially involved in producing or managing Riot Games properties.
+        Riot Games, and all associated properties are trademarks or registered trademarks of Riot
+        Games, Inc.
+      </p>
+    </div>
+  );
+}

client/components/GameSlot/index.tsx

@@ -169,7 +169,7 @@ const GameSlotSummary = React.memo(function GameSlotSummary({
   return (
     <div css={style.gameSummary}>
       <div css={[style.item, style.champion]}>
-        <div css={[style.bottomRight, style.level]}>{level}</div>
+        <div css={[style.bottomRight, style.level, style.front]}>{level}</div>
         <ChampionPic championKey={championId} version={version} width={80} height={80} />
       </div>
       <div css={[style.item]}>
@@ -185,7 +185,7 @@ const GameSlotSummary = React.memo(function GameSlotSummary({
             />
           </div>
           <div css={style.middle}>
-            <div css={style.bottomRight}>
+            <div css={[style.bottomRight, style.front]}>
               <RuneIcon version={version} styleId={secondaryRuneStyle} width={20} height={20} />
             </div>
             <RuneIcon
@@ -309,7 +309,7 @@ function GameSlotRow({ version, participant }: GameSlotRowProps) {
     <tr css={detailStyle.container}>
       <td>
         <div css={detailStyle.champion}>
-          <div css={detailStyle.level}>{participant.champLevel}</div>
+          <div css={[detailStyle.level, style.front]}>{participant.champLevel}</div>
           <ChampionPic
             championKey={participant.championId}
             version={version}

client/components/GameSlot/style.ts

@@ -53,6 +53,9 @@ export const style = {
     right: 0;
     bottom: 0;
   `,
+  front: css`
+    z-index: 1;
+  `,
   level: css`
     background-color: #000000ce;
     width: 20px;

client/components/ItemIcon/index.tsx

@@ -1,6 +1,6 @@
-import Image from 'next/image';
 import { css } from '@emotion/react';
 import { DDRAGON_BASE_URL, DEAFULT_PLACEHOLDER_GRAY } from '../../utils/ddragon';
+import LazyImage from '../LazyImage';
 
 interface ItemIconProps {
   id: number;
@@ -16,5 +16,5 @@ const style = css`
 export default function ItemIcon({ id, version, width, height }: ItemIconProps) {
   const src = id ? `${DDRAGON_BASE_URL}${version}/img/item/${id}.png` : DEAFULT_PLACEHOLDER_GRAY;
 
-  return <Image css={style} src={src} width={width} height={height} alt={id.toString()} />;
+  return <LazyImage innerCss={style} src={src} width={width} height={height} alt={id.toString()} />;
 }

client/components/LazyImage/index.tsx

@@ -0,0 +1,26 @@
+import { SerializedStyles } from '@emotion/react';
+import Image from 'next/image';
+import { DEAFULT_PLACEHOLDER_GRAY } from '../../utils/ddragon';
+
+interface LazyImageProps {
+  src: string;
+  width?: number;
+  height?: number;
+  alt: string;
+  innerCss?: SerializedStyles;
+}
+
+export default function LazyImage({ src, width, height, alt, innerCss }: LazyImageProps) {
+  return (
+    <Image
+      src={src}
+      width={width}
+      height={height}
+      alt={alt}
+      css={innerCss}
+      placeholder="blur"
+      blurDataURL={DEAFULT_PLACEHOLDER_GRAY}
+      loading="lazy"
+    />
+  );
+}

client/components/Logo/index.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { useRouter } from 'next/router';
 import { useGlobalTheme } from '../../styles/GlobalThemeContext';
 import LogoSvg from '/assets/logo.svg';
 
@@ -9,13 +10,23 @@ interface LogoProps {
 
 export default function Logo({ width, height }: LogoProps) {
   const context = useGlobalTheme();
+  const router = useRouter();
+
   return (
-    <LogoSvg
-      css={css`
-        ${width ? `width: ${width}px;` : null}
-        ${height ? `height: ${height}px;` : null}
-      `}
-      fill={context.theme.accent1}
-    />
+    <div
+      onClick={() => {
+        if (router.isReady) {
+          router.push('/');
+        }
+      }}
+    >
+      <LogoSvg
+        css={css`
+          ${width ? `width: ${width}px;` : null}
+          ${height ? `height: ${height}px;` : null}
+        `}
+        fill={context.theme.accent1}
+      />
+    </div>
   );
 }

client/components/RuneIcon/index.tsx

@@ -1,4 +1,3 @@
-import Image from 'next/image';
 import { useRecoilValueLoadable } from 'recoil';
 import { ddragonRunes } from '../../states/ddragon';
 import {
@@ -7,6 +6,7 @@ import {
   runeIdToIcon,
   runeStyleIdToIcon,
 } from '../../utils/ddragon';
+import LazyImage from '../LazyImage';
 import { style } from './style';
 
 interface RuneIconProps {
@@ -30,7 +30,7 @@ export default function RuneIcon({ version, styleId, runeId, width, height }: Ru
 
   return (
     <div css={style(width, height)}>
-      <Image src={src} width={width} height={height} alt={'rune'} />
+      <LazyImage src={src} width={width} height={height} alt={'rune'} />
     </div>
   );
 }

client/components/SearchBar/style.ts

@@ -16,7 +16,7 @@ export const style = {
     left: 14px;
     font-size: 16px;
     width: calc(100% - 70px);
-    height: 55px;
+    height: 45px;
   `,
   flex: css`
     height: 100%;

client/components/SpellIcon/index.tsx

@@ -1,12 +1,8 @@
-import Image from 'next/image';
 import { css } from '@emotion/react';
 import { useRecoilValueLoadable } from 'recoil';
 import { ddragonSpells } from '../../states/ddragon';
-import {
-  DDRAGON_BASE_URL,
-  DEAFULT_PLACEHOLDER,
-  spellIdToIcon,
-} from '../../utils/ddragon';
+import { DDRAGON_BASE_URL, DEAFULT_PLACEHOLDER, spellIdToIcon } from '../../utils/ddragon';
+import LazyImage from '../LazyImage';
 
 interface SpellIconProps {
   version: string;
@@ -24,8 +20,8 @@ export default function SpellIcon({ version, id, width, height }: SpellIconProps
       : DEAFULT_PLACEHOLDER;
 
   return (
-    <Image
-      css={css`
+    <LazyImage
+      innerCss={css`
         border-radius: 13%;
       `}
       src={src}

client/components/SpellStrip/index.tsx

@@ -13,14 +13,14 @@ interface SpellStripProps {
 const style = {
   vertical: (padding: number) => css`
     margin-top: -${padding}px;
-    & > * {
+    div > img {
       display: block;
       margin-top: ${padding}px;
     }
   `,
   horizontal: (padding: number) => css`
     margin-left: -${padding}px;
-    & > * {
+    div > img {
       display: inline-block;
       margin-left: ${padding}px;
     }

client/components/SummonerProfilePic/index.tsx

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
-import Image from 'next/image';
 import { useRecoilValueLoadable } from 'recoil';
 import { ddragonVersion } from '../../states/ddragon';
 import { DDRAGON_BASE_URL, DEAFULT_PLACEHOLDER } from '../../utils/ddragon';
+import LazyImage from '../LazyImage';
 
 interface SummonerProfilePicProps {
   id: number;
@@ -17,8 +17,8 @@ export default function SummonerProfilePic({ id, width, height }: SummonerProfil
       ? `${DDRAGON_BASE_URL}${version.contents}/img/profileicon/${id}.png`
       : DEAFULT_PLACEHOLDER;
   return (
-    <Image
-      css={css`
+    <LazyImage
+      innerCss={css`
         border-radius: 10px;
       `}
       src={src}

client/pages/_app.tsx

@@ -2,12 +2,14 @@ import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import GlobalThemeProvider from '../styles/GlobalThemeContext';
 import { RecoilRoot } from 'recoil';
+import Footer from '../components/Footer';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <GlobalThemeProvider>
       <RecoilRoot>
         <Component {...pageProps} />
+        <Footer />
       </RecoilRoot>
     </GlobalThemeProvider>
   );

client/pages/index.tsx

@@ -15,7 +15,7 @@ const style = {
   `,
   container: css`
     width: 100%;
-    height: 100%;
+    height: 900px;
     position: relative;
   `,
   center: css`