✨feat: Card 컴포넌트 퍼블리싱하기 Team-inglo#9

src/components/Common/JobPostingCard.tsx

@@ -0,0 +1,118 @@
+import Tag from '@/components/Common/Tag';
+import BookmarkIcon from '@/assets/icons/BookmarkIcon.svg?react';
+import BookmarkCheckedIcon from '@/assets/icons/BookmarkCheckedIcon.svg?react';
+import LocationIcon from '@/assets/icons/LocationIcon.svg?react';
+import ClockIcon from '@/assets/icons/ClockIcon.svg?react';
+import CalendarIcon from '@/assets/icons/CalendarIcon.svg?react';
+import { JobPostingItemType } from '@/types/common/jobPostingItem';
+import { calculateTimeAgo } from '@/utils/calculateTimeAgo';
+import { calculateDDay } from '@/utils/calculateDDay';
+import { useState } from 'react';
+
+interface JobPostingCardProps {
+  jobPostingData: JobPostingItemType;
+}
+
+const JobPostingCard = ({ jobPostingData }: JobPostingCardProps) => {
+  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]">
+      <div className="w-full flex justify-between items-start">
+        <div>
+          <div className="mb-[0.5rem] flex items-center gap-[0.625rem]">
+            <div className='w-[2rem] h-[2rem] rounded-[0.5rem] bg-cover bg-[url("/src/assets/images/JobIconExample.jpeg")]'></div>
+            <h3 className="head-2 text-[#1E1926]">{jobPostingData.title}</h3>
+          </div>
+          <div className="flex flex-col gap-[0.125rem]">
+            <div className="flex items-center gap-[0.625rem]">
+              <LocationIcon />
+              <p className="caption-1 text-[#464646]">
+                {jobPostingData.summaries.address}
+              </p>
+            </div>
+            <div className="flex items-center gap-[0.625rem]">
+              <ClockIcon />
+              <p className="caption-1 text-[#464646]">
+                {jobPostingData.summaries.work_period
+                  .replace(/_/g, ' ')
+                  .toLowerCase()}
+              </p>
+            </div>
+            <div className="flex items-center gap-[0.625rem]">
+              <CalendarIcon />
+              <p className="caption-1 text-[#464646]">
+                {jobPostingData.summaries.work_days_per_week} days a week
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-[0.5rem]">
+          <Tag
+            value={calculateDDay(jobPostingData.recruitment_dead_line)}
+            padding="0.313rem 0.875rem"
+            isRounded={false}
+            hasCheckIcon={false}
+            backgroundColor="#FEF38780"
+            color="#1E1926"
+            fontStyle="button-2"
+          />
+          {isBookmarked ? (
+            <BookmarkCheckedIcon onClick={() => setIsBookmarked(false)} />
+          ) : (
+            <BookmarkIcon onClick={() => setIsBookmarked(true)} />
+          )}
+        </div>
+      </div>
+      <div className="flex items-center flex-wrap gap-[0.375rem]">
+        <Tag
+          value={jobPostingData.tags.is_recruiting ? 'Opening' : 'Closed'}
+          padding="0.375rem 0.75rem"
+          isRounded={false}
+          hasCheckIcon={false}
+          borderColor="#1E1926"
+          backgroundColor="white"
+          color="#1E1926"
+          fontStyle="caption-1"
+        />
+        <Tag
+          value={jobPostingData.tags.job_category
+            .replace(/_/g, ' ')
+            .toLowerCase()}
+          padding="0.375rem 0.75rem"
+          isRounded={false}
+          hasCheckIcon={false}
+          borderColor="#1E1926"
+          backgroundColor="white"
+          color="#1E1926"
+          fontStyle="caption-1"
+        />
+        <Tag
+          value={jobPostingData.tags.visa}
+          padding="0.375rem 0.75rem"
+          isRounded={false}
+          hasCheckIcon={false}
+          borderColor="#1E1926"
+          backgroundColor="white"
+          color="#1E1926"
+          fontStyle="caption-1"
+        />
+      </div>
+      <div className="w-full px-[0.25rem] flex justify-between items-center">
+        <p className="text-[#656565] caption-2">
+          {calculateTimeAgo(jobPostingData.created_at)}
+        </p>
+        <p className="text-[#656565] body-3">
+          <span className="text-[#1E1926] button-1">
+            {jobPostingData.hourly_rate}KRW
+          </span>
+          /Hr
+        </p>
+      </div>
+    </article>
+  );
+};
+
+export default JobPostingCard;

src/components/Common/Tag.tsx

