diff --git a/apps/client/api/userLearnRecord.ts b/apps/client/api/userLearnRecord.ts
index 6aba035ee..c82c89129 100644
--- a/apps/client/api/userLearnRecord.ts
+++ b/apps/client/api/userLearnRecord.ts
@@ -18,3 +18,12 @@ export async function fetchLearnRecord(params: UserLearnRecord) {
     },
   );
 }
+
+export async function fetchLearnRecordByUserId(params: UserLearnRecord & { userId: string }) {
+  return await http.get<unknown, UserLearnRecordResponse>(
+    `/user-learn-record/finishCountByUserId`,
+    {
+      params,
+    },
+  );
+}
diff --git a/apps/client/composables/learnRecord.ts b/apps/client/composables/learnRecord.ts
index c4491abec..32fcc80a8 100644
--- a/apps/client/composables/learnRecord.ts
+++ b/apps/client/composables/learnRecord.ts
@@ -1,46 +1,44 @@
-import { ref } from "vue";
+import type { MaybeRef } from "vue";
+
+import { ref, toValue, watchEffect } from "vue";
 
 import type { UserLearnRecordResponse } from "~/api/userLearnRecord";
-import { fetchLearnRecord } from "~/api/userLearnRecord";
-
-let year: number | undefined = 0;
-const learnRecord = ref<UserLearnRecordResponse>({
-  list: [],
-  totalCount: 0,
-});
-let isSetup = false;
-
-export function useLearnRecord() {
-  function setQueryYear(val?: number) {
-    if (year !== val) {
-      year = val;
-      isSetup = false;
-    }
-  }
+import { fetchLearnRecordByUserId } from "~/api/userLearnRecord";
+
+interface UseLearnRecordOptions {
+  year?: MaybeRef<number>;
+  userId: string;
+}
+
+export function useLearnRecord(options: UseLearnRecordOptions) {
+  const { userId } = options || {};
+  const learnRecord = ref<UserLearnRecordResponse>({
+    list: [],
+    totalCount: 0,
+  });
+
+  const year = ref(options.year || new Date().getFullYear());
 
   function getQuery() {
+    const yearStr = toValue(year);
     return {
-      startDate: year ? `${year}-01-01` : undefined,
-      endDate: year ? `${year}-12-31` : undefined,
+      userId,
+      startDate: yearStr ? `${yearStr}-01-01` : undefined,
+      endDate: yearStr ? `${yearStr}-12-31` : undefined,
     };
   }
 
   async function updateLearnRecord() {
-    const res = await fetchLearnRecord(getQuery());
-    learnRecord.value = res;
-  }
-
-  async function setupLearnRecord() {
-    if (isSetup) return;
-    isSetup = true;
-    const res = await fetchLearnRecord(getQuery());
+    const res = await fetchLearnRecordByUserId(getQuery());
     learnRecord.value = res;
   }
+  watchEffect(() => {
+    updateLearnRecord();
+  });
 
   return {
+    year,
     learnRecord,
     updateLearnRecord,
-    setQueryYear,
-    setupLearnRecord,
   };
 }
diff --git a/apps/client/pages/User/[username].vue b/apps/client/pages/User/[username].vue
index 4a332492a..32b884e96 100644
--- a/apps/client/pages/User/[username].vue
+++ b/apps/client/pages/User/[username].vue
@@ -40,7 +40,7 @@
         class="mt-10"
         :data="learnRecord.list"
         :totalCount="learnRecord.totalCount"
-        @toggleYear="toggleYear"
+        @toggleYear="onToggleYear"
       />
     </div>
   </div>
@@ -48,32 +48,17 @@
 
 <script setup lang="ts">
 import { useRoute } from "#app";
-import { ref } from "vue";
 
 import { getUserByUsername } from "~/api/user";
 import { useLearnRecord } from "~/composables/learnRecord";
-import { type CalendarData } from "~/composables/user/calendarGraph";
 
 const route = useRoute();
 const user = await getUserByUsername(route.params.username as string);
-const { learnRecord, setupLearnRecord, setQueryYear } = useLearnRecord();
-const { toggleYear } = useCalendarGraph();
+const { learnRecord, year } = useLearnRecord({ userId: user?.id });
 
-function useCalendarGraph() {
-  const data = ref<CalendarData[]>([]);
-  const totalCount = ref<number>(0);
-
-  async function toggleYear(year?: number) {
-    setQueryYear(year);
-    setupLearnRecord();
-  }
-
-  return {
-    data,
-    totalCount,
-    toggleYear,
-  };
-}
+const onToggleYear = (value?: number) => {
+  year.value = value!;
+};
 </script>
 
 <style scoped></style>