Merge pull request #172 from D3vPals/feat/#148

Author: layout-SY

src/api/joinProject.api.ts

@@ -10,7 +10,7 @@ export const getProjectData = async (
   return response.data;
 };
 
-export const createProject = async (formData: FormData) => {
+export const postProject = async (formData: FormData) => {
   const response = await httpClient.post(`/project`, formData);
   return response.status;
 };

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

@@ -11,7 +11,7 @@ export const CareerContainer = styled.div`
   width: 100%;
   margin-bottom: 10px;
 
-  @media (max-width: 963px) {
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     flex-direction: column;
     gap: 10px;
   }

src/components/applyComponents/careersComponent/careersInputComponent/CareersComponentInput.styled.ts

@@ -13,7 +13,7 @@ const dateStyle = css`
 export const CareerInput = styled.input`
   ${basicStyle}
   padding: 10px;
-  font-size: 18px;
+  font-size: 16px;
 
   &:focus {
     outline: none;
@@ -40,18 +40,19 @@ export const CareerInput = styled.input`
     font-size: ${({ theme }) => theme.heading.small.fontSize};
   }
 
-  @media (max-width: 963px) {
-    width: 100%;
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     flex: 1;
     margin-bottom: 10px;
 
     &:nth-child(1),
     &:nth-child(4) {
+      width: 60%;
       flex: 1;
     }
 
     &:nth-child(2),
     &:nth-child(3) {
+      width: 20%;
       flex: 1;
     }
   }

src/components/applyComponents/phoneComponent/PhoneComponent.styled.ts

@@ -8,20 +8,6 @@ export const PhoneInputContainer = styled.div`
   position: relative;
 `;
 
-export const PhoneInput = styled.input<{ name: string }>`
-  width: 60px;
-  padding: 10px;
-  border: 1px solid ${({ theme }) => theme.color.border};
-  border-radius: ${({ theme }) => theme.borderRadius.primary};
-  text-align: center;
-  font-size: 18px;
-
-  &:focus {
-    outline: none;
-    border-color: #888;
-  }
-`;
-
 export const Dash = styled.span`
   align-self: center;
   font-size: 25px;
@@ -30,7 +16,7 @@ export const Dash = styled.span`
 
 export const FormError = styled.p`
   margin-top: 0.3px;
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: ${({ theme }) => theme.color.red};
   position: absolute;
   top: 115%;

src/components/applyComponents/phoneComponent/phoneComponentInput/PhoneComponentInput.styled.ts

@@ -6,20 +6,9 @@ export const PhoneInput = styled.input`
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   text-align: center;
-  font-size: 19px;
+  font-size: 17px;
 
