diff --git a/src/app/__test__/calendar.tsx b/src/app/__test__/calendar.tsx
new file mode 100644
index 0000000..05877c6
--- /dev/null
+++ b/src/app/__test__/calendar.tsx
@@ -0,0 +1,45 @@
+import {
+  Button,
+  Calendar,
+  CalendarCell,
+  CalendarGrid,
+  Heading,
+} from "react-aria-components";
+
+import { ChevronLeftEdgeSVG } from "@/assets/icons/chevron-left";
+import { ChevronRightEdgeSVG } from "@/assets/icons/chevron-right-edge";
+import { DefaultLayout } from "@/components/layout/default";
+
+export const Test = () => {
+  return (
+    <DefaultLayout className="bg-gray-600" noXPadding>
+      <div className="mt-auto">
+        <div className="bg-white pb-56px">
+          <CalendarComp />
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+};
+
+const CalendarComp = () => {
+  return (
+    <Calendar
+      className="px-[22px] py-9 font-work-sans"
+      aria-label="Appointment date"
+    >
+      <header className="flex">
+        <Button slot="previous">
+          <ChevronLeftEdgeSVG />
+        </Button>
+        <Heading />
+        <Button slot="next">
+          <ChevronRightEdgeSVG />
+        </Button>
+      </header>
+      <CalendarGrid className="aspect-square w-full">
+        {(date) => <CalendarCell date={date} />}
+      </CalendarGrid>
+    </Calendar>
+  );
+};
diff --git a/src/app/mypage/mypage-claps.tsx b/src/app/mypage/mypage-claps.tsx
new file mode 100644
index 0000000..53c1872
--- /dev/null
+++ b/src/app/mypage/mypage-claps.tsx
@@ -0,0 +1,41 @@
+import { useNavigate } from "react-router-dom";
+
+import { ChevronLeftEdgeSVG } from "@/assets/icons/chevron-left";
+import MarbleSVG from "@/assets/icons/marble_small_filled.svg";
+import PostSVG from "@/assets/icons/post.svg";
+import { CalendarView } from "@/components/app/mypage/calendar-view";
+import { StatsCard } from "@/components/app/mypage/stats-card";
+import { Appbar } from "@/components/common/appbar";
+import { DefaultLayout } from "@/components/layout/default";
+
+export const MyPageClaps = () => {
+  const navigate = useNavigate();
+  return (
+    <DefaultLayout
+      className=" bg-gray-100"
+      appbar={
+        <Appbar
+          left={
+            <button onClick={() => navigate(-1)}>
+              <ChevronLeftEdgeSVG />
+            </button>
+          }
+          isGrayAppbar
+        />
+      }
+    >
+      <div className="mb-7 flex flex-col gap-9">
+        <h2 className="text-h2">나의 칭찬 모아보기</h2>
+        <div className="flex gap-2">
+          <StatsCard title="칭찬 활동수" count={0} imageUrl={PostSVG} />
+          <StatsCard title="받은 칭찬 구슬" count={99} imageUrl={MarbleSVG} />
+        </div>
+      </div>
+
+      <CalendarView className="mx-[-22px] flex-1 bg-oncolor">
+        <CalendarView.Header />
+        <CalendarView.Grid />
+      </CalendarView>
+    </DefaultLayout>
+  );
+};
diff --git a/src/assets/icons/marble_small_filled.svg b/src/assets/icons/marble_small_filled.svg
new file mode 100644
index 0000000..cebfe26
--- /dev/null
+++ b/src/assets/icons/marble_small_filled.svg
@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="marble_small_filled">
+<path id="vector" d="M20.9807 12.0002C20.9807 16.9602 16.9599 20.981 12 20.981C7.04009 20.981 3.01929 16.9602 3.01929 12.0002C3.01929 7.04033 7.04009 3.01953 12 3.01953C16.9599 3.01953 20.9807 7.04033 20.9807 12.0002Z" fill="url(#paint0_linear_571_6828)"/>
+<g id="vector_2">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.79639 10.0526C6.79639 9.66598 7.10979 9.35258 7.49639 9.35258H12.4964C12.883 9.35258 13.1964 9.66598 13.1964 10.0526C13.1964 10.4392 12.883 10.7526 12.4964 10.7526H7.49639C7.10979 10.7526 6.79639 10.4392 6.79639 10.0526Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99623 13.2525C9.60964 13.2525 9.29623 12.9391 9.29623 12.5525L9.29623 7.55254C9.29623 7.16594 9.60964 6.85254 9.99623 6.85254C10.3828 6.85254 10.6962 7.16594 10.6962 7.55254L10.6962 12.5525C10.6962 12.9391 10.3828 13.2525 9.99623 13.2525Z" fill="white"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_571_6828" x1="12" y1="3.01953" x2="12" y2="20.981" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8AC2FF"/>
+<stop offset="1" stop-color="#338AFF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/app/comment/content-form.tsx b/src/components/app/comment/content-form.tsx
deleted file mode 100644
index 815f037..0000000
--- a/src/components/app/comment/content-form.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ChangeEvent, Dispatch, SetStateAction } from "react";
-
-import { InformationSVG } from "@/assets/icons/information";
-import { Textarea } from "@/components/common/textarea";
-
-interface ContentFormProps {
-  content: string;
-  setContent: Dispatch<SetStateAction<string>>;
-}
-export const ContentForm = ({ content, setContent }: ContentFormProps) => {
-  return (
-    <div className="mb-14 flex flex-col gap-4">
-      <div className="flex flex-col gap-3">
-        <h4 className="text-h4 text-primary">칭찬 메시지</h4>
-        <Textarea
-          limit={40}
-          value={content}
-          currentLength={content.length}
-          placeholder="칭찬 받을 순간에 대한 내용을 작성해주세요 (선택)"
-          onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
-            setContent(e.target.value)
-          }
-        />
-      </div>
-      <div className="flex gap-[4px] ">
-        <InformationSVG />
-        <span className="text-b3-long text-gray-600">
-          욕설, 비속어나 부적절한 단어의 경우 서비스 사용이 제한되거나 관리자에
-          의해 삭제될 수 있어요.
-        </span>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/app/mypage/calendar-view.tsx b/src/components/app/mypage/calendar-view.tsx
new file mode 100644
index 0000000..b6bc885
--- /dev/null
+++ b/src/components/app/mypage/calendar-view.tsx
@@ -0,0 +1,196 @@
+import clsx from "clsx";
+import {
+  useState,
+  createContext,
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  ReactNode,
+} from "react";
+import { useNavigate } from "react-router-dom";
+
+import { ChevronLeftEdgeSVG } from "@/assets/icons/chevron-left";
+import { ChevronRightEdgeSVG } from "@/assets/icons/chevron-right-edge";
+import { useApiClapCalendar } from "@/hooks/api/my-page/useApiClapCalendar";
+import { useCalendar } from "@/hooks/useCalendar";
+import { useAuthStore } from "@/store/auth";
+import { dateUtils } from "@/utils/dateUtils";
+
+type TDate = {
+  year: number;
+  month: number;
+  date: number;
+  day: number;
+  diff: number; // 현재날짜 기준 달 차이, ex) 2024년 2월 기준, 1월 조회시 diff = 1
+};
+
+type TPost = {
+  postId: number;
+  imageUrl: string;
+  postCreatedDate: string;
+  date: string;
+};
+
+type TCalendarContext = {
+  date: TDate;
+  setDate: Dispatch<SetStateAction<TDate>>;
+  posts: TPost[];
+};
+
+type CalendarViewProps = {
+  className: string;
+  children: ReactNode;
+};
+
+export const CalendarContext = createContext<TCalendarContext | undefined>(
+  undefined,
+);
+
+const Header = () => {
+  const { date, setDate } = useCalendar();
+  const today = new Date();
+
+  const isRecent =
+    today.getFullYear() === date.year && today.getMonth() === date.month;
+
+  const prev = new Date(date.year, date.month - 1);
+  const next = new Date(date.year, date.month + 1);
+
+  return (
+    <div className="text-num-b1-medium flex h-6 w-full justify-center gap-[30px]">
+      <button
+        onClick={() =>
+          setDate((prevDate) => ({
+            ...dateUtils.parseDate(prev),
+            diff: prevDate.diff + 1,
+          }))
+        }
+      >
+        <ChevronLeftEdgeSVG />
+      </button>
+      <div>
+        {date.year}
+        <span className="text-h3">년 </span>
+        {(date.month + 1).toString().padStart(2, "0")}
+        <span className="text-h3">월</span>
+      </div>
+      <button
+        disabled={isRecent}
+        onClick={() =>
+          setDate((prevDate) => ({
+            ...dateUtils.parseDate(next),
+            diff: prevDate.diff - 1,
+          }))
+        }
+        className="disabled:opacity-30"
+      >
+        <ChevronRightEdgeSVG />
+      </button>
+    </div>
+  );
+};
+
+const Cell = ({ day, post }: { day: number; post: TPost[] }) => {
+  const navigate = useNavigate();
+  const isEmpty = day === 0;
+  const hasPost = post.length !== 0;
+
+  return (
+    <div
+      className={clsx(
+        post.length && "!text-num-b2-strong text-oncolor",
+        "text-num-b2-compact flex aspect-square w-full items-center justify-center rounded-full bg-cover bg-no-repeat",
+      )}
+      style={
+        hasPost
+          ? {
+              background: `linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(${post[0].imageUrl}), lightgray 50%`,
+              backgroundSize: "cover",
+            }
+          : {}
+      }
+      onClick={() => {
+        if (hasPost)
+          navigate("/archive", { state: { postId: post[0].postId } });
+      }}
+    >
+      {isEmpty ? "" : day}
+    </div>
+  );
+};
+
+const DAYS = ["일", "월", "화", "수", "목", "금", "토"];
+
+const Grid = () => {
+  const {
+    date: { year, month, day },
+    posts,
+  } = useCalendar();
+  const [dateList, setDateList] = useState<number[]>([]); // 달력에 표시될 일자 목록
+  const lastDateNum = new Date(year, month + 1, 0).getDate();
+  console.log(lastDateNum);
+
+  useEffect(() => {
+    const emptyDays = Array(day).fill(0) as number[];
+    const filledDays = Array(lastDateNum)
+      .fill(undefined)
+      .map((_, i) => i + 1);
+    setDateList([...emptyDays, ...filledDays]);
+  }, [year, month]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex justify-around gap-1.5">
+        {DAYS.map((day) => (
+          <span key={day}>{day}</span>
+        ))}
+      </div>
+      <div className="grid grid-cols-7 gap-x-1.5 gap-y-2.5">
+        {dateList.map((date) => (
+          <Cell
+            key={date + Math.random()}
+            day={date}
+            post={posts.filter((p) => +p.date === date)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const CalendarView = ({ className, children }: CalendarViewProps) => {
+  const [date, setDate] = useState<TDate>({ ...dateUtils.now(), diff: 0 });
+  const { auth } = useAuthStore();
+  const { data, fetchNextPage } = useApiClapCalendar(auth.userId);
+
+  useEffect(() => {
+    if (!data || data?.pages.length - 1 >= date.diff) return;
+
+    const fetch = async () => {
+      await fetchNextPage();
+    };
+    void fetch();
+  }, [date]);
+
+  return (
+    <div
+      className={clsx(
+        "flex flex-col gap-[14px] px-[22px] py-9 tabular-nums",
+        className,
+      )}
+    >
+      <CalendarContext.Provider
+        value={{
+          date,
+          setDate,
+          posts: data?.pages[date.diff] ?? [],
+        }}
+      >
+        {children}
+      </CalendarContext.Provider>
+    </div>
+  );
+};
+
+CalendarView.Header = Header;
+CalendarView.Grid = Grid;
diff --git a/src/components/app/mypage/stats-card.tsx b/src/components/app/mypage/stats-card.tsx
new file mode 100644
index 0000000..6daed14
--- /dev/null
+++ b/src/components/app/mypage/stats-card.tsx
@@ -0,0 +1,17 @@
+type StatsCardProps = {
+  title: string;
+  count: number;
+  imageUrl: string;
+};
+
+export const StatsCard = ({ title, count, imageUrl }: StatsCardProps) => {
+  return (
+    <div className="flex flex-1 flex-col items-center gap-1.5 rounded-4 bg-oncolor px-4 py-5">
+      <span className="text-b3-strong text-gray-600">{title}</span>
+      <div className="flex gap-1">
+        <img src={imageUrl} width={24} height={24} />
+        <span className="text-num-b1-strong">{count}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/common/image-cropper.tsx b/src/components/common/image-cropper.tsx
index 80a34d2..bf3997b 100644
--- a/src/components/common/image-cropper.tsx
+++ b/src/components/common/image-cropper.tsx
@@ -1,7 +1,7 @@
+import clsx from "clsx";
 import { SetStateAction, useCallback, useState } from "react";
 import Cropper from "react-easy-crop";
 import "@/style/cropper.css";
-import clsx from "clsx";
 
 import { getCroppedImg } from "@/hooks/useCroppedImage";
 
diff --git a/src/hooks/api/my-page/useApiClapCalendar.tsx b/src/hooks/api/my-page/useApiClapCalendar.tsx
new file mode 100644
index 0000000..dcc932c
--- /dev/null
+++ b/src/hooks/api/my-page/useApiClapCalendar.tsx
@@ -0,0 +1,47 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+
+import { api } from "@/api";
+
+export type ClapCalendarResType = {
+  postId: number;
+  imageUrl: string;
+  postCreatedDate: string; // raw data
+  date?: string; // extract date from raw data
+}[];
+
+export const useApiClapCalendar = (userId: number) => {
+  const getCalendar = async ({ pageParam }: { pageParam: number }) => {
+    const target = new Date();
+    target.setMonth(target.getMonth() + 1 - pageParam);
+    return await api
+      .get<ClapCalendarResType>(
+        `/praise-up/api/v1/user/${userId}/posts?year=${target.getFullYear()}&month=${
+          target.getMonth() === 0 ? 12 : target.getMonth()
+        }`,
+      )
+      .then((res) => res.data);
+  };
+
+  return useInfiniteQuery({
+    queryKey: ["user-calendar"],
+    queryFn: ({ pageParam }: { pageParam: number }) =>
+      getCalendar({ pageParam }),
+    initialPageParam: 0,
+    getNextPageParam: (_, allPages) => {
+      return allPages.length;
+    },
+    select: (data) => {
+      const extractDate = data.pages.map((page) =>
+        page.map((data) => ({
+          ...data,
+          date: data.postCreatedDate.split("T")[0].split("-")[2], // 일자만 추출
+        })),
+      );
+      return {
+        pages: [...extractDate],
+        pageParams: [...data.pageParams],
+      };
+    },
+    enabled: !!userId,
+  });
+};
diff --git a/src/hooks/useCalendar.ts b/src/hooks/useCalendar.ts
new file mode 100644
index 0000000..7282661
--- /dev/null
+++ b/src/hooks/useCalendar.ts
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+
+import { CalendarContext } from "@/components/app/mypage/calendar-view";
+
+export function useCalendar() {
+  const context = useContext(CalendarContext || undefined);
+  if (context === undefined)
+    throw new Error("useCalendar must be used within a <Calendar />");
+  return context;
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 416c108..f72b5a3 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -12,6 +12,7 @@ import { DetailPage } from "@/app/detail";
 import { NotFound } from "@/app/error/404";
 import { Home } from "@/app/home";
 import { MyPage } from "@/app/mypage";
+import { MyPageClaps } from "@/app/mypage/mypage-claps";
 import { MyPageEdit } from "@/app/mypage/mypage-edit";
 import { MyPageUnregister } from "@/app/mypage/unregister/unregister";
 import { MyPageUnregisterConfirm } from "@/app/mypage/unregister/unregister-confirm";
@@ -104,6 +105,11 @@ const routeChildren: RouteChildren[] = [
     element: <MyPage />,
     auth: true,
   },
+  {
+    path: "/mypage/claps",
+    element: <MyPageClaps />,
+    auth: true,
+  },
   {
     path: "/mypage/edit",
     element: <MyPageEdit />,
diff --git a/src/utils/dateUtils.ts b/src/utils/dateUtils.ts
new file mode 100644
index 0000000..61f63f0
--- /dev/null
+++ b/src/utils/dateUtils.ts
@@ -0,0 +1,14 @@
+// convert Date type to {year, month, date, day} type
+const parseDate = (date: Date) => {
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth(),
+    date: date.getDate(),
+    day: date.getDay(),
+  };
+};
+
+export const dateUtils = {
+  now: () => parseDate(new Date()),
+  parseDate: (date: Date) => parseDate(date),
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index cf7efab..5d4cb13 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,6 +15,9 @@ export default {
         xs: "480px",
         "3xl": "1920px",
       },
+      fontFamily: {
+        "work-sans": ["Work Sans", "sans-serif"],
+      },
       colors: {
         gray: {
           DEFAULT: "#262C36",