💄 Design: Action Items 담당자 지정 창 퍼블리싱 (#173)

src/components/writeRetro/ActionItems/Members.tsx

@@ -0,0 +1,32 @@
+import * as S from '@/styles/writeRetroStyles/Members.styles';
+
+interface UserListProps {
+  users: { name: string; image: string }[];
+  onSelectUserImg: (image: string) => void;
+  onSelectUserName: (name: string) => void;
+}
+
+export const Members: React.FC<UserListProps> = ({ users, onSelectUserImg, onSelectUserName }) => {
+  const handleUserClick = (name: string, image: string) => {
+    onSelectUserName(name);
+    onSelectUserImg(image);
+  };
+
+  return (
+    <>
+      <S.ListConatiner>
+        <S.TitleContainer>
+          <S.Title>해당 업무의 담당자를 지정해주세요</S.Title>
+        </S.TitleContainer>
+        <ul>
+          {users.map((user, index) => (
+            <S.ListItem key={index} onClick={() => handleUserClick(user.name, user.image)}>
+              <S.ProfileImage src={user.image} /> <S.UserName>{user.name}</S.UserName>
+            </S.ListItem>
+          ))}
+        </ul>
+      </S.ListConatiner>
+    </>
+  );
+};
+export default Members;

src/components/writeRetro/task/TeamTask.tsx

@@ -7,6 +7,9 @@ import dayjs from 'dayjs';
 import TeamTaskMessage from './taskMessage/TeamTaskMessage';
 import { sectionData } from '@/api/@types/Section';
 import { SectionServices } from '@/api/services/Section';
+import UserProfile1 from '@/assets/UserProfile1.png';
+import UserProfile2 from '@/assets/UserProfile2.png';
+import Members from '@/components/writeRetro/ActionItems/Members';
 import ReviseModal from '@/components/writeRetro/task/ReviseModal';
 import { useCustomToast } from '@/hooks/useCustomToast';
 import * as S from '@/styles/writeRetroStyles/Layout.style';
@@ -46,6 +49,38 @@ const TeamTask: FC<Props> = ({ name }) => {
     }
   };
 
+  // action items 담당자 지정
+  const [hoveredUser, setHoveredUser] = useState<string | null>(null);
+  const [showPopup, setShowPopup] = useState<boolean>(false);
+  const [selectedUserName, setSelectedUserName] = useState<string | null>(null);
+  const [selectedUserImg, setSelectedUserImg] = useState<string | null>(null);
+
+  const users = [
+    { name: 'User 1', image: UserProfile1 },
+    { name: 'User 2', image: UserProfile2 },
+  ];
+
+  const togglePopup = () => {
+    setShowPopup(!showPopup);
+  };
+
+  const handleSelectUserImg = (image: string) => {
+    setSelectedUserImg(image);
+    setShowPopup(false);
+  };
+
+  const handleSelectUserName = (name: string) => {
+    setSelectedUserName(name);
+  };
+
+  const handleMouseEnter = (name: string) => {
+    setHoveredUser(name);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredUser(null);
+  };
+
   return (
     <>
       <S.TaskBox>
@@ -77,9 +112,23 @@ const TeamTask: FC<Props> = ({ name }) => {
           {name.sectionName === 'Action Items' && (
             <S.ManagerStyle>
               <div>
-                <S.ManagerButton>M</S.ManagerButton>
+                <S.ManagerButton
+                  onClick={togglePopup}
+                  onMouseEnter={() => handleMouseEnter(selectedUserName || '')}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  {selectedUserImg ? <img src={selectedUserImg} /> : 'M'}
+                  {hoveredUser && <S.HoverUser>{hoveredUser}</S.HoverUser>} {/* 이름 : {name.username} */}
+                </S.ManagerButton>
+                {showPopup && (
+                  <Members
+                    users={users}
+                    onSelectUserImg={handleSelectUserImg}
+                    onSelectUserName={handleSelectUserName}
+                  />
+                )}
               </div>
-              <S.ManagerText>{name.username}</S.ManagerText>
+              <S.ManagerText>담당자</S.ManagerText>
             </S.ManagerStyle>
           )}
 

src/styles/writeRetroStyles/Layout.style.ts

@@ -414,6 +414,7 @@ export const ManagerButton = styled.button`
   &:hover {
     cursor: pointer;
   }
+  position: relative;
 `;
 
 export const ReviseModalStyle = styled.div`
@@ -479,3 +480,15 @@ export const ReviseModalButton = styled.button`
   border-radius: 4px;
   margin-right: 30px;
 `;
+
+export const HoverUser = styled.span`
+  position: absolute;
+  width: 40px;
+  left: -5px; /* 원하는 만큼의 왼쪽 이동 값 설정 */
+  top: 100%;
+`;
+
+export const ActionItemsUserImg = styled.img`
+  width: 24px;
+  height: 24px;
+`;

src/styles/writeRetroStyles/Members.styles.ts

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+export const ListConatiner = styled.div`
+  position: absolute;
+  z-index: 1;
+  width: 280px;
+  max-height: 350px;
+  overflow-y: auto;
+  border: 1px solid #c8c8c8;
+  border-radius: 10px;
+  background-color: #f4f4f4;
+`;
+
+export const Title = styled.span`
+  color: #969696;
+`;
+
+export const TitleContainer = styled.div`
+  background-color: #f0f0f0;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
+  border-bottom: 1px solid #e5e5e5;
+  padding: 10px;
+`;
+
+export const ListBox = styled.ul``;
+
+export const ListItem = styled.li`
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  color: #969696;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const ProfileImage = styled.img`
+  margin-left: 5px;
+  margin-right: 5px;
+  width: 30px;
+  height: 30px;
+`;
+
+export const UserName = styled.span`
+  padding-left: 10px;
+`;