diff --git a/src/app/(auth)/_components/AlertModal/AlertModal.module.scss b/src/app/(auth)/_components/AlertModal/AlertModal.module.scss
index 00690b4..980f5c1 100644
--- a/src/app/(auth)/_components/AlertModal/AlertModal.module.scss
+++ b/src/app/(auth)/_components/AlertModal/AlertModal.module.scss
@@ -5,8 +5,8 @@
   display: flex;
   flex-direction: column;
   gap: 40px;
-  padding: 40px;
   width: 360px;
+  padding: 40px;
 
   @include respond-to(mobile) {
     width: minmax(320px, calc(100% - 40px));
diff --git a/src/app/(auth)/_components/OauthSignInBox/OauthSignInBox.module.scss b/src/app/(auth)/_components/OauthSignInBox/OauthSignInBox.module.scss
index fd58638..b5f6358 100644
--- a/src/app/(auth)/_components/OauthSignInBox/OauthSignInBox.module.scss
+++ b/src/app/(auth)/_components/OauthSignInBox/OauthSignInBox.module.scss
@@ -4,12 +4,13 @@
 .container {
   display: flex;
   flex-direction: column;
-  align-items: center;
   gap: 20px;
+  align-items: center;
   width: 100%;
 
   .title {
     color: $gray-200;
+
     @include font-normal;
     @include text-normal;
 
diff --git a/src/app/(auth)/_components/OauthSignInButton/OauthSignInButton.module.scss b/src/app/(auth)/_components/OauthSignInButton/OauthSignInButton.module.scss
index 5a1d5b9..f76e456 100644
--- a/src/app/(auth)/_components/OauthSignInButton/OauthSignInButton.module.scss
+++ b/src/app/(auth)/_components/OauthSignInButton/OauthSignInButton.module.scss
@@ -1,12 +1,13 @@
 @import "@/styles/_index";
 
 .container {
-  width: 56px;
-  height: 56px;
   display: flex;
-  justify-content: center;
   align-items: center;
-  @include rounded-full;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
   background-color: transparent;
   border: 1px solid $gray-300;
+
+  @include rounded-full;
 }
diff --git a/src/app/(auth)/oauth/signup/[provider]/_components/OauthSignUpForm/OauthSignUpForm.module.scss b/src/app/(auth)/oauth/signup/[provider]/_components/OauthSignUpForm/OauthSignUpForm.module.scss
index 13a9ec0..4a811c1 100644
--- a/src/app/(auth)/oauth/signup/[provider]/_components/OauthSignUpForm/OauthSignUpForm.module.scss
+++ b/src/app/(auth)/oauth/signup/[provider]/_components/OauthSignUpForm/OauthSignUpForm.module.scss
@@ -9,10 +9,12 @@
   .button {
     width: auto;
     padding: 21px;
+
     @include text-lg;
 
     @include respond-to(tablet) {
       @include text-normal;
+
       padding: 18px;
     }
   }
diff --git a/src/app/(auth)/signin/_components/SignInForm/SignInForm.module.scss b/src/app/(auth)/signin/_components/SignInForm/SignInForm.module.scss
index f16cd21..0c8623c 100644
--- a/src/app/(auth)/signin/_components/SignInForm/SignInForm.module.scss
+++ b/src/app/(auth)/signin/_components/SignInForm/SignInForm.module.scss
@@ -19,10 +19,12 @@
   .signInButton {
     width: auto;
     padding: 21px;
+
     @include text-lg;
 
     @include respond-to(tablet) {
       @include text-normal;
+
       padding: 18px;
     }
   }
diff --git a/src/app/(auth)/signup/_components/SignUpForm/SignUpForm.module.scss b/src/app/(auth)/signup/_components/SignUpForm/SignUpForm.module.scss
index d70f208..26a8b16 100644
--- a/src/app/(auth)/signup/_components/SignUpForm/SignUpForm.module.scss
+++ b/src/app/(auth)/signup/_components/SignUpForm/SignUpForm.module.scss
@@ -19,10 +19,12 @@
   .signUpButton {
     width: auto;
     padding: 21px;
+
     @include text-lg;
 
     @include respond-to(tablet) {
       @include text-normal;
+
       padding: 18px;
     }
   }
diff --git a/src/app/(userpage)/mypage/page.tsx b/src/app/(userpage)/mypage/page.tsx
deleted file mode 100644
index e84f7ac..0000000
--- a/src/app/(userpage)/mypage/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import React from "react";
-import cn from "@/utils/classNames";
-import styles from "./MyPage.module.scss";
-
-export default function MyPage() {
-  const userId = "2";
-  return (
-    <div className={cn(styles.container)}>
-      <span>MyPage</span>
-      <Link href={`/userpage/${userId}`}>이동 부탁</Link>
-    </div>
-  );
-}
diff --git a/src/app/(userpage)/page.tsx b/src/app/(userpage)/page.tsx
deleted file mode 100644
index 1d4fb43..0000000
--- a/src/app/(userpage)/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from "react";
-
-export default function page() {
-  return <div>여기 진짜 페이지임 ㅇㅇ</div>;
-}
diff --git a/src/app/(userpage)/types.tsx b/src/app/(userpage)/types.ts
similarity index 93%
rename from src/app/(userpage)/types.tsx
rename to src/app/(userpage)/types.ts
index d636765..7ea8a9a 100644
--- a/src/app/(userpage)/types.tsx
+++ b/src/app/(userpage)/types.ts
@@ -1,20 +1,20 @@
 export type UserDetail = {
-  updatedAt: Date;
-  createdAt: Date;
-  teamId: string;
-  image: string;
-  description: string;
-  nickname: string;
   id: number;
+  nickname: string;
+  description: string;
+  image: string;
+  createdAt: string;
+  updatedAt: string;
+  teamId: string;
+  isFollowing: boolean;
+  followersCount: number;
+  followeesCount: number;
+  reviewCount: number;
+  averageRating: number;
   mostFavoriteCategory: {
     name: string;
     id: number;
   };
-  averageRating: number;
-  reviewCount: number;
-  followeesCount: number;
-  followersCount: number;
-  isFollowing: boolean;
 };
 
 export type UserProduct = {
diff --git a/src/app/(userpage)/userpage/[userId]/UserPage.module.scss b/src/app/(userpage)/user/[userId]/UserPage.module.scss
similarity index 100%
rename from src/app/(userpage)/userpage/[userId]/UserPage.module.scss
rename to src/app/(userpage)/user/[userId]/UserPage.module.scss
diff --git a/src/app/(userpage)/userpage/[userId]/components/FollowList/FollowList.module.scss b/src/app/(userpage)/user/[userId]/components/FollowList/FollowList.module.scss
similarity index 100%
rename from src/app/(userpage)/userpage/[userId]/components/FollowList/FollowList.module.scss
rename to src/app/(userpage)/user/[userId]/components/FollowList/FollowList.module.scss
diff --git a/src/app/(userpage)/userpage/[userId]/components/FollowList/FollowList.tsx b/src/app/(userpage)/user/[userId]/components/FollowList/FollowList.tsx
similarity index 96%
rename from src/app/(userpage)/userpage/[userId]/components/FollowList/FollowList.tsx
rename to src/app/(userpage)/user/[userId]/components/FollowList/FollowList.tsx
index 22d8cc7..68fc1d1 100644
--- a/src/app/(userpage)/userpage/[userId]/components/FollowList/FollowList.tsx
+++ b/src/app/(userpage)/user/[userId]/components/FollowList/FollowList.tsx
@@ -11,8 +11,6 @@ type FollowListProps = {
 };
 
 export default function FollowList({ followData }: FollowListProps) {
-  console.log(followData);
-
   return (
     <div className={cn(styles.container)}>
       {followData.list.map((item) => (
diff --git a/src/app/(userpage)/userpage/[userId]/components/FollowModal/FollowModal.module.scss b/src/app/(userpage)/user/[userId]/components/FollowModal/FollowModal.module.scss
similarity index 100%
rename from src/app/(userpage)/userpage/[userId]/components/FollowModal/FollowModal.module.scss
rename to src/app/(userpage)/user/[userId]/components/FollowModal/FollowModal.module.scss
diff --git a/src/app/(userpage)/userpage/[userId]/components/FollowModal/FollowModal.tsx b/src/app/(userpage)/user/[userId]/components/FollowModal/FollowModal.tsx
similarity index 70%
rename from src/app/(userpage)/userpage/[userId]/components/FollowModal/FollowModal.tsx
rename to src/app/(userpage)/user/[userId]/components/FollowModal/FollowModal.tsx
index baffb4b..3ffedd9 100644
--- a/src/app/(userpage)/userpage/[userId]/components/FollowModal/FollowModal.tsx
+++ b/src/app/(userpage)/user/[userId]/components/FollowModal/FollowModal.tsx
@@ -1,6 +1,7 @@
+import { useQuery } from "@tanstack/react-query";
 import Image from "next/image";
 import { useSession } from "next-auth/react";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { UserProduct } from "@/app/(userpage)/types";
 import Modal from "@/components/Modal/Modal";
 import cn from "@/utils/classNames";
@@ -18,31 +19,26 @@ type ModalProps = {
 
 export default function FollowModal({ isModalState, setIsModalState, followState }: ModalProps) {
   const { data: session } = useSession();
-  const [followData, setFollowData] = useState<UserProduct>();
+  const userId = session?.user.id;
+  const ACCESS_TOKEN = session?.accessToken ?? "";
 
   const httpClient = new HttpClient(process.env.NEXT_PUBLIC_BASE_URL!);
 
-  const handleData = async () => {
-    if (session && followState) {
-      const userId = session.user.id;
-      const ACCESS_TOKEN = session.accessToken;
-      setFollowData(
-        await httpClient.get(`users/${userId}/${followState}`, {
-          headers: { Authorization: ACCESS_TOKEN },
-          cache: "no-cache",
-        }),
-      );
-    }
-  };
-
-  useEffect(() => {
-    handleData();
-  }, [followState]);
+  const { data } = useQuery({
+    queryKey: ["followData", followState],
+    queryFn: async () => {
+      const res = httpClient.get<UserProduct>(`users/${userId}/${followState}`, {
+        headers: { Authorization: ACCESS_TOKEN },
+        cache: "no-cache",
+      });
+      return res;
+    },
+  });
 
   const handleClose = () => setIsModalState(false);
   return (
     <>
-      {followData !== undefined && isModalState && (
+      {data !== undefined && isModalState && (
         <Modal onClose={handleClose}>
           <div className={cn(styles.container)}>
             <div
@@ -59,10 +55,10 @@ export default function FollowModal({ isModalState, setIsModalState, followState
               />
             </div>
             <h1>nickname님{followState === "followees" ? "이" : "을"} 팔로우 하는 유저</h1>
-            {followData.list.length < 1 ? (
+            {data.list.length < 1 ? (
               <div className={cn(styles.noFollowBox)}>팔로우하는 유저가 없어요</div>
             ) : (
-              <FollowList followData={followData} />
+              <FollowList followData={data} />
             )}
           </div>
         </Modal>
diff --git a/src/app/(userpage)/userpage/[userId]/components/HTMLContent/HTMLContent.module.scss b/src/app/(userpage)/user/[userId]/components/HTMLContent/HTMLContent.module.scss
similarity index 100%
rename from src/app/(userpage)/userpage/[userId]/components/HTMLContent/HTMLContent.module.scss
rename to src/app/(userpage)/user/[userId]/components/HTMLContent/HTMLContent.module.scss
diff --git a/src/app/(userpage)/userpage/[userId]/components/HTMLContent/HTMLContent.tsx b/src/app/(userpage)/user/[userId]/components/HTMLContent/HTMLContent.tsx
similarity index 100%
rename from src/app/(userpage)/userpage/[userId]/components/HTMLContent/HTMLContent.tsx
rename to src/app/(userpage)/user/[userId]/components/HTMLContent/HTMLContent.tsx
diff --git a/src/app/(userpage)/mypage/MyPage.module.scss b/src/app/(userpage)/user/[userId]/components/MyProfileButton/MyProfileButton.module.scss
similarity index 62%
rename from src/app/(userpage)/mypage/MyPage.module.scss
rename to src/app/(userpage)/user/[userId]/components/MyProfileButton/MyProfileButton.module.scss
index e185a12..2febfdd 100644
--- a/src/app/(userpage)/mypage/MyPage.module.scss
+++ b/src/app/(userpage)/user/[userId]/components/MyProfileButton/MyProfileButton.module.scss
@@ -3,6 +3,13 @@
 
 .container {
   display: flex;
+  flex-direction: column;
+  gap: 20px;
   align-items: center;
   justify-content: center;
+  width: 100%;
+}
+
+.profile {
+  width: 80%;
 }
diff --git a/src/app/(userpage)/user/[userId]/components/MyProfileButton/MyProfileButton.tsx b/src/app/(userpage)/user/[userId]/components/MyProfileButton/MyProfileButton.tsx
new file mode 100644
index 0000000..5c26a42
--- /dev/null
+++ b/src/app/(userpage)/user/[userId]/components/MyProfileButton/MyProfileButton.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import Button from "@/components/Button/Button";
+import Modal from "@/components/Modal/Modal";
+import cn from "@/utils/classNames";
+import styles from "./MyProfileButton.module.scss";
+
+export default function MyProfileButton() {
+  const [isModal, setIsModal] = useState(false);
+  const handleClose = () => setIsModal(false);
+  const handleOpen = () => setIsModal(true);
+
+  return (
+    <div className={cn(styles.container)}>
+      {isModal && (
+        <Modal onClose={handleClose}>
+          <div className={styles.profileEdit}>모달 테스트</div>
+        </Modal>
+      )}
+      <Button
+        styleType='primary'
+        onClick={handleOpen}
+        className={styles.profile}
+      >
+        프로필 수정
+      </Button>
+      <Button
+        styleType='tertiary'
+        className={styles.profile}
+      >
+        로그아웃
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/(userpage)/userpage/[userId]/components/TabButton/TabButton.module.scss b/src/app/(userpage)/user/[userId]/components/TabButton/TabButton.module.scss
similarity index 100%
rename from src/app/(userpage)/userpage/[userId]/components/TabButton/TabButton.module.scss
rename to src/app/(userpage)/user/[userId]/components/TabButton/TabButton.module.scss
diff --git a/src/app/(userpage)/userpage/[userId]/components/TabButton/TabButton.tsx b/src/app/(userpage)/user/[userId]/components/TabButton/TabButton.tsx
similarity index 100%
rename from src/app/(userpage)/userpage/[userId]/components/TabButton/TabButton.tsx
rename to src/app/(userpage)/user/[userId]/components/TabButton/TabButton.tsx
diff --git a/src/app/(userpage)/userpage/[userId]/components/UserActivityList/UserActivityList.module.scss b/src/app/(userpage)/user/[userId]/components/UserActivityList/UserActivityList.module.scss
similarity index 100%
rename from src/app/(userpage)/userpage/[userId]/components/UserActivityList/UserActivityList.module.scss
rename to src/app/(userpage)/user/[userId]/components/UserActivityList/UserActivityList.module.scss
diff --git a/src/app/(userpage)/user/[userId]/components/UserActivityList/UserActivityList.tsx b/src/app/(userpage)/user/[userId]/components/UserActivityList/UserActivityList.tsx
new file mode 100644
index 0000000..0c38c0e
--- /dev/null
+++ b/src/app/(userpage)/user/[userId]/components/UserActivityList/UserActivityList.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useInView } from "react-intersection-observer";
+import { Dropdown } from "@/components/Dropdown";
+import { ORDER, DROPDOWN } from "@/components/Dropdown/constants";
+import useWindowSize from "@/hooks/useWindowSize";
+import { ProductType, ProductsResponseType } from "@/types/global";
+import cn from "@/utils/classNames";
+import HttpClient from "@/utils/httpClient";
+import styles from "./UserActivityList.module.scss";
+// eslint-disable-next-line no-restricted-imports
+import TabButton from "../TabButton/TabButton";
+// eslint-disable-next-line no-restricted-imports
+import UserProductList from "../UserProductList/UserProductList";
+
+export default function UserActivityList() {
+  const router = useRouter();
+  const [selectedButton, setSelectedButton] = useState<string>("reviewed");
+  const { data: session } = useSession();
+  const { width } = useWindowSize();
+  const { control, watch } = useForm({ mode: "onBlur" });
+
+  const { ref, inView } = useInView({
+    threshold: 0.5,
+  });
+
+  const httpClient = new HttpClient(process.env.NEXT_PUBLIC_BASE_URL!);
+  const userId = session?.user.id;
+  const ACCESS_TOKEN = session?.accessToken ?? "";
+
+  const querySelectButton = (value: string) => {
+    const params = new URLSearchParams();
+    params.set("order", value);
+
+    return params.toString();
+  };
+
+  const {
+    data: userProductData,
+    fetchNextPage,
+    hasNextPage,
+  } = useInfiniteQuery({
+    queryKey: ["userProductData", selectedButton],
+    queryFn: async ({ pageParam }) => {
+      const res = await httpClient.get<ProductsResponseType>(
+        `users/${userId}/${selectedButton}-products?cursor=${pageParam}`,
+        {
+          headers: { Authorization: ACCESS_TOKEN },
+          cache: "no-cache",
+        },
+      );
+      return res;
+    },
+    select: (data): ProductType[] => data.pages.map((page) => page.list).flat(),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
+  });
+
+  const selectTab = ORDER.PROFILE.filter((i) => i.value === selectedButton) ?? "reviewed";
+
+  useEffect(() => {
+    if (width <= 1023 && watch("select") === "") {
+      setSelectedButton("reviewed");
+    }
+    if (width <= 1023 && watch("select") !== "") {
+      setSelectedButton(watch("select"));
+    }
+
+    router.push(`${userId}/?${querySelectButton(selectedButton)}`);
+  }, [selectedButton, watch("select")]);
+
+  useEffect(() => {
+    if (inView && hasNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, fetchNextPage, hasNextPage]);
+
+  const onSelectButtonHandler = (value: string) => {
+    setSelectedButton(value);
+  };
+
+  return (
+    <div className={cn(styles.container)}>
+      {width > 1023 ? (
+        <TabButton
+          onSelectButton={onSelectButtonHandler}
+          button={selectedButton}
+        />
+      ) : (
+        <div>
+          <Dropdown
+            items={ORDER.PROFILE}
+            control={control}
+            name='select'
+            variant={DROPDOWN.ORDER}
+            placeholder={
+              ORDER.PROFILE[0].option !== selectTab[0].option ? selectTab[0].option : ORDER.PROFILE[0].option
+            }
+          />
+        </div>
+      )}
+      {userProductData && (
+        <UserProductList
+          list={userProductData}
+          lastRef={ref}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(userpage)/userpage/[userId]/components/UserInfo/UserInfo.module.scss b/src/app/(userpage)/user/[userId]/components/UserInfo/UserInfo.module.scss
similarity index 85%
rename from src/app/(userpage)/userpage/[userId]/components/UserInfo/UserInfo.module.scss
rename to src/app/(userpage)/user/[userId]/components/UserInfo/UserInfo.module.scss
index 09a6d50..726947c 100644
--- a/src/app/(userpage)/userpage/[userId]/components/UserInfo/UserInfo.module.scss
+++ b/src/app/(userpage)/user/[userId]/components/UserInfo/UserInfo.module.scss
@@ -92,3 +92,22 @@
     width: 194px;
   }
 }
+
+.followButton{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.profile {
+  width: 100%;
+
+  @include respond-to(tablet) {
+    width: 80%;
+  }
+
+  @include respond-to(mobile) {
+    width: 245px;
+  }
+}
diff --git a/src/app/(userpage)/userpage/[userId]/components/UserInfo/UserInfo.tsx b/src/app/(userpage)/user/[userId]/components/UserInfo/UserInfo.tsx
similarity index 65%
rename from src/app/(userpage)/userpage/[userId]/components/UserInfo/UserInfo.tsx
rename to src/app/(userpage)/user/[userId]/components/UserInfo/UserInfo.tsx
index 72bf4af..1691b12 100644
--- a/src/app/(userpage)/userpage/[userId]/components/UserInfo/UserInfo.tsx
+++ b/src/app/(userpage)/user/[userId]/components/UserInfo/UserInfo.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable import/no-named-as-default */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
+import { useSession } from "next-auth/react";
 import React, { useState } from "react";
 import Button from "@/components/Button/Button";
 import { UserImage } from "@/components/UserImage";
@@ -9,8 +10,11 @@ import styles from "./UserInfo.module.scss";
 import FollowModal from "../FollowModal/FollowModal";
 // eslint-disable-next-line no-restricted-imports
 import HTMLContent from "../HTMLContent/HTMLContent";
+// eslint-disable-next-line no-restricted-imports
+import MyProfileButton from "../MyProfileButton/MyProfileButton";
 
 type UserInfoProps = {
+  userId: number;
   nickname: string;
   image: string;
   description: string;
@@ -19,11 +23,19 @@ type UserInfoProps = {
   isfollow: boolean;
 };
 
-export default function UserInfo({ nickname, image, description, follower, folloing, isfollow }: UserInfoProps) {
-  // textarea에서 쓴 줄바꿈 변환해서 서버로 보내기
-  // const formattedDescription = description.replace(/\n/g, "<br>")
+export default function UserInfo({
+  userId,
+  nickname,
+  image,
+  description,
+  follower,
+  folloing,
+  isfollow,
+}: UserInfoProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [followModalProps, setFollowModalProps] = useState("");
+  const { data: session } = useSession();
+  const loginUser = session?.user.id;
 
   const handelFolloweesModal = () => {
     setFollowModalProps("followees");
@@ -62,22 +74,28 @@ export default function UserInfo({ nickname, image, description, follower, follo
             <p>팔로잉</p>
           </div>
         </div>
-        {isfollow ? (
-          <Button
-            styleType='tertiary'
-            disabled
-            className='profile'
-          >
-            팔로우 취소
-          </Button>
+        {Number(userId) === loginUser ? (
+          <MyProfileButton />
         ) : (
-          <Button
-            styleType='primary'
-            disabled={false}
-            className='profile'
-          >
-            팔로우
-          </Button>
+          <div className={styles.followButton}>
+            {isfollow ? (
+              <Button
+                styleType='tertiary'
+                disabled
+                className={styles.profile}
+              >
+                팔로우 취소
+              </Button>
+            ) : (
+              <Button
+                styleType='primary'
+                disabled={false}
+                className={styles.profile}
+              >
+                팔로우
+              </Button>
+            )}
+          </div>
         )}
       </div>
     </>
diff --git a/src/app/(userpage)/userpage/[userId]/components/UserProductList/UserProductList.module.scss b/src/app/(userpage)/user/[userId]/components/UserProductList/UserProductList.module.scss
similarity index 100%
rename from src/app/(userpage)/userpage/[userId]/components/UserProductList/UserProductList.module.scss
rename to src/app/(userpage)/user/[userId]/components/UserProductList/UserProductList.module.scss
diff --git a/src/app/(userpage)/userpage/[userId]/components/UserProductList/UserProductList.tsx b/src/app/(userpage)/user/[userId]/components/UserProductList/UserProductList.tsx
similarity index 71%
rename from src/app/(userpage)/userpage/[userId]/components/UserProductList/UserProductList.tsx
rename to src/app/(userpage)/user/[userId]/components/UserProductList/UserProductList.tsx
index 00accf4..69e2607 100644
--- a/src/app/(userpage)/userpage/[userId]/components/UserProductList/UserProductList.tsx
+++ b/src/app/(userpage)/user/[userId]/components/UserProductList/UserProductList.tsx
@@ -6,17 +6,19 @@ import type { ProductType } from "@/types/global";
 
 type ProductListProps = {
   list: ProductType[];
+  lastRef: () => void;
 };
 
-export default function UserProductList({ list }: ProductListProps) {
+export default function UserProductList({ list, lastRef }: ProductListProps) {
   return (
     <div className={cn(styles.container)}>
-      {list.map((item) => (
+      {list.map((item, idx) => (
         <Link
           href={`/product/${item.id}`}
           key={item.id}
         >
           <ProductCard product={item} />
+          <div ref={idx === list.length - 1 ? lastRef : null} />
         </Link>
       ))}
     </div>
diff --git a/src/app/(userpage)/user/[userId]/page.tsx b/src/app/(userpage)/user/[userId]/page.tsx
new file mode 100644
index 0000000..3a49a2b
--- /dev/null
+++ b/src/app/(userpage)/user/[userId]/page.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+/* eslint-disable no-restricted-imports */
+
+import { useQuery } from "@tanstack/react-query";
+import { useSession } from "next-auth/react";
+import React from "react";
+import Activity from "@/components/Card/Activity/Activity";
+import cn from "@/utils/classNames";
+import HttpClient from "@/utils/httpClient";
+import UserActivityList from "./components/UserActivityList/UserActivityList";
+import UserInfo from "./components/UserInfo/UserInfo";
+import styles from "./UserPage.module.scss";
+import { UserDetail } from "../../types";
+
+export default function UserPage({ params }: { params: { userId: number } }) {
+  const { data: session } = useSession();
+  const ACCESS_TOKEN = session?.accessToken;
+
+  const httpClient = new HttpClient(process.env.NEXT_PUBLIC_BASE_URL!);
+
+  const { data } = useQuery({
+    queryKey: ["userData", params.userId],
+    queryFn: async () => {
+      const res = httpClient.get<UserDetail>(`users/${params.userId}`, {
+        headers: { Authorization: ACCESS_TOKEN ?? "" },
+        cache: "no-cache",
+      });
+      return res;
+    },
+  });
+
+  return (
+    <div className={cn(styles.container)}>
+      {data && (
+        <>
+          <UserInfo
+            userId={params.userId}
+            nickname={data.nickname}
+            image={data.image}
+            description={data.description}
+            follower={data.followersCount}
+            folloing={data.followeesCount}
+            isfollow={data.isFollowing}
+          />
+          <div className={styles.activity}>
+            <section>
+              <p className={styles.activityDetailText}>활동 내역</p>
+              <div className={styles.activityDetails}>
+                <Activity
+                  title='남긴 별점 평균'
+                  averageRating={data.averageRating}
+                />
+                <Activity
+                  title='남긴 리뷰'
+                  reviewCount={data.reviewCount}
+                />
+                <Activity
+                  title='관심 카테고리'
+                  chipCategoty={data.mostFavoriteCategory}
+                />
+              </div>
+            </section>
+            <UserActivityList />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(userpage)/userpage/[userId]/components/UserActivityList/UserActivityList.tsx b/src/app/(userpage)/userpage/[userId]/components/UserActivityList/UserActivityList.tsx
deleted file mode 100644
index 0f6a443..0000000
--- a/src/app/(userpage)/userpage/[userId]/components/UserActivityList/UserActivityList.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { productMock } from "@/app/(userpage)/productMock";
-import { Dropdown } from "@/components/Dropdown";
-import { ORDER, DROPDOWN } from "@/components/Dropdown/constants";
-import useWindowSize from "@/hooks/useWindowSize";
-import cn from "@/utils/classNames";
-import styles from "./UserActivityList.module.scss";
-// eslint-disable-next-line no-restricted-imports
-import TabButton from "../TabButton/TabButton";
-// eslint-disable-next-line no-restricted-imports
-import UserProductList from "../UserProductList/UserProductList";
-
-export default function UserActivityList() {
-  const [selectedButton, setSelectedButton] = useState<string>("reviewed");
-  const { width } = useWindowSize();
-  const { control, watch } = useForm({ mode: "onBlur" });
-
-  useEffect(() => {
-    if (watch("select") !== undefined) {
-      setSelectedButton(watch("select"));
-    }
-    setSelectedButton("reviewed");
-  }, [watch("select")]);
-
-  const onSelectButtonHandler = (value: string) => {
-    setSelectedButton(value);
-  };
-
-  return (
-    <div className={cn(styles.container)}>
-      {width > 1023 ? (
-        <TabButton
-          onSelectButton={onSelectButtonHandler}
-          button={selectedButton}
-        />
-      ) : (
-        <div>
-          <Dropdown
-            items={ORDER.PROFILE}
-            control={control}
-            name='select'
-            variant={DROPDOWN.ORDER}
-            placeholder={ORDER.PROFILE[0].option}
-          />
-        </div>
-      )}
-      <UserProductList list={productMock} />
-    </div>
-  );
-}
diff --git a/src/app/(userpage)/userpage/[userId]/page.tsx b/src/app/(userpage)/userpage/[userId]/page.tsx
deleted file mode 100644
index 3632755..0000000
--- a/src/app/(userpage)/userpage/[userId]/page.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-// import { useParams } from "next/navigation";
-import React from "react";
-// user mock data
-import { userMock } from "@/app/(userpage)/userMock";
-import Activity from "@/components/Card/Activity/Activity";
-import cn from "@/utils/classNames";
-// 추후 데이터 연결시 받아온데이터로 변환 예정
-import UserActivityList from "./components/UserActivityList/UserActivityList";
-import UserInfo from "./components/UserInfo/UserInfo";
-import styles from "./UserPage.module.scss";
-
-export default function UserPage() {
-  // userId를 받아오는 useParams function
-  // const { userId } = useParams<{ userId: string }>();
-
-  return (
-    <div className={cn(styles.container)}>
-      <UserInfo
-        nickname={userMock.nickname}
-        image={userMock.image}
-        description={userMock.description}
-        follower={userMock.followersCount}
-        folloing={userMock.followeesCount}
-        isfollow={userMock.isFollowing}
-      />
-      <div className={styles.activity}>
-        <section>
-          <p className={styles.activityDetailText}>활동 내역</p>
-          <div className={styles.activityDetails}>
-            <Activity
-              title='남긴 별점 평균'
-              averageRating={userMock.averageRating}
-            />
-            <Activity
-              title='남긴 리뷰'
-              reviewCount={userMock.reviewCount}
-            />
-            <Activity
-              title='관심 카테고리'
-              chipCategoty={userMock.mostFavoriteCategory}
-            />
-          </div>
-        </section>
-        <UserActivityList />
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/compare/input/CompareInput.module.scss b/src/app/compare/input/CompareInput.module.scss
index 0f4d25c..61458f9 100644
--- a/src/app/compare/input/CompareInput.module.scss
+++ b/src/app/compare/input/CompareInput.module.scss
@@ -138,6 +138,6 @@
 
 .buttonDisabled {
   color: $white-100;
-  background: $gray-200;
   cursor: not-allowed;
+  background: $gray-200;
 }
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index e48ab8b..368adef 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -54,15 +54,3 @@
     border: 1px solid $gray-300;
   }
 }
-
-.profile {
-  width: 250px;
-
-  @include respond-to(tablet) {
-    width: 400px;
-  }
-
-  @include respond-to(mobile) {
-    width: 245px;
-  }
-}
diff --git a/src/components/Card/Activity/Activity.module.scss b/src/components/Card/Activity/Activity.module.scss
index 7528556..cf4f196 100644
--- a/src/components/Card/Activity/Activity.module.scss
+++ b/src/components/Card/Activity/Activity.module.scss
@@ -46,11 +46,10 @@
 
 .title {
   gap: 5px;
-  width: 91px;
+  width: 92px;
   color: $gray-100;
   text-align: center;
 
-
   @include text-normal;
 
   @include respond-to(tablet) {
diff --git a/src/components/Gnb/Gnb.tsx b/src/components/Gnb/Gnb.tsx
index b2444c1..db25721 100644
--- a/src/components/Gnb/Gnb.tsx
+++ b/src/components/Gnb/Gnb.tsx
@@ -77,7 +77,7 @@ export default function Gnb({ initialSession }: GnbProps) {
             {currentSession ? (
               <>
                 <Link href='/compare'>비교하기</Link>
-                <Link href='/mypage'>내 프로필</Link>
+                <Link href={`/user/${currentSession.user.id}`}>내 프로필</Link>
                 <button
                   type='button'
                   onClick={() => signOut()}
diff --git a/src/styles/_common.scss b/src/styles/_common.scss
index 0f058dd..bde64c6 100644
--- a/src/styles/_common.scss
+++ b/src/styles/_common.scss
@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  font-family: "pretendard";
+  font-family: pretendard;
 }
 
 img {