-  &:focus {
-    outline: none;
-    border-color: #888;
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 15px;
   }
 `;
-
-export const FormError = styled.p`
-  margin-top: 0.3px;
-  font-size: 1rem;
-  color: ${({ theme }) => theme.color.red};
-  position: absolute;
-  top: 100%;
-  left: 0;
-  white-space: nowrap;
-`;

src/components/common/modal/Modal.tsx

@@ -1,28 +1,24 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { XMarkIcon, CheckCircleIcon } from '@heroicons/react/24/outline';
 import * as S from './Modal.styled';
 import ScrollPreventor from './ScrollPreventor';
+import { useOutsideClick } from '../../../hooks/useOutsideClick';
+
 interface ModalProps {
   children: React.ReactNode;
   isOpen: boolean;
   onClose: () => void;
 }
 
 const Modal = ({ children, isOpen, onClose }: ModalProps) => {
-  const modalRef = useRef<HTMLDivElement | null>(null);
+  const modalRefs = useOutsideClick(() => handleClose());
   const [isFadingOut, setIsFadingOut] = useState(false);
 
   const handleClose = () => {
     setIsFadingOut(true);
   };
 
-  const handleOverlayClick = (e: React.MouseEvent) => {
-    if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
-      handleClose();
-    }
-  };
-
   const handleAnimationEnd = () => {
     if (isFadingOut) {
       onClose();
@@ -36,10 +32,9 @@ const Modal = ({ children, isOpen, onClose }: ModalProps) => {
     <ScrollPreventor>
       <S.ModalContainer
         className={isFadingOut ? 'fade-out' : 'fade-in'}
-        onClick={handleOverlayClick}
         onAnimationEnd={handleAnimationEnd}
       >
-        <S.ModalBody ref={modalRef}>
+        <S.ModalBody ref={modalRefs}>
           <S.ModalCloseButton onClick={handleClose}>
             <XMarkIcon />
           </S.ModalCloseButton>

src/components/projectFormComponents/inputComponent/inputComponent.styled.ts

@@ -10,7 +10,7 @@ export const InputStyle = styled.input<{ type?: string }>`
   padding: 10px;
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
-  font-size: ${({ theme }) => theme.heading.semiSmall.fontSize};
+  font-size: ${({ theme }) => theme.heading.small.fontSize};
 
   ${({ type }) => {
     switch (type) {
@@ -24,7 +24,6 @@ export const InputStyle = styled.input<{ type?: string }>`
           flex: 0.1;
           background-color: #ffffff;
           color: #aaa;
-          font-family: 'Arial', sans-serif;
 
           &::placeholder {
             color: #aaa;
@@ -74,7 +73,7 @@ export const InputInfoStyle = styled.input<{ type?: string }>`
 
 export const FormError = styled.p`
   margin-top: 0.3px;
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: ${({ theme }) => theme.color.red};
   position: absolute;
   top: 115%;

src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts

@@ -6,7 +6,7 @@ export const SectionInput = styled.div`
   flex-direction: column;
   gap: 1px;
 
-  @media (max-width: 1024px) {
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     margin-bottom: 25px;
   }
 `;
@@ -25,9 +25,9 @@ export const InfoRow = styled.div`
     margin-right: 10px;
   }
 
-  @media (max-width: 1024px) {
-    margin-bottom: 15px;
-  }
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+    align-items: flex-start;
+     margin-bottom: 15px;
 `;
 
 export const InfoLabel = styled.label`
@@ -39,7 +39,7 @@ export const InfoLabel = styled.label`
   margin-right: 15px;
   white-space: nowrap;
 
-  @media (max-width: 1024px) {
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     margin-right: 30px;
     margin-bottom: 8px;
     font-size: 0.9rem;
@@ -53,7 +53,7 @@ export const InfoText = styled.p`
   flex: 0.8;
   text-align: left;
 
-  @media (max-width: 1024px) {
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     font-size: 0.95rem;
     flex: 1;
   }
@@ -65,7 +65,7 @@ export const SkillTagContainer = styled.div`
   gap: 10px;
   flex: 0.9;
 
-  @media (max-width: 1024px) {
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     grid-template-columns: repeat(6, 1fr);
     gap: 8px;
     width: 100%;
@@ -94,7 +94,7 @@ export const SkillTagImage = styled.div`
     margin-top: 2px;
   }
 
-  @media (max-width: 1024px) {
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     img {
       width: 35px;
       height: 35px;
@@ -116,7 +116,7 @@ export const BeginnerIcon = styled.img`
   object-fit: contain;
   margin-bottom: 15px;
 
-  @media (max-width: 1024px) {
+  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     width: 18px;
     height: 18px;
     margin-bottom: 10px;

src/constants/modalMessage.ts

@@ -16,4 +16,10 @@ export const MODAL_MESSAGE = {
   myProfileFail: '프로필 수정에 실패했습니다.',
   profileImgSuccess: '프로필 이미지가 업로드 되었습니다.',
   profileImgFail: '이미지는 5MB 이하, .png.jpg.jpeg.svg 형식만 가능합니다.',
+  ModifyProjectSuccess: '공고 수정이 정상적으로 완료 되었습니다.',
+  ModifyProjectFail: '공고 수정을 실패 했습니다.',
+  createProjectSuccess: '공고 생성을 완료 했습니다.',
+  createProjectFail: '공고 생성을 실패 했습니다.',
+  applyProjectSuccess: '해당 공고에 지원을 완료 되었습니다.',
+  applyProjectFail: '해당 공고에 지원을 실패 되었습니다.',
 } as const;

src/hooks/useApplyProject.ts

@@ -0,0 +1,44 @@
+import { useMutation } from '@tanstack/react-query';
+import { MODAL_MESSAGE } from '../constants/modalMessage';
+import { postApplicantProject } from '../api/joinProject.api';
+import { ROUTES } from '../constants/routes';
+import { useNavigate } from 'react-router-dom';
+import { joinProject } from '../models/joinProject';
+
+interface UseApplyProjectProps {
+  id: number;
+  handleModalOpen: (newMessage: string) => void;
+}
+
+const useApplyProject = ({ id, handleModalOpen }: UseApplyProjectProps) => {
+  const navigate = useNavigate();
+
+  const mutation = useMutation({
+    mutationFn: (formData: joinProject) => postApplicantProject(formData, id),
+    onSuccess: () => {
+      handleModalOpen(MODAL_MESSAGE.applyProjectSuccess);
+
+      setTimeout(() => {
+        navigate(ROUTES.main);
+      }, 3000);
+    },
+    onError: (error) => {
+      console.log(error);
+      handleModalOpen(MODAL_MESSAGE.applyProjectFail);
+    },
+  });
+
+  const applyProject = async (formData: joinProject) => {
+    mutation.mutate(formData);
+  };
+
+  return {
+    applyProject,
+    isLoading: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    isSuccess: mutation.isSuccess,
+  };
+};
+
+export default useApplyProject;