♿️ 채팅방 참가자 목록 팝오버 고정 기능 추가

- HTML 태그를 적절한 용도에 맞게 변경
boostcampwm2023 · Dec 13, 2023 · b97951b · b97951b
1 parent 3a2f567
commit b97951b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 14 deletions.
diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/ChattingHeader.tsx b/app/frontend/src/components/Sidebar/Contents/Chatting/ChattingHeader.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import { ResponseParticipant } from '@morak/apitype';
 
 import { ReactComponent as People } from '@/assets/icons/people.svg';
@@ -12,24 +14,34 @@ type ChattingHeaderProps = {
 };
 
 export function ChattingHeader({ title, participants }: ChattingHeaderProps) {
+  const [participantsShown, setParticipantsShown] = useState(false);
+
   return (
     <div className={styles.header}>
-      <span className={styles.title}>{title}</span>
-      <div className={styles.participants}>
+      <h3 className={styles.title}>{title}</h3>
+      <button
+        type="button"
+        className={`${styles.participants} ${
+          participantsShown && styles.shown
+        }`}
+        onClick={() => setParticipantsShown(!participantsShown)}
+        aria-label={`참가자 목록, ${participants.length}명`}
+      >
         <People width={16} height={16} fill={vars.color.grayscale200} />
         <span>{participants.length}</span>
-        <Popover type="right" className={styles.popover}>
-          <div className={styles.userList}>
+        <Popover
+          type="right"
+          className={`${styles.popover} ${participantsShown && styles.shown}`}
+        >
+          <ul className={styles.userList}>
             {participants.map(({ providerId, nickname, profilePicture }) => (
-              <UserChip
-                key={providerId}
-                username={nickname}
-                profileSrc={profilePicture}
-              />
+              <li key={providerId}>
+                <UserChip username={nickname} profileSrc={profilePicture} />
+              </li>
             ))}
-          </div>
+          </ul>
         </Popover>
-      </div>
+      </button>
     </div>
   );
 }
diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/index.css.ts b/app/frontend/src/components/Sidebar/Contents/Chatting/index.css.ts
@@ -33,7 +33,7 @@ export const header = style({
   justifyContent: 'space-between',
   alignItems: 'center',
   gap: '1.6rem',
-  padding: '2.4rem 1.6rem',
+  padding: '1.6rem',
   background: vars.color.grayscale50,
 });
 
@@ -50,27 +50,38 @@ export const notParticipated = style([
   },
 ]);
 
+const shown = style({});
+
 export const participants = style([
   sansRegular16,
   {
     display: 'flex',
     alignItems: 'center',
     gap: '0.4rem',
     height: '100%',
+    padding: '0.8rem',
     position: 'relative',
+    selectors: {
+      [` ${shown}&`]: {
+        background: vars.color.grayscale100,
+        borderRadius: '0.8rem',
+      },
+    },
   },
 ]);
 
 export const popover = style({
   display: 'none',
-  top: '3rem',
+  top: '4rem',
   selectors: {
-    [`${participants}:hover &, ${participants}:active &`]: {
+    [`${participants}:hover &, ${participants}:active &, ${shown}&`]: {
       display: 'flex',
     },
   },
 });
 
+export { shown };
+
 export const submitButton = style({
   height: '4.8rem',
 });