feat: 유저가 설정한 목표에 맞는 시각화

components/molecules/record-mark/record-mark.tsx

@@ -14,17 +14,16 @@ interface RecordMarkProps {
   totalDistance?: number;
   strokes?: Array<StrokeInfo>;
   renderType?: 'calendar' | 'detail';
+  goal: number | undefined;
 }
 
-// TODO: 로그인 이후 저장된 유저의 목표 거리로 수정 필요
-const goal = 1000;
-
 export const RecordMark = ({
   type,
   isAchieved,
   totalDistance,
   strokes,
   renderType = 'calendar',
+  goal,
 }: RecordMarkProps) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const [contentSize, setContentSize] = useState<{
@@ -36,7 +35,7 @@ export const RecordMark = ({
   });
 
   const waves: Array<{ color: string; waveHeight: number }> = [];
-  if (strokes) {
+  if (strokes && goal) {
     strokes.forEach(({ name, meter }) => {
       const color = getSwimColor(name);
       waves.push({ color, waveHeight: meter / goal });
@@ -68,7 +67,7 @@ export const RecordMark = ({
           />
         ) : (
           <div className={layoutStyles({ renderType })}>
-            {totalDistance && (
+            {totalDistance && goal && (
               <Waves
                 width={contentSize.width}
                 height={contentSize.height}

features/main/components/calendar/atoms/calendar-item-content.tsx

@@ -2,7 +2,7 @@ import { useAtomValue } from 'jotai';
 
 import { Image } from '@/components/atoms';
 import { RecordMark } from '@/components/molecules/record-mark';
-import { StrokeInfo } from '@/features/main';
+import { StrokeInfo, useGoal } from '@/features/main';
 import { calendarViewImageAtom } from '@/store';
 import { css, cx } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
@@ -25,6 +25,7 @@ export const ItemContent = ({
   imageUrl,
 }: ItemContentProps) => {
   const isViewImage = useAtomValue(calendarViewImageAtom);
+  const goal = useGoal();
 
   if (isViewImage && imageUrl)
     return (
@@ -48,6 +49,7 @@ export const ItemContent = ({
       totalDistance={totalDistance}
       isAchieved={isAchieved}
       strokes={strokes}
+      goal={goal}
     />
   );
 };

features/main/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './use-calendar-data';
 export * from './use-calendar-rendering-data';
+export * from './use-goal';
 export * from './use-timeline';

features/main/hooks/use-goal.ts

@@ -0,0 +1,11 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+import { MemberResponse } from '@/app/api/member/route';
+
+export const useGoal = () => {
+  const queryClient = useQueryClient();
+  const data = queryClient.getQueryData<MemberResponse>(['currentMember']);
+  const goal = data?.data.goal;
+
+  return goal;
+};

features/record-detail/sections/detail-preview.tsx

@@ -62,7 +62,7 @@ export const DetailPreviewSection = ({ data }: { data: RecordDetailType }) => {
 
         {/* 파도 svg */}
         <div className={wavesStyle}>
-          {strokes?.length ? (
+          {strokes?.length && member?.goal ? (
             <RecordMark
               isAchieved={Boolean(
                 member?.goal && totalMeter && totalMeter > member?.goal,
@@ -71,6 +71,7 @@ export const DetailPreviewSection = ({ data }: { data: RecordDetailType }) => {
               totalDistance={totalMeter}
               type={type}
               renderType="detail"
+              goal={member.goal}
             />
           ) : (
             <Image