From 12a20c4b876dad955cb149c3d50df6576e96f1f6 Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Wed, 29 Nov 2023 03:42:26 +0900
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20profile=20icon=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Icon/iconMap.ts          |  2 ++
 src/components/common/Icon/svg/Profile.tsx     | 18 ++++++++++++++++++
 .../common/MatchCard/pieces/Team.tsx           | 13 +++++--------
 3 files changed, 25 insertions(+), 8 deletions(-)
 create mode 100644 src/components/common/Icon/svg/Profile.tsx

diff --git a/src/components/common/Icon/iconMap.ts b/src/components/common/Icon/iconMap.ts
index 9ad7269..d537c42 100644
--- a/src/components/common/Icon/iconMap.ts
+++ b/src/components/common/Icon/iconMap.ts
@@ -10,6 +10,7 @@ import { Image } from './svg/Image';
 import { PaperPlane } from './svg/PaperPlane';
 import { Pencil } from './svg/Pencil';
 import { PlusCircled } from './svg/PlusCircled';
+import { Profile } from './svg/Profile';
 import { Symbol } from './svg/Symbol';
 import { ThumbsUp } from './svg/Thumbsup';
 import { Trash } from './svg/Trash';
@@ -32,4 +33,5 @@ export const iconMap = {
   thumbsUp: ThumbsUp,
   trash: Trash,
   write: Write,
+  profile: Profile,
 };
diff --git a/src/components/common/Icon/svg/Profile.tsx b/src/components/common/Icon/svg/Profile.tsx
new file mode 100644
index 0000000..6e782ca
--- /dev/null
+++ b/src/components/common/Icon/svg/Profile.tsx
@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+
+export const Profile = ({
+  viewBox = '0 0 20 20',
+  ...props
+}: ComponentProps<'svg'>) => {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox={viewBox}
+      {...props}
+    >
+      <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
+    </svg>
+  );
+};
diff --git a/src/components/common/MatchCard/pieces/Team.tsx b/src/components/common/MatchCard/pieces/Team.tsx
index bf745fa..5fff144 100644
--- a/src/components/common/MatchCard/pieces/Team.tsx
+++ b/src/components/common/MatchCard/pieces/Team.tsx
@@ -3,6 +3,8 @@ import Image from 'next/image';
 import { useMatchCardContext } from '@/hooks/useMatchCardContext';
 import { $ } from '@/utils/core';
 
