자잘한 경로 수정, userProfile 공통화, 공고관리 지원자 합/불관리 클릭 범위 수정 (#issue 298)

src/components/user/comment/commentComponent/CommentComponentLayout.tsx

@@ -5,7 +5,7 @@ import useComment from '../../../../hooks/user/CommentHooks/useComment';
 import ReplyComponent from '../replyComponent/ReplyComponent';
 import ArrowUp from '../../../../assets/ArrowUp.svg';
 import CommentComponent from './commentComponent/CommentComponent';
-import { CommentType } from '../../../../models/comment';
+import type { CommentType } from '../../../../models/comment';
 import dropdownButton from '../../../../assets/dropdownButton.svg';
 import ArrowDown from '../../../../assets/ArrowDown.svg';
 

src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx

@@ -3,7 +3,7 @@ import * as S from './CommentComponent.styled';
 import chat from '../../../../../assets/chat.svg';
 import { Link } from 'react-router-dom';
 import CommentInput from '../../commentInput/CommentInput';
-import { CommentType } from '../../../../../models/comment';
+import type { CommentType } from '../../../../../models/comment';
 import { ROUTES } from '../../../../../constants/user/routes';
 import Avatar from '../../../../common/avatar/Avatar';
 

src/components/user/customerService/CustomerServiceHeader.tsx

@@ -1,7 +1,4 @@
-import {
-  ArrowUturnLeftIcon,
-  MagnifyingGlassIcon,
-} from '@heroicons/react/24/outline';
+import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/outline';
 import * as S from './CustomerServiceHeader.styled';
 import MovedInquiredLink from './MoveInquiredLink';
 import { Outlet } from 'react-router-dom';
@@ -55,7 +52,7 @@ export default function CustomerServiceHeader({
                 aria-label='show all result'
                 onClick={handleReset}
               >
-                <ArrowUturnLeftIcon />
+                <XCircleIcon />
               </S.UturnButton>
             )}
             <S.SearchButton type='submit' aria-label='search'>

src/components/user/customerService/inquiry/Inquiry.tsx

@@ -65,6 +65,8 @@ export default function Inquiry() {
       content: form.content.trim() !== '',
     };
 
+    console.log(isCategoryOpen);
+
     if (!isValid.category) {
       return handleModalOpen(INQUIRY_MESSAGE.selectCategory);
     }
@@ -188,12 +190,7 @@ export default function Inquiry() {
             </S.InquiryFileWrapper>
           </S.ContentWrapper>
           <S.SendButtonWrapper>
-            <S.SendButton
-              type='submit'
-              onClick={() => setIsCategoryOpen((prev) => !prev)}
-            >
-              제출
-            </S.SendButton>
+            <S.SendButton type='submit'>제출</S.SendButton>
           </S.SendButtonWrapper>
         </S.InquiryWrapper>
       </S.InquiryForm>

src/components/user/customerService/noticeDetail/NoticeDetailBundle.styled.ts

@@ -1,8 +1,7 @@
 import styled from 'styled-components';
+import { SpinnerWrapperStyled } from '../../mypage/Spinner.styled';
 
-export const SpinnerWrapper = styled.div`
-  height: 60vh;
-`;
+export const SpinnerWrapper = styled(SpinnerWrapperStyled)``;
 
 export const Container = styled.section`
   width: 75%;

src/components/user/customerService/noticeDetail/content/NoticeDetailContent.tsx

@@ -1,7 +1,7 @@
 import { EyeIcon } from '@heroicons/react/24/outline';
 import { formatDate } from '../../../../../util/format';
 import * as S from './NoticeDetailContent.styled';
-import logo from '../../../../assets/mainlogo.svg';
+import logo from '../../../../../assets/mainlogo.svg';
 import ContentBorder from '../../../../common/contentBorder/ContentBorder';
 
 interface NoticeDetailContentProps {

src/components/user/home/projectCardLists/ProjectCardLists.tsx

@@ -12,9 +12,9 @@ import Pagination from '../../../common/pagination/Pagination';
 export type Display = 'flex' | 'grid';
 
 export default function ProjectCardLists() {
+  const [display, setDisplay] = useState<Display>('grid');
   const { projectListsData, isLoading } = useProjectCardListData();
   const { searchFilters, handleUpdateFilters } = useSaveSearchFiltering();
-  const [display, setDisplay] = useState<Display>('grid');
 
   const handleChangePagination = (page: number) => {
     handleUpdateFilters('page', page);

src/components/user/home/searchFiltering/filteringContents/FilteringContents.tsx

@@ -1,13 +1,13 @@
 import Filtering from './filtering/Filtering';
 import * as S from './FilteringContents.styled';
+import beginner from '../../../../../assets/beginner.svg';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import SkillTagBox from '../../../../common/skillTagBox/SkillTagBox';
 import React, { useState } from 'react';
 import { useSearchFilteringSkillTag } from '../../../../../hooks/user/useSearchFilteringSkillTag';
 import { useOutsideClick } from '../../../../../hooks/user/useOutsideClick';
 import { useSaveSearchFiltering } from '../../../../../hooks/user/useSaveSearchFiltering';
 import { SEARCH_FILTERING_DEFAULT_VALUE } from '../../../../../constants/user/homeConstants';
-import beginner from '../../../../../assets/beginner.svg';
+import SkillTagBox from '../../../../common/skillTagBox/SkillTagBox';
 
 export default function FilteringContents() {
   const { positionTagsData, methodTagsData } = useSearchFilteringSkillTag();

src/components/user/home/searchFiltering/filteringContents/filtering/Filtering.tsx

@@ -1,10 +1,11 @@
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as S from './Filtering.styled';
 import { useEffect, useState } from 'react';
+import type { MethodTag, PositionTag } from '../../../../../../models/tags';
+import { useOutsideClick } from '../../../../../../hooks/user/useOutsideClick';
 import { useSaveSearchFiltering } from '../../../../../../hooks/user/useSaveSearchFiltering';
-import { MethodTag, PositionTag } from '../../../../../../models/tags';
 import { SEARCH_FILTERING_DEFAULT_VALUE } from '../../../../../../constants/user/homeConstants';
-import { useOutsideClick } from '../../../../../../hooks/user/useOutsideClick';
+
 interface FilteringProps {
   selects: PositionTag[] | MethodTag[];
   defaultValue: string;

src/components/user/manageProjects/CardList.tsx

@@ -1,8 +1,7 @@
 import * as S from './CardList.styled';
-
 import type { ManagedProject } from '../../../models/manageMyProject';
 import Card from './Card';
-import CreateButton from '../../assets/createProjectButton.svg';
+import CreateButton from '../../../assets/createProjectButton.svg';
 import { ROUTES } from '../../../constants/user/routes';
 
 interface CardListProps {

src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts

@@ -5,6 +5,14 @@ export const DeleteButton = styled.button`
     color: #e69191;
     width: 1.2rem;
     height: 1.2rem;
+    border-radius: 50%;
+  }
+
+  &:hover {
+    transform: scale(1.1);
+    svg {
+      color: ${({ theme }) => theme.color.white};
+    }
   }
 
   &:disabled {

src/components/user/manageProjects/passNonPassList/DeleteButton.tsx

@@ -1,15 +1,21 @@
 import { ButtonHTMLAttributes } from 'react';
 import * as S from './DeleteButton.styled';
-import { XCircleIcon } from '@heroicons/react/24/outline';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 interface DeleteButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   onClick: () => void;
   disabled: boolean;
 }
 
 function DeleteButton({ onClick, disabled }: DeleteButtonProps) {
   return (
-    <S.DeleteButton onClick={onClick} disabled={disabled}>
-      <XCircleIcon />
+    <S.DeleteButton
+      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      disabled={disabled}
+    >
+      <XMarkIcon />
     </S.DeleteButton>
   );
 }

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

@@ -6,6 +6,7 @@ export const ItemWrapper = styled.li`
   align-items: center;
   width: 100%;
   padding: 1rem;
+  cursor: pointer;
   border: 1px solid ${({ theme }) => theme.color.grey};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   transition: all 0.2s ease;
@@ -23,7 +24,6 @@ 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/user/manageProjects/passNonPassList/PassNonPassItem.tsx

@@ -7,25 +7,26 @@ import * as S from './PassNonPassItem.styled';
 interface PassNonPassItemProps {
   userInfo: ApplicantInfo;
   projectData: ProjectDetailPlusExtended;
-  hanldeStatus: ({ status, userId }: useMutationParams) => void;
+  handleStatus: ({ status, userId }: useMutationParams) => void;
   handleUserInfo: (userId: number) => void;
 }
 
 function PassNonPassItem({
   userInfo,
-  hanldeStatus,
+  handleStatus,
   projectData,
   handleUserInfo,
 }: PassNonPassItemProps) {
   return (
-    <S.ItemWrapper>
-      <S.NickName onClick={() => handleUserInfo(userInfo.userId)}>
-        {userInfo.user.nickname}
-      </S.NickName>
+    <S.ItemWrapper
+      onClick={() => handleUserInfo(userInfo.userId)}
+      aria-label='지원자 이력보기'
+    >
+      <S.NickName>{userInfo.user.nickname}</S.NickName>
       <DeleteButton
         disabled={projectData.isDone}
         onClick={() =>
-          hanldeStatus({ status: 'WAITING', userId: userInfo.userId })
+          handleStatus({ status: 'WAITING', userId: userInfo.userId })
         }
       />
     </S.ItemWrapper>

src/components/user/manageProjects/passNonPassList/PassNonPassList.tsx

@@ -27,7 +27,7 @@ function PassNonPassList({
         <PassNonPassItem
           key={data.userId}
           handleUserInfo={handleUserInfo}
-          hanldeStatus={handleStatus}
+          handleStatus={handleStatus}
           userInfo={data}
           projectData={projectData}
         />

src/components/user/mypage/ContentTab.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import * as S from './ContentTab.styled';
 import { Link, Outlet, useLocation } from 'react-router-dom';
+import { ROUTES } from '../../../constants/user/routes';
 import ScrollWrapper from './ScrollWrapper';
 import MovedInquiredLink from '../customerService/MoveInquiredLink';
-import { ROUTES } from '../../../constants/user/routes';
 
 interface Filter {
   title: string;

src/components/user/mypage/Spinner.styled.ts

@@ -10,7 +10,7 @@ const spin = keyframes`
   }
 `;
 
-export const SpinnerWrapper = styled.div`
+export const SpinnerContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -25,3 +25,11 @@ export const Circle = styled.div<{ $size: string; $color: string }>`
   border-radius: 50%;
   animation: ${spin} 1s linear infinite;
 `;
