From 6942f60bc42947a828692cc2ea600868f5927c59 Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Tue, 19 Mar 2024 21:31:01 +0900
Subject: [PATCH 1/3] =?UTF-8?q?[=F0=9F=8E=A8style]:=20GameRoomListItem=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.css                           |  8 +++-
 src/pages/MainPage/GameRoomList.tsx     |  2 +-
 src/pages/MainPage/GameRoonListItem.tsx | 62 ++++++++++++++-----------
 tailwind.config.js                      |  9 ++++
 4 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/src/index.css b/src/index.css
index 4b7d0568..74959ef8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -19,4 +19,10 @@
   font-weight: normal;
   font-style: normal;
 }
- 
\ No newline at end of file
+
+@layer utilities{
+  .bg-myGradient {
+    background: linear-gradient(45deg,  #96d8bf 0 30%, #D4EBE2 0 100% );
+    background-size: 400% 400%;
+  }
+}
diff --git a/src/pages/MainPage/GameRoomList.tsx b/src/pages/MainPage/GameRoomList.tsx
index 3cf409b2..37410988 100644
--- a/src/pages/MainPage/GameRoomList.tsx
+++ b/src/pages/MainPage/GameRoomList.tsx
@@ -42,7 +42,7 @@ const GameRoomList = ({ data, selectedGameMode }: GameRoomListProps) => {
         </li>
         <Divider className='border-gray-200' />
         <li className='w-full'>
-          <ul className='w-full flex flex-col gap-[1rem] max-h-[60rem] overflow-y-auto scrollbar-hide pt-[1rem]'>
+          <ul className='w-full flex flex-col gap-[1.2rem] max-h-[60rem] overflow-y-auto scrollbar-hide py-[1rem]'>
             {filteredRoomList.map((roomData) => (
               <Fragment key={roomData.id}>
                 <GameRoomListItem
diff --git a/src/pages/MainPage/GameRoonListItem.tsx b/src/pages/MainPage/GameRoonListItem.tsx
index 8bc16ce2..655b7919 100644
--- a/src/pages/MainPage/GameRoonListItem.tsx
+++ b/src/pages/MainPage/GameRoonListItem.tsx
@@ -37,35 +37,41 @@ const GameRoomListItem = ({
   });
 
   return (
-    <li
-      onClick={
-        isPrivate
-          ? () => setIsOpen(true)
-          : () => mutateEnterGameRoom({ roomId: id })
-      }
-      className='h-[5rem] flex items-center shrink-0 w-full py-[1rem] bg-gray-10 hover:bg-coral-50 cursor-pointer'>
-      <span className='text-center truncate flex-1'>{`No.${id}`}</span>
-      <Divider
-        orientation='vertical'
-        className='border-gray-200'
-      />
-      <div className='flex-[4_0_0] truncate flex justify-center'>
-        {isPrivate && <LockClosedIcon className='size-[2rem]' />}
-        <span className='text-center truncate max-w-[60%] px-[1rem]'>
-          {title}
+    <div className='filter drop-shadow-lg'>
+      <li
+        onClick={
+          isPrivate
+            ? () => setIsOpen(true)
+            : () => mutateEnterGameRoom({ roomId: id })
+        }
+        className='h-[5rem] flex items-center shrink-0 w-full py-[1rem] bg-gray-10 cursor-pointer
+      [clip-path:polygon(97%_0%,100%_50%,97%_100%,0%_100%,0%_0%)]
+      hover:bg-myGradient hover:animate-gameRoomList'>
+        <span className='text-center truncate flex-1'>{`No.${id}`}</span>
+        <Divider
+          orientation='vertical'
+          className='border-gray-200'
+        />
+        <div className='flex-[4_0_0] truncate flex justify-center'>
+          {isPrivate && <LockClosedIcon className='size-[2rem]' />}
+          <span className='text-center truncate max-w-[60%] px-[1rem]'>
+            {title}
+          </span>
+        </div>
+        <Divider
+          orientation='vertical'
+          className='border-gray-200'
+        />
+        <span className='text-center truncate flex-1'>
+          {MODE_TYPE[gameMode]}
         </span>
-      </div>
-      <Divider
-        orientation='vertical'
-        className='border-gray-200'
-      />
-      <span className='text-center truncate flex-1'>{MODE_TYPE[gameMode]}</span>
-      <Divider
-        orientation='vertical'
-        className='border-gray-200'
-      />
-      <span className='text-center truncate flex-1'>{`${currentPlayer}/${maxPlayer}`}</span>
-    </li>
+        <Divider
+          orientation='vertical'
+          className='border-gray-200'
+        />
+        <span className='text-center truncate flex-1'>{`${currentPlayer}/${maxPlayer}`}</span>
+      </li>
+    </div>
   );
 };
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 8571306e..3ea4dcd9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -33,6 +33,14 @@ export default {
             opacity: 1,
           },
         },
+        gameRoomList: {
+          '0%': {
+            backgroundPosition: '100% 50%',
+          },
+          '100%': {
+            backgroundPosition: '0 50%',
+          },
+        },
         blinkTimer: {
           '50%': { color: 'red' },
         },
@@ -75,6 +83,7 @@ export default {
         neonRight: 'neonRight 1s linear infinite 0.25s',
         neonBottom: 'neonBottom 1s linear infinite 0.5s',
         neonLeft: 'neonLeft 1s linear infinite 0.75s',
+        gameRoomList: 'gameRoomList ease-in 0.5s forwards',
       },
       backgroundImage: {
         'gradient-radial':

From f90f6110f17232861202813186559002379986ec Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Tue, 19 Mar 2024 21:44:02 +0900
Subject: [PATCH 2/3] =?UTF-8?q?[=F0=9F=8E=A8style]:=20=EB=A9=94=EC=9D=B8?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EA=B7=B8=EB=A6=BC=EC=9E=90=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=86=90=EB=8B=98=20=EA=B8=B0=EB=B3=B8?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MainPage/MainPage.tsx | 6 +++---
 src/pages/MainPage/UserCard.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
index 66f017da..a3575cbb 100644
--- a/src/pages/MainPage/MainPage.tsx
+++ b/src/pages/MainPage/MainPage.tsx
@@ -51,7 +51,7 @@ const MainPage = () => {
 
   return (
     <main className='flex gap-[3rem]'>
-      <section className='flex flex-col gap-[3rem] w-[25rem]'>
+      <section className='flex flex-col gap-[3rem] w-[25rem] [&>article]:shadow-xl'>
         <UserList
           userList={[...userList.data.data!]}
           myId={userData.data.data!.memberId}
@@ -70,7 +70,7 @@ const MainPage = () => {
           averageAccuracy={userData.data.data!.averageAccuracy}
         />
       </section>
-      <section className='flex-1 grid grid-cols-[3fr_1fr] grid-rows-[5rem_auto] grid-flow-col gap-[3rem]'>
+      <section className='flex-1 grid grid-cols-[3fr_1fr] grid-rows-[5rem_auto] grid-flow-col gap-[3rem] [&>article]:shadow-xl'>
         <article className='rounded-[0.5rem] flex items-center justify-between gap-[3rem] '>
           {gameModeList.map((el) => (
             <span
@@ -82,7 +82,7 @@ const MainPage = () => {
           ))}
         </article>
         <CreateRoomModal>
-          <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 row-start-1 h-full flex items-center justify-center'>
+          <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 row-start-1 h-full flex items-center justify-center shadow-xl'>
             <span>방 만들기</span>
           </article>
         </CreateRoomModal>
diff --git a/src/pages/MainPage/UserCard.tsx b/src/pages/MainPage/UserCard.tsx
index 26db7f3f..730326bc 100644
--- a/src/pages/MainPage/UserCard.tsx
+++ b/src/pages/MainPage/UserCard.tsx
@@ -14,7 +14,7 @@ interface UserCardProps {
 const UserCard = ({
   //테스트용으로 기본값 추가해두었습니다.
   nickname,
-  userImage = 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80',
+  userImage = 'https://cdn.pixabay.com/photo/2019/10/24/19/51/dino-4575130_1280.png',
   userImageFallbackDelay = 6000,
   rank,
   isGuest,

From ead66b51020eb280b78c354e64d09471816ec518 Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Tue, 19 Mar 2024 21:49:16 +0900
Subject: [PATCH 3/3] =?UTF-8?q?[=F0=9F=8E=A8style]:=20=EA=B2=8C=EC=9E=84?=
 =?UTF-8?q?=20=EB=AA=A8=EB=93=9C=EC=84=A0=ED=83=9D=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EA=B7=B8=EB=A6=BC=EC=9E=90=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MainPage/GameRoomList.tsx | 2 +-
 src/pages/MainPage/MainPage.tsx     | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/MainPage/GameRoomList.tsx b/src/pages/MainPage/GameRoomList.tsx
index 37410988..7eee1fda 100644
--- a/src/pages/MainPage/GameRoomList.tsx
+++ b/src/pages/MainPage/GameRoomList.tsx
@@ -7,7 +7,7 @@ import PrivateRoomModal from './PrivateRoomModal';
 
 const GAME_ROOM_LIST_CATEGORY = ['방 번호', '방 제목', '게임 모드', '인원수'];
 
-interface GameRoomListProps {
+interface GameRoomListProps extends React.HTMLAttributes<HTMLDivElement> {
   data: I_ChangeGameRoomData[];
   selectedGameMode: FilteredGameModeType;
 }
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
index a3575cbb..b37966e6 100644
--- a/src/pages/MainPage/MainPage.tsx
+++ b/src/pages/MainPage/MainPage.tsx
@@ -70,11 +70,11 @@ const MainPage = () => {
           averageAccuracy={userData.data.data!.averageAccuracy}
         />
       </section>
-      <section className='flex-1 grid grid-cols-[3fr_1fr] grid-rows-[5rem_auto] grid-flow-col gap-[3rem] [&>article]:shadow-xl'>
-        <article className='rounded-[0.5rem] flex items-center justify-between gap-[3rem] '>
+      <section className='flex-1 grid grid-cols-[3fr_1fr] grid-rows-[5rem_auto] grid-flow-col gap-[3rem]'>
+        <article className='rounded-[0.5rem] flex items-center justify-between gap-[3rem]'>
           {gameModeList.map((el) => (
             <span
-              className={`flex-1 h-full font-[Giants-Inline] text-[2rem] flex items-center justify-center cursor-pointer rounded-[0.3rem] ${selectedGameMode === el ? 'bg-green-100' : 'bg-green-70'} hover:bg-green-100 hover:scale-110 transition-all`}
+              className={`shadow-xl flex-1 h-full font-[Giants-Inline] text-[2rem] flex items-center justify-center cursor-pointer rounded-[0.3rem] ${selectedGameMode === el ? 'bg-green-100' : 'bg-green-70'} hover:bg-green-100 hover:scale-110 transition-all`}
               key={el}
               onClick={() => setSelectedGameMode(el)}>
               {mappedGameModeList[el]}
@@ -92,6 +92,7 @@ const MainPage = () => {
               <GameRoomList
                 data={data}
                 selectedGameMode={selectedGameMode}
+                className='shadow-xl'
               />
             </ErrorBoundary>
           )}