fix: Merge branch 'develop' into feat/#171

Author: hyeongjun6364

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/emptyLoadingPage/EmptyLoadingPage.styled.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { EmptyLoadingPageProps } from './EmptyLoadingPage';
+
+export const Container = styled.div<EmptyLoadingPageProps>`
+  width: 100%;
+  height: ${({ height }) => height};
+
+  @media screen ${({ theme }) => theme.mediaQuery.tablet} {
+    height: ${({ tHeight }) => tHeight};
+  }
+
+  @media screen ${({ theme }) => theme.mediaQuery.mobile} {
+    height: ${({ mHeight }) => mHeight};
+  }
+`;

src/components/common/emptyLoadingPage/EmptyLoadingPage.tsx

@@ -0,0 +1,21 @@
+import * as S from './EmptyLoadingPage.styled';
+
+export interface EmptyLoadingPageProps {
+  height: string;
+  tHeight: string;
+  mHeight: string;
+}
+
+export default function EmptyLoadingPage({
+  height,
+  tHeight,
+  mHeight,
+}: EmptyLoadingPageProps) {
+  return (
+    <S.Container
+      height={height}
+      tHeight={tHeight}
+      mHeight={mHeight}
+    ></S.Container>
+  );
+}

src/components/common/header/Header.styled.ts

@@ -17,6 +17,11 @@ export const HeaderContainer = styled.div`
       width: 70px;
       height: 70px;
     }
+
+    @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+      width: 50px;
+      height: 50px;
+    }
   }
 
   .panel {
@@ -67,4 +72,7 @@ export const HeaderContainer = styled.div`
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 10px 60px;
   }
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 10px 16px;
+  }
 `;

src/components/common/layout/Layout.styled.ts

@@ -9,4 +9,8 @@ export const LayoutContainer = styled.div`
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 0 60px;
   }
+
+  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 0;
+  }
 `;

src/components/common/modal/Modal.tsx

@@ -1,29 +1,25 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { createPortal } from 'react-dom';
 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 {
   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();
@@ -37,10 +33,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}>
           <ModalCloseButton onClose={handleClose} />
           <S.ModalIconWrapper>
             <CheckCircleIcon />