feat: 내 갤러리 프리뷰 조회 API 연결, 더미 추가

src/features/gallery/Card.tsx

@@ -8,26 +8,27 @@ import { type Softskills } from '~/components/graphic/softskills/type';
 import BookmarkIcon from '~/components/icons/BookmarkIcon';
 import Pill, { type Color } from '~/components/pill/Pill';
 import { CAREER_CARD_IMAGE_BY_GROUP } from '~/constants/dnaImage';
-import { type GalleryType } from '~/hooks/api/gallery/useGetGalleryList';
+import { type SurveyType, type TargetType } from '~/remotes/gallery';
 import { BODY_1, BODY_2_REGULAR, HEAD_1_BOLD, HEAD_3_SEMIBOLD } from '~/styles/typo';
 
 interface Props {
-  gallery: GalleryType;
+  survey: SurveyType;
+  target: TargetType;
 }
 
-function Card({ gallery }: Props) {
-  // const { group = 'C' } = useDnaInfo(gallery.survey.survey_id);
+function Card(props: Props) {
+  // const { group = 'C' } = useDnaInfo(props.survey.survey_id);
 
   const group = 'C';
-  const viewTendencies = gallery.survey.tendencies.slice(0, 3);
+  const viewTendencies = props.survey.tendencies.slice(0, 3);
 
   return (
     <section css={sectionCss}>
       <div css={topBoxCss}>
         <div css={topInnerCss}>
           <hgroup>
-            <h2>{gallery.target.nickname}</h2>
-            <p>{gallery.target.job}</p>
+            <h2>{props.target.nickname}</h2>
+            <p>{props.target.job}</p>
           </hgroup>
           <div css={tagWrapperCss}>
             {viewTendencies.map((tendency, idx) => (
@@ -54,15 +55,15 @@ function Card({ gallery }: Props) {
       <div css={feedbackWrapperCss}>
         <div>
           <h3>
-            받은 피드백 <span>{gallery.survey.feedback_count}</span>
+            받은 피드백 <span>{props.survey.feedback_count}</span>
           </h3>
           <div>
-            {gallery.survey.feedbacks.map((feedback) => (
+            {props.survey.feedbacks.map((feedback) => (
               <p key={feedback}>{feedback}</p>
             ))}
           </div>
         </div>
-        <BookmarkButton bookmarked_count={gallery.survey.bookmarked_count} initBookmarked={false} />
+        <BookmarkButton bookmarked_count={props.survey.bookmarked_count} initBookmarked={false} />
       </div>
     </section>
   );

src/features/gallery/PublishMyCard/CardPublishBottomSheet.tsx

@@ -7,7 +7,7 @@ import BottomSheetHandleIcon from '~/components/icons/BottomSheetHandleIcon';
 import Card from '~/features/gallery/Card';
 import { type JobType } from '~/features/gallery/PublishMyCard/JobSelectModal';
 import { fixedBottomCss } from '~/features/survey/styles';
-import { DUMMY_GALLERY } from '~/hooks/api/gallery/useGetGalleryList';
+import useGetGalleryPreview from '~/hooks/api/gallery/useGetGalleryPreview';
 import useScrollLock from '~/hooks/common/useScrollLock';
 import { BODY_1, DETAIL, HEAD_1 } from '~/styles/typo';
 
@@ -20,6 +20,9 @@ interface Props {
 }
 
 function CardPublishBottomSheet(props: Props) {
+  const { data } = useGetGalleryPreview({
+    // enabled: props.isShowing,
+  });
   useScrollLock({ lock: props.isShowing });
 
   return (
@@ -32,7 +35,10 @@ function CardPublishBottomSheet(props: Props) {
         </hgroup>
         <section>
           <div css={tagCss}>미리보기</div>
-          <Card gallery={DUMMY_GALLERY} />
+          {data ? (
+            <Card survey={data.survey} target={data.target} />
+          ) : //  TODO : Skeleton
+          null}
         </section>
         <article css={[fixedBottomCss, bottomCss]}>
           <XCircleButton onClick={props.onClose} />

src/hooks/api/gallery/useGetGalleryList.tsx

@@ -1,6 +1,7 @@
 import { useQuery, type UseQueryOptions } from '@tanstack/react-query';
 
 import { get } from '~/libs/api';
+import { type SurveyType, type TargetType } from '~/remotes/gallery';
 
 interface Request {
   gallery_id?: string; //마지막으로 조회된 갤러리의 id를 입력
@@ -11,23 +12,8 @@ interface Request {
 
 export interface GalleryType {
   gallery_id: string;
-  target: {
-    target_id: string;
-    nickname: string;
-    position: string;
-    job: string;
-    image_url: string;
-  };
-  survey: {
-    survey_id: string;
-    feedback_count: number;
-    bookmarked_count: number;
-    feedbacks: string[];
-    tendencies: {
-      name: string;
-      count: number;
-    }[];
-  };
+  target: TargetType;
+  survey: SurveyType;
 }
 
 interface Response {
@@ -50,7 +36,7 @@ const useGetGalleryList = (request: Request, options?: UseQueryOptions<Response>
 
 export default useGetGalleryList;
 
-export const DUMMY_GALLERY = {
+export const DUMMY_GALLERY: GalleryType = {
   gallery_id: '12345',
   target: {
     target_id: '67890',

src/hooks/api/gallery/useGetGalleryPreview.tsx

@@ -0,0 +1,47 @@
+import { useQuery, type UseQueryOptions } from '@tanstack/react-query';
+
+import { get } from '~/libs/api';
+import { type SurveyType, type TargetType } from '~/remotes/gallery';
+
+interface Response {
+  target: TargetType;
+  survey: SurveyType;
+}
+
+const useGetGalleryPreview = (options?: UseQueryOptions<Response>) => {
+  return useQuery<Response>({
+    queryKey: ['gallerys', 'previews'],
+    queryFn: () => get<Response>('/v1/gallerys/previews'),
+    ...options,
+    initialData: DUMMY,
+  });
+};
+
+export default useGetGalleryPreview;
+
+const DUMMY = {
+  target: {
+    target_id: '67890',
+    nickname: '하유나',
+    position: '나랩 디자이너',
+    job: 'DESIGNER',
+    image_url: 'https://example.com/userimage.jpg',
+  },
+  survey: {
+    survey_id: '54321',
+    feedback_count: 10,
+    bookmarked_count: 5,
+    feedbacks: [
+      '유나는 2D그래픽을 꼼꼼하게 잘 하는 것 같아.',
+      '그리고 리서치를 하면서 재미있고 논리적인 인사이트를 잘 도출하는 모습이 보였어!',
+      '디프만 프로젝트를 할 때 그...',
+    ],
+    tendencies: [
+      { name: '논리적인', count: 100 },
+      { name: '열정적인', count: 97 },
+      { name: '완벽주의적인', count: 32 },
+      { name: '책임감 강한', count: 22 },
+      { name: '공감 능력이 좋은', count: 11 },
+    ],
+  },
+};

src/pages/gallery/index.page.tsx

@@ -26,7 +26,7 @@ function Gallery() {
             <PublishMyCard />
           </div>
           {data.gallerys.map((gallery) => (
-            <Card key={gallery.gallery_id} gallery={gallery} />
+            <Card key={gallery.gallery_id} survey={gallery.survey} target={gallery.target} />
           ))}
         </StaggerWrapper>
       </div>

src/remotes/gallery.d.ts

@@ -0,0 +1,20 @@
+export interface TargetType {
+  target_id: string;
+  nickname: string;
+  position: string;
+  job: string;
+  image_url: string;
+}
+
+interface TendencyType {
+  name: string;
+  count: number;
+}
+
+export interface SurveyType {
+  survey_id: string;
+  feedback_count: number;
+  bookmarked_count: number;
+  feedbacks: string[];
+  tendencies: TendencyType[];
+}