@@ -26,14 +26,14 @@ const Tag = ({
 }: TagProps) => {
   return (
     <div
-      className={`w-fit flex items-center gap-[0.5rem] ${fontStyle} ${isRounded ? 'rounded-[1.125rem]' : 'rounded-[0.375rem]'}`}
+      className={`w-fit h-fit flex items-center gap-[0.5rem] ${fontStyle} ${isRounded ? 'rounded-[1.125rem]' : 'rounded-[0.375rem]'}`}
       style={{
         padding: padding,
         backgroundColor: backgroundColor,
         color: color,
         borderColor: borderColor,
         borderStyle: borderColor ? 'solid' : 'none',
-        borderWidth: '1px',
+        borderWidth: '0.5px',
       }}
     >
       {hasCheckIcon && <TagCheckIcon color={color} />}

src/components/Home/HomeApplicationCard.tsx

@@ -0,0 +1,32 @@
+import TopRightArrowIcons from '@/assets/icons/Home/TopRightArrowIcon.svg?react';
+import { OngoingInterviewItemType } from '@/types/home/ongoingInterviewItem';
+
+type HomeApplicationCardProps = {
+  applicationData: OngoingInterviewItemType;
+};
+
+const HomeApplicationCard = ({ applicationData }: HomeApplicationCardProps) => {
+  return (
+    <article className="flex flex-col gap-[0.5rem] px-[1.25rem] pt-[0.75rem] pb-[1.25rem] min-w-[17.5rem] bg-white rounded-[1rem] shadow-cardShadow">
+      <div className="w-fit px-[0.438rem] py-[0.125rem] caption-2 bg-[#1E1926] rounded-[0.188rem] text-[#F4F4F9]">
+        Under the Review
+      </div>
+      <div className="w-full flex gap-[1rem] items-center">
+        <div className='w-[2rem] h-[2rem] rounded-[0.5rem] bg-cover bg-[url("/src/assets/images/JobIconExample.jpeg")]'></div>
+        <div className="flex-1">
+          <h5 className="pb-[0.125rem] button-2 text-[#171719]">
+            {applicationData.title}
+          </h5>
+          <p className="caption-1 text-[#BDBDBD]">
+            {applicationData.address_name}
+          </p>
+        </div>
+        <button className="px-[0.75rem] py-[0.25rem] bg-[#1B1B1B] rounded-[1.313rem]">
+          <TopRightArrowIcons />
+        </button>
+      </div>
+    </article>
+  );
+};
+
+export default HomeApplicationCard;

src/components/Home/HomeApplicationList.tsx

@@ -0,0 +1,41 @@
+import { OngoingInterviewItemType } from '@/types/home/ongoingInterviewItem';
+import HomeApplicationCard from '@/components/Home/HomeApplicationCard';
+
+// 진행중인 인터뷰 더미데이터
+const ONGOING_INTERVIEW_LIST: OngoingInterviewItemType[] = [
+  {
+    id: 12,
+    icon_img_url: 'aa',
+    title: '서류 제목이양 야다ㅏ야아닫',
+    address_name: '주소 주소 주소 주소 주소',
+  },
+  {
+    id: 23,
+    icon_img_url: 'aa',
+    title: '서류2',
+    address_name: '주소 주소 22',
+  },
+  {
+    id: 24,
+    icon_img_url: 'aa',
+    title: '서류3',
+    address_name: '주소 주소 33',
+  },
+];
+
+const HomeApplicationList = () => {
+  return (
+    <section className="w-full py-[1.5rem] bg-[#FEF387]">
+      <h3 className="px-[1.25rem] pb-[0.5rem] head-3 text-[#464646]">
+        Ongoing Application
+      </h3>
+      <div className="flex gap-[0.5rem] px-[1.25rem] overflow-x-scroll whitespace-nowrap no-scrollbar">
+        {ONGOING_INTERVIEW_LIST.map((value: OngoingInterviewItemType) => (
+          <HomeApplicationCard key={value.id} applicationData={value} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default HomeApplicationList;

src/components/Home/HomeGuestBanner.tsx

@@ -0,0 +1,21 @@
+const HomeGuestBanner = () => {
+  return (
+    <section className="w-full px-[1.5rem] pb-[2.75rem] bg-[#FEF387]">
+      <div className="flex flex-col justify-center items-center gap-[0.25rem] relative px-[2.5rem] pt-[1rem] pb-[2rem] rounded-t-[1.5rem] bg-[#FFFAEDCC] ">
+        <h3 className="head-3 text-[#1E1926] text-center">
+          Sign In to Unlock Your <br />
+          Gig Opportunities!
+        </h3>
+        <p className="caption-1 text-[#656565] text-center">
+          Get personalized job recommendations, track your applications, and
+          access exclusive opportunities. Sign in now to get started!
+        </p>
+        <button className="absolute bottom-[-1.25rem] left-0 w-full py-[0.75rem] rounded-[1.25rem] text-center text-white button-2 bg-[#1E1926]">
+          Sign In
+        </button>
+      </div>
+    </section>
+  );
+};
+
+export default HomeGuestBanner;

src/components/Home/HomeHeader.tsx

@@ -0,0 +1,23 @@
+import AlarmIcon from '@/assets/icons/Home/AlarmIcon.svg?react';
+
+const HomeHeader = () => {
+  return (
+    <section className="w-full pt-[3.125rem] pb-[1rem] px-[1.5rem] bg-[#FEF387]">
+      <p className="pb-[0.375rem] body-2 text-[#37383C9C]">Welcome!</p>
+      <div className="w-full flex">
+        <h1 className="flex-1 title-1 text-[#0A0909]">
+          Find your <br />
+          perfect job
+        </h1>
+        {/* TODO: 로그인 시에만 표시하기 */}
+        <button className="w-[2rem] h-[2rem] flex justify-center items-center relative bg-[#FFFAEDCC] rounded-[1.25rem]">
+          <AlarmIcon />
+          {/* TODO: 알람이 있을 때만 표시하기 */}
+          <div className="absolute top-[0.3rem] right-[0.4rem] w-[0.438rem] h-[0.438rem] rounded-full bg-[#FF6F61]"></div>
+        </button>
+      </div>
+    </section>
+  );
+};
+
+export default HomeHeader;