Feat(Client): jobpin memo popup 구현 및 api 연결

apps/client/src/pages/jobPins/JobPins.tsx

@@ -1,5 +1,9 @@
-import { useGetJobPinsArticles } from '@pages/jobPins/apis/queries';
+import {
+  useGetJobPinsArticleDetail,
+  useGetJobPinsArticles,
+} from '@pages/jobPins/apis/queries';
 import JobPinsBottomNotice from '@pages/jobPins/components/JobPinsBottomNotice';
+import MemoPopup from '@pages/jobPins/components/MemoPopup';
 import { useJobPinsBottomNotice } from '@pages/jobPins/hooks/useJobPinsBottomNotice';
 import Footer from '@pages/myBookmark/components/footer/Footer';
 import { Card } from '@pinback/design-system/ui';
@@ -11,6 +15,11 @@ const JobPins = () => {
 
   const { data, isPending, fetchNextPage, hasNextPage } =
     useGetJobPinsArticles();
+  const {
+    mutate: getJobPinDetail,
+    data: jobPinDetail,
+    reset: resetJobPinDetail,
+  } = useGetJobPinsArticleDetail();
 
   const observerRef = useInfiniteScroll({
     fetchNextPage,
@@ -33,6 +42,7 @@ const JobPins = () => {
         <p className="head3">관심 직무 핀</p>
         {job && <p className="head3 text-main500">{job}</p>}
       </div>
+
       <p className="body3-r text-font-gray-3 mt-[0.8rem]">
         같은 직무의 사람들이 저장한 아티클을 살펴봐요. 선택한 직무를 기준으로
         최신 핀이 업데이트 돼요!
@@ -48,32 +58,49 @@ const JobPins = () => {
           onWheel={handleBottomWheel}
           className="scrollbar-hide mt-[2.6rem] flex h-screen flex-wrap content-start gap-[1.6rem] overflow-y-auto scroll-smooth"
         >
-          {articlesToDisplay.map((article) => (
-            <Card
-              key={article.articleId}
-              type="bookmark"
-              variant="save"
-              title={article.title}
-              imageUrl={article.thumbnailUrl}
-              content={article.memo}
-              category={article.category.categoryName}
-              categoryColor={article.category.categoryColor}
-              nickname={article.ownerName}
-              onClick={() => window.open(article.url, '_blank')}
-            />
-          ))}
+          {articlesToDisplay.map((article) => {
+            const displayTitle = article.title?.trim()
+              ? article.title
+              : '제목 없음';
+
+            const displayImageUrl = article.thumbnailUrl || undefined;
+
+            return (
+              <Card
+                key={article.articleId}
+                type="bookmark"
+                variant="save"
+                title={displayTitle}
+                imageUrl={displayImageUrl}
+                content={article.memo}
+                category={article.category?.categoryName}
+                categoryColor={article.category?.categoryColor}
+                nickname={article.ownerName}
+                onClick={() => getJobPinDetail(article.articleId)}
+              />
+            );
+          })}
 
           <JobPinsBottomNotice visible={isBottomNoticeVisible} />
           <div ref={observerRef} style={{ height: '1px', width: '100%' }} />
         </div>
       ) : (
-        // TODO: 아티클 없는경우 UI 수정
         <p className="body2-m text-font-gray-3 mt-[4rem]">
           아직 공유된 아티클이 없어요.
         </p>
       )}
 
       <Footer />
+
+      {/* Memo Popup */}
+      {jobPinDetail && (
+        <MemoPopup
+          userName={jobPinDetail.ownerName}
+          memo={jobPinDetail.memo}
+          onClose={resetJobPinDetail}
+          onGoArticle={() => window.open(jobPinDetail.url, '_blank')}
+        />
+      )}
     </div>
   );
 };

apps/client/src/pages/jobPins/apis/axios.ts

@@ -1,5 +1,5 @@
-import apiRequest from '@shared/apis/setting/axiosInstance';
 import { JobPinsResponse } from '@pages/jobPins/types/api';
+import apiRequest from '@shared/apis/setting/axiosInstance';
 
 interface ApiResponse<T> {
   code: string;
@@ -20,3 +20,20 @@ export const getJobPinsArticles = async (
 
   return (data as ApiResponse<JobPinsResponse>).data;
 };
+
+export interface JobPinsDetailResponse {
+  articleId: number;
+  ownerName: string;
+  memo: string | null;
+  url: string;
+}
+
+export const getJobPinsArticleDetail = async (
+  articleId: number
+): Promise<JobPinsDetailResponse> => {
+  const { data } = await apiRequest.get(
+    `/api/v3/articles/shared/job/${articleId}`
+  );
+
+  return (data as ApiResponse<JobPinsDetailResponse>).data;
+};

apps/client/src/pages/jobPins/apis/queries.ts

@@ -1,6 +1,10 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
 import { JobPinsResponse } from '@pages/jobPins/types/api';
-import { getJobPinsArticles } from './axios';
+import { useInfiniteQuery, useMutation } from '@tanstack/react-query';
+import {
+  getJobPinsArticleDetail,
+  getJobPinsArticles,
+  JobPinsDetailResponse,
+} from './axios';
 
 export const useGetJobPinsArticles = () => {
   return useInfiniteQuery<JobPinsResponse>({
@@ -16,3 +20,9 @@ export const useGetJobPinsArticles = () => {
     },
   });
 };
+
+export const useGetJobPinsArticleDetail = () => {
+  return useMutation<JobPinsDetailResponse, Error, number>({
+    mutationFn: (articleId: number) => getJobPinsArticleDetail(articleId),
+  });
+};

apps/client/src/pages/jobPins/components/MemoPopup.tsx

@@ -0,0 +1,51 @@
+import { Icon } from '@pinback/design-system/icons';
+import { Button } from '@pinback/design-system/ui';
+
+interface MemoPopupProps {
+  userName: string;
+  memo?: string | null;
+  onClose: () => void;
+  onGoArticle: () => void;
+}
+
+export default function MemoPopup({
+  userName,
+  memo,
+  onClose,
+  onGoArticle,
+}: MemoPopupProps) {
+  const hasMemo = memo && memo.trim().length > 0;
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60">
+      <div className="w-[31.2rem] rounded-[1.2rem] bg-white px-[3.2rem] py-[2.4rem]">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <Icon name="logo" width={72} height={20} />
+          <button onClick={onClose}>
+            <Icon name="ic_close" size={20} />
+          </button>
+        </div>
+
+        {/* Title */}
+        <div className="caption1-sb text-font-black-1 mt-[1.6rem]">
+          <span className="text-main500">{userName}</span>님의 메모
+        </div>
+
+        {/* Memo */}
+        <div className="body3-r text-font-gray-3 mt-[1.2rem] h-[9.6rem] overflow-y-auto whitespace-pre-line">
+          {hasMemo ? (
+            memo
+          ) : (
+            <div className="text-gray-400">작성된 메모가 없어요.</div>
+          )}
+        </div>
+
+        {/* Button */}
+        <Button onClick={onGoArticle} className="mt-[2.4rem] w-full">
+          아티클 보러 가기
+        </Button>
+      </div>
+    </div>
+  );
+}