Merge pull request #139 from TEAM-COMFIT/feat/#136/company-detail-qa

Author: qowjdals23

src/features/home/ui/major-company-card/major-company-card.tsx

@@ -1,6 +1,12 @@
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useNavigate } from "react-router-dom";
 
+import {
+  getCompanyDetail,
+  getCompanySuggestions,
+} from "@/features/company-detail";
+import { queryClient } from "@/shared/api";
+import { companyQueryKey } from "@/shared/api/config/query-key";
 import { IconMove } from "@/shared/assets/icons";
 import { getScaleLabel } from "@/shared/config";
 import { Tag } from "@/shared/ui/tag/tag";
@@ -28,15 +34,31 @@ const MajorCompanyCard = ({
 }: MajorCompanyCardProps) => {
   const navigate = useNavigate();
 
+  const prefetchCompany = () => {
+    void queryClient.prefetchQuery({
+      queryKey: companyQueryKey.detail(id),
+      queryFn: () => getCompanyDetail(id),
+    });
+    void queryClient.prefetchQuery({
+      queryKey: companyQueryKey.suggestion(id),
+      queryFn: () => getCompanySuggestions(id),
+    });
+  };
+
   const handleClick = () => {
+    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
+    prefetchCompany();
     navigate(`/company/${id}`);
   };
 
   return (
     <button
       type="button"
       onClick={handleClick}
-      aria-label="기업 상세로 이동"
+      onMouseEnter={prefetchCompany}
+      onFocus={prefetchCompany}
+      onTouchStart={prefetchCompany}
+      aria-label="旮办梾 ?侅劯搿??措彊"
       className={styles.card({ type })}
       style={assignInlineVars({ [styles.bgImageUrl]: `url(${imgUrl})` })}
     >

src/pages/company-detail/company-detail-page.css.ts

@@ -15,3 +15,10 @@ export const container = style({
   margin: "0 auto",
   padding: "0 2rem 0",
 });
+
+export const skeletonWrapper = style({
+  width: "100%",
+  height: "600px",
+  backgroundColor: themeVars.color.gray100,
+  borderRadius: "16px",
+});

src/pages/company-detail/company-detail-page.tsx

@@ -65,7 +65,9 @@ const CompanyDetailPage = () => {
       <div className={styles.container}>
         {companyData ? (
           <CompanyDetailSection companyData={companyData} />
-        ) : null}
+        ) : (
+          <div className={styles.skeletonWrapper} />
+        )}
       </div>
 
       <CompanyRecommendationSection

src/widgets/company-card/company-analyze-button.tsx

@@ -1,5 +1,11 @@
 import { useNavigate } from "react-router-dom";
 
+import {
+  getCompanyDetail,
+  getCompanySuggestions,
+} from "@/features/company-detail";
+import { queryClient } from "@/shared/api";
+import { companyQueryKey } from "@/shared/api/config/query-key";
 import { IconCompany } from "@/shared/assets/icons";
 
 import * as styles from "./company-analyze-button.css";
@@ -11,12 +17,32 @@ interface CompanyAnalyzeButtonProps {
 const CompanyAnalyzeButton = ({ companyId }: CompanyAnalyzeButtonProps) => {
   const navigate = useNavigate();
 
+  const prefetchCompany = () => {
+    void queryClient.prefetchQuery({
+      queryKey: companyQueryKey.detail(companyId),
+      queryFn: () => getCompanyDetail(companyId),
+    });
+    void queryClient.prefetchQuery({
+      queryKey: companyQueryKey.suggestion(companyId),
+      queryFn: () => getCompanySuggestions(companyId),
+    });
+  };
+
   const handleClick = () => {
+    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
+    prefetchCompany();
     navigate(`/company/${companyId}`);
   };
 
   return (
-    <button type="button" className={styles.button} onClick={handleClick}>
+    <button
+      type="button"
+      className={styles.button}
+      onClick={handleClick}
+      onMouseEnter={prefetchCompany}
+      onFocus={prefetchCompany}
+      onTouchStart={prefetchCompany}
+    >
       <IconCompany className={styles.icon} />
       <span>기업 분석 보기</span>
     </button>