Merge pull request #176 from D3vPals/feat/#171

합/불합 리스트에서 지원자 클릭시 리다이렉트 후 정보 노출

Author: hyeongjun6364

src/components/common/modal/Modal.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
-import { XMarkIcon, CheckCircleIcon } from '@heroicons/react/24/outline';
+import { CheckCircleIcon } from '@heroicons/react/24/outline';
 import * as S from './Modal.styled';
 import ScrollPreventor from './ScrollPreventor';
+import ModalCloseButton from './ModalCloseButton';
 import { useOutsideClick } from '../../../hooks/useOutsideClick';
 
 interface ModalProps {
@@ -35,9 +36,7 @@ const Modal = ({ children, isOpen, onClose }: ModalProps) => {
         onAnimationEnd={handleAnimationEnd}
       >
         <S.ModalBody ref={modalRefs}>
-          <S.ModalCloseButton onClick={handleClose}>
-            <XMarkIcon />
-          </S.ModalCloseButton>
+          <ModalCloseButton onClose={handleClose} />
           <S.ModalIconWrapper>
             <CheckCircleIcon />
           </S.ModalIconWrapper>

src/components/common/modal/ModalCloseButton.tsx

@@ -0,0 +1,15 @@
+import * as S from './Modal.styled';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+interface ModalCloseButtonProps {
+  onClose: () => void;
+}
+
+function ModalCloseButton({ onClose }: ModalCloseButtonProps) {
+  return (
+    <S.ModalCloseButton onClick={onClose}>
+      <XMarkIcon />
+    </S.ModalCloseButton>
+  );
+}
+
+export default ModalCloseButton;

src/components/common/title/Title.styled.ts

@@ -4,6 +4,11 @@ import { TitleProps } from './Title';
 export const Container = styled.h1<Omit<TitleProps, 'children'>>`
   font-size: ${({ theme, size }) => theme.heading[size].fontSize};
   color: ${({ theme }) => theme.color.primary};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     font-size: ${({ theme, size }) => theme.heading[size].tabletFontSize};

src/components/manageProjects/applicantList/ApplicantItem.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import { ApplicantInfo } from '../../../models/applicant';
 import * as S from './ApplicantItem.styled';
 
@@ -13,9 +14,21 @@ function ApplicantItem({
   onClick,
 }: ApplicantItemProps) {
   const isSelected = selectedApplicant === applicantData.userId;
+  const itemRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (isSelected && itemRef.current) {
+      itemRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
+    }
+  }, [isSelected]);
+
   return (
     <>
       <S.Button
+        ref={itemRef}
         $isSelected={isSelected}
         onClick={() => onClick(applicantData.userId)}
         $passStatus={applicantData.status}

src/components/manageProjects/applicantList/ApplicantList.tsx

@@ -16,9 +16,9 @@ function ApplicantList({
     <S.Container>
       {applicantsData.map((data) => (
         <ApplicantItem
+          key={data.userId}
           selectedApplicant={selectedApplicant}
           onClick={onClick}
-          key={data.userId}
           applicantData={data}
         />
       ))}

src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts

@@ -21,6 +21,7 @@ export const ItemWrapper = styled.li`
 export const NickName = styled.p`
   font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 400;
+  cursor: pointer;
 
   @media ${({ theme }) => theme.mediaQuery.tablet} {
     font-size: ${({ theme }) => theme.heading.small.tabletFontSize};

src/components/manageProjects/passNonPassList/PassNonPassItem.tsx

@@ -7,20 +7,26 @@ import * as S from './PassNonPassItem.styled';
 interface PassNonPassItemProps {
   userInfo: ApplicantInfo;
   projectData: ProjectDetailExtended;
-  onClick: ({ status, userId }: useMutationParams) => void;
+  hanldeStatus: ({ status, userId }: useMutationParams) => void;
+  handleUserInfo: (userId: number) => void;
 }
 
 function PassNonPassItem({
   userInfo,
-  onClick,
+  hanldeStatus,
   projectData,
+  handleUserInfo,
 }: PassNonPassItemProps) {
   return (
     <S.ItemWrapper>
-      <S.NickName>{userInfo.User.nickname}</S.NickName>
+      <S.NickName onClick={() => handleUserInfo(userInfo.userId)}>
+        {userInfo.User.nickname}
+      </S.NickName>
       <DeleteButton
         disabled={projectData.isDone}
-        onClick={() => onClick({ status: 'WAITING', userId: userInfo.userId })}
+        onClick={() =>
+          hanldeStatus({ status: 'WAITING', userId: userInfo.userId })
+        }
       />
     </S.ItemWrapper>
   );

src/components/manageProjects/passNonPassList/PassNonPassList.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import { useMutationParams } from '../../../hooks/usePassNonPassMutation';
 import { ApplicantInfo } from '../../../models/applicant';
 import { ProjectDetailExtended } from '../../../models/projectDetail';
@@ -7,20 +8,26 @@ import * as S from './PassNonPassList.styled';
 interface PassNonPassListProps {
   passNonPassListData: ApplicantInfo[];
   projectData: ProjectDetailExtended;
-  onClick: ({ status, userId }: useMutationParams) => void;
+  handleStatus: ({ status, userId }: useMutationParams) => void;
 }
 
 function PassNonPassList({
   passNonPassListData,
   projectData,
-  onClick,
+  handleStatus,
 }: PassNonPassListProps) {
+  const navigate = useNavigate();
+  const handleUserInfo = (userId: number) => {
+    navigate(`/manage/${projectData.id}?userId=${userId}`);
+  };
+
   return (
     <S.Wrapper>
       {passNonPassListData.map((data) => (
         <PassNonPassItem
           key={data.userId}
-          onClick={onClick}
+          handleUserInfo={handleUserInfo}
+          hanldeStatus={handleStatus}
           userInfo={data}
           projectData={projectData}
         />

src/hooks/useApplicantInfo.ts

@@ -1,10 +1,13 @@
 import { getApplicantInfo } from '../api/applicant.api';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { applicantKey } from './queries/keys';
+import { useLocation } from 'react-router-dom';
 
 export const useApplicantInfo = (projectId: number) => {
   const [selectedApplicant, setSelectedUser] = useState<number | null>(null);
+  const location = useLocation();
+  const userId = new URLSearchParams(location.search).get('userId');
 
   const { data } = useQuery({
     queryKey: [applicantKey.info, projectId, selectedApplicant],
@@ -14,8 +17,12 @@ export const useApplicantInfo = (projectId: number) => {
   });
 
   const handleSelectedApplicant = (userId: number) => {
-    setSelectedUser(userId);
+    if (userId) setSelectedUser(userId);
   };
 
+  useEffect(() => {
+    handleSelectedApplicant(Number(userId));
+  }, [location.search]);
+
   return { applicantInfo: data, selectedApplicant, handleSelectedApplicant };
 };