devpalsPlus · HongbiKo · Jan 31, 2025 · Jan 31, 2025 · Jan 31, 2025 · Jan 31, 2025
diff --git a/src/components/applyComponents/phoneComponent/PhoneComponent.styled.ts b/src/components/applyComponents/phoneComponent/PhoneComponent.styled.ts
@@ -33,7 +33,7 @@ export const FormError = styled.p`
   font-size: 1rem;
   color: ${({ theme }) => theme.color.red};
   position: absolute;
-  top: 100%;
-  left: 0;
+  top: 115%;
+  left: 5px;
   white-space: nowrap;
 `;
diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx
@@ -23,7 +23,7 @@ function Header() {
 
   return (
     <S.HeaderContainer>
-      <Link to={ROUTES.home}>
+      <Link to={ROUTES.main}>
         <img src={Mainlogo} alt='logo' />
       </Link>
       <nav className='auth'>

diff --git a/src/components/common/page/notFoundPage/NotFoundPage.styled.ts b/src/components/common/page/notFoundPage/NotFoundPage.styled.ts
diff --git a/src/components/common/page/notFoundPage/NotFoundPage.tsx b/src/components/common/page/notFoundPage/NotFoundPage.tsx
diff --git a/src/components/mypage/myProfile/NoMyInfo.styled.ts b/src/components/mypage/myProfile/NoMyInfo.styled.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    width: 40px;
+    height: 40px;
+    color: #ccc;
+  }
+
+  span {
+    font-size: 1.1rem;
+    color: $ccc;
+    margin-top: 1rem;
+  }
+`;
diff --git a/src/components/mypage/myProfile/NoMyInfo.tsx b/src/components/mypage/myProfile/NoMyInfo.tsx
@@ -0,0 +1,13 @@
+import * as S from './NoMyInfo.styled';
+import { IdentificationIcon } from '@heroicons/react/24/outline';
+
+const NoMyInfo = () => {
+  return (
+    <S.Container>
+      <IdentificationIcon />
+      <span>유저 정보를 불러올 수 없습니다.</span>
+    </S.Container>
+  );
+};
+
+export default NoMyInfo;
diff --git a/src/components/mypage/myProfile/myProfile.tsx b/src/components/mypage/myProfile/myProfile.tsx
@@ -26,6 +26,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 import Modal from '../../common/modal/Modal';
 import { useModal } from '../../../hooks/useModal';
 import Spinner from '../Spinner';
+import NoMyInfo from './NoMyInfo';
 
 const profileSchema = z.object({
   nickname: z
@@ -147,7 +148,7 @@ const MyProfile = () => {
   }
 
   if (!myData) {
-    return <div>유저 정보를 불러 올 수 없습니다.</div>;
+    return <NoMyInfo />;
   }
 
   return (

diff --git a/src/components/projectFormComponents/inputComponent/inputComponent.styled.ts b/src/components/projectFormComponents/inputComponent/inputComponent.styled.ts
@@ -66,7 +66,7 @@ export const InputInfoStyle = styled.input<{ type?: string }>`
           height: 15px;
           cursor: pointer;
           padding-left: 10px;
-          margin-left: 10px;
+          margin-left: 5px;
         `;
     }
   }}
@@ -77,7 +77,7 @@ export const FormError = styled.p`
   font-size: 1rem;
   color: ${({ theme }) => theme.color.red};
   position: absolute;
-  top: 100%;
-  left: 0;
+  top: 115%;
+  left: 5px;
   white-space: nowrap;
 `;
diff --git a/...omponents/projectFormComponents/projectInformationInput/ProjectInformationInput.styled.ts b/...omponents/projectFormComponents/projectInformationInput/ProjectInformationInput.styled.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const InfoRow = styled.div`
   align-items: center;
   gap: 10px;
-  margin-bottom: 17px;
+  margin-bottom: 1.8rem;
   display: flex;
 
   label {

diff --git a/...omponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts b/...omponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts
@@ -6,11 +6,11 @@ export const CategoryContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
-  margin-top: 5px;
+  margin-top: -20px;
   padding: 3px 0;
   background-color: ${({ theme }) => theme.color.white};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
-  margin-bottom: 3px;
+  margin-bottom: 20px;
 `;
 
 export const CategoryItem = styled.div<{ isSelected: boolean }>`

diff --git a/...ojectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts b/...ojectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts
@@ -7,11 +7,11 @@ export const CategoryContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
-  margin-top: 5px;
+  margin-top: -20px;
   padding: 3px 0;
   background-color: ${({ theme }) => theme.color.white};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
-  margin-bottom: 3px;
+  margin-bottom: 15px;
 `;
 
 export const PositionButtonFeat = styled(PositionButton)<{
@@ -44,7 +44,8 @@ export const PositionButtonFeat = styled(PositionButton)<{
 `;
 
 export const FormError = styled.p`
-  margin-top: 1px;
+  margin-top: -15px;
+  margin-bottom: 20px;
   font-size: 0.9rem;
   color: ${({ theme }) => theme.color.red};
   top: 100%;

diff --git a/src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts b/src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts
@@ -13,20 +13,19 @@ export const SectionInput = styled.div`
 
 export const InfoRow = styled.div`
   display: flex;
-  align-items: flex-start;
-  margin-bottom: 20px;
+  align-items: center;
+  margin-bottom: 1rem;
 
   img {
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
     border: 1px solid ${({ theme }) => theme.color.border};
     border-radius: ${({ theme }) => theme.borderRadius.primary};
     margin-bottom: 5px;
     margin-right: 10px;
   }
 
   @media (max-width: 1024px) {
-    align-items: flex-start;
     margin-bottom: 15px;
   }
 `;
@@ -113,7 +112,7 @@ export const BeginnerIcon = styled.img`
   border-radius: 50%;
   border: 1px solid ${({ theme }) => theme.color.border};
   background-color: #fff;
-  padding: 5px;
+  padding: 3px;
   object-fit: contain;
   margin-bottom: 15px;
 
@@ -127,8 +126,7 @@ export const BeginnerIcon = styled.img`
 export const BeginnerText = styled.p`
   font-size: 1rem;
   font-weight: bold;
-  color: #000;
+  color: #3e5879;
   flex: 0.8;
   text-align: left;
-  margin-top: 20px;
 `;
diff --git a/src/components/projectFormComponents/projectInformationText/ProjectInformation.tsx b/src/components/projectFormComponents/projectInformationText/ProjectInformation.tsx
@@ -18,7 +18,9 @@ const ProjectInformation = ({ data }: ProjectInformationProps) => {
     <S.SectionInput>
       <S.InfoRow>
         {data.isBeginner && <S.BeginnerIcon src={beginner} alt='초보자 환영' />}
-        {data.isBeginner && <S.BeginnerText>초보 환영</S.BeginnerText>}
+        {data.isBeginner && (
+          <S.BeginnerText>새싹 멤버(초보)도 환영해요!</S.BeginnerText>
+        )}
       </S.InfoRow>
 
       {PROJECT_DATA_GET.map((input, index) => (
@@ -46,7 +48,7 @@ const ProjectInformation = ({ data }: ProjectInformationProps) => {
         <S.InfoLabel>사용 언어</S.InfoLabel>
         <S.SkillTagContainer>
           {data.ProjectSkillTag.map((skillTag) => (
-            <S.SkillTagImage>
+            <S.SkillTagImage key={skillTag.SkillTag.id}>
               <img
                 key={skillTag.SkillTag.id}
                 src={skillTag.SkillTag.img}

diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
@@ -26,7 +26,9 @@ export const useAuth = (handleModalOpen: (message: string) => void) => {
     },
     onSuccess: () => {
       handleModalOpen(MODAL_MESSAGE.signUpSuccess);
-      navigate(ROUTES.login);
+      setTimeout(() => {
+        navigate(ROUTES.login);
+      }, 1000);
     },
     onError: () => {
       handleModalOpen(MODAL_MESSAGE.signUpFail);
@@ -41,9 +43,11 @@ export const useAuth = (handleModalOpen: (message: string) => void) => {
     mutationFn: async ({ email, newPassword }) => {
       await postResetPassword({ email, newPassword });
     },
-    onSuccess: () => {
+    onSuccess: async () => {
       handleModalOpen(MODAL_MESSAGE.changePasswordSuccess);
-      navigate(ROUTES.login);
+      setTimeout(() => {
+        navigate(ROUTES.login);
+      }, 1000);
     },
     onError: () => {
       handleModalOpen(MODAL_MESSAGE.changePasswordFail);
@@ -61,11 +65,13 @@ export const useAuth = (handleModalOpen: (message: string) => void) => {
       const userData = response.user;
       return { accessToken, refreshToken, userData };
     },
-    onSuccess: (data) => {
+    onSuccess: async (data) => {
       const { accessToken, refreshToken, userData } = data;
       handleModalOpen(MODAL_MESSAGE.loginSuccess);
-      storeLogin(accessToken, refreshToken, userData);
-      navigate(ROUTES.home);
+      setTimeout(() => {
+        storeLogin(accessToken, refreshToken, userData);
+        navigate(ROUTES.main);
+      }, 1000);
     },
     onError: () => {
       handleModalOpen(MODAL_MESSAGE.loginFail);
@@ -92,7 +98,9 @@ export const useAuth = (handleModalOpen: (message: string) => void) => {
     storeLogout();
     queryClient.removeQueries({ queryKey: myInfoKey.myProfile });
     handleModalOpen(MODAL_MESSAGE.logout);
-    navigate(ROUTES.home);
+    setTimeout(() => {
+      navigate(ROUTES.main);
+    }, 1000);
   };
 
   return { userSignup, resetPassword, userLogin, userLogout };

diff --git a/src/pages/apply/Apply.styled.ts b/src/pages/apply/Apply.styled.ts
@@ -36,6 +36,7 @@ export const Section = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
+  margin-bottom: 1.5rem;
 `;
 
 export const Label = styled.label`

diff --git a/src/pages/changePassword/ChangePassword.tsx b/src/pages/changePassword/ChangePassword.tsx
@@ -95,7 +95,7 @@ const ChangePassword = () => {
   return (
     <S.Container>
       <h1 className='logo'>
-        <Link to={ROUTES.home}>
+        <Link to={ROUTES.main}>
           <img src={Mainlogo} alt='logo' />
         </Link>
       </h1>

diff --git a/src/pages/createProject/CreateProject.styled.ts b/src/pages/createProject/CreateProject.styled.ts
@@ -38,7 +38,7 @@ export const SectionTitle = styled.label`
 `;
 
 export const Section = styled.div`
-  margin-bottom: 30px;
+  margin-bottom: 2.7rem;
 `;
 
 export const SectionInput = styled.div`
@@ -60,6 +60,7 @@ export const SubmitButton = styled.button`
   font-weight: bold;
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   cursor: pointer;
+  margin-top: 3.5rem;
 
   &:hover {
     background-color: #0056b3;

diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
@@ -49,7 +49,7 @@ const Login = () => {
   return (
     <S.Container>
       <h1 className='logo'>
-        <Link to={ROUTES.home}>
+        <Link to={ROUTES.main}>
           <img src={Mainlogo} alt='logo' />
         </Link>
       </h1>