Merge branch 'main' into style-#221-modifyUI3

Team-E2I4 · Mar 20, 2024 · 811fe90 · 811fe90
2 parents 7ee8bb6 + ead66b5
commit 811fe90
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 36 deletions.
diff --git a/src/index.css b/src/index.css
@@ -19,4 +19,10 @@
   font-weight: normal;
   font-style: normal;
 }
-
+
+@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
@@ -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;
 }
@@ -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
@@ -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/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}
@@ -71,18 +71,18 @@ const MainPage = () => {
         />
       </section>
       <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] '>
+        <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]}
             </span>
           ))}
         </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 hover:bg-green-100 transition-all hover:text-white hover:text-[1.8rem]'>
+          <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 hover:bg-green-100 transition-all hover:text-white hover:text-[1.8rem]'>
             <span>방 만들기</span>
           </article>
         </CreateRoomModal>
@@ -92,6 +92,7 @@ const MainPage = () => {
               <GameRoomList
                 data={data}
                 selectedGameMode={selectedGameMode}
+                className='shadow-xl'
               />
             </ErrorBoundary>
           )}

diff --git 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,

diff --git 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':