"지원하기" 페이지에 자잘한 기타 기능들 추가 및 자잘한 경로 에러 수정( issue #293, #299 )

src/api/auth.api.ts

@@ -1,8 +1,8 @@
 import { ApiVerifyNickname, VerifyEmail } from '../models/auth';
 import { httpClient } from './http.api';
-import { registerFormValues } from '../pages/register/Register';
-import { changePasswordFormValues } from '../pages/changePassword/ChangePassword';
 import { loginFormValues } from '../pages/login/Login';
+import { registerFormValues } from '../pages/user/register/Register';
+import { changePasswordFormValues } from '../pages/user/changePassword/ChangePassword';
 
 export const postVerificationEmail = async (email: string) => {
   try {

src/components/common/header/Header.tsx

@@ -11,12 +11,11 @@ import loadingImg from '../../../assets/loadingImg.svg';
 import { useModal } from '../../../hooks/useModal';
 import Modal from '../modal/Modal';
 import { formatImgPath } from '../../../util/formatImgPath';
-import bell from '../../../assets/bell.svg';
-import Notification from './Notification/Notification';
-import bellLogined from '../../../assets/bellLogined.svg';
-import useNotification from '../../../hooks/useNotification';
-import { useEffect } from 'react';
-import { testLiveAlarm } from '../../../api/alarm.api';
+// import bell from '../../../assets/bell.svg';
+// import Notification from './Notification/Notification';
+// import bellLogined from '../../../assets/bellLogined.svg';
+// import { useEffect } from 'react';
+// import { testLiveAlarm } from '../../../api/alarm.api';
 import { useMyProfileInfo } from '../../../hooks/user/useMyInfo';
 import { ROUTES } from '../../../constants/user/routes';
 

src/components/common/modal/Modal.tsx

@@ -8,12 +8,14 @@ import { ModalWrapper } from './ModalWrapper';
 interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
+  onConfirm?: () => void;
 }
 
 const Modal = ({
   children,
   isOpen,
   onClose,
+  onConfirm,
 }: PropsWithChildren<ModalProps>) => {
   const modalRefs = useOutsideClick(() => handleClose());
   const [isFadingOut, setIsFadingOut] = useState(false);
@@ -24,7 +26,11 @@ const Modal = ({
 
   const handleAnimationEnd = () => {
     if (isFadingOut) {
-      onClose();
+      if (onConfirm) {
+        onConfirm();
+      } else {
+        onClose();
+      }
       setIsFadingOut(false);
     }
   };
@@ -33,7 +39,7 @@ const Modal = ({
 
   return createPortal(
     <ScrollPreventor>
-      <ModalWrapper isOpen={isOpen} onClose={onClose}>
+      <ModalWrapper isOpen={isOpen} onClose={onClose} onConfirm={onConfirm}>
         <ModalWrapper.Container
           $fadeOut={isFadingOut}
           onAnimationEnd={handleAnimationEnd}

src/components/common/modal/ModalWrapper.tsx

@@ -15,11 +15,13 @@ export const ModalWrapper = ({
       event.stopPropagation();
     }
   },
+  onConfirm = () => {},
   children,
 }: PropsWithChildren<Partial<ModalContextProps>>) => {
   const modalProps: ModalContextProps = {
     isOpen,
     onClose,
+    onConfirm,
   };
 
   return <ModalProvider value={modalProps}>{children}</ModalProvider>;

src/components/user/applyComponents/careersComponent/CareersComponent.styled.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Button from '../../common/Button/Button';
+import Button from '../../../common/Button/Button';
 
 export const Container = styled.div`
   width: 100%;
@@ -17,11 +17,15 @@ export const CareerContainer = styled.div`
   }
 `;
 
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
 export const AddButton = styled(Button)`
   width: 50px;
   height: 30px;
   font-size: 13px;
   padding: 10px;
-  cursor: pointer;
   border: 1px solid ${({ theme }) => theme.color.border};
 `;

src/components/user/applyComponents/careersComponent/CareersComponent.tsx

@@ -29,22 +29,24 @@ const CareersComponent = ({ control }: CareersComponentProps) => {
           ))}
         </S.CareerContainer>
       ))}
-      <S.AddButton
-        size='primary'
-        schema='primary'
-        radius='primary'
-        type='button'
-        onClick={() =>
-          appendCareers({
-            name: '',
-            periodStart: '',
-            periodEnd: '',
-            role: '',
-          })
-        }
-      >
-        추가
-      </S.AddButton>
+      <S.ButtonWrapper>
+        <S.AddButton
+          size='primary'
+          schema='primary'
+          radius='primary'
+          type='button'
+          onClick={() =>
+            appendCareers({
+              name: '',
+              periodStart: '',
+              periodEnd: '',
+              role: '',
+            })
+          }
+        >
+          추가
+        </S.AddButton>
+      </S.ButtonWrapper>
     </S.Container>
   );
 };

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

@@ -1,13 +1,13 @@
 import * as S from './CommentComponentLayout.styled';
 import DropDown from '../../../common/dropDown/DropDown';
 import DropDownItem from '../DropDownItem';
-import { CommentType } from '../../../../models/comment';
-import dropdownButton from '../../../assets/dropdownButton.svg';
 import useComment from '../../../../hooks/user/CommentHooks/useComment';
 import ReplyComponent from '../replyComponent/ReplyComponent';
-import ArrowDown from '../../../assets/ArrowDown.svg';
-import ArrowUp from '../../../assets/ArrowUp.svg';
+import ArrowUp from '../../../../assets/ArrowUp.svg';
 import CommentComponent from './commentComponent/CommentComponent';
+import { CommentType } from '../../../../models/comment';
+import dropdownButton from '../../../../assets/dropdownButton.svg';
+import ArrowDown from '../../../../assets/ArrowDown.svg';
 
 interface CommentLayoutProps {
   projectId: number;

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

@@ -1,11 +1,11 @@
 import { Dispatch, SetStateAction } from 'react';
 import * as S from './CommentComponent.styled';
-import Avatar from '../../../common/avatar/Avatar';
-import { CommentType } from '../../../../models/comment';
-import chat from '../../../../assets/chat.svg';
+import chat from '../../../../../assets/chat.svg';
 import { Link } from 'react-router-dom';
-import { ROUTES } from '../../../../constants/routes';
 import CommentInput from '../../commentInput/CommentInput';
+import { CommentType } from '../../../../../models/comment';
+import { ROUTES } from '../../../../../constants/user/routes';
+import Avatar from '../../../../common/avatar/Avatar';
 
 interface CommentComponentProps {
   item: CommentType;

src/components/user/comment/commentInput/CommentInput.styled.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Button from '../../common/Button/Button';
+import Button from '../../../common/Button/Button';
 
 export const InputContainer = styled.div`
   display: flex;

src/components/user/comment/commentInput/CommentInput.tsx

@@ -2,7 +2,7 @@ import * as S from './CommentInput.styled';
 import { Dispatch, SetStateAction, useEffect } from 'react';
 import { useMyProfileInfo } from '../../../../hooks/user/useMyInfo';
 import { formatImgPath } from '../../../../util/formatImgPath';
-import DefaultImg from '../../../assets/defaultImg.png';
+import DefaultImg from '../../../../assets/defaultImg.png';
 import Avatar from '../../../common/avatar/Avatar';
 import { useForm } from 'react-hook-form';
 import useInputFocus from '../../../../hooks/user/useInputFocus';

src/components/user/comment/replyComponent/ReplyComponent.tsx

@@ -1,15 +1,15 @@
 import Avatar from '../../../common/avatar/Avatar';
 import * as S from './ReplyComponent.styled';
-import DefaultImg from '../../../assets/defaultImg.png';
+import DefaultImg from '../../../../assets/defaultImg.png';
 import useComment from '../../../../hooks/user/CommentHooks/useComment';
 import DropDown from '../../../common/dropDown/DropDown';
 import DropDownItem from '../DropDownItem';
-import dropdownButton from '../../../assets/dropdownButton.svg';
 import CommentInput from '../commentInput/CommentInput';
 import useGetReply from '../../../../hooks/user/CommentHooks/useGetReply';
 import LoadingSpinner from '../../../common/loadingSpinner/LoadingSpinner';
 import { Link } from 'react-router-dom';
 import { ROUTES } from '../../../../constants/user/routes';
+import dropdownButton from '../../../../assets/dropdownButton.svg';
 
 interface ReplyComponentProps {
   projectId: number;

src/components/user/evaluation/EvaluationContent.styled.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Button from '../common/Button/Button';
+import Button from '../../common/Button/Button';
 
 export const Container = styled.div`
   display: flex;

src/components/user/home/banner/Banner.tsx

@@ -1,5 +1,5 @@
 import * as S from './Banner.styled';
-import banner from '../../../assets/banner.svg';
+import banner from '../../../../assets/banner.svg';
 
 export default function Banner() {
   return (

src/components/user/home/projectCardLists/cardList/CardList.tsx

@@ -1,10 +1,10 @@
 import PositionButton from '../../../../common/positionButton/PositionButton';
 import * as S from './CardList.styled';
-import beginner from '../../../../assets/beginner.svg';
-import Avatar from '../../../../common/avatar/Avatar';
 import { EyeIcon } from '@heroicons/react/24/outline';
 import type { ProjectList } from '../../../../../models/mainProjectLists';
 import { formatDate } from '../../../../../util/formatDate';
+import Avatar from '../../../../common/avatar/Avatar';
+import beginner from '../../../../../assets/beginner.svg';
 
 interface CardListProps {
   list: ProjectList;
@@ -28,6 +28,7 @@ export default function CardList({ list }: CardListProps) {
               <PositionButton
                 position={tag.name}
                 key={`cardListPosition-${tag.id}`}
+                fontSize
               />
             ))}
           {list.positions.length > listPositionTag.length && (

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';
 
 export default function FilteringContents() {
   const { positionTagsData, methodTagsData } = useSearchFilteringSkillTag();

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

@@ -1,11 +1,10 @@
 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/useOutsideClick';
-import { useSaveSearchFiltering } from '../../../../../hooks/useSaveSearchFiltering';
-import { SEARCH_FILTERING_DEFAULT_VALUE } from '../../../../../constants/homeConstants';
-
+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/passNonPassList/SendResultButton.styled.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Button from '../../common/Button/Button';
+import Button from '../../../common/Button/Button';
 
 export const Wrapper = styled.div`
   width: 100%;

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/routes';
 import ScrollWrapper from './ScrollWrapper';
 import MovedInquiredLink from '../customerService/MoveInquiredLink';
+import { ROUTES } from '../../../constants/user/routes';
 
 interface Filter {
   title: string;

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

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

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

@@ -1,7 +1,7 @@
 import * as S from './Project.styled';
-import BeginnerIcon from '../../../assets/beginner.svg';
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/outline';
 import { JoinedProject } from '../../../../models/userProject';
+import beginner from '../../../../assets/beginner.svg';
 
 interface ProjectProps {
   project: JoinedProject;
@@ -22,11 +22,7 @@ const Project = ({ project }: ProjectProps) => {
       <S.Member>
         <S.Wrapper>
           <S.Beginner>
-            {project.isBeginner ? (
-              <img src={BeginnerIcon} alt='beginner' />
-            ) : (
-              ''
-            )}
+            {project.isBeginner ? <img src={beginner} alt='beginner' /> : ''}
           </S.Beginner>
           <span>{project.totalMember}명</span>
         </S.Wrapper>

src/components/user/mypage/myProfile/profile/Profile.tsx

@@ -1,5 +1,5 @@
 import * as S from './Profile.styled';
-import BeginnerIcon from '../../../../assets/beginner.svg';
+import BeginnerIcon from '../../../../../assets/beginner.svg';
 import 'chart.js/auto';
 import { ChartOptions } from 'chart.js';
 import { Link, useOutletContext } from 'react-router-dom';

src/components/user/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import PositionButton from '../../../common/positionButton/PositionButton';
+import PositionButton from '../../../../common/positionButton/PositionButton';
 
 export const Container = styled.div``;
 

src/components/user/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.tsx

@@ -36,7 +36,9 @@ const MozipCategoryComponent = ({
             <S.PositionButtonFeat
               position={position.name}
               isSelected={isSelected}
-              onClick={(e) => handleClick(e, idx + 1)}
+              onClick={(e: React.MouseEvent<HTMLElement>) =>
+                handleClick(e, idx + 1)
+              }
               key={idx + 1}
               isHover={true}
               fontSize={true}

src/components/user/projectFormComponents/projectInformationText/ProjectInformation.tsx

@@ -5,7 +5,7 @@ import {
 } from '../../../../models/projectDetail';
 import { formatDate } from '../../../../util/formatDate';
 import * as S from './ProjectInformation.styled';
-import beginner from '/src/assets/beginner.svg';
+import beginner from '../../../../assets/beginner.svg';
 
 interface ProjectInformationProps {
   data: ProjectDetailPlusExtended;

src/components/user/projectFormComponents/stepComponent/StepComponent.tsx

@@ -1,22 +1,16 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React from 'react';
 import * as S from './StepComponent.styled';
 import { StepProp } from '../../../../hooks/user/ProjectHooks/useMultiStepForm';
 
 type StepComponentProps = {
   steps: StepProp[];
   currentStepIndex: number;
-  setCurrentStepIndex: Dispatch<SetStateAction<number>>;
 };
 
 const StepComponent: React.FC<StepComponentProps> = ({
   steps,
   currentStepIndex,
-  setCurrentStepIndex,
 }) => {
-  const handleClick = (index: number) => {
-    setCurrentStepIndex(index);
-  };
-
   return (
     <S.Container>
       <S.Line />
@@ -25,10 +19,7 @@ const StepComponent: React.FC<StepComponentProps> = ({
 
         return (
           <S.StepWrapper key={index}>
-            <S.Circle
-              isActive={isActive}
-              onClick={() => handleClick(index)}
-            ></S.Circle>
+            <S.Circle isActive={isActive}></S.Circle>
             <S.Label>{step.title}</S.Label>
           </S.StepWrapper>
         );