Team-inglo · MrMirror21 · Aug 1, 2025 · Jun 24, 2025 · Jun 24, 2025 · Jun 24, 2025
diff --git a/index.html b/index.html
@@ -7,23 +7,39 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
-    <!-- Google tag (gtag.js) -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-BEM3WCV14C"
-    ></script>
+
+    <!-- Google Tag Manager -->
     <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag('js', new Date());
-
-      gtag('config', 'G-BEM3WCV14C');
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer','GTM-N4P8H7QD');
     </script>
+
+    <!-- Hotjar Tracking Code for Site 5296393 -->
+    <script>
+      (function(h,o,t,j,a,r){
+          h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+          h._hjSettings={hjid:5296393,hjsv:6};
+          a=o.getElementsByTagName('head')[0];
+          r=o.createElement('script');r.async=1;
+          r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+          a.appendChild(r);
+      })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+    </script>
+
     <title>Giggle</title>
   </head>
+
   <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript>
+      <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N4P8H7QD"
+              height="0" width="0" style="display:none;visibility:hidden">
+      </iframe>
+    </noscript>
+
     <div id="root"></div>
     <div id="toast-root"></div>
     <script type="module" src="/src/main.tsx"></script>

diff --git a/src/assets/icons/Home/AppliedIcon.svg b/src/assets/icons/Home/AppliedIcon.svg
diff --git a/src/assets/icons/Home/ApplyIcon.svg b/src/assets/icons/Home/ApplyIcon.svg
diff --git a/src/assets/icons/Home/MatchesIcon.svg b/src/assets/icons/Home/MatchesIcon.svg
diff --git a/src/assets/icons/Home/RecommendPostIcon.svg b/src/assets/icons/Home/RecommendPostIcon.svg
diff --git a/src/assets/icons/Home/ResumeIcon.svg b/src/assets/icons/Home/ResumeIcon.svg
diff --git a/src/assets/icons/Home/SavedIcon.svg b/src/assets/icons/Home/SavedIcon.svg
diff --git a/src/assets/icons/Home/SavedPostIcon.svg b/src/assets/icons/Home/SavedPostIcon.svg
diff --git a/src/components/Common/EmployeeCard/EmployeeCard.tsx b/src/components/Common/EmployeeCard/EmployeeCard.tsx
@@ -0,0 +1,126 @@
+import Tag from '@/components/Common/Tag';
+import { EmployeeResumeListItemType } from '@/types/api/resumes';
+import { useEmployeeCard } from '@/hooks/useEmployeeCard';
+import EmployeeCardBookmark from '@/components/Common/EmployeeCard/EmployeeCardBookmark';
+
+type EmployeeCardProps = {
+  cardData: EmployeeResumeListItemType;
+  variant: 'horizontal' | 'vertical';
+};
+
+const EmployeeCard = ({ cardData, variant }: EmployeeCardProps) => {
+  const { handleClickBookmark, goToResumeDetailPage } =
+    useEmployeeCard(cardData);
+
+  if (variant === 'horizontal') {
+    return (
+      <article className="w-full p-4" onClick={goToResumeDetailPage}>
+        <div className="pb-3 flex justify-between items-center gap-2">
+          <div className="w-16 h-16 rounded-full overflow-hidden">
+            <img
+              src={cardData.profile_img_url}
+              alt="profile image"
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <div className="flex-1">
+            <div className="w-full pb-[0.125rem] flex justify-between items-center">
+              <p className="text-text-strong heading-18-semibold">
+                {cardData?.name}{' '}
+                <span className="pl-1 text-text-alternative caption-12-regular">
+                  {cardData?.nationality}
+                </span>
+              </p>
+              <EmployeeCardBookmark
+                isBookmarked={cardData?.is_bookmarked}
+                onBookmarkClick={handleClickBookmark}
+                variant="icon-only"
+              />
+            </div>
+            <p className="text-text-alternative body-14-regular">
+              {cardData?.address}
+            </p>
+          </div>
+        </div>
+        <p className="text-text-normal body-14-medium">{cardData?.title}</p>
+        <div className="pt-2 flex items-center gap-1 flex-wrap">
+          <Tag
+            value={cardData?.industry}
+            padding="py-[0.188rem] px-[0.25rem]"
+            isRounded={true}
+            hasCheckIcon={false}
+            backgroundColor="bg-status-blue-300/10"
+            color="text-text-success"
+            fontStyle="caption-12-semibold"
+          />
+          <Tag
+            value={cardData?.visa?.replace(/_/g, '-')}
+            padding="py-[0.188rem] px-[0.25rem]"
+            isRounded={true}
+            hasCheckIcon={false}
+            backgroundColor="bg-surface-secondary"
+            color="text-text-alternative"
+            fontStyle="caption-12-semibold"
+          />
+        </div>
+      </article>
+    );
+  }
+
+  // Column 형 카드
+  return (
+    <article
+      className="w-[9.063rem] flex flex-col gap-2 rounded-lg"
+      onClick={goToResumeDetailPage}
+    >
+      <div className="w-[9.063rem] h-[6.75rem] rounded-lg overflow-hidden border border-border-alternative">
+        {cardData?.profile_img_url ? (
+          <img
+            src={cardData.profile_img_url}
+            alt="profile"
+            className="object-cover w-full h-full"
+          />
+        ) : (
+          <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>
+        )}
+      </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>
+
+          <EmployeeCardBookmark
+            isBookmarked={cardData?.is_bookmarked}
+            bookmarkCount={cardData?.bookmark_count}
+            onBookmarkClick={handleClickBookmark}
+            variant="with-count"
+          />
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default EmployeeCard;
diff --git a/src/components/Common/EmployeeCard/EmployeeCardBookmark.tsx b/src/components/Common/EmployeeCard/EmployeeCardBookmark.tsx
@@ -0,0 +1,43 @@
+import BookmarkIcon from '@/assets/icons/BookmarkIcon.svg?react';
+import BookmarkCheckedIcon from '@/assets/icons/BookmarkCheckedIcon.svg?react';
+import { MouseEvent } from 'react';
+
+type EmployeeCardBookmarkProps = {
+  isBookmarked: boolean;
+  bookmarkCount?: number;
+  onBookmarkClick: (e: MouseEvent) => void;
+  variant?: 'icon-only' | 'with-count';
+  className?: string;
+};
+
+const EmployeeCardBookmark = ({
+  isBookmarked,
+  bookmarkCount,
+  onBookmarkClick,
+  variant = 'icon-only',
+  className = '',
+}: EmployeeCardBookmarkProps) => {
+  if (variant === 'with-count') {
+    return (
+      <div
+        className={`flex items-center gap-1 caption-12-regular text-text-alternative ${className}`}
+      >
+        <button
+          className="flex items-center justify-center w-4 h-4"
+          onClick={onBookmarkClick}
+        >
+          {isBookmarked ? <BookmarkCheckedIcon /> : <BookmarkIcon />}
+        </button>
+        {bookmarkCount ?? 0}
+      </div>
+    );
+  }
+
+  return (
+    <button className={className} onClick={onBookmarkClick}>
+      {isBookmarked ? <BookmarkCheckedIcon /> : <BookmarkIcon />}
+    </button>
+  );
+};
+
+export default EmployeeCardBookmark;
diff --git a/src/components/Common/EmployeeCard/EmployeeCardEmptyState.tsx b/src/components/Common/EmployeeCard/EmployeeCardEmptyState.tsx
@@ -0,0 +1,18 @@
+import EmptyJobIcon from '@/assets/icons/EmptyJobIcon.svg?react';
+import { postTranslation } from '@/constants/translation';
+
+const EmployeeCardEmptyState = () => {
+  return (
+    <div className="w-full px-4 pt-[20vh] flex flex-col justify-center items-center gap-1">
+      <EmptyJobIcon />
+      <h3 className="heading-20-semibold text-text-strong">
+        찾고 계신 인재가 없어요.
+      </h3>
+      <p className="body-14-regular text-text-alternative text-center">
+        {postTranslation.emptySearchResultContent.ko}
+      </p>
+    </div>
+  );
+};
+
+export default EmployeeCardEmptyState;
diff --git a/src/components/Common/EmployeeCard/index.ts b/src/components/Common/EmployeeCard/index.ts
@@ -0,0 +1,3 @@
+export { default as EmployeeCard } from '@/components/Common/EmployeeCard/EmployeeCard';
+export { default as EmployeeCardBookmark } from '@/components/Common/EmployeeCard/EmployeeCardBookmark';
+export { default as EmployeeCardEmptyState } from '@/components/Common/EmployeeCard/EmployeeCardEmptyState';