✨feat: Home 페이지 하단 공고 리스트 구현하기 #9

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

Hide file tree

Showing 4 changed files with 155 additions and 24 deletions.
diff --git a/src/assets/icons/Home/RightArrowIcon.svg b/src/assets/icons/Home/RightArrowIcon.svg
diff --git a/src/components/Home/HomeJobPostingList.tsx b/src/components/Home/HomeJobPostingList.tsx
@@ -1,5 +1,8 @@
 import JobPostingCard from '@/components/Common/JobPostingCard';
 import { JobPostingItemType } from '@/types/common/jobPostingItem';
+import RightArrowIcon from '@/assets/icons/Home/RightArrowIcon.svg?react';
+import Tag from '@/components/Common/Tag';
+import { useState } from 'react';
 
 // 공고 목록 더미데이터
 const JOB_POSTING_LIST: JobPostingItemType[] = [
@@ -39,33 +42,95 @@ const JOB_POSTING_LIST: JobPostingItemType[] = [
     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 enum Menu {
+  POPULAR = 'POPULAR',
+  RECENT = 'RECENT',
+  BOOKMARKS = 'BOOKMARKS',
+}
+
 const HomeJobPostingList = () => {
+  const [selectedMenu, setSelectedMenu] = useState<Menu>(Menu.POPULAR);
+
   return (
-    <>
-      {JOB_POSTING_LIST.map((value: JobPostingItemType) => (
-        <JobPostingCard key={value.id} jobPostingData={value} />
-      ))}
-    </>
+    <section className="w-full bg-[#FEF387]">
+      <nav className="flex gap-[0.5rem] w-full py-[1rem] px-[2rem] rounded-t-[1rem] bg-white">
+        <button onClick={() => setSelectedMenu(Menu.POPULAR)}>
+          <Tag
+            value={'🔥 Popular'}
+            padding="0.5rem 1rem"
+            isRounded={true}
+            hasCheckIcon={false}
+            backgroundColor={
+              selectedMenu === Menu.POPULAR ? '#FEF387' : 'white'
+            }
+            color="#1E1926A6"
+            fontStyle="button-2"
+          />
+        </button>
+        <button onClick={() => setSelectedMenu(Menu.RECENT)}>
+          <Tag
+            value={'🌟 Recent'}
+            padding="0.5rem 1rem"
+            isRounded={true}
+            hasCheckIcon={false}
+            backgroundColor={selectedMenu === Menu.RECENT ? '#FEF387' : 'white'}
+            color="#1E1926A6"
+            fontStyle="button-2"
+          />
+        </button>
+        {/* 로그인 시에만 존재하는 메뉴 */}
+        <button onClick={() => setSelectedMenu(Menu.BOOKMARKS)}>
+          <Tag
+            value={'🌟 Bookmarks'}
+            padding="0.5rem 1rem"
+            isRounded={true}
+            hasCheckIcon={false}
+            backgroundColor={
+              selectedMenu === Menu.BOOKMARKS ? '#FEF387' : 'white'
+            }
+            color="#1E1926A6"
+            fontStyle="button-2"
+          />
+        </button>
+      </nav>
+      <div className="flex flex-col gap-[3.125rem] pt-[0.75rem] pb-[6.25rem] px-[1.5rem] bg-white">
+        <div className="flex flex-col gap-[1rem]">
+          <div className="flex justify-between items-end">
+            <h3 className="head-3 text-black">🔥 Popular Job Lists for You</h3>
+            <button className="flex items-center gap-[0.625rem] button-2 text-[#1E1926]">
+              See more <RightArrowIcon />
+            </button>
+          </div>
+          {JOB_POSTING_LIST.map((value: JobPostingItemType) => (
+            <JobPostingCard key={value.id} jobPostingData={value} />
+          ))}
+        </div>
+        <div className="flex flex-col gap-[1rem]">
+          <div className="flex justify-between items-end">
+            <h3 className="head-3 text-black">🌟 Recently Added Job</h3>
+            <button className="flex items-center gap-[0.625rem] button-2 text-[#1E1926]">
+              See more <RightArrowIcon />
+            </button>
+          </div>
+          {JOB_POSTING_LIST.map((value: JobPostingItemType) => (
+            <JobPostingCard key={value.id} jobPostingData={value} />
+          ))}
+        </div>
+        <div className="flex flex-col gap-[1rem]">
+          <div className="flex justify-between items-end">
+            <h3 className="head-3 text-black">🌟 My Bookmarks</h3>
+            <button className="flex items-center gap-[0.625rem] button-2 text-[#1E1926]">
+              See more <RightArrowIcon />
+            </button>
+          </div>
+          {JOB_POSTING_LIST.map((value: JobPostingItemType) => (
+            <JobPostingCard key={value.id} jobPostingData={value} />
+          ))}
+        </div>
+      </div>
+    </section>
   );
 };
 

diff --git a/src/components/Home/HomeRecommendPost.tsx b/src/components/Home/HomeRecommendPost.tsx
@@ -0,0 +1,46 @@
+import MessageIcon from '@/assets/icons/Home/MessageIcon.svg?react';
+import HomeRecommendPostCard from '@/components/Home/HomeRecommendPostCard';
+
+const HomeRecommendPost = () => {
+  const hasProfile = true; // 이력서 등록여부
+  return (
+    <section className="w-full flex gap-[0.5rem] px-[1.25rem] overflow-x-scroll no-scrollbar whitespace-nowrap bg-[#FEF387]">
+      {hasProfile ? (
+        // 이력서 등록 -> 추천 공고 보여주기
+        <>
+          <HomeRecommendPostCard />
+          <HomeRecommendPostCard />
+          <HomeRecommendPostCard />
+        </>
+      ) : (
+        // 이력서 미등록 -> 추가 메뉴 보여주기
+        <>
+          <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]">
+            <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>
+          <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]">
+            <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>
+        </>
+      )}
+    </section>
+  );
+};
+
+export default HomeRecommendPost;
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
@@ -1,5 +1,22 @@
+import HomeApplicationList from '@/components/Home/HomeApplicationList';
+import HomeGuestBanner from '@/components/Home/HomeGuestBanner';
+import HomeHeader from '@/components/Home/HomeHeader';
+import HomeJobPostingList from '@/components/Home/HomeJobPostingList';
+import HomeRecommendPost from '@/components/Home/HomeRecommendPost';
+
 const HomePage = () => {
-  return <>홈 페이지임</>;
+  return (
+    <>
+      <HomeHeader />
+      {/* 로그인을 안한 경우에 보여주는 배너 */}
+      <HomeGuestBanner />
+      {/* 로그인을 하고 이력서를 등록하면 보여주는 추천 공고 리스트 */}
+      <HomeRecommendPost />
+      {/* 현재 진행중인 서류가 있는 경우 */}
+      <HomeApplicationList />
+      <HomeJobPostingList />
+    </>
+  );
 };
 
 export default HomePage;