+import { Icon } from '../../Icon';
+
 type TeamProps = {
   teamIndex: number;
   className?: string;
@@ -14,15 +16,10 @@ export default function Team({ teamIndex, className }: TeamProps) {
   if (gameTeams.length === 0) {
     return (
       <div className={$(className)}>
-        <svg
+        <Icon
+          iconName="profile"
           className="me-4 h-16 w-16 text-gray-200 dark:text-gray-700"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-        >
-          <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
-        </svg>
+        />
       </div>
     );
   }

From fecf355dda9cd7d2bd7d9d2c334e28c6f8b04844 Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Wed, 29 Nov 2023 04:59:56 +0900
Subject: [PATCH 2/6] =?UTF-8?q?chore:=20=ED=95=84=EC=9A=94=20=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F?=
 =?UTF-8?q?=20=EB=8C=93=EA=B8=80=20margin=20bottom=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/match/[id]/modify/page.tsx | 92 ------------------------------
 src/app/match/[id]/page.tsx        |  2 +-
 2 files changed, 1 insertion(+), 93 deletions(-)
 delete mode 100644 src/app/match/[id]/modify/page.tsx

diff --git a/src/app/match/[id]/modify/page.tsx b/src/app/match/[id]/modify/page.tsx
deleted file mode 100644
index e95f9bb..0000000
--- a/src/app/match/[id]/modify/page.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client';
-
-import { useParams, useRouter } from 'next/navigation';
-import { ChangeEvent, FormEvent, useState } from 'react';
-
-import { postGameScore } from '@/api/admin';
-import Input from '@/components/common/Input/Input';
-import { getUtcHours } from '@/utils/utc-times';
-
-export default function ModifyGame() {
-  const router = useRouter();
-  const params = useParams();
-  const id = Number(params.id);
-  const [scoreData, setScoreData] = useState({
-    playerName: '',
-    team: 0,
-    hour: new Date().getHours(),
-    minute: new Date().getMinutes(),
-  });
-
-  const handleChange = (
-    e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
-  ) => {
-    const { name, value } = e.target;
-
-    setScoreData(prev => ({ ...prev, [name]: value }));
-  };
-
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const date = getUtcHours({
-      hour: scoreData.hour,
-      minute: scoreData.minute,
-    });
-
-    postGameScore(id, {
-      playerName: scoreData.playerName,
-      team: scoreData.team,
-      scoredAt: date,
-    }).then(() => router.push('/'));
-  };
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <label htmlFor="playerName" className="my-5">
-        선수 이름
-        <Input
-          id="playerName"
-          name="playerName"
-          value={scoreData.playerName}
-          onChange={handleChange}
-          required
-        />
-      </label>
-
-      <p>득점한 팀</p>
-
-      <label htmlFor="scoreTime">
-        득점 시간
-        <div className="flex items-center justify-center gap-1">
-          <Input
-            id="scoreTime"
-            type="number"
-            name="hour"
-            value={scoreData.hour}
-            onChange={handleChange}
-            min={0}
-            max={23}
-            maxLength={2}
-          />
-          :
-          <Input
-            type="number"
-            name="minute"
-            value={scoreData.minute}
-            onChange={handleChange}
-            min={0}
-            max={59}
-            maxLength={2}
-          />
-        </div>
-      </label>
-      <button
-        type="submit"
-        className="disabled:pointer-none w-full rounded-md border border-slate-200 bg-green-600 px-4 py-2 text-white disabled:opacity-70"
-      >
-        저장하기
-      </button>
-    </form>
-  );
-}
diff --git a/src/app/match/[id]/page.tsx b/src/app/match/[id]/page.tsx
index 5ef4ff4..60e9dfd 100644
--- a/src/app/match/[id]/page.tsx
+++ b/src/app/match/[id]/page.tsx
@@ -115,7 +115,7 @@ export default function Match({ params }: { params: { id: string } }) {
                 <MatchCommentFetcher matchId={params.id}>
                   {({ commentList, matchTeams, ...data }) => (
                     <div className="max-h-[450px] overflow-y-auto p-5">
-                      <ul className="pb-8">
+                      <ul className="pb-10">
                         <CommentList
                           commentList={commentList.pages.flat()}
                           scrollToBottom={scrollToBottom}

From 463261c4a0a39cc21e5cfd75ea81160643734abf Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Wed, 29 Nov 2023 05:00:32 +0900
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=EB=A3=A8=EB=AF=B8=ED=81=90?=
 =?UTF-8?q?=EB=B8=8C=EC=9A=A9=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/rummikub/Cheer/index.tsx       | 55 ++++++++++++
 src/components/rummikub/MatchBanner/index.tsx | 89 +++++++++++++++++++
 src/components/rummikub/MatchItem/index.tsx   | 51 +++++++++++
 3 files changed, 195 insertions(+)
 create mode 100644 src/components/rummikub/Cheer/index.tsx
 create mode 100644 src/components/rummikub/MatchBanner/index.tsx
 create mode 100644 src/components/rummikub/MatchItem/index.tsx

diff --git a/src/components/rummikub/Cheer/index.tsx b/src/components/rummikub/Cheer/index.tsx
new file mode 100644
index 0000000..7f3c925
--- /dev/null
+++ b/src/components/rummikub/Cheer/index.tsx
@@ -0,0 +1,55 @@
+import { FallbackProps } from '@/components/common/ErrorBoundary';
+import CheerTeam from '@/components/match/CheerTeam';
+import { MatchCheerType } from '@/types/match';
+
+type CheerProps = {
+  cheers: MatchCheerType[];
+};
+
+export default function Cheer({ cheers }: CheerProps) {
+  const [firstTeam, secondTeam, thirdTeam, fourthTeam] = cheers;
+
+  return (
+    <div className="min-h-10 relative my-5 flex h-full w-full justify-center gap-5 p-2">
+      <div className="flex w-full flex-col gap-3">
+        <CheerTeam className="bg-cheer-left">
+          🤜
+          <span className="ml-3">{firstTeam.cheerCount}</span>
+        </CheerTeam>
+        <CheerTeam className="bg-[#fb923c] ">
+          🤜
+          <span className="ml-3">{thirdTeam.cheerCount}</span>
+        </CheerTeam>
+      </div>
+      <div className="absolute top-1/2 -translate-y-1/2 rounded-xl bg-white px-5 py-1 text-center font-bold text-gray-4">
+        VS
+      </div>
+      <div className="flex w-full flex-col gap-3">
+        <CheerTeam className="bg-cheer-right">
+          <span className="mr-3">{secondTeam.cheerCount}</span>
+          🤛
+        </CheerTeam>
+        <CheerTeam className="bg-[#22c55e]">
+          <span className="mr-3">{fourthTeam.cheerCount}</span>
+          🤛
+        </CheerTeam>
+      </div>
+    </div>
+  );
+}
+
+Cheer.ErrorFallback = function ErrorFallback({
+  resetErrorBoundary,
+}: FallbackProps) {
+  return (
+    <div className="min-h-10 relative my-5 flex h-full w-full flex-col items-center justify-center gap-5 p-2">
+      <div className="flex flex-wrap justify-center gap-x-1">
+        <span>응원하기를 불러올 수 없어요. </span>
+        <span>잠시 후 다시 시도해주세요!</span>
+      </div>
+      <button onClick={resetErrorBoundary} className="text-primary">
+        새로고침
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/rummikub/MatchBanner/index.tsx b/src/components/rummikub/MatchBanner/index.tsx
new file mode 100644
index 0000000..6875146
--- /dev/null
+++ b/src/components/rummikub/MatchBanner/index.tsx
@@ -0,0 +1,89 @@
+import { FallbackProps } from '@/components/common/ErrorBoundary';
+import { MatchCard } from '@/components/common/MatchCard';
+import { MatchType } from '@/types/match';
+
+export default function RummiKubMatchBanner(match: MatchType) {
+  return (
+    <MatchCard {...match} className="flex flex-col">
+      <MatchCard.Label className="absolute top-2 flex w-full justify-between px-2" />
+      <div className="flex h-full min-h-[200px] flex-col items-center justify-around rounded-xl bg-gray-1 shadow-lg">
+        <MatchCard.Background
+          viewBox="-13 117 120 50"
+          width={150}
+          height={170}
+          className="z-[0] h-[180px] fill-primary"
+        />
+        <MatchCard.Status className="mt-5 text-black" />
+        <div className="z-10 flex items-center justify-center gap-4">
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={1}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={1} />
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={2}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={2} />
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={3}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={3} />
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={4}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={4} />
+          </div>
+        </div>
+        <div className="flex items-center justify-center"></div>
+      </div>
+    </MatchCard>
+  );
+}
+
+RummiKubMatchBanner.ErrorFallback = function ErrorFallback({
+  resetErrorBoundary,
+}: FallbackProps) {
+  return (
+    <div className="relative my-5 flex h-full min-h-[200px] w-full flex-col items-center justify-center gap-5 rounded-xl border p-2">
+      <div className="flex flex-wrap justify-center gap-x-1">
+        <span>게임 정보를 불러올 수 없어요.</span>
+        <span>잠시 후 다시 시도해주세요!</span>
+      </div>
+      <button onClick={resetErrorBoundary} className="text-primary">
+        새로고침
+      </button>
+    </div>
+  );
+};
+
+RummiKubMatchBanner.Skeleton = function Skeleton() {
+  return (
+    <MatchCard
+      className="flex flex-col"
+      gameTeams={[]}
+      startTime={''}
+      gameQuarter={''}
+      gameName={''}
+      sportsName={''}
+    >
+      <div className="flex h-full min-h-[200px] items-center justify-around rounded-xl bg-gray-1 shadow-lg">
+        <MatchCard.Background
+          viewBox="-3 120 100 50"
+          width={150}
+          height={200}
+          className="h-[200px]"
+        />
+      </div>
+    </MatchCard>
+  );
+};
diff --git a/src/components/rummikub/MatchItem/index.tsx b/src/components/rummikub/MatchItem/index.tsx
new file mode 100644
index 0000000..b880ea9
--- /dev/null
+++ b/src/components/rummikub/MatchItem/index.tsx
@@ -0,0 +1,51 @@
+import { MatchCard } from '@/components/common/MatchCard';
+import { MatchType } from '@/types/match';
+
+export default function RummiKubMatchItem(match: MatchType) {
+  return (
+    <MatchCard {...match} className="flex flex-col">
+      <MatchCard.Label className="mb-2 border-b-2 border-b-gray-5 px-1 pb-1" />
+      <div className="flex h-full min-h-[180px] flex-col items-center justify-around rounded-xl bg-gray-1 shadow-lg">
+        <MatchCard.Background
+          viewBox="-13 117 120 50"
+          width={150}
+          height={170}
+          className="z-[0] h-[180px] fill-primary"
+        />
+        <MatchCard.Status className="mt-5 text-black" />
+
+        <div className="z-10 flex items-center justify-center gap-4">
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={1}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={1} />
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={2}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={2} />
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={3}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={3} />
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <MatchCard.Team
+              teamIndex={4}
+              className="flex flex-col items-center justify-center [&>img]:my-0"
+            />
+            <MatchCard.Score teamIndex={4} />
+          </div>
+        </div>
+        <div className="flex items-center justify-center"></div>
+      </div>
+    </MatchCard>
+  );
+}

From 7707d68d16b7be9df9011a41051e1b20776a32e0 Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Wed, 29 Nov 2023 05:01:12 +0900
Subject: [PATCH 4/6] =?UTF-8?q?chore:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=A7=88=EC=A7=84=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/MatchCard/pieces/Team.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/MatchCard/pieces/Team.tsx b/src/components/common/MatchCard/pieces/Team.tsx
index 5fff144..6c01fa8 100644
--- a/src/components/common/MatchCard/pieces/Team.tsx
+++ b/src/components/common/MatchCard/pieces/Team.tsx
@@ -18,7 +18,7 @@ export default function Team({ teamIndex, className }: TeamProps) {
       <div className={$(className)}>
         <Icon
           iconName="profile"
-          className="me-4 h-16 w-16 text-gray-200 dark:text-gray-700"
+          className="h-16 w-16 text-gray-200 dark:text-gray-700"
         />
       </div>
     );

From 086d62ca2ba66ad6f128ff9f9dcf22cff17c81d2 Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Wed, 29 Nov 2023 05:02:26 +0900
Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=A2=8C?=
 =?UTF-8?q?=EC=9A=B0,=20=EC=83=89=EC=83=81=20=EA=B5=AC=EB=B6=84=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/match/CommentForm/index.tsx | 34 +++++++++-----------
 src/components/match/CommentItem/index.tsx | 36 ++++++++++------------
 src/components/match/CommentList/index.tsx | 12 ++++++--
 3 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/components/match/CommentForm/index.tsx b/src/components/match/CommentForm/index.tsx
index 0e3100e..818206d 100644
--- a/src/components/match/CommentForm/index.tsx
+++ b/src/components/match/CommentForm/index.tsx
@@ -18,7 +18,6 @@ export default function CommentForm({
 }: CommentFormProps) {
   const [inputValue, setInputValue] = useState('');
   const [selectedTeamId, setSelectedTeamId] = useState<number>(1);
-  const [isOpen, toggleOpen] = useState(false);
 
   const handleCommentSubmit = (
     e: FormEvent<HTMLFormElement>,
@@ -37,7 +36,7 @@ export default function CommentForm({
   return (
     <>
       <form
-        className="h-70px absolute -bottom-1 left-0 w-full"
+        className="h-70px absolute bottom-0 left-0 w-full translate-y-full"
         onSubmit={e =>
           handleCommentSubmit(e, {
             gameTeamId: Number(matchId),
@@ -45,22 +44,20 @@ export default function CommentForm({
           })
         }
       >
-        {isOpen && (
-          <fieldset className="absolute top-0 flex w-full -translate-y-full items-center justify-start gap-2 rounded-lg bg-white px-5 py-3 shadow-md">
-            {matchTeams.map(team => (
-              <label key={team.gameTeamId} className="flex items-center">
-                <input
-                  type="radio"
-                  checked={selectedTeamId === team.gameTeamId}
-                  value={team.gameTeamId}
-                  onChange={handleRadioClick}
-                  className="dark:border-gray-6 dark:bg-gray-6 h-4 w-4 border-gray-3 bg-gray-1 text-primary focus:ring-2 focus:ring-primary dark:ring-offset-black dark:focus:ring-primary"
-                />
-                {team.gameTeamName}
-              </label>
-            ))}
-          </fieldset>
-        )}
+        <fieldset className="absolute top-0 flex w-full -translate-y-full items-center justify-start gap-4 rounded-lg bg-white px-5 py-3">
+          {matchTeams.map(team => (
+            <label key={team.gameTeamId} className="flex items-center">
+              <input
+                type="radio"
+                checked={selectedTeamId === team.gameTeamId}
+                value={team.gameTeamId}
+                onChange={handleRadioClick}
+                className="dark:border-gray-6 dark:bg-gray-6 mr-1 h-4 w-4 border-gray-3 bg-gray-1 text-primary focus:ring-2 focus:ring-primary dark:ring-offset-black dark:focus:ring-primary"
+              />
+              {team.gameTeamName}
+            </label>
+          ))}
+        </fieldset>
 
         <div
           className="z-10 grid items-center rounded-lg bg-gray-2"
@@ -71,7 +68,6 @@ export default function CommentForm({
             value={inputValue}
             onChange={e => setInputValue(e.target.value)}
             placeholder="응원하는 팀에 댓글을 남겨보세요!"
-            onFocus={() => toggleOpen(true)}
           />
           <button className="rounded-xl bg-primary px-5 py-3 text-white">
             댓글
diff --git a/src/components/match/CommentItem/index.tsx b/src/components/match/CommentItem/index.tsx
index fcd98aa..a01ba94 100644
--- a/src/components/match/CommentItem/index.tsx
+++ b/src/components/match/CommentItem/index.tsx
@@ -10,6 +10,13 @@ type CommentItemProps = {
   createdAt: string;
 };
 
+const teamColor = [
+  'bg-[#ffb2b2]',
+  'bg-[#fdd3b1]',
+  'bg-[#b2c3ff]',
+  'bg-[#a6e7be]',
+] as const;
+
 export default function CommentItem({
   commentId,
   content,
@@ -25,27 +32,18 @@ export default function CommentItem({
   const isEven = order % 2 === 0;
   const { period, hours, minutes } = parseTimeString(createdAt);
 
+  if (isBlocked)
+    return (
+      <div className="rounded-xl border bg-gray-2 px-3 py-1">
+        ⚠️ 관리자에 의해 차단된 댓글입니다.
+      </div>
+    );
+
   return (
     <li className={$('mb-1 flex items-end', isEven && 'flex-row-reverse')}>
-      {isBlocked ? (
-        <div
-          className={$(
-            'rounded-xl border px-3 py-1',
-            isEven ? 'bg-[#b2c3ff]' : 'bg-[#ffb2b2]',
-          )}
-        >
-          ⚠️ 관리자에 의해 차단된 댓글입니다.
-        </div>
-      ) : (
-        <div
-          className={$(
-            'rounded-xl border px-3 py-1',
-            isEven ? 'bg-[#b2c3ff]' : 'bg-[#ffb2b2]',
-          )}
-        >
-          {content}
-        </div>
-      )}
+      <div className={$('rounded-xl border px-3 py-1', teamColor[order - 1])}>
+        {content}
+      </div>
       <div
         className={$(
           'mb-1 flex items-end justify-between text-xs',
diff --git a/src/components/match/CommentList/index.tsx b/src/components/match/CommentList/index.tsx
index a45bd64..8cad35e 100644
--- a/src/components/match/CommentList/index.tsx
+++ b/src/components/match/CommentList/index.tsx
@@ -44,7 +44,11 @@ export default function CommentList({
     <>
       <div ref={ref}></div>
       {commentList.map(comment => (
-        <CommentItem {...comment} key={comment.commentId} order={1} />
+        <CommentItem
+          {...comment}
+          key={comment.commentId}
+          order={comment.order}
+        />
       ))}
     </>
   );
@@ -56,7 +60,11 @@ CommentList.SocketList = function SocketList({
   return (
     <>
       {commentList.map(comment => (
-        <CommentItem {...comment} key={comment.commentId} order={1} />
+        <CommentItem
+          {...comment}
+          key={comment.commentId}
+          order={comment.order}
+        />
       ))}
     </>
   );

From cf4fbb4a0d30b387806677e934565b08ae77b527 Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Wed, 29 Nov 2023 05:03:06 +0900
Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=EB=A3=A8=EB=AF=B8=ED=81=90?=
 =?UTF-8?q?=EB=B8=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=8F=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat: 루미큐브 페이지 추가
---
 src/app/rummikube/[id]/page.tsx          | 160 +++++++++++++++++++++++
 src/components/match/MatchList/index.tsx |  69 ++++++----
 2 files changed, 202 insertions(+), 27 deletions(-)
 create mode 100644 src/app/rummikube/[id]/page.tsx

diff --git a/src/app/rummikube/[id]/page.tsx b/src/app/rummikube/[id]/page.tsx
new file mode 100644
index 0000000..6a7a2fc
--- /dev/null
+++ b/src/app/rummikube/[id]/page.tsx
@@ -0,0 +1,160 @@
+'use client';
+
+import { useRef, useState } from 'react';
+
+import AsyncBoundary from '@/components/common/AsyncBoundary';
+import Loader from '@/components/common/Loader';
+import CommentForm from '@/components/match/CommentForm';
+import CommentList from '@/components/match/CommentList';
+import Lineup from '@/components/match/LineupList';
+import Panel from '@/components/match/Panel';
+import RecordList from '@/components/match/RecordList';
+import Video from '@/components/match/Video';
+import Cheer from '@/components/rummikub/Cheer';
+import RummiKubMatchBanner from '@/components/rummikub/MatchBanner';
+import useSocket from '@/hooks/useSocket';
+import MatchByIdFetcher from '@/queries/useMatchById/Fetcher';
+import MatchCheerByIdFetcher from '@/queries/useMatchCheerById/Fetcher';
+import MatchCommentFetcher from '@/queries/useMatchCommentById/Fetcher';
+import MatchLineupFetcher from '@/queries/useMatchLineupById/Fetcher';
+import MatchTimelineFetcher from '@/queries/useMatchTimelineById/Fetcher';
+import MatchVideoFetcher from '@/queries/useMatchVideoById/Fetcher';
+import useSaveCommentMutation from '@/queries/useSaveCommentMutation/query';
+import { MatchCommentType } from '@/types/match';
+
+export default function Rummikute({ params }: { params: { id: string } }) {
+  const [comments, setComments] = useState<MatchCommentType[]>([]);
+
+  const handleSocketMessage = (comment: MatchCommentType) => {
+    if (comment) {
+      setComments(prev => [...prev, comment]);
+    }
+  };
+
+  const { connect } = useSocket({
+    url: 'wss://api.hufstreaming.site/ws',
+    destination: `/topic/games/${params.id}`,
+    callback: handleSocketMessage,
+  });
+
+  connect();
+
+  const { mutate } = useSaveCommentMutation();
+  const options = [
+    { label: '라인업' },
+    { label: '응원댓글' },
+    { label: '경기영상' },
+    { label: '타임라인' },
+  ];
+
+  const scrollRef = useRef(null);
+  const scrollToBottom = () => {
+    if (!scrollRef.current) return;
+
+    (scrollRef.current as HTMLDivElement).scrollIntoView();
+  };
+
+  return (
+    <section>
+      <AsyncBoundary
+        errorFallback={props => (
+          <RummiKubMatchBanner.ErrorFallback {...props} />
+        )}
+        loadingFallback={<RummiKubMatchBanner.Skeleton />}
+      >
+        <MatchByIdFetcher matchId={params.id}>
+          {data => <RummiKubMatchBanner {...data} />}
+        </MatchByIdFetcher>
+      </AsyncBoundary>
+
+      <AsyncBoundary
+        errorFallback={props => <Cheer.ErrorFallback {...props} />}
+        loadingFallback={<Loader />}
+      >
+        <MatchCheerByIdFetcher matchId={params.id}>
+          {data => <Cheer cheers={data} />}
+        </MatchCheerByIdFetcher>
+      </AsyncBoundary>
+      <Panel options={options} defaultValue="라인업">
+        {({ selected }) => (
+          <>
+            {selected === '라인업' && (
+              <AsyncBoundary
+                errorFallback={props => <Lineup.ErrorFallback {...props} />}
+                loadingFallback={<Loader />}
+              >
+                <MatchLineupFetcher matchId={params.id}>
+                  {([firstTeam, secondTeam]) => (
+                    <div className="grid grid-cols-2 py-5 [&>*:first-child>ul]:before:absolute [&>*:first-child>ul]:before:right-0 [&>*:first-child>ul]:before:h-full [&>*:first-child>ul]:before:border-l-2 [&>*:first-child>ul]:before:bg-gray-2">
+                      <Lineup {...firstTeam} />
+                      <Lineup {...secondTeam} />
+                    </div>
+                  )}
+                </MatchLineupFetcher>
+              </AsyncBoundary>
+            )}
+            {selected === '타임라인' && (
+              <AsyncBoundary
+                errorFallback={props => <RecordList.ErrorFallback {...props} />}
+                loadingFallback={<Loader />}
+              >
+                <MatchTimelineFetcher matchId={params.id}>
+                  {([firstHalf, secondHalf]) => (
+                    <div className="overflow-y-auto p-5">
+                      <RecordList {...firstHalf} />
+                      <RecordList {...secondHalf} />
+                    </div>
+                  )}
+                </MatchTimelineFetcher>
+              </AsyncBoundary>
+            )}
+            {selected === '응원댓글' && (
+              <AsyncBoundary
+                errorFallback={props => (
+                  <CommentList.ErrorFallback {...props} />
+                )}
+                loadingFallback={<Loader />}
+              >
+                <MatchCommentFetcher matchId={params.id}>
+                  {({ commentList, matchTeams, ...data }) => (
+                    <div className="max-h-[450px] overflow-y-auto p-5">
+                      <ul className="pb-8">
+                        <CommentList
+                          commentList={commentList.pages.flat()}
+                          scrollToBottom={scrollToBottom}
+                          {...data}
+                        />
+                        <CommentList.SocketList commentList={comments} />
+                        <li ref={scrollRef}></li>
+                      </ul>
+                      <CommentForm
+                        matchTeams={matchTeams}
+                        matchId={params.id}
+                        mutate={mutate}
+                        scrollToBottom={scrollToBottom}
+                      />
+                    </div>
+                  )}
+                </MatchCommentFetcher>
+              </AsyncBoundary>
+            )}
+            {selected === '경기영상' && (
+              <AsyncBoundary
+                errorFallback={props => <Video.ErrorFallback {...props} />}
+                loadingFallback={<Loader />}
+              >
+                <MatchVideoFetcher matchId={params.id}>
+                  {data => (
+                    <div className="overflow-y-auto p-5">
+                      <Video {...data} />
+                    </div>
+                  )}
+                </MatchVideoFetcher>
+              </AsyncBoundary>
+            )}
+          </>
+        )}
+      </Panel>
+    </section>
+  );
+}
diff --git a/src/components/match/MatchList/index.tsx b/src/components/match/MatchList/index.tsx
index 411c5fc..c0e58bd 100644
--- a/src/components/match/MatchList/index.tsx
+++ b/src/components/match/MatchList/index.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation';
 
 import { FallbackProps } from '@/components/common/ErrorBoundary';
 import { MatchCard } from '@/components/common/MatchCard';
+import RummiKubMatchItem from '@/components/rummikub/MatchItem';
 import {
   COMMON_ERROR_MESSAGE,
   MATCH_LIST_API_ERROR_MESSAGE,
@@ -37,34 +38,48 @@ export default function MatchList({
   return (
     <>
       <ul>
-        {matchList.map(({ id, ...match }) => (
-          <li key={id} className="mb-14">
-            <Link href={`match/${id}`}>
-              <MatchCard {...match} className="flex flex-col">
-                <MatchCard.Label className="mb-2 border-b-2 border-b-gray-5 px-1 pb-1" />
-                <div className="flex h-full min-h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg">
-                  <MatchCard.Background
-                    viewBox="-13 117 120 50"
-                    width={150}
-                    height={170}
-                    className="h-[180px] fill-primary"
-                  />
+        {matchList.map(({ id, sportsName, ...match }) => (
+          <>
+            {sportsName === '루미큐브' ? (
+              <li key={id} className="mb-14">
+                <Link href={`rummikube/${id}`}>
+                  <RummiKubMatchItem {...match} sportsName={sportsName} />
+                </Link>
+              </li>
+            ) : (
+              <li key={id} className="mb-14">
+                <Link href={`match/${id}`}>
+                  <MatchCard
+                    {...match}
+                    sportsName={sportsName}
+                    className="flex flex-col"
+                  >
+                    <MatchCard.Label className="mb-2 border-b-2 border-b-gray-5 px-1 pb-1" />
+                    <div className="flex h-full min-h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg">
+                      <MatchCard.Background
+                        viewBox="-13 117 120 50"
+                        width={150}
+                        height={170}
+                        className="h-[180px] fill-primary"
+                      />
 
-                  <MatchCard.Team
-                    teamIndex={1}
-                    className="flex flex-col items-center"
-                  />
-                  <MatchCard.Score teamIndex={1} />
-                  <MatchCard.Status />
-                  <MatchCard.Score teamIndex={2} />
-                  <MatchCard.Team
-                    teamIndex={2}
-                    className="flex flex-col items-center"
-                  />
-                </div>
-              </MatchCard>
-            </Link>
-          </li>
+                      <MatchCard.Team
+                        teamIndex={1}
+                        className="flex flex-col items-center"
+                      />
+                      <MatchCard.Score teamIndex={1} />
+                      <MatchCard.Status />
+                      <MatchCard.Score teamIndex={2} />
+                      <MatchCard.Team
+                        teamIndex={2}
+                        className="flex flex-col items-center"
+                      />
+                    </div>
+                  </MatchCard>
+                </Link>
+              </li>
+            )}
+          </>
         ))}
       </ul>
       <div ref={ref}></div>