Merge branch 'main' of https://github.com/Team-inglo/Giggle-Web into …

…fix/IGW-32/39

src/components/Application/ApplicationCard.tsx

@@ -0,0 +1,89 @@
+import RightArrowIcon from '@/assets/icons/RightArrowIcon.svg?react';
+import Tag from '@/components/Common/Tag';
+import { APPLICATION_STEP } from '@/constants/application';
+import {
+  AppicationItemType,
+  ApplicationStepType,
+} from '@/types/application/applicationItem';
+import { useNavigate } from 'react-router-dom';
+
+const statusStyler = (status: ApplicationStepType) => {
+  switch (status) {
+    case APPLICATION_STEP.APPLICATION_SUCCESS:
+      return 'bg-[#C7C6F6]';
+    case APPLICATION_STEP.RESUME_REJECTED:
+      return 'bg-[#FFC6C0]';
+    case APPLICATION_STEP.APPLICATION_REJECTED:
+      return 'bg-[#FFC6C0]';
+    case APPLICATION_STEP.PENDING:
+      return 'bg-[#BDBDBD]';
+    default:
+      return 'bg-[#FEF387]';
+  }
+};
+
+type ApplicationCardType = {
+  applicationData: AppicationItemType;
+};
+
+const ApplicationCard = ({ applicationData }: ApplicationCardType) => {
+  const navigate = useNavigate();
+
+  return (
+    <article className="w-full border-[0.031rem] border-[#1E19263D] rounded-[1.125rem] overflow-hidden">
+      <div
+        className={`flex justify-between items-center px-[1rem] py-[0.5rem] ${statusStyler(applicationData.step)}`}
+      >
+        <div className="flex gap-[0.25rem]">
+          <p className="pl-[0.5rem] caption-1 text-[#1E1926]">
+            {applicationData.step.replace(/_/g, ' ').toLowerCase()}
+          </p>
+          <div className="w-[0.375rem] h-[0.375rem] rounded-full bg-[#FF6F61]"></div>
+        </div>
+        <RightArrowIcon />
+      </div>
+      <div className="flex flex-col gap-[1.25rem] w-full px-[1.5rem] pt-[1.5rem] pb-[1rem]">
+        <div className="flex gap-[0.75rem]">
+          <div className='w-[2.5rem] h-[2.5rem] rounded-[0.5rem] bg-cover bg-[url("/src/assets/images/JobIconExample.jpeg")]'></div>
+          <div>
+            <h3 className="pb-[0.25rem] head-3 text-[#1E1926]">
+              {applicationData.title}
+            </h3>
+            <p className="body-3 text-[#464646]">
+              {applicationData.address_name}
+            </p>
+          </div>
+        </div>
+        <div className="flex justify-between items-end pt-[0.25rem]">
+          <Tag
+            value={`${applicationData.hourly_rate} KRW`}
+            padding="0.375rem 0.75rem"
+            isRounded={true}
+            hasCheckIcon={false}
+            backgroundColor="white"
+            color="#1E1926"
+            borderColor="#1E1926"
+            fontStyle="caption-1"
+          />
+          <p className="body-3 text-[#656565]">
+            {applicationData.duration_of_days} Days After
+          </p>
+        </div>
+      </div>
+      <div className="flex">
+        {/* TODO: 각각 공고의 id로 이동하기, 지원 상태 상세로 이동하기 */}
+        <button
+          className="flex-1 py-[0.75rem] caption-1-sb text-[#F4F4F9] bg-[#1E1926]  text-center"
+          onClick={() => navigate(`/post/${applicationData.job_posting_id}`)}
+        >
+          Read More Posting
+        </button>
+        <button className="flex-1 py-[0.75rem] caption-1-sb text-[#1E1926] bg-[#FEF387]  text-center">
+          Check Application Status
+        </button>
+      </div>
+    </article>
+  );
+};
+
+export default ApplicationCard;

src/components/Application/ApplicationCardList.tsx

@@ -0,0 +1,23 @@
+import ApplicationCard from '@/components/Application/ApplicationCard';
+import { AppicationItemType } from '@/types/application/applicationItem';
+
+type ApplicationCardListType = {
+  applicationListData: AppicationItemType[];
+};
+
+const ApplicationCardList = ({
+  applicationListData,
+}: ApplicationCardListType) => {
+  return (
+    <section className="flex flex-col gap-[1.5rem] w-full pb-[5rem]">
+      {applicationListData.map((data) => (
+        <ApplicationCard
+          key={data.user_owner_job_posting_id}
+          applicationData={data}
+        />
+      ))}
+    </section>
+  );
+};
+
+export default ApplicationCardList;

src/components/PostSearch/PostSearchSortDropdown.tsx → src/components/Common/SearchSortDropdown.tsx

