fix: 공고 상세보기 수정

Author: HongbiKo

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;
 `;

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}

src/pages/projectDetail/ProjectDetail.styled.ts

@@ -18,9 +18,10 @@ export const Header = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-size: 36px;
+  font-size: 2rem;
   font-weight: bold;
-  margin-bottom: 10px;
+  margin-bottom: 0.8rem;
+  margin-top: 1rem;
 
   @media (max-width: 870px) {
     font-size: 28px;
@@ -34,7 +35,8 @@ export const ProfileContainer = styled.div`
 `;
 
 export const ProfileImageContainer = styled.div`
-  margin-right: 15px;
+  padding-right: 15px;
+  cursor: pointer;
 `;
 
 export const UserInfo = styled.div`
@@ -49,28 +51,29 @@ export const UserInfo = styled.div`
 `;
 
 export const UserName = styled.div`
-  font-size: 21px;
+  font-size: ${({ theme }) => theme.heading['small'].fontSize};
   font-weight: bold;
+  cursor: pointer;
 
   @media (max-width: 870px) {
     font-size: 18px;
   }
 `;
 
 export const PostDate = styled.div`
-  font-size: ${({ theme }) => theme.heading.semiSmall};
+  font-size: 0.9rem;
   color: ${({ theme }) => theme.color.deepGrey};
 
   @media (max-width: 870px) {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
   }
 `;
 
 export const ViewCount = styled.div`
   display: flex;
   gap: 5px;
   text-align: center;
-  font-size: ${({ theme }) => theme.heading.semiSmall};
+  font-size: 0.9rem;
   color: ${({ theme }) => theme.color.deepGrey};
 
   svg {
@@ -91,7 +94,7 @@ export const ViewCount = styled.div`
 `;
 
 export const Content = styled.div`
-  margin-top: 20px;
+  margin-top: 3.5rem;
   margin-bottom: 60px;
 `;
 
@@ -118,7 +121,7 @@ export const Value = styled.span`
 `;
 
 export const ProjectDescription = styled.div`
-  margin-top: 30px;
+  margin-top: 4rem;
 `;
 
 export const SectionTitle = styled.h3`
@@ -134,9 +137,17 @@ export const Description = styled.div`
 `;
 
 export const ApplyButtonContainer = styled.div`
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-top: 50px;
   margin-bottom: 50px;
+
+  button {
+    font-size: 1.1rem;
+    font-weight: 500;
+    padding: 0.8rem 1.8rem;
+  }
 `;
 
 export const ActionButton = styled(Button)`

src/pages/projectDetail/ProjectDetail.tsx

@@ -9,40 +9,49 @@ import Avatar from '../../components/common/avatar/Avatar';
 import { EyeIcon } from '@heroicons/react/24/outline';
 import useAuthStore from '../../store/authStore';
 import { ROUTES } from '../../constants/routes';
+import { useModal } from '../../hooks/useModal';
+import Modal from '../../components/common/modal/Modal';
 
 const ProjectDetail = () => {
   const { projectId } = useParams();
   const id = Number(projectId);
   const navigate = useNavigate();
   const { data, isLoading, isFetching } = useGetProjectData(id);
+  const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
   const { userData } = useAuthStore((state) => state);
 
+  if (isLoading) return <div>Loading...</div>;
+  if (isFetching) return <div>isFetching...</div>;
   if (!data) {
     return <div>데이터가 없습니다.</div>;
   }
 
-  if (isLoading) return <div>Loading...</div>;
-  if (isFetching) return <div>isFetching...</div>;
-
   const handleApplyClick = () => {
     if (userData?.id === data.User.id) {
-      alert('본인의 프로젝트는 지원할 수 없습니다.');
+      handleModalOpen('본인의 프로젝트는 지원할 수 없습니다.');
       return;
     } else {
       navigate(`${ROUTES.apply}/${id}`);
     }
   };
 
+  const handleMovetoUserPage = () => {
+    const userId = data.User.id;
+    navigate(`/user/${userId}`);
+  };
+
   return (
     <S.Container>
       <S.Header>
         <S.Title>{data.title}</S.Title>
         <S.ProfileContainer>
-          <S.ProfileImageContainer>
-            <Avatar size='3.3rem' image={data.User.profileImg} />
+          <S.ProfileImageContainer onClick={handleMovetoUserPage}>
+            <Avatar size='2.5rem' image={data.User.profileImg} />
           </S.ProfileImageContainer>
           <S.UserInfo>
-            <S.UserName>{data.User.nickname}</S.UserName>
+            <S.UserName onClick={handleMovetoUserPage}>
+              {data.User.nickname}
+            </S.UserName>
             <S.PostDate>{formatDate(data.recruitmentEndDate)}</S.PostDate>
             <S.ViewCount>
               <EyeIcon />
@@ -71,6 +80,9 @@ const ProjectDetail = () => {
       </S.ApplyButtonContainer>
 
       <hr></hr>
+      <Modal isOpen={isOpen} onClose={handleModalClose}>
+        {message}
+      </Modal>
     </S.Container>
   );
 };

src/routes/AppRoutes.tsx

@@ -116,9 +116,11 @@ const AppRoutes = () => {
     {
       path: `${ROUTES.projectDetail}/:projectId`,
       element: (
-        <Layout>
-          <ProjectDetail />
-        </Layout>
+        <Suspense fallback={<LoadingSpinner />}>
+          <Layout>
+            <ProjectDetail />
+          </Layout>
+        </Suspense>
       ),
     },
     {