[Feat/468] 카드 컴포넌트 레이아웃 및 태그 스타일 수정

README.md

@@ -25,6 +25,10 @@
 
 > https://youtu.be/PfW00paozHM?si=0qIEgXpjnI9DGKZO
 
+## DeepWiki
+
+> https://deepwiki.com/Team-inglo/Giggle-Web
+
 ## Tech Stack
 
 <p>

src/components/Application/ApplicationCardList.tsx

@@ -34,8 +34,8 @@ const ApplicationCardList = ({
     return (
       <div className="mt-10 flex flex-col justify-center items-center gap-1">
         <EmptyJobIcon />
-        <h3 className="heading-20-semibold text-[#252525]">No results found</h3>
-        <p className="body-14-regular text-[#9397A1] text-center">
+        <h3 className="heading-20-semibold text-text-strong">No results found</h3>
+        <p className="body-14-regular text-text-alternative text-center">
           We couldn’t find any jobs matching your search. <br />
           Try adjusting your filters!
         </p>

src/components/Application/ApplicationPostCard.tsx

@@ -14,48 +14,48 @@ const renderStatusBar = (status: ApplicationStepType) => {
       return (
         <Tag
           value="Application Success 🎉"
-          padding="px-1 py-[0.188rem]"
+          padding="px-[0.313rem] py-[0.188rem]"
           isRounded={false}
           hasCheckIcon={false}
-          backgroundColor="bg-[#0066FF]/10"
+          backgroundColor="bg-status-success/10"
           color="text-text-success"
-          fontStyle="caption-12-regular"
+          fontStyle="caption-11-semibold"
         />
       );
     case APPLICATION_STEP.RESUME_REJECTED:
       return (
         <Tag
           value="Resume Rejected ⚠"
-          padding="px-1 py-[0.188rem]"
+          padding="px-[0.313rem] py-[0.188rem]"
           isRounded={false}
           hasCheckIcon={false}
-          backgroundColor="bg-[#FF5252]/10"
+          backgroundColor="bg-status-error/10"
           color="text-text-error"
-          fontStyle="caption-12-regular"
+          fontStyle="caption-11-semibold"
         />
       );
     case APPLICATION_STEP.APPLICATION_REJECTED:
       return (
         <Tag
           value="Application Rejected ⚠"
-          padding="px-1 py-[0.188rem]"
+          padding="px-[0.313rem] py-[0.188rem]"
           isRounded={false}
           hasCheckIcon={false}
-          backgroundColor="bg-[#FF5252]/10"
+          backgroundColor="bg-status-error/10"
           color="text-text-error"
-          fontStyle="caption-12-regular"
+          fontStyle="caption-11-semibold"
         />
       );
     default:
       return (
         <Tag
           value="Application in Progress 🔍"
-          padding="px-1 py-[0.188rem]"
+          padding="px-[0.313rem] py-[0.188rem]"
           isRounded={false}
           hasCheckIcon={false}
           backgroundColor="bg-surface-secondary"
           color="text-text-normal"
-          fontStyle="caption-12-regular"
+          fontStyle="caption-11-semibold"
         />
       );
   }

src/components/Common/EmployeeCard/EmployeeCard.tsx

@@ -46,7 +46,7 @@ const EmployeeCard = ({ cardData, variant }: EmployeeCardProps) => {
         <div className="pt-2 flex items-center gap-1 flex-wrap">
           <Tag
             value={cardData?.industry}
-            padding="py-[0.188rem] px-[0.25rem]"
+            padding="py-[0.188rem] px-[0.313rem]"
             isRounded={true}
             hasCheckIcon={false}
             backgroundColor="bg-status-blue-300/10"
@@ -55,7 +55,7 @@ const EmployeeCard = ({ cardData, variant }: EmployeeCardProps) => {
           />
           <Tag
             value={cardData?.visa?.replace(/_/g, '-')}
-            padding="py-[0.188rem] px-[0.25rem]"
+            padding="py-[0.188rem] px-[0.313rem]"
             isRounded={true}
             hasCheckIcon={false}
             backgroundColor="bg-surface-secondary"
@@ -70,57 +70,58 @@ const EmployeeCard = ({ cardData, variant }: EmployeeCardProps) => {
   // Column 형 카드
   return (
     <article
-      className="w-[9.063rem] flex flex-col gap-2 rounded-lg"
+      className="flex flex-col gap-2 w-[9.5rem] rounded-lg"
       onClick={goToResumeDetailPage}
     >
-      <div className="w-[9.063rem] h-[6.75rem] rounded-lg overflow-hidden border border-border-alternative">
+      <div className="flex flex-col gap-3">
         {cardData?.profile_img_url ? (
-          <img
-            src={cardData.profile_img_url}
-            alt="profile"
-            className="object-cover w-full h-full"
-          />
+          <div className="relative w-[9.5rem] h-[7.125rem] overflow-hidden rounded-lg shrink-0">
+            <div
+              className="absolute inset-0 bg-cover bg-center"
+              style={{
+                backgroundImage: `url(${cardData.profile_img_url})`,
+              }}
+            />
+            <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" />
+          </div>
         ) : (
-          <div className="flex items-center justify-center w-full h-full text-white bg-gradient-to-r from-purple-500 to-pink-500">
-            No Image
+          <div className="relative w-[9.5rem] h-[7.125rem] bg-surface-secondary flex items-center justify-center rounded-lg shrink-0">
+            <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" />
           </div>
         )}
-      </div>
-
-      <div className="flex flex-col">
-        <h3 className="button-16-semibold text-text-normal line-clamp-1 whitespace-normal pb-[0.125rem]">
-          {cardData?.name}
-        </h3>
-
-        <p className="caption-12-regular text-text-alternative line-clamp-2 whitespace-normal mb-2">
-          {cardData?.title || '친절한 서비스를 고객을 맞게 만들어보아요!'}
-        </p>
-
-        <div className="flex flex-wrap items-center justify-between gap-1">
-          <div className="flex flex-wrap items-center gap-1">
-            {cardData?.visa && (
-              <Tag
-                value={cardData.visa.replace(/_/g, '-')}
-                padding="py-[0.188rem] px-[0.25rem]"
-                isRounded={false}
-                hasCheckIcon={false}
-                backgroundColor="bg-surface-secondary"
-                color="text-text-alternative"
-                fontStyle="caption-12-regular"
-              />
-            )}
+        <div className="flex flex-col gap-2">
+          <div className="flex flex-col gap-0.5">
+            <h3 className="button-16-semibold text-text-strong line-clamp-1 whitespace-normal max-h-42 min-h-0">
+              {cardData.name}
+            </h3>
+            <p className="caption-12-regular text-text-alternative line-clamp-2 whitespace-normal">
+              {cardData?.title}
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center justify-between gap-1">
+            <div className="flex flex-wrap items-center gap-1">
+              {cardData?.visa && (
+                <Tag
+                  value={cardData.visa?.replace(/_/g, '-')}
+                  padding="py-[0.188rem] px-[0.313rem]"
+                  isRounded={false}
+                  hasCheckIcon={false}
+                  backgroundColor="bg-surface-secondary"
+                  color="text-text-alternative"
+                  fontStyle="caption-11-semibold"
+                />
+              )}
+            </div>
+            <EmployeeCardBookmark
+              isBookmarked={cardData?.is_bookmarked}
+              bookmarkCount={cardData?.bookmark_count}
+              onBookmarkClick={handleClickBookmark}
+              variant="with-count"
+            />
           </div>
-
-          <EmployeeCardBookmark
-            isBookmarked={cardData?.is_bookmarked}
-            bookmarkCount={cardData?.bookmark_count}
-            onBookmarkClick={handleClickBookmark}
-            variant="with-count"
-          />
         </div>
       </div>
     </article>
   );
 };
-
 export default EmployeeCard;

src/components/Common/JobPostingCard.tsx

@@ -56,12 +56,12 @@ const CardDeadLineTag = () => {
   return (
     <Tag
       value={formatRecruitmentDeadLine()}
-      padding="px-1 py-[0.188rem]"
+      padding="px-[0.313rem] py-[0.188rem]"
       isRounded={false}
       hasCheckIcon={false}
-      backgroundColor="bg-[#FF5252]/10"
+      backgroundColor="bg-status-error/10"
       color="text-text-error"
-      fontStyle="caption-12-regular"
+      fontStyle="caption-11-semibold"
     />
   );
 };
@@ -79,11 +79,11 @@ const CardHeader = ({ isBookMarkButton }: { isBookMarkButton?: boolean }) => {
   };
 
   return (
-    <div className="w-full flex justify-between items-center">
+    <div className="w-full flex justify-between items-start">
       <h3 className="heading-18-semibold text-text-strong line-clamp-2">
         {title}
       </h3>
-      <div className="w-6 h-6">
+      <div className="w-6 h-6 mt-0.5">
         {account_type === UserType.USER && isBookMarkButton && (
           <button onClick={(e) => onClickBookmark(e)}>
             {is_book_marked ? <BookmarkCheckedIcon /> : <BookmarkIcon />}
@@ -98,9 +98,9 @@ const CardCompanyInfo = () => {
   const { company_name, summaries } = useCard();
 
   return (
-    <p className="caption-12-regular text-text-alternative whitespace-normal">
+    <p className="body-14-regular text-text-normal whitespace-normal flex items-center">
       {company_name}
-      <span className="mx-2 inline-block px-[0.063rem] h-3 bg-border-alternative align-middle"></span>
+      <span className="w-0.5 h-0.5 bg-border-normal rounded-full mx-1"></span>
       {summaries?.address?.split(' ')?.slice(0, 2)?.join(' ') ?? ''}
     </p>
   );
@@ -123,7 +123,7 @@ const CardVisa = () => {
   const { tags } = useCard();
 
   return (
-    <span className="caption-12-regular text-text-alternative whitespace-normal">
+    <span className="body-14-regular text-text-normal whitespace-normal items-center">
       {tags.visa.sort().join(', ').replace(/_/g, '-')}
     </span>
   );
@@ -139,7 +139,7 @@ const CardWorkDayInfo = () => {
       : summaries.work_period?.replace(/_/g, ' ').toLowerCase();
 
   return (
-    <span className="caption-12-regular text-text-alternative whitespace-normal">
+    <span className="body-14-regular text-text-normal whitespace-normal items-center">
       {workDaysPerWeekToText(
         summaries.work_days_per_week as string,
         account_type,
@@ -161,12 +161,12 @@ const CardTagList = () => {
             ? EN_FILTER_CATEGORY_OPTIONS[tags.employment_type?.toLowerCase()]
             : tags.employment_type?.toLowerCase()
         }
-        padding="py-[0.188rem] px-[0.375rem]"
+        padding="pt-[0.188rem] pb-[0.25rem] px-[0.375rem]"
         isRounded={true}
         hasCheckIcon={false}
         backgroundColor="bg-surface-secondary"
         color="text-text-normal"
-        fontStyle="caption-12-regular"
+        fontStyle="caption-12-semibold"
       />
       <Tag
         value={
@@ -176,12 +176,12 @@ const CardTagList = () => {
               ]
             : tags.job_category.replace(/_/g, ' ').toLowerCase()
         }
-        padding="py-[0.188rem] px-[0.375rem]"
+        padding="pt-[0.188rem] pb-[0.25rem] px-[0.375rem]"
         isRounded={true}
         hasCheckIcon={false}
-        backgroundColor="bg-surface-secondary"
-        color="text-text-normal"
-        fontStyle="caption-12-regular"
+        backgroundColor="bg-status-success/10"
+        color="text-text-success"
+        fontStyle="caption-12-semibold"
       />
     </div>
   );

src/components/Common/Tag.tsx

@@ -27,7 +27,7 @@ const Tag = ({
 }: TagProps) => {
   return (
     <div
-      className={`w-fit h-fit flex items-center gap-[0.5rem] ${padding} ${backgroundColor} ${color} ${borderColor} ${borderColor ? 'border' : ''} ${fontStyle} ${isRounded ? 'rounded' : 'rounded-sm'}`}
+      className={`w-fit h-fit flex items-center gap-[0.5rem] ${padding} ${backgroundColor} ${color} ${borderColor} ${borderColor ? 'border' : ''} ${fontStyle} ${isRounded ? 'rounded-lg' : 'rounded-md'}`}
     >
       {hasCheckIcon && <Icon icon={TagCheckIcon} fillColor={color} />}
       {value}

src/components/Employer/ApplicantList/EmployerApplicantCard.tsx

@@ -16,48 +16,48 @@ const renderStatusBar = (status: ApplicationStepType) => {
       return (
         <Tag
           value="채용을 완료했어요 🎉"
-          padding="px-1 py-[0.188rem]"
+          padding="px-[0.313rem] py-[0.188rem]"
           isRounded={false}
           hasCheckIcon={false}
-          backgroundColor="bg-[#0066FF]/10"
+          backgroundColor="bg-status-success/10"
           color="text-text-success"
-          fontStyle="caption-12-regular"
+          fontStyle="caption-11-semibold"
         />
       );
     case APPLICATION_STEP.RESUME_REJECTED:
       return (
         <Tag
           value="거절한 지원자에요 ⚠"
-          padding="px-1 py-[0.188rem]"
+          padding="px-[0.313rem] py-[0.188rem]"
           isRounded={false}
           hasCheckIcon={false}
-          backgroundColor="bg-[#FF5252]/10"
+          backgroundColor="bg-status-error/10"
           color="text-text-error"
-          fontStyle="caption-12-regular"
+          fontStyle="caption-11-semibold"
         />
       );
     case APPLICATION_STEP.APPLICATION_REJECTED:
       return (
         <Tag
           value="서류 재검토가 필요해요 ⚠"
-          padding="px-1 py-[0.188rem]"
+          padding="px-[0.313rem] py-[0.188rem]"
           isRounded={false}
           hasCheckIcon={false}
-          backgroundColor="bg-[#FF5252]/10"
+          backgroundColor="bg-status-error/10"
           color="text-text-error"
-          fontStyle="caption-12-regular"
+          fontStyle="caption-11-semibold"
         />
       );
     default:
       return (
         <Tag
           value="진행 상황을 확인해보세요 ! 📋"
-          padding="px-1 py-[0.188rem]"
+          padding="px-[0.313rem] py-[0.188rem]"
           isRounded={false}
           hasCheckIcon={false}
           backgroundColor="bg-primary-normal"
           color="text-text-normal"
-          fontStyle="caption-12-regular"
+          fontStyle="caption-11-semibold"
         />
       );
   }
@@ -84,7 +84,7 @@ const EmployerApplicantCard = ({
             {applicantData.nationality.replace(/_/g, ' ').toLowerCase()}
           </p>
         </div>
-        <p className=" caption-12-regular text-text-alternative">
+        <p className="caption-12-regular text-text-alternative">
           {applicantData?.duration_of_days}일 전
         </p>
       </div>