Merge pull request #33 from Team-inglo/feat/IGW-28/30

[Feat/igw-28/30] 공고 상세 페이지 구현하기

src/components/Common/BottomSheetLayout.tsx

@@ -6,6 +6,7 @@ type BottomSheetLayoutProps = {
   hasHandlebar: boolean; // 최상단의 바 모양 존재 여부
   isAvailableHidden: boolean; // 아래로 내렸을 때 사라지도록 하는 여부
   isShowBottomsheet: boolean; // BottomSheet 보이기
+  setIsShowBottomSheet?: React.Dispatch<React.SetStateAction<boolean>>; // isShowBottomsheet 값 동기화하기 위한 함수
   children: ReactNode;
 };
 
@@ -16,11 +17,13 @@ const BottomSheetLayout = ({
   hasHandlebar,
   isAvailableHidden,
   isShowBottomsheet,
+  setIsShowBottomSheet,
   children,
 }: BottomSheetLayoutProps) => {
   const contentRef = useRef<HTMLDivElement>(null);
 
-  const { setIsOpen, onDragEnd, controls } = useBottomSheet();
+  const { setIsOpen, onDragEnd, controls } =
+    useBottomSheet(setIsShowBottomSheet);
   const [contentHeight, setContentHeight] = useState<number>(0);
 
   useEffect(() => {
@@ -55,7 +58,7 @@ const BottomSheetLayout = ({
         bottom: contentHeight,
       }} // 상단과 하단 드래그 제한 설정
       dragElastic={0.2}
-      className={`fixed left-0 bottom-0 w-full h-[90vh] p-[1.5rem] pb-[2.5rem] rounded-t-[2.5rem] bg-white shadow-bottomSheetShadow`}
+      className={`fixed left-0 bottom-0 w-full h-[90vh] p-[1.5rem] pb-[2.5rem] rounded-t-[2.5rem] bg-white shadow-bottomSheetShadow z-30`}
       style={{
         top: `${VIEW_HEIGHT - contentHeight - LAYOUT_MARGIN}px`,
       }}

src/components/Common/CompleteButtonModal.tsx

@@ -0,0 +1,44 @@
+import CheckIconLarge from '@/assets/icons/checkIconLarge.svg?react';
+import Button from '@/components/Common/Button';
+import { buttonTypeKeys } from '@/constants/components';
+import { useEffect } from 'react';
+
+type CompleteButtonModalProps = {
+  title: string;
+  content: string;
+  buttonContent: string;
+  onClick: () => void;
+};
+
+const CompleteButtonModal = ({
+  title,
+  content,
+  buttonContent,
+  onClick,
+}: CompleteButtonModalProps) => {
+  // 모달 열림 상태에 따라 body 스크롤 제어
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, []);
+
+  return (
+    <div className="fixed top-0 left-0 w-screen h-screen px-14 flex flex-col gap-4 items-center justify-center text-center bg-white">
+      <CheckIconLarge />
+      <div className="head-2">{title}</div>
+      <div className="body-2">{content}</div>
+      <Button
+        type={buttonTypeKeys.LARGE}
+        bgColor="bg-[#FEF387]"
+        fontColor="text-[#1E1926]"
+        isBorder={false}
+        title={buttonContent}
+        onClick={onClick}
+      />
+    </div>
+  );
+};
+
+export default CompleteButtonModal;

src/components/Common/JobPostingCard.tsx

@@ -8,18 +8,24 @@ import { JobPostingItemType } from '@/types/common/jobPostingItem';
 import { calculateTimeAgo } from '@/utils/calculateTimeAgo';
 import { calculateDDay } from '@/utils/calculateDDay';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 interface JobPostingCardProps {
   jobPostingData: JobPostingItemType;
 }
 
 const JobPostingCard = ({ jobPostingData }: JobPostingCardProps) => {
+  const navigate = useNavigate();
+
   const [isBookmarked, setIsBookmarked] = useState<boolean>(
     jobPostingData?.is_book_marked ?? false,
   );
 
   return (
-    <article className="flex flex-col gap-[1rem] w-full px-[1.125rem] pt-[1.125rem] pb-[0.75rem] border-[0.5px] border-solid border-[#1E19263D] rounded-[1.125rem]">
+    <article
+      className="flex flex-col gap-[1rem] w-full px-[1.125rem] pt-[1.125rem] pb-[0.75rem] border-[0.5px] border-solid border-[#1E19263D] rounded-[1.125rem]"
+      onClick={() => navigate(`/post/${jobPostingData.id}`)}
+    >
       <div className="w-full flex justify-between items-start">
         <div>
           <div className="mb-[0.5rem] flex items-center gap-[0.625rem]">
@@ -90,7 +96,7 @@ const JobPostingCard = ({ jobPostingData }: JobPostingCardProps) => {
           fontStyle="caption-1"
         />
         <Tag
-          value={jobPostingData.tags.visa}
+          value={jobPostingData.tags.visa.replace(/_/g, '-')}
           padding="0.375rem 0.75rem"
           isRounded={false}
           hasCheckIcon={false}

src/components/Common/ScrollToTop.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
+
+export default ScrollToTop;

src/components/PostApply/PostApplyButton.tsx

@@ -0,0 +1,45 @@
+import { buttonTypeKeys } from '@/constants/components';
+import Button from '@/components/Common/Button';
+import CompleteButtonModal from '@/components/Common/CompleteButtonModal';
+import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+
+const PostApplyButton = () => {
+  const navigate = useNavigate();
+
+  const [isComplete, setIsComplete] = useState<boolean>(false);
+
+  return (
+    <>
+      <section className="fixed bottom-0 left-0 w-full flex justify-center items-center gap-[0.5rem] pt-[0.75rem] pb-[2.5rem] px-[1.5rem] bg-white">
+        {/* TODO: 마이페이지 - 이력서 관리로 이동하기 */}
+        <Button
+          type={buttonTypeKeys.BACK}
+          bgColor={'bg-[#F4F4F9]'}
+          fontColor="text-[#BDBDBD]"
+          title="Edit"
+          isBorder={false}
+        />
+        <Button
+          type={buttonTypeKeys.APPLY}
+          bgColor={'bg-[#FEF387]'}
+          fontColor="text-[#1E1926]"
+          title="Apply Now"
+          isBorder={false}
+          onClick={() => setIsComplete(true)}
+        />
+      </section>
+      {isComplete && (
+        <CompleteButtonModal
+          title="Application Completed"
+          content="You can check the status of your documents"
+          buttonContent="Check Now"
+          // TODO: 추후에 지원상태 - 상세 페이지로 이동시키기
+          onClick={() => navigate('/')}
+        />
+      )}
+    </>
+  );
+};
+
+export default PostApplyButton;

src/components/PostApply/PostApplyCardLayout.tsx

@@ -0,0 +1,21 @@
+import PersonIcon from '@/assets/icons/PersonIcon.svg?react';
+import { ReactNode } from 'react';
+
+type PostApplyCardLayoutProps = {
+  title: string;
+  children: ReactNode;
+};
+
+const PostApplyCardLayout = ({ title, children }: PostApplyCardLayoutProps) => {
+  return (
+    <div className="flex flex-col gap-[1.5rem] w-full px-[1rem] pt-[1rem] pb-[1.25rem] rounded-[0.75rem] border-[0.031rem] border-[#DCDCDC]">
+      <div className="flex items-center gap-[0.75rem] px-[0.25rem] pb-[0.75rem] border-b-[0.031rem] border-b-[#DCDCDC]">
+        <PersonIcon />
+        <h3 className="head-3 text-[#1E1926]">{title}</h3>
+      </div>
+      <div className="w-full">{children}</div>
+    </div>
+  );
+};
+
+export default PostApplyCardLayout;

src/components/PostApply/PostApplyProfile.tsx

@@ -0,0 +1,15 @@
+type PostApplyProfileProps = {
+  profileImgUrl: string;
+  name: string;
+};
+
+const PostApplyProfile = ({ name }: PostApplyProfileProps) => {
+  return (
+    <div>
+      <div className='w-[5.125rem] h-[5.125rem] mb-[1rem] rounded-full bg-cover bg-center bg-[url("/src/assets/images/JobIconExample.jpeg")]'></div>
+      <p className=" text-[#33384B] font-bold text-lg">{name}</p>
+    </div>
+  );
+};
+
+export default PostApplyProfile;