Merge pull request #133 from Team-inglo/feat/IGW-59/132

[Feat/igw-59/132] 홈/공고 검색/알림 디자인 오류 수정하기
Team-inglo · Dec 15, 2024 · c400f32 · c400f32
2 parents b39e1fe + 112167c
commit c400f32
Show file tree

Hide file tree

Showing 14 changed files with 79 additions and 68 deletions.
diff --git a/src/components/Common/Header/TextFieldHeader.tsx b/src/components/Common/Header/TextFieldHeader.tsx
@@ -38,7 +38,7 @@ const TextFieldHeader = ({
           placeholder={placeholder}
         />
         {value && (
-          <button onClick={onClickDeleteButton}>
+          <button onClick={onClickDeleteButton} className="ml-2">
             <CircleDeleteIcon />
           </button>
         )}

diff --git a/src/components/Employer/ApplicantList/EmployerApplicantList.tsx b/src/components/Employer/ApplicantList/EmployerApplicantList.tsx
@@ -33,7 +33,6 @@ const EmployerApplicationList = ({
   );
 
   const [applicantData, setApplicantData] = useState<ApplicantItemType[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useGetApplicantList(
@@ -55,8 +54,7 @@ const EmployerApplicationList = ({
 
   const targetRef = useInfiniteScroll(() => {
     if (hasNextPage && !isFetchingNextPage) {
-      setIsLoading(true);
-      fetchNextPage().finally(() => setIsLoading(false));
+      fetchNextPage();
     }
   }, !!hasNextPage);
 
@@ -81,10 +79,14 @@ const EmployerApplicationList = ({
           />
         </div>
       </div>
-      {applicantData?.map((data: ApplicantItemType) => (
-        <EmployerApplicationCard key={data.id} applicantData={data} />
-      ))}
-      {isLoading && <LoadingItem />}
+      {applicantData?.length > 0 ? (
+        applicantData.map((data: ApplicantItemType) => (
+          <EmployerApplicationCard key={data.id} applicantData={data} />
+        ))
+      ) : (
+        <div className="mt-8 w-full text-center body-2">지원자가 없습니다.</div>
+      )}
+      {isFetchingNextPage && <LoadingItem />}
       <div ref={targetRef} className="h-1"></div>
     </section>
   );

diff --git a/src/components/Home/HomeApplicationCard.tsx b/src/components/Home/HomeApplicationCard.tsx
@@ -17,12 +17,21 @@ 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]">
+    <article className="flex flex-col gap-2 px-5 pt-3 pb-5 min-w-fit bg-white rounded-2xl shadow-cardShadow">
+      <div className="w-fit px-[0.438rem] py-[0.125rem] caption-2 bg-[#1E1926] rounded-sm 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="w-full flex gap-4 items-center">
+        {applicationData?.icon_img_url ? (
+          <div
+            className="w-8 min-w-8 h-8 rounded-lg bg-cover bg-[#F4F4F9]"
+            style={{
+              backgroundImage: `url(${applicationData.icon_img_url})`,
+            }}
+          ></div>
+        ) : (
+          <div className="w-8 min-w-8 h-8 rounded-lg bg-[#F4F4F9]"></div>
+        )}
         <div className="flex-1">
           <h5 className="pb-[0.125rem] button-2 text-[#171719]">
             {applicationData.title}

diff --git a/src/components/Home/HomeJobPostingList.tsx b/src/components/Home/HomeJobPostingList.tsx
@@ -84,7 +84,7 @@ const HomeJobPostingList = () => {
 
   return (
     <section className="w-full bg-[#FEF387]">
-      <nav className="flex gap-[0.5rem] w-full py-[1rem] px-[2rem] rounded-t-[1rem] bg-white">
+      <nav className="flex justify-evenly w-full py-4 px-2 rounded-t-2xl bg-white sticky top-0">
         <button onClick={() => scrollToSelectedMenu(POST_SEARCH_MENU.TRENDING)}>
           <Tag
             value={

diff --git a/src/components/Home/HomeRecommendPostCard.tsx b/src/components/Home/HomeRecommendPostCard.tsx
@@ -33,7 +33,7 @@ const HomeRecommendPostCard = ({
       <MessageIcon />
       <div>
         <p className="pb-[0.5rem] caption-1 text-[#656565] break-words whitespace-normal">
-          he recommendation notice for {name.replace(/-/g, ' ')} has arrived !
+          The recommendation notice for {name.replace(/-/g, ' ')} has arrived !
         </p>
         <div className="button-2 text-[#1E1926] break-words whitespace-normal">
           Job Title {')'} {jobPostingData.title}

diff --git a/src/components/PostApply/PostApplyResume.tsx b/src/components/PostApply/PostApplyResume.tsx
@@ -23,7 +23,9 @@ const PostApplyResume = () => {
   const { data: userData } = useGetResume(account_type === UserType.USER);
   const { data: ownerData } = useGetApplicantResume(
     Number(currentApplicantId),
-    !isNaN(Number(currentApplicantId)) && account_type === UserType.OWNER ? true : false,
+    !isNaN(Number(currentApplicantId)) && account_type === UserType.OWNER
+      ? true
+      : false,
   );
 
   const data = account_type === UserType.OWNER ? ownerData : userData;
@@ -151,15 +153,15 @@ const PostApplyResume = () => {
               Social Intergration
             </h5>
             <div className="px-[0.5rem] py-[0.25rem] rounded-[0.188rem] border-[0.031rem] border-[#7872ED] text-[#7872ED] bg-[#2801E81F] caption-2">
-              Level {data?.data?.languages.social_integration}
+              LEVEL {data?.data?.languages.social_integration}
             </div>
           </div>
           <div className="flex justify-between items-center w-full py-[1rem] px-[0.75rem] rounded-[0.75rem] bg-[#F4F4F980]">
             <h5 className="pb-[0.125rem] button-2 text-[#464646]">
               Sejong Institute
             </h5>
             <div className="px-[0.5rem] py-[0.25rem] rounded-[0.188rem] border-[0.031rem] border-[#7872ED] text-[#7872ED] bg-[#2801E81F] caption-2">
-              Level {data?.data?.languages.sejong_institute}
+              LEVEL {data?.data?.languages.sejong_institute}
             </div>
           </div>
           {data?.data?.languages.etc?.map((data: LanguageType) => (

diff --git a/src/components/PostDetail/PostDetailContent.tsx b/src/components/PostDetail/PostDetailContent.tsx
@@ -125,8 +125,6 @@ const PostDetailContent = ({ postDetailData }: PostDetailContentProps) => {
         <div ref={(e) => (scrollRef.current[1] = e)}>
           <div className="flex flex-col gap-[0.25rem] px-[0.5rem] pb-[0.5rem]">
             <h3 className="text-[#1E1926] head-3">Workplace Information</h3>
-            <p className="text-[#656565] button-2">Recruitment Period</p>
-            <p className="text-[#656565] caption-1">Open recruitment</p>
           </div>
           <Map
             center={{
@@ -184,7 +182,10 @@ const PostDetailContent = ({ postDetailData }: PostDetailContentProps) => {
                 {postDetailData.working_conditions.work_day_times
                   .filter(
                     (value) =>
-                      !(value.work_start_time === "시간" && value.work_end_time === "무관")
+                      !(
+                        value.work_start_time === '시간' &&
+                        value.work_end_time === '무관'
+                      ),
                   )
                   .map(
                     (value) =>

diff --git a/src/components/PostSearch/PostSearchFilterList.tsx b/src/components/PostSearch/PostSearchFilterList.tsx
@@ -83,7 +83,7 @@ const PostSearchFilterList = () => {
 
       const regionIndex = findFilterIndex(region1, region2, region3);
 
-      if (regionIndex !== -1) return;
+      if (regionIndex === -1) return;
 
       const newFilterList = {
         ...filterList,
@@ -101,20 +101,20 @@ const PostSearchFilterList = () => {
         ),
       };
       updateFilterList(newFilterList);
+    } else {
+      const newFilterList = {
+        ...filterList,
+        [tag.category]: filterList[tag.category as FILTER_CATEGORY].filter(
+          (value) => value !== tag.value,
+        ),
+      };
+      updateFilterList(newFilterList);
     }
-
-    const newFilterList = {
-      ...filterList,
-      [tag.category]: filterList[tag.category as FILTER_CATEGORY].filter(
-        (value) => value !== tag.value,
-      ),
-    };
-    updateFilterList(newFilterList);
   };
 
   return (
-    <section className="relative w-full pt-[0.75rem] pb-[0.5rem] pr-[2.5rem]">
-      <div className="w-full min-h-[1.5rem] pl-[1.5rem] flex items-center gap-[0.5rem] overflow-x-scroll whitespace-nowrap no-scrollbar">
+    <section className="relative w-full pt-3 pb-2 pr-10">
+      <div className="w-full min-h-6 pr-6 pl-6 flex items-center gap-2 overflow-x-scroll whitespace-nowrap no-scrollbar">
         {formatFilterListToTag().map((value, index) => (
           <Tag
             key={`${index}_${value.category}`}
@@ -130,7 +130,7 @@ const PostSearchFilterList = () => {
         ))}
       </div>
       <button
-        className="absolute top-0 right-0 px-2 pr-6 py-[0.75rem] bg-white"
+        className="absolute top-0 right-0 px-2 pr-6 py-3 bg-white"
         onClick={goToPostSearchFilterPage}
       >
         <FilterIcon />

diff --git a/src/components/PostSearchFilter/PostSearchFilterArea.tsx b/src/components/PostSearchFilter/PostSearchFilterArea.tsx
@@ -81,7 +81,7 @@ const PostSearchFilterArea = ({
 
     const isValidRegionData = REGION_DATA[region1Depth];
     if (isValidRegionData && isValidRegionData[region]) {
-      setRegion3DepthData(isValidRegionData[region]);
+      setRegion3DepthData(['전체', ...isValidRegionData[region]]);
     } else {
       setRegion3DepthData([]);
     }

diff --git a/src/pages/Alarm/AlarmPage.tsx b/src/pages/Alarm/AlarmPage.tsx
@@ -16,7 +16,6 @@ const AlarmPage = () => {
   const navigate = useNavigate();
 
   const [alarmList, setAlarmList] = useState<AlarmItemType[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const readAlarm = async (id: number) => {
     const result = await mutateAsync(id);
@@ -30,8 +29,7 @@ const AlarmPage = () => {
 
   const targetRef = useInfiniteScroll(() => {
     if (hasNextPage && !isFetchingNextPage) {
-      setIsLoading(true);
-      fetchNextPage().finally(() => setIsLoading(false));
+      fetchNextPage();
     }
   }, !!hasNextPage);
 
@@ -51,10 +49,14 @@ const AlarmPage = () => {
         title="Notification"
       />
       <section className="flex flex-col gap-[1rem] w-full p-[1rem] pb-[5rem]">
-        {alarmList?.map((data) => (
-          <AlarmCard key={data.id} alarmData={data} readAlarm={readAlarm} />
-        ))}
-        {isLoading && <LoadingItem />}
+        {alarmList?.length > 0 ? (
+          alarmList.map((data) => (
+            <AlarmCard key={data.id} alarmData={data} readAlarm={readAlarm} />
+          ))
+        ) : (
+          <div className="mt-8 w-full text-center body-2">알람이 없습니다.</div>
+        )}
+        {isFetchingNextPage && <LoadingItem />}
       </section>
       <div ref={targetRef} className="h-1"></div>
     </>

diff --git a/src/pages/PostSearch/PostSearchPage.tsx b/src/pages/PostSearch/PostSearchPage.tsx
@@ -22,9 +22,8 @@ const PostSearchPage = () => {
   const { account_type } = useUserStore();
   const { searchText, updateSearchText, filterList, sortType, updateSortType } =
     usePostSearchStore();
-  const [searchParams, setSearchParams] = useState<GetPostListReqType>(
-    formatSearchFilter(searchText, sortType, filterList),
-  );
+  const [searchParams, setSearchParams] =
+    useState<GetPostListReqType>(formatSearchFilter());
 
   const [postData, setPostData] = useState<JobPostingItemType[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);

diff --git a/src/store/postSearch.ts b/src/store/postSearch.ts
@@ -8,7 +8,6 @@ import {
   PostSortingType,
 } from '@/types/PostSearchFilter/PostSearchFilterItem';
 import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
 
 type PostSearchStore = {
   sortType: PostSortingType | POST_SEARCH_MENU;
@@ -19,19 +18,12 @@ type PostSearchStore = {
   updateFilterList: (newFilterList: PostSearchFilterItemType) => void;
 };
 
-export const usePostSearchStore = create(
-  persist<PostSearchStore>(
-    (set) => ({
-      sortType: POST_SORTING.RECENT,
-      searchText: '',
-      filterList: initialFilterList,
-      updateSortType: (type) => set(() => ({ sortType: type })),
-      updateSearchText: (text) => set(() => ({ searchText: text })),
-      updateFilterList: (newFilterList) =>
-        set(() => ({ filterList: newFilterList })),
-    }),
-    {
-      name: 'postSearchStore',
-    },
-  ),
-);
+export const usePostSearchStore = create<PostSearchStore>()((set) => ({
+  sortType: POST_SORTING.RECENT,
+  searchText: '',
+  filterList: initialFilterList,
+  updateSortType: (type) => set(() => ({ sortType: type })),
+  updateSearchText: (text) => set(() => ({ searchText: text })),
+  updateFilterList: (newFilterList) =>
+    set(() => ({ filterList: newFilterList })),
+}));
diff --git a/src/utils/clearAllStore.ts b/src/utils/clearAllStore.ts
@@ -1,4 +1,3 @@
-import { usePostSearchStore } from '@/store/postSearch';
 import { useEmailTryCountStore } from '@/store/signup';
 import {
   useCurrentApplicantIdStore,
@@ -11,7 +10,6 @@ import { useUserStore } from '@/store/user';
 // store 전역 변수 초기화
 export const clearAllStore = () => {
   useUserStore.persist.clearStorage();
-  usePostSearchStore.persist.clearStorage();
   useEmailTryCountStore.persist.clearStorage();
   useCurrentPostIdStore.persist.clearStorage();
   useCurrentApplicantIdStore.persist.clearStorage();

diff --git a/src/utils/formatSearchFilter.ts b/src/utils/formatSearchFilter.ts
@@ -1,19 +1,25 @@
-import { FILTER_CATEGORY, POST_SEARCH_MENU } from '@/constants/postSearch';
+import {
+  FILTER_CATEGORY,
+  initialFilterList,
+  POST_SEARCH_MENU,
+} from '@/constants/postSearch';
 import { PostSearchFilterItemType } from '@/types/PostSearchFilter/PostSearchFilterItem';
 
 export const formatSearchFilter = (
-  searchText: string,
-  sortType: 'POPULAR' | 'RECENT' | POST_SEARCH_MENU,
-  filterList: PostSearchFilterItemType,
+  searchText: string = '',
+  sortType: 'POPULAR' | 'RECENT' | POST_SEARCH_MENU = 'POPULAR',
+  filterList: PostSearchFilterItemType = initialFilterList,
 ) => {
   const newSearchFilter = {
     size: 5,
     search: searchText ?? null,
     sorting: sortType,
     region_1depth: filterList[FILTER_CATEGORY.REGION_1DEPTH].join(','),
-    region_2depth: filterList[FILTER_CATEGORY.REGION_2DEPTH].join(','),
+    region_2depth: filterList[FILTER_CATEGORY.REGION_2DEPTH]
+      .map((value) => (value === '전체' ? 'none' : value))
+      .join(','),
     region_3depth: filterList[FILTER_CATEGORY.REGION_3DEPTH]
-      .map((value) => (value === '' ? 'none' : value))
+      .map((value) => (value === '' || value === '전체' ? 'none' : value))
       .join(','),
     industry: filterList[FILTER_CATEGORY.INDUSTRY]
       .join(',')