@@ -10,7 +10,7 @@ type DropdownProps = {
 // DropdownModal 컴포넌트: 드롭다운 옵션을 표시하는 모달
 const DropdownModal = ({ options, value, onSelect }: DropdownProps) => {
   return (
-    <div className="w-min absolute top-[1.7rem] right-0 shadow rounded-2xl bg-white border border-[#dcdcdc] flex flex-row items-start justify-start p-2 text-left text-sm text-[#656565]">
+    <div className="w-max absolute top-[1.7rem] right-0 shadow rounded-2xl bg-white border border-[#dcdcdc] flex flex-row items-start justify-start p-2 text-left text-sm text-[#656565]">
       <div className="flex-1 flex flex-col items-start justify-start gap-[5px]">
         {options.map((option, index) => (
           <div
@@ -26,11 +26,7 @@ const DropdownModal = ({ options, value, onSelect }: DropdownProps) => {
   );
 };
 
-const PostSearchSortDropdown = ({
-  options,
-  value,
-  onSelect,
-}: DropdownProps) => {
+const SearchSortDropdown = ({ options, value, onSelect }: DropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const onSelectOption = (option: string) => {
@@ -63,4 +59,4 @@ const PostSearchSortDropdown = ({
     </div>
   );
 };
-export default PostSearchSortDropdown;
+export default SearchSortDropdown;

src/components/PostSearch/PostSearchResult.tsx

@@ -2,7 +2,7 @@ import NoSearchResultImg from '@/assets/images/NoSearchResultImg.png';
 import { JobPostingItemType } from '@/types/common/jobPostingItem';
 import JobPostingCard from '@/components/Common/JobPostingCard';
 import { useState } from 'react';
-import PostSearchSortDropdown from '@/components/PostSearch/PostSearchSortDropdown';
+import SearchSortDropdown from '@/components/Common/SearchSortDropdown';
 
 // 공고 목록 더미데이터
 const JOB_POSTING_LIST: JobPostingItemType[] = [
@@ -59,7 +59,7 @@ const PostSearchResult = () => {
     <section className="flex flex-col items-center gap-[1rem] w-full mt-[1rem] px-[1.5rem]">
       <div className="w-full flex justify-between items-center">
         <h3 className="head-3 text-black">Search Result</h3>
-        <PostSearchSortDropdown
+        <SearchSortDropdown
           options={Object.values(SORT_TYPE)}
           value={selectedSort}
           onSelect={(sort) => setSelectedSort(sort as SortType)}

src/components/Profile/EditProfilePicture.tsx

@@ -68,8 +68,6 @@ const EditProfilePicture = ({
         onChange={handlePictureChange}
         style={{ display: 'none' }}
       />
-
-      {imagePreviewUrl && <p>Profile picture has been changed.</p>}
     </div>
   );
 };

src/components/Profile/ProfileCard.tsx

@@ -25,7 +25,10 @@ const ProfileCard = ({ data }: ProfileCardProps) => {
             {data.first_name} {data.last_name}
           </div>
           {/* 생년월일 */}
-          <div className="body-3 text-[#656565]">{data.birth}</div>
+          <div className="body-3 text-[#656565]">
+            {data.birth.replace(/-/g, '.')}
+          </div>
+
           {/* 교육 정보 */}
           {data.school_name === '' ? (
             <span className="body-2 text-[#1E1926]">

src/constants/application.ts

@@ -0,0 +1,25 @@
+export const enum APPLICATION_STEP {
+  RESUME_UNDER_REVIEW = 'RESUME_UNDER_REVIEW',
+  WAITING_FOR_INTERVIEW = 'WAITING_FOR_INTERVIEW',
+  FILLING_OUT_DOCUMENTS = 'FILLING_OUT_DOCUMENTS',
+  DOCUMENT_UNDER_REVIEW = 'DOCUMENT_UNDER_REVIEW',
+  APPLICATION_IN_PROGRESS = 'APPLICATION_IN_PROGRESS',
+  APPLICATION_SUCCESS = 'APPLICATION_SUCCESS',
+  APPLICATION_REJECTED = 'APPLICATION_REJECTED',
+  RESUME_REJECTED = 'RESUME_REJECTED',
+  PENDING = 'PENDING',
+  REGISTRATION_RESULTS = 'REGISTRATION_RESULTS',
+}
+
+export const APPLICATION_SORT_TYPE = {
+  ASCENDING: 'Ascending',
+  DESCENDING: 'Descending',
+} as const;
+
+export const APPLICATION_STATUS_TYPE = {
+  INPROGRESS: 'Inprogress',
+  APPLICATION_SUCCESSFUL: 'Applicatioin successful',
+  APPLICATION_REJECTED: 'Applicatioin rejected',
+  RESUME_REJECTED: 'resume rejected',
+  PENDING: 'pending',
+} as const;

src/constants/profile.ts

@@ -5,4 +5,31 @@ export const enum IconType {
   NOTIFICATION = 'NOTIFICATION',
   LANGUAGE = 'LANGUAGE',
   LOGOUT = 'LOGOUT',
+}
+
+export const enum GenderType {
+  MALE='Maile',
+  FEMALE='Femail',
+  NONE='None',
+}
+
+export const enum VisaType{
+  D_2_1='D-2-1',
+  D_2_2='D-2-2',
+  D_2_3='D-2-3',
+  D_2_4='D-2-4',
+  D_2_6='D-2-6',
+  D_2_7='D-2-7',
+  D_2_8='D-2-8',
+  D_4_1='D-4-1',
+  D_4_7='D-4-7',
+  F_2='F-2'
+}
+
+export const enum NationalityType{
+  SOUTH_KOREA= 'South Korea',
+  JAPAN= 'Japan',
+  CHINA= 'China',
+  VIETNAME= 'Vietname',
+  UZBEKISTAN= 'Uzbekistan',
 }

src/pages/Application/ApplicationPage.tsx

@@ -0,0 +1,95 @@
+import ApplicationCardList from '@/components/Application/ApplicationCardList';
+import BaseHeader from '@/components/Common/Header/BaseHeader';
+import SearchSortDropdown from '@/components/Common/SearchSortDropdown';
+import {
+  APPLICATION_SORT_TYPE,
+  APPLICATION_STATUS_TYPE,
+} from '@/constants/application';
+import { AppicationItemType } from '@/types/application/applicationItem';
+import { useState } from 'react';
+
+type SortType =
+  (typeof APPLICATION_SORT_TYPE)[keyof typeof APPLICATION_SORT_TYPE];
+
+type StatusType =
+  (typeof APPLICATION_STATUS_TYPE)[keyof typeof APPLICATION_STATUS_TYPE];
+
+// 더미데이터
+const APPLICATION_LIST_DATA: AppicationItemType[] = [
+  {
+    job_posting_id: 1,
+    user_owner_job_posting_id: 1,
+    icon_img_url: 'https://example.com/icon1.png',
+    title: 'Frontend Developer',
+    address_name: '123 Tech Avenue, Seoul',
+    step: 'RESUME_UNDER_REVIEW',
+    hourly_rate: 25,
+    duration_of_days: 90,
+  },
+  {
+    job_posting_id: 2,
+    user_owner_job_posting_id: 2,
+    icon_img_url: 'https://example.com/icon2.png',
+    title: 'Backend Developer',
+    address_name: '456 Code Street, Busan',
+    step: 'PENDING',
+    hourly_rate: 30,
+    duration_of_days: 120,
+  },
+  {
+    job_posting_id: 3,
+    user_owner_job_posting_id: 3,
+    icon_img_url: 'https://example.com/icon3.png',
+    title: 'Full Stack Developer',
+    address_name: '789 Web Road, Incheon',
+    step: 'APPLICATION_REJECTED',
+    hourly_rate: 28,
+    duration_of_days: 60,
+  },
+  {
+    job_posting_id: 4,
+    user_owner_job_posting_id: 4,
+    icon_img_url: 'https://example.com/icon3.png',
+    title: 'Full Stack Developer',
+    address_name: '789 Web Road, Incheon',
+    step: 'APPLICATION_SUCCESS',
+    hourly_rate: 28,
+    duration_of_days: 60,
+  },
+];
+
+const ApplicationPage = () => {
+  const [selectedSort, setSelectedSort] = useState<SortType>(
+    APPLICATION_SORT_TYPE.ASCENDING,
+  );
+  const [selectedStatus, setSelectedStatus] = useState<StatusType>(
+    APPLICATION_STATUS_TYPE.INPROGRESS,
+  );
+
+  return (
+    <>
+      <BaseHeader
+        hasBackButton={false}
+        hasMenuButton={false}
+        title="Applicants"
+      />
+      <div className="w-full p-[1.5rem]">
+        <div className="flex gap-[0.25rem] pb-[2rem]">
+          <SearchSortDropdown
+            options={Object.values(APPLICATION_SORT_TYPE)}
+            value={selectedSort}
+            onSelect={(sort) => setSelectedSort(sort as SortType)}
+          />
+          <SearchSortDropdown
+            options={Object.values(APPLICATION_STATUS_TYPE)}
+            value={selectedStatus}
+            onSelect={(sort) => setSelectedStatus(sort as StatusType)}
+          />
+        </div>
+        <ApplicationCardList applicationListData={APPLICATION_LIST_DATA} />
+      </div>
+    </>
+  );
+};
+
+export default ApplicationPage;