+
+export const SpinnerWrapperStyled = styled.div`
+  width: 100vw;
+  height: 60vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

src/components/user/mypage/Spinner.tsx

@@ -7,9 +7,9 @@ interface SpinnerProps {
 
 const Spinner = ({ size = '50px', color = '#3e5879' }: SpinnerProps) => {
   return (
-    <S.SpinnerWrapper>
+    <S.SpinnerContainer>
       <S.Circle $size={size} $color={color} />
-    </S.SpinnerWrapper>
+    </S.SpinnerContainer>
   );
 };
 

src/components/user/mypage/activityLog/inquiries/Inquiries.tsx

@@ -9,7 +9,7 @@ export default function Inquiries() {
   const { myInquiriesData, isLoading } = useGetMyInquiries();
 
   if (isLoading) {
-    return <Spinner size='50px' color='#3e5879' />;
+    return <Spinner />;
   }
 
   if (!myInquiriesData || myInquiriesData?.length === 0)

src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
+import type { MyInquiries } from '../../../../../../models/activityLog';
 import * as S from './Inquiry.styled';
-import { MyInquiries } from '../../../../../../models/activityLog';
 import { My_INQUIRIES_MESSAGE } from '../../../../../../constants/user/customerService';
 
 interface InquiryProps {

src/components/user/mypage/joinedProject/MyJoinProjects.tsx

@@ -11,8 +11,9 @@ const MyJoinProjects = () => {
   const { myJoinedProjectListData, isLoading } = useMyJoinedProjectList();
 
   if (isLoading) {
-    return <Spinner size='50px' color='#3e5879' />;
+    return <Spinner />;
   }
+
   if (!myJoinedProjectListData) return;
 
   return (

src/components/user/mypage/joinedProject/Project.tsx

@@ -1,6 +1,6 @@
 import * as S from './Project.styled';
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/outline';
-import { JoinedProject } from '../../../../models/userProject';
+import type { JoinedProject } from '../../../../models/userProject';
 import beginner from '../../../../assets/beginner.svg';
 
 interface ProjectProps {

src/components/user/mypage/myProfile/MyProfile.tsx

@@ -36,7 +36,9 @@ const MyProfile = () => {
       </S.FilterWrapper>
       <ScrollWrapper $height='0%' scrollRef={scrollRef}>
         <S.SectionContainer>
-          <Outlet context={{ myData, scrollRef, handleModalOpen }} />
+          <Outlet
+            context={{ userInfoData: myData, scrollRef, handleModalOpen }}
+          />
         </S.SectionContainer>
       </ScrollWrapper>
       <Modal isOpen={isOpen} onClose={handleModalClose}>

src/components/user/mypage/myProfile/profile/Profile.styled.ts

@@ -88,6 +88,10 @@ export const IconWrapper = styled.div`
   border: 1px solid #f0f0f0;
 `;
 
+export const PositionWrapper = styled.div`
+  flex-wrap: wrap;
+`;
+
 export const Bio = styled.p`
   white-space: pre-line;
   word-break: break-word;