Merge branch '6th_party' of github.com:42organization/42gg.client int…

…o Fix/세부-내역-방-버그-#1317
42organization · Mar 28, 2024 · c469364 · c469364
2 parents d470f90 + b53f345
commit c469364
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 71 deletions.
diff --git a/components/party/PartyRoomListItem.tsx b/components/party/PartyRoomListItem.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { PartyRoom } from 'types/partyTypes';
+import { getRemainTime } from 'utils/handleTime';
 import styles from 'styles/party/PartyRoomListItem.module.scss';
 
 export default function PartyRoomListItem({ room }: { room: PartyRoom }) {
@@ -18,18 +19,25 @@ export default function PartyRoomListItem({ room }: { room: PartyRoom }) {
           room.status !== 'OPEN' ? styles.transparent : ''
         }`}
       >
-        <div className={styles.roomDescWrap}>
+        <article className={styles.roomContent}>
           <header>
             <div className={styles.roomCategory}>#{room.categoryName}</div>
             <div className={`${styles.roomStatus} ${styles[room.status]}`}>
               {roomStatusKo}
             </div>
           </header>
-          <div className={styles.roomTitle}>{room.title}</div>
-        </div>
-        <div
-          className={styles.roomPeopleWrap}
-        >{`${room.currentPeople}/${room.maxPeople}`}</div>
+          <p className={styles.roomTitle}>{room.title}</p>
+        </article>
+        <aside className={styles.roomInfo}>
+          <time className={styles.roomDueDate}>
+            {room.status === 'OPEN'
+              ? getRemainTime({ targetTime: new Date(room.dueDate) })
+              : '마감'}
+          </time>
+          <div
+            className={styles.roomPeople}
+          >{`${room.currentPeople}/${room.maxPeople}`}</div>
+        </aside>
       </Link>
     </li>
   );

diff --git a/pages/party/index.tsx b/pages/party/index.tsx
@@ -8,27 +8,27 @@ import usePartyColorMode from 'hooks/party/usePartyColorMode';
 import usePartyRoomList from 'hooks/party/usePartyRoomList';
 import styles from 'styles/party/PartyMain.module.scss';
 
-const noFilter = '전체';
+const noFilterName = '전체';
 
 export default function PartyMain() {
   const router = useRouter();
-  const [categoryFilter, setCategoryFilter] = useState<string>(noFilter);
-  const [searchTitle, setSearchTitle] = useState(
-    Array.isArray(router.query.title)
-      ? router.query.title[0]
-      : router.query.title
-  );
-  const { categories } = usePartyCategory();
+  const titleQuery = Array.isArray(router.query.title)
+    ? router.query.title[0]
+    : router.query.title;
   const { partyRooms, joinedPartyRooms } = usePartyRoomList({
     withJoined: true,
-    searchTitle: searchTitle,
+    searchTitle: titleQuery,
   });
+  const [searchTitle, setSearchTitle] = useState(titleQuery);
+  const { categories } = usePartyCategory();
+  const [categoryFilter, setCategoryFilter] = useState<string>(noFilterName);
 
   const filteredRooms = partyRooms.filter(
-    (room) => categoryFilter == noFilter || categoryFilter === room.categoryName
+    (room) =>
+      categoryFilter == noFilterName || categoryFilter === room.categoryName
   );
   const categoryNavItems = [
-    { categoryId: undefined, categoryName: noFilter },
+    { categoryId: undefined, categoryName: noFilterName },
     ...categories,
   ];
 
@@ -37,7 +37,7 @@ export default function PartyMain() {
   return (
     <div className={styles.pageContainer}>
       <section className={styles.joinedRoomContainer}>
-        <header>
+        <header className={styles.joinedRoomHeader}>
           <h2>참여중인 파티</h2>
           <Link href='/party/create' className={styles.createRoomButton}>
             방 만들기
@@ -53,7 +53,7 @@ export default function PartyMain() {
           )}
         </ul>
       </section>
-      <section className={styles.searchBarContainer}>
+      <section className={styles.searchBar}>
         <form
           onSubmit={(e) => {
             e.preventDefault();
@@ -66,16 +66,15 @@ export default function PartyMain() {
           <FaSearch className={styles.searchIcon} />
           <input
             placeholder='방 검색하기'
-            name='searchTitle'
-            value={searchTitle}
+            defaultValue={searchTitle}
             onChange={(e) => {
               setSearchTitle(e.target.value);
             }}
           />
         </form>
       </section>
       <section className={styles.allRoomContanier}>
-        <nav>
+        <nav className={styles.categoryNav}>
           <ul>
             {categoryNavItems.map((c) => (
               <li

diff --git a/styles/party/PartyCommon.scss b/styles/party/PartyCommon.scss
@@ -15,7 +15,8 @@ $party-blue-sky3: #51ddd4;
 $party-blue-sky4: #92fcd6;
 $party-blue-sky5: #c8ffeb;
 
-$party-blue-purple: #ab78ff;
+$party-purple: #ab78ff;
+$party-yellow: #c4ce0b;
 
 $party-gradient0: linear-gradient(
   $party-blue-sky2,
@@ -33,7 +34,7 @@ $party-gradient1: linear-gradient(
 $party-gradient2: linear-gradient($party-blue-sky4, $party-blue-dark);
 $party-gradient3: linear-gradient(
   to left,
-  $party-blue-purple,
+  $party-purple,
   $party-blue-dark4 40%,
   $party-blue-sky3
 );

diff --git a/styles/party/PartyMain.module.scss b/styles/party/PartyMain.module.scss
@@ -1,5 +1,6 @@
 @import 'styles/common.scss';
 @import 'styles/party/PartyCommon.scss';
+
 @mixin roomListWrap {
   padding: 0.8em;
   margin: 0;
@@ -17,7 +18,7 @@
 }
 
 .joinedRoomContainer {
-  header {
+  .joinedRoomHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -42,7 +43,7 @@
   }
 }
 
-.searchBarContainer {
+.searchBar {
   form {
     display: flex;
     width: 100%;
@@ -69,7 +70,7 @@
 }
 
 .allRoomContanier {
-  nav {
+  .categoryNav {
     ul {
       display: flex;
       justify-content: space-between;
@@ -99,7 +100,7 @@
   }
   .allRoomListWrap {
     @include roomListWrap;
-    height: 25em;
+    min-height: 25em;
     overflow-y: scroll;
 
     .emptyRooms {

diff --git a/styles/party/PartyRoomListItem.module.scss b/styles/party/PartyRoomListItem.module.scss
@@ -14,57 +14,78 @@
   &.transparent {
     opacity: 0.5;
   }
+}
 
-  .roomDescWrap {
-    position: relative;
-    width: 100%;
+.roomContent {
+  position: relative;
+  width: 100%;
+  margin: 0;
 
-    &::after {
-      position: absolute;
-      top: 10%;
-      right: 0;
-      box-sizing: border-box;
-      width: 0;
-      height: 80%;
-      content: '';
-      border: 0.5px solid $medium-gray;
-    }
+  &::after {
+    position: absolute;
+    top: 10%;
+    right: 0;
+    box-sizing: border-box;
+    width: 0;
+    height: 80%;
+    content: '';
+    border: 0.5px solid $medium-gray;
+  }
 
-    header {
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-end;
-      margin: 0;
+  header {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-end;
+    margin: 0;
 
-      .roomCategory {
-        margin-right: 0.5em;
-        font-size: $small-font;
-        font-weight: 400;
-        color: $dark-gray;
-      }
-      .roomStatus {
-        display: inline-block;
-        padding: 2px 4px;
-        font-size: 0.7em;
-        font-weight: 200;
-        color: white;
-        border-radius: 8px;
+    .roomCategory {
+      margin-right: 0.5em;
+      font-size: $small-font;
+      font-weight: 400;
+      color: $dark-gray;
+    }
+    .roomStatus {
+      display: inline-block;
+      padding: 2px 4px;
+      font-size: 0.7em;
+      font-weight: 300;
+      color: white;
+      border-radius: 8px;
 
-        &.FINISH {
-          background-color: $dark-gray;
-        }
-        &.START {
-          background-color: $party-blue;
-        }
+      &.FINISH {
+        background-color: $dark-gray;
+      }
+      &.START {
+        background-color: $party-yellow;
+      }
+      &.OPEN {
+        background-color: $party-blue;
       }
     }
-    .roomTitle {
-      margin-left: 0.2em;
-      font-size: $big-font;
-    }
   }
-  .roomPeopleWrap {
-    margin-left: 0.5em;
+
+  .roomTitle {
+    margin: 0 0 0 0.2em;
+    font-size: 1.1rem;
+    font-weight: 600;
+    line-height: 1.5em;
+  }
+}
+
+.roomInfo {
+  display: flex;
+  width: 4em;
+  flex-direction: column;
+  margin-left: 0.5em;
+  align-items: center;
+
+  .roomDueDate {
+    padding: 0.3em 0;
+    font-size: 0.7rem;
+    color: $dark-gray;
+  }
+  .roomPeople {
+    font-weight: 400;
     letter-spacing: 0.1em;
   }
 }