Cardの表示内容が正しく更新されるようにした (#556)

# PRの概要
Cardの表示内容が正しく更新されるようにした

## 具体的な変更内容
Cardの表示内容が正しく更新されるようにした

## 影響範囲
Cardを用いる部分

## 動作要件
なし

## 補足
なし

## レビューリクエストを出す前にチェック！

- [x] 改めてセルフレビューしたか
- [x] 手動での動作検証を行ったか
- [x] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [x] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [x] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

Author: GuY8528

web/components/Card.tsx

@@ -17,23 +17,6 @@ export const CardFront = ({ displayedUser, currentUser }: CardProps) => {
   const [isHiddenInterestExist, setHiddenInterestExist] = useState(false);
   const [isHiddenCourseExist, setHiddenCourseExist] = useState(false);
 
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const resizeObserver = new ResizeObserver(() => {
-      calculateVisibleInterests();
-      calculateVisibleCourses();
-    });
-
-    resizeObserver.observe(container);
-
-    calculateVisibleInterests(); // 初期計算
-    calculateVisibleCourses(); // 初期計算
-
-    return () => resizeObserver.disconnect();
-  }, []);
-
   const calculateVisibleCourses = useCallback(() => {
     const courses = displayedUser.courses;
     const container = coursesContainerRef.current;
@@ -75,7 +58,7 @@ export const CardFront = ({ displayedUser, currentUser }: CardProps) => {
       if (coursesContainer.offsetHeight + 30 <= containerHeight) {
         coursesContainer.appendChild(element);
       } else {
-        setHiddenCourseExist;
+        setHiddenCourseExist(true);
       }
     }
   }, [displayedUser, currentUser]);
@@ -132,6 +115,24 @@ export const CardFront = ({ displayedUser, currentUser }: CardProps) => {
     }
   }, [displayedUser, currentUser]);
 
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      calculateVisibleInterests();
+      calculateVisibleCourses();
+    });
+
+    resizeObserver.observe(container);
+
+    // 初期計算を実行
+    calculateVisibleInterests();
+    calculateVisibleCourses();
+
+    return () => resizeObserver.disconnect();
+  }, [calculateVisibleInterests, calculateVisibleCourses]);
+
   return (
     <div className="flex h-full flex-col gap-5 overflow-clip border-2 border-primary bg-secondary p-5">
       <div className="grid h-[20%] grid-cols-3 items-center">