✨feat: Home 페이지 상단 부분에서 추천 공고 리스트, 진행중 서류 리스트 구현하기 #9

Team-inglo · Oct 21, 2024 · da1e3a7 · da1e3a7
1 parent 0ac382f
commit da1e3a7
Show file tree

Hide file tree

Showing 8 changed files with 201 additions and 0 deletions.
diff --git a/src/assets/icons/Home/MessageIcon.svg b/src/assets/icons/Home/MessageIcon.svg
diff --git a/src/assets/icons/Home/TopRightArrowIcon.svg b/src/assets/icons/Home/TopRightArrowIcon.svg
diff --git a/src/components/Home/HomeApplicationList.tsx b/src/components/Home/HomeApplicationList.tsx
@@ -0,0 +1,49 @@
+import TopRightArrowIcons from '@/assets/icons/Home/TopRightArrowIcon.svg?react';
+
+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">
+        <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]">
+                공고제목
+              </h5>
+              <p className="caption-1 text-[#BDBDBD]">장소이름</p>
+            </div>
+            <button className="px-[0.75rem] py-[0.25rem] bg-[#1B1B1B] rounded-[1.313rem]">
+              <TopRightArrowIcons />
+            </button>
+          </div>
+        </article>
+        <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]">
+                공고제목
+              </h5>
+              <p className="caption-1 text-[#BDBDBD]">장소이름</p>
+            </div>
+            <button className="px-[0.75rem] py-[0.25rem] bg-[#1B1B1B] rounded-[1.313rem]">
+              <TopRightArrowIcons />
+            </button>
+          </div>
+        </article>
+      </div>
+    </section>
+  );
+};
+
+export default HomeApplicationList;
diff --git a/src/components/Home/HomeGuestBanner.tsx b/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;
diff --git a/src/components/Home/HomeJobPostingList.tsx b/src/components/Home/HomeJobPostingList.tsx
@@ -0,0 +1,72 @@
+import JobPostingCard from '@/components/Common/JobPostingCard';
+import { JobPostingItemType } from '@/types/common/jobPostingItem';
+
+// 공고 목록 더미데이터
+const JOB_POSTING_LIST: JobPostingItemType[] = [
+  {
+    id: 1234567890,
+    icon_img_url: 'https://example.com/images/icon1.png',
+    title: 'English Tutor',
+    summaries: {
+      address: 'Seoul, South Korea',
+      work_period: '1_WEEK_TO_1_MONTH',
+      work_days_per_week: 5,
+    },
+    tags: {
+      is_recruiting: true,
+      visa: 'D-2-1',
+      job_category: 'GENERAL_INTERPRETATION_TRANSLATION',
+    },
+    hourly_rate: 15000,
+    recruitment_dead_line: '2024-11-01T23:59:59',
+    created_at: '2024-10-20T10:30:00',
+  },
+  {
+    id: 9876543210,
+    icon_img_url: 'https://example.com/images/icon2.png',
+    title: 'Café Barista',
+    summaries: {
+      address: 'Busan, South Korea',
+      work_period: '3_MONTHS_TO_6_MONTHS',
+      work_days_per_week: 6,
+    },
+    tags: {
+      is_recruiting: false,
+      visa: 'D-4-1',
+      job_category: 'GENERAL_CAFE',
+    },
+    hourly_rate: 12000,
+    recruitment_dead_line: '2024-10-21T18:00:00',
+    created_at: '2024-10-15T09:00:00',
+  },
+  {
+    id: 1122334455,
+    icon_img_url: 'https://example.com/images/icon3.png',
+    title: 'Tour Guide',
+    summaries: {
+      address: 'Jeju Island, South Korea',
+      work_period: 'MORE_THAN_1_YEAR',
+      work_days_per_week: 5,
+    },
+    tags: {
+      is_recruiting: true,
+      visa: 'F-2',
+      job_category: 'TOUR_GUIDE_AND_DUTY_FREE_ASSISTANT',
+    },
+    hourly_rate: 18000,
+    recruitment_dead_line: '2024-12-31T23:59:59',
+    created_at: '2024-09-20T14:45:00',
+  },
+];
+
+const HomeJobPostingList = () => {
+  return (
+    <>
+      {JOB_POSTING_LIST.map((value: JobPostingItemType) => (
+        <JobPostingCard key={value.id} jobPostingData={value} />
+      ))}
+    </>
+  );
+};
+
+export default HomeJobPostingList;
diff --git a/src/components/Home/HomeRecommendPostCard.tsx b/src/components/Home/HomeRecommendPostCard.tsx
@@ -0,0 +1,27 @@
+import MessageIcon from '@/assets/icons/Home/MessageIcon.svg?react';
+
+const HomeRecommendPostCard = () => {
+  return (
+    <article className="flex flex-col justify-between min-w-[11.25rem] w-[11.25rem] h-[8.75rem] pt-[0.75rem] pb-[1.125rem] px-[1.125rem] rounded-[1.5rem] border-[0.031rem] border-[#F4F4F9] shadow-cardShadow bg-[#F4F4F9]">
+      <div className="flex justify-end gap-[0.375rem]">
+        <div className="py-[0.125rem] px-[0.438rem] border-[0.031rem] border-[#1E1926] rounded-[0.5rem]  bg-[#FFFFFFCC] text-[#1E1926] caption-2">
+          D-day
+        </div>
+        <div className="py-[0.125rem] px-[0.438rem] border-[0.031rem] border-[#1E1926] rounded-[0.5rem]  bg-[#1E1926] text-[#F4F4F9] caption-2">
+          업직종
+        </div>
+      </div>
+      <MessageIcon />
+      <div>
+        <p className="pb-[0.5rem] caption-1 text-[#656565]">
+          한은서님을 위한 추천 공고 도착!
+        </p>
+        <div className="button-2 text-[#1E1926] break-keep whitespace-normal">
+          공고제목) 에그드랍 역삼역점 파트 알바 모집
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default HomeRecommendPostCard;
diff --git a/src/index.css b/src/index.css
@@ -93,3 +93,14 @@ body {
     line-height: 0.625rem;
   }
 }
+
+@layer utilities {
+  .no-scrollbar {
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  .no-scrollbar::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,6 +6,9 @@ export default {
       fontFamily: {
         pretendard: ['"Pretendard"', 'sans-serif'],
       },
+      boxShadow: {
+        cardShadow: '0px 0px 1px rgba(0, 0, 0, 0.08)',
+      },
     },
   },
   plugins: [require('tailwind-scrollbar-hide')],