Fix: 콜라보레이터 팝오버 모달로 수정, 사용자 ux 로직 개선, 댓글 레이아웃 깨짐 현상 테스트

src/app/list/[listId]/_components/ListDetailOuter/Collaborators.css.ts

@@ -15,16 +15,14 @@ export const wrapper = style({
 });
 
 export const profileImageParent = style({
-  marginRight: '-10px',
+  marginRight: '-7px',
   width: 35,
   height: 35,
 
   position: 'relative',
 });
 
 export const profileImage = style({
-  marginRight: '-10px',
-
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -35,12 +33,14 @@ export const profileImage = style({
 });
 
 export const profilePlus = style({
+  width: 35,
+  height: 35,
   backgroundColor: vars.color.gray7,
 });
 
 export const profileText = style({
   color: vars.color.lightblue,
-  fontSize: '2rem',
+  fontSize: '1.5rem',
 });
 
 export const collaboratorsPopOverWrapper = style({

src/app/list/[listId]/_components/ListDetailOuter/Collaborators.tsx

@@ -1,5 +1,4 @@
 import Image from 'next/image';
-import CollaboratorsPopOver from '@/app/list/[listId]/_components/ListDetailOuter/CollaboratorsPopOver';
 import * as styles from './Collaborators.css';
 import PlusIcon from '/public/icons/collaborators_plus.svg';
 import { UserProfileType } from '@/lib/types/userProfileType';
@@ -18,9 +17,6 @@ function Collaborators({ collaborators }: CollaboratorsProps) {
     <>
       {collaborators && (
         <div className={styles.collaboratorWrapper}>
-          <div className={styles.collaboratorsPopOverWrapper}>
-            <CollaboratorsPopOver collaborators={collaborators} />
-          </div>
           <div className={styles.wrapper}>
             {collaborators.length > MAX_NUMBER && (
               <div className={`${styles.profileImage} ${styles.profilePlus}`}>

src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.css.ts → src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsModal.css.ts

@@ -1,51 +1,51 @@
 import { style } from '@vanilla-extract/css';
 import { vars } from '@/styles/theme.css';
-import { titleSmall } from '@/styles/font.css';
+import * as fonts from '@/styles/font.css';
 
 /**
  * @todo 공용 폰트 스타일 적용
  */
 
 export const wrapper = style({
-  padding: '12px',
-  height: 'auto',
-  maxHeight: '142px',
-  width: 'auto',
+  height: '200px',
+  width: '100%',
 
-  position: 'absolute',
-  top: '33px',
-  right: '-10px',
+  position: 'relative',
 
-  overflow: 'scroll',
-  borderRadius: '10px',
-  background: 'rgba(255, 255, 255, 1)',
-  boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px',
-  zIndex: 20,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '15px',
 
-  '::-webkit-scrollbar': {
-    display: 'none',
-  },
+  background: vars.color.white,
 });
 
 export const listWrapper = style({
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'center',
-  gap: '8px',
+  gap: '13px',
+
+  overflow: 'scroll',
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
 });
 
-export const itemWrapper = style({
-  marginTop: '10px',
+export const cancelButton = style({
+  position: 'absolute',
+  right: 0,
+});
 
+export const itemWrapper = style({
   display: 'flex',
   alignItems: 'center',
   gap: '8px',
 });
 
 export const collaboratorTitle = style([
-  titleSmall,
+  fonts.labelLarge,
   {
     color: vars.color.black,
+    textAlign: 'center',
   },
 ]);
 
@@ -60,10 +60,9 @@ export const profileImage = style({
   borderRadius: '9999px',
 });
 
-export const nickname = style({
-  width: '85px',
-
-  fontSize: '1.2rem',
-  fontWeight: 600,
-  letterSpacing: '-0.36px',
-});
+export const nickname = style([
+  fonts.labelSmall,
+  {
+    fontWeight: 600,
+  },
+]);

src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsModal.tsx

@@ -0,0 +1,46 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import * as styles from './CollaboratorsModal.css';
+import { UserProfileType } from '@/lib/types/userProfileType';
+import CancelButton from '/public/icons/cancel_button.svg';
+import { vars } from '@/styles/theme.css';
+
+interface CollaboratorsModalProps {
+  collaborators?: UserProfileType[] | null;
+  handleSetOff: () => void;
+}
+
+function CollaboratorsModal({ collaborators, handleSetOff }: CollaboratorsModalProps) {
+  return (
+    <div className={styles.wrapper}>
+      <button className={styles.cancelButton} onClick={handleSetOff}>
+        <CancelButton width={24} height={24} fill={vars.color.gray7} />
+      </button>
+      <span className={styles.collaboratorTitle}>콜라보레이터</span>
+      <ul className={styles.listWrapper}>
+        {collaborators?.map((item: UserProfileType) => {
+          return (
+            <li className={styles.itemWrapper} key={item.id}>
+              <Link href={`/user/${item.id}/mylist`}>
+                <div className={styles.profileImageParent}>
+                  <Image
+                    src={item.profileImageUrl}
+                    className={styles.profileImage}
+                    alt="사용자 프로필 이미지"
+                    fill
+                    style={{
+                      objectFit: 'cover',
+                    }}
+                  />
+                </div>
+              </Link>
+              <span className={styles.nickname}>{item.nickname}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default CollaboratorsModal;

src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts

@@ -1,6 +1,5 @@
 import { style } from '@vanilla-extract/css';
 import { vars } from '@/styles/theme.css';
-import { caption1 } from '@/styles/font.css';
 
 /**@todo 공용폰트 스타일 적용 */
 
@@ -50,35 +49,32 @@ export const commentInformationWrapper = style({
   gap: '8px',
 });
 
-export const commentWriter = style([
-  caption1,
-  {
-    fontWeight: 600,
-    lineHeight: 'normal',
-  },
-]);
+export const commentWriter = style({
+  fontSize: '1.2rem',
+  fontWeight: 600,
+  lineHeight: 'normal',
+});
 
 export const commentCreatedTime = style({
   fontSize: '1rem',
   fontWeight: 500,
   color: vars.color.gray9,
 });
 
-export const commentContent = style([
-  caption1,
-  {
-    fontWeight: 500,
-    lineHeight: 'normal',
-  },
-]);
-
-export const deletedComment = style([
-  commentContent,
-  {
-    fontWeight: 400,
-    color: vars.color.gray9,
-  },
-]);
+export const commentContent = style({
+  fontSize: '1.2rem',
+  fontWeight: 500,
+  lineHeight: 'normal',
+  letterSpacing: '-0.36px',
+});
+
+export const deletedComment = style({
+  fontSize: '1.2rem',
+  fontWeight: 400,
+  color: vars.color.gray9,
+  lineHeight: 'normal',
+  letterSpacing: '-0.36px',
+});
 
 export const actionButtonWrapper = style({
   display: 'flex',

src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx

@@ -13,6 +13,7 @@ import { UserType } from '@/lib/types/userProfileType';
 import { useCommentId } from '@/store/useComment';
 
 import * as styles from './Comment.css';
+import { vars } from '@/styles/theme.css';
 import DefaultProfile from '/public/icons/default_profile_temporary.svg';
 import EditPen from '/public/icons/edit_pen.svg';
 
@@ -104,7 +105,7 @@ function Comment({
         {!comment?.isDeleted && currentUserInfo?.id === comment?.userId && (
           <div className={styles.actionButtonWrapper}>
             <button className={styles.editButton} onClick={() => comment && handleEditButtonClick(comment?.content)}>
-              <EditPen />
+              <EditPen width={17} height={17} fill={vars.color.gray7} />
             </button>
             <DeleteModalButton onDelete={handleClickDeleteButton} />
           </div>

src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx

@@ -1,11 +1,13 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import { ChangeEvent, useState } from 'react';
 
 import { useUser } from '@/store/useUser';
 import { useIsEditing } from '@/store/useComment';
 import * as styles from './Comments.css';
 import CancelButton from '/public/icons/cancel_button.svg';
 import Avatar from '/public/icons/avatar.svg';
+import { vars } from '@/styles/theme.css';
 
 interface CommentFormProps {
   comment?: string;
@@ -41,16 +43,18 @@ function CommentForm({
     <div className={styles.formWrapperOuter}>
       <div className={styles.profileImageParent}>
         {imageSrc ? (
-          <Image
-            src={imageSrc}
-            alt="프로필 이미지"
-            className={styles.profileImage}
-            fill
-            style={{
-              objectFit: 'cover',
-            }}
-            onError={handleImageError}
-          />
+          <Link href={`/user/${userId}/mylist`}>
+            <Image
+              src={imageSrc}
+              alt="프로필 이미지"
+              className={styles.profileImage}
+              fill
+              style={{
+                objectFit: 'cover',
+              }}
+              onError={handleImageError}
+            />
+          </Link>
         ) : (
           <Avatar width={30} height={30} />
         )}
@@ -59,13 +63,27 @@ function CommentForm({
         {activeNickname && (
           <div className={styles.activeReplyWrapper}>
             <span className={styles.replyNickname}>{`@${activeNickname}님에게 남긴 답글`}</span>
-            <CancelButton className={styles.clearButton} alt="지우기 버튼" onClick={handleUpdate} />
+            <CancelButton
+              className={styles.clearButton}
+              alt="지우기 버튼"
+              onClick={handleUpdate}
+              width={18}
+              height={18}
+              fill={vars.color.gray7}
+            />
           </div>
         )}
         {isEditing && (
           <div className={styles.activeReplyWrapper}>
             <span className={styles.replyNickname}>{`댓글/답글 수정 중`}</span>
-            <CancelButton className={styles.clearButton} alt="지우기 버튼" onClick={handleCancel} />
+            <CancelButton
+              className={styles.clearButton}
+              alt="지우기 버튼"
+              onClick={handleCancel}
+              width={18}
+              height={18}
+              fill={vars.color.gray7}
+            />
           </div>
         )}
         <form className={styles.formContainer} onSubmit={handleSubmit}>

src/app/list/[listId]/_components/ListDetailOuter/HeaderRight.css.ts

@@ -11,5 +11,5 @@ export const buttonResetStyle = style({
 export const headerRightWrapper = style({
   display: 'flex',
   alignItems: 'center',
-  gap: '12px',
+  gap: '15px',
 });