Merge pull request #355 from hufscheer/feat/spectator/badge-league-lo…

…go-fixes
hufscheer · Nov 13, 2024 · c3337e7 · c3337e7
2 parents a01888c + 3ef0226
commit c3337e7
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 76 deletions.
diff --git a/apps/spectator/app/_components/GameList/Info.tsx b/apps/spectator/app/_components/GameList/Info.tsx
@@ -9,8 +9,6 @@ type GameInfoProps = {
   state: GameState;
 };
 
-const IMAGE_SIZE = 26;
-
 export default function GameInfo({ gameTeams, state }: GameInfoProps) {
   // todo: fisished 상태일 때 경기 승패를 score 색상으로 표시
   const [firstTeam, secondTeam] = gameTeams;
@@ -19,13 +17,15 @@ export default function GameInfo({ gameTeams, state }: GameInfoProps) {
     <div className={styles.infoContainer}>
       <div className={styles.gameInfoRow.root}>
         <div className={styles.gameInfoRow.team}>
-          <Image
-            src={firstTeam.logoImageUrl}
-            alt={`${firstTeam.gameTeamName} logo`}
-            width={IMAGE_SIZE}
-            height={IMAGE_SIZE}
-            loading="lazy"
-          />
+          <div className={styles.logoContainer}>
+            <Image
+              src={firstTeam.logoImageUrl}
+              alt={`${firstTeam.gameTeamName} logo`}
+              loading="lazy"
+              fill
+              className={styles.logoImg}
+            />
+          </div>
           <span className={styles.gameInfoRow.teamName}>
             {firstTeam.gameTeamName}
           </span>
@@ -34,13 +34,15 @@ export default function GameInfo({ gameTeams, state }: GameInfoProps) {
       </div>
       <div className={styles.gameInfoRow.root}>
         <div className={styles.gameInfoRow.team}>
-          <Image
-            src={secondTeam.logoImageUrl}
-            alt={`${secondTeam.gameTeamName} logo`}
-            width={IMAGE_SIZE}
-            height={IMAGE_SIZE}
-            loading="lazy"
-          />
+          <div className={styles.logoContainer}>
+            <Image
+              src={secondTeam.logoImageUrl}
+              alt={`${secondTeam.gameTeamName} logo`}
+              loading="lazy"
+              fill
+              className={styles.logoImg}
+            />
+          </div>
           <span className={styles.gameInfoRow.teamName}>
             {secondTeam.gameTeamName}
           </span>

diff --git a/apps/spectator/app/_components/GameList/styles.css.ts b/apps/spectator/app/_components/GameList/styles.css.ts
@@ -55,8 +55,20 @@ export const state = styleVariants({
       backgroundColor: theme.colors.red600,
     },
   ],
-  SCHEDULED: [baseState],
-  FINISHED: [baseState],
+  SCHEDULED: [
+    baseState,
+    {
+      color: theme.colors.blue600,
+      backgroundColor: theme.colors.blue200,
+    },
+  ],
+  FINISHED: [
+    baseState,
+    {
+      color: theme.colors.white,
+      backgroundColor: theme.colors.gray300,
+    },
+  ],
 });
 
 export const timestamp = style({
@@ -164,3 +176,15 @@ export const errorFallback = styleVariants({
     color: theme.colors.gray[5],
   },
 });
+
+export const logoContainer = style({
+  width: rem(26),
+  height: rem(26),
+  position: 'relative',
+});
+
+export const logoImg = style({
+  border: `1px solid ${theme.colors.gray50}`,
+  borderRadius: '50%',
+  objectFit: 'cover',
+});
diff --git a/apps/spectator/app/game/[id]/_components/CheerTalk/Item/Item.css.ts b/apps/spectator/app/game/[id]/_components/CheerTalk/Item/Item.css.ts
@@ -38,6 +38,8 @@ export const item = styleVariants({
   teamLogo: {
     userSelect: 'none',
     alignSelf: 'center',
+    border: `1px solid ${theme.colors.gray50}`,
+    borderRadius: '50%',
   },
   content: {
     padding: `${theme.spaces.xs} ${theme.spaces.sm}`,

diff --git a/apps/spectator/app/game/[id]/_components/CheerTalk/List/List.css.ts b/apps/spectator/app/game/[id]/_components/CheerTalk/List/List.css.ts
@@ -17,6 +17,14 @@ export const list = styleVariants({
   },
 });
 
+export const emptyMsg = style({
+  display: 'flex',
+  flex: 1,
+  fontSize: theme.textVariants.default.fontSize,
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
 export const scrollToBottomButton = style({
   position: 'absolute',
   display: 'flex',

diff --git a/apps/spectator/app/game/[id]/_components/CheerTalk/List/index.tsx b/apps/spectator/app/game/[id]/_components/CheerTalk/List/index.tsx
@@ -94,43 +94,50 @@ export default function CheerTalkList({
   }, [checkScrollHeight]);
 
   return (
-    <div className={styles.list.container}>
-      <ul ref={scrollRef} className={styles.list.content}>
-        {hasNextPage && <Spinner />}
-        <li ref={ref} />
-        {/* HTTP */}
-        {cheerTalkList.map(talk => (
-          <CheerTalkItemMemo
-            key={`cheer-${talk.cheerTalkId}`}
-            hasMenu
-            {...talk}
-          />
-        ))}
-
-        {/* Socket */}
-        {socketTalkList.map(talk => (
-          <CheerTalkItemMemo
-            key={`socket-${talk.cheerTalkId}`}
-            hasMenu
-            {...talk}
-          />
-        ))}
-        <li ref={bottomRef} />
-      </ul>
-      <CheerTalkForm
-        gameTeams={gameDetail.gameTeams}
-        saveCheerTalkMutate={mutate}
-        scrollToBottom={run}
-      />
-      {showScrollToBottomButton && (
-        <button
-          className={styles.scrollToBottomButton}
-          onClick={run}
-          type="button"
-        >
-          <Icon source={ArrowDownIcon} size={16} color="black" />
-        </button>
+    <>
+      {cheerTalkList.length === 0 && socketTalkList.length === 0 && (
+        <div className={styles.emptyMsg}>
+          지금 우리 팀에게 첫 응원톡을 남겨주세요! 💪
+        </div>
       )}
-    </div>
+      <div className={styles.list.container}>
+        <ul ref={scrollRef} className={styles.list.content}>
+          {hasNextPage && <Spinner />}
+          <li ref={ref} />
+          {/* HTTP */}
+          {cheerTalkList.map(talk => (
+            <CheerTalkItemMemo
+              key={`cheer-${talk.cheerTalkId}`}
+              hasMenu
+              {...talk}
+            />
+          ))}
+
+          {/* Socket */}
+          {socketTalkList.map(talk => (
+            <CheerTalkItemMemo
+              key={`socket-${talk.cheerTalkId}`}
+              hasMenu
+              {...talk}
+            />
+          ))}
+          <li ref={bottomRef} />
+        </ul>
+        <CheerTalkForm
+          gameTeams={gameDetail.gameTeams}
+          saveCheerTalkMutate={mutate}
+          scrollToBottom={run}
+        />
+        {showScrollToBottomButton && (
+          <button
+            className={styles.scrollToBottomButton}
+            onClick={run}
+            type="button"
+          >
+            <Icon source={ArrowDownIcon} size={16} color="black" />
+          </button>
+        )}
+      </div>
+    </>
   );
 }
diff --git a/apps/spectator/app/game/[id]/_components/CheerVS/TeamBox.tsx b/apps/spectator/app/game/[id]/_components/CheerVS/TeamBox.tsx
@@ -73,13 +73,15 @@ export default function CheerTeamBox({
       })}
       onClick={handleCheerClick}
     >
-      <Image
-        width={36}
-        height={36}
-        src={logoImageUrl}
-        alt={`${gameTeamName} 로고`}
-        loading="lazy"
-      />
+      <div className={styles.logoContainer}>
+        <Image
+          src={logoImageUrl}
+          alt={`${gameTeamName} 로고`}
+          loading="lazy"
+          fill
+          className={styles.logoImg}
+        />
+      </div>
       <span className={styles.countNumber}>
         {count.toLocaleString('ko-KR')}
       </span>

diff --git a/apps/spectator/app/game/[id]/_components/CheerVS/styles.css.ts b/apps/spectator/app/game/[id]/_components/CheerVS/styles.css.ts
@@ -128,3 +128,15 @@ export const skeleton = styleVariants({
     },
   ],
 });
+
+export const logoContainer = style({
+  width: rem(36),
+  height: rem(36),
+  position: 'relative',
+});
+
+export const logoImg = style({
+  border: `1px solid ${theme.colors.gray50}`,
+  borderRadius: '50%',
+  objectFit: 'cover',
+});
diff --git a/apps/spectator/app/game/[id]/_components/Lineup/index.tsx b/apps/spectator/app/game/[id]/_components/Lineup/index.tsx
@@ -21,13 +21,15 @@ export default function Lineup({ gameId }: LineupProps) {
       <div className={clsx(styles.container, styles.starterContainer)}>
         <div className={styles.teamContainer}>
           <div className={styles.team.left}>
-            <Image
-              src={homeTeam.logoImageUrl}
-              alt={`${homeTeam.teamName} logo image`}
-              width={28}
-              height={28}
-              loading="lazy"
-            />
+            <div className={styles.logoContainer}>
+              <Image
+                src={homeTeam.logoImageUrl}
+                alt={`${homeTeam.teamName} logo image`}
+                loading="lazy"
+                fill
+                className={styles.logoImg}
+              />
+            </div>
             <span className={styles.teamName.left}>{homeTeam.teamName}</span>
           </div>
 
@@ -42,13 +44,15 @@ export default function Lineup({ gameId }: LineupProps) {
         <div className={styles.teamContainer}>
           <div className={styles.team.right}>
             <span className={styles.teamName.right}>{awayTeam.teamName}</span>
-            <Image
-              src={awayTeam.logoImageUrl}
-              alt={`${awayTeam.teamName} logo image`}
-              width={28}
-              height={28}
-              loading="lazy"
-            />
+            <div className={styles.logoContainer}>
+              <Image
+                src={awayTeam.logoImageUrl}
+                alt={`${awayTeam.teamName} logo image`}
+                loading="lazy"
+                fill
+                className={styles.logoImg}
+              />
+            </div>
           </div>
 
           <PlayerList

diff --git a/apps/spectator/app/game/[id]/_components/Lineup/styles.css.ts b/apps/spectator/app/game/[id]/_components/Lineup/styles.css.ts
@@ -153,3 +153,15 @@ export const errorFallback = styleVariants({
     fontWeight: 500,
   },
 });
+
+export const logoContainer = style({
+  width: rem(28),
+  height: rem(28),
+  position: 'relative',
+});
+
+export const logoImg = style({
+  border: `1px solid ${theme.colors.gray50}`,
+  borderRadius: '50%',
+  objectFit: 'cover',
+});