diff --git a/src/components/common/header/Notification/Notification.styled.ts b/src/components/common/header/Notification/Notification.styled.ts index dcca0929..d703886f 100644 --- a/src/components/common/header/Notification/Notification.styled.ts +++ b/src/components/common/header/Notification/Notification.styled.ts @@ -6,6 +6,8 @@ export const Container = styled.div` overflow: hidden; display: flex; flex-direction: column; + justify-content: center; + align-items: center; padding: 3px; `; @@ -24,7 +26,7 @@ export const ScrollArea = styled.div` export const NotificationHeader = styled.div` display: flex; - justify-content: right; + justify-content: flex-end; align-items: center; height: fit-content; margin-right: 15px; diff --git a/src/constants/user/modalMessage.ts b/src/constants/user/modalMessage.ts index 93b1fb95..0fa52b62 100644 --- a/src/constants/user/modalMessage.ts +++ b/src/constants/user/modalMessage.ts @@ -26,4 +26,5 @@ export const MODAL_MESSAGE = { projectDetailFail: '해당 공고가 존재하지 않습니다.', alreadyApply: '이미 참여한/지원하신 공고 입니다.', noMemberToEvaluate: '평가 할 멤버가 없습니다.', + noTagsData: '대표 스킬/포지션을 입력 하셔야 사용할 수 있습니다.', } as const; diff --git a/src/pages/user/projectDetail/ProjectDetail.tsx b/src/pages/user/projectDetail/ProjectDetail.tsx index 73313c68..21062da5 100644 --- a/src/pages/user/projectDetail/ProjectDetail.tsx +++ b/src/pages/user/projectDetail/ProjectDetail.tsx @@ -20,7 +20,8 @@ const ProjectDetail = () => { const { projectId } = useParams(); const id = Number(projectId); const navigate = useNavigate(); - const { isOpen, message, handleModalClose, handleModalOpen } = useModal(); + const { isOpen, message, handleModalClose, handleModalOpen, handleConfirm } = + useModal(); const { data, isLoading, isFetching } = useGetProjectData(id); const { userData } = useAuthStore((state) => state); @@ -41,7 +42,11 @@ const ProjectDetail = () => { } const handleApplyClick = () => { - navigate(`${ROUTES.apply}/${id}`); + if (userData?.hasRequiredTags) { + navigate(`${ROUTES.apply}/${id}`); + } else { + handleModalOpen(MODAL_MESSAGE.noTagsData, () => navigate(ROUTES.mypage)); + } }; const handleMovetoUserPage = () => { @@ -50,57 +55,66 @@ const ProjectDetail = () => { }; return ( - - - - - {data.title} - - - - - - - {data.user.nickname} - - {formatDate(data.recruitmentEndDate)} - - - {data.views} - - - - - - -

- - - -
- - {userData && - userData.id !== data.user.id && - !data.acceptedIds.includes(userData.id) && - !data.applicantIds.includes(userData.id) ? ( - - ) : null} - -
- -
-
+ <> + + + + + {data.title} + + + + + + + {data.user.nickname} + + {formatDate(data.recruitmentEndDate)} + + + {data.views} + + + + + + +

+ + + +
+ + {userData && + userData.id !== data.user.id && + !data.acceptedIds.includes(userData.id) && + !data.applicantIds.includes(userData.id) ? ( + + ) : null} + +
+ +
+
+ + {message} + + ); }; diff --git a/src/store/authStore.ts b/src/store/authStore.ts index ff5f8d60..c08f4a72 100644 --- a/src/store/authStore.ts +++ b/src/store/authStore.ts @@ -6,6 +6,7 @@ export interface UserData { id: number; email: string; nickname: string; + hasRequiredTags: boolean; } interface AuthState { @@ -23,6 +24,7 @@ const initialUserData: UserData = { id: 0, email: '', nickname: '', + hasRequiredTags: true, }; export const getStoredUserData = () => {