diff --git a/package.json b/package.json
index 9030b352..94381adf 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@egjs/react-grid": "^1.16.0",
+    "@mui/material": "^5.15.9",
     "@tanstack/react-query": "^5.17.12",
     "@tanstack/react-query-devtools": "^5.17.12",
     "@vanilla-extract/dynamic": "^2.1.0",
diff --git a/public/icons/default_profile_temporary.svg b/public/icons/default_profile_temporary.svg
index a99b8e97..2c00e1db 100644
--- a/public/icons/default_profile_temporary.svg
+++ b/public/icons/default_profile_temporary.svg
@@ -1,4 +1,4 @@
-<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="none" height="none" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_788_6179)">
 <circle cx="17.5" cy="17.5" r="17.5" fill="#AFB1B6"/>
 <circle cx="17.5" cy="13.8542" r="5.5625" fill="#D9D9D9" stroke="#AFB1B6" stroke-width="2"/>
diff --git a/public/icons/history.svg b/public/icons/history.svg
index 40ae8256..70d30f02 100644
--- a/public/icons/history.svg
+++ b/public/icons/history.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="none" height="none" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10 0C7.43639 0.00731219 4.97349 0.998914 3.12 2.77V1C3.12 0.734784 3.01464 0.48043 2.82711 0.292893C2.63957 0.105357 2.38522 0 2.12 0C1.85478 0 1.60043 0.105357 1.41289 0.292893C1.22536 0.48043 1.12 0.734784 1.12 1V5.5C1.12 5.76522 1.22536 6.01957 1.41289 6.20711C1.60043 6.39464 1.85478 6.5 2.12 6.5H6.62C6.88522 6.5 7.13957 6.39464 7.32711 6.20711C7.51464 6.01957 7.62 5.76522 7.62 5.5C7.62 5.23478 7.51464 4.98043 7.32711 4.79289C7.13957 4.60536 6.88522 4.5 6.62 4.5H4.22C5.50578 3.15636 7.21951 2.30265 9.06653 2.08567C10.9136 1.86868 12.7785 2.30198 14.3407 3.31104C15.9028 4.32011 17.0646 5.84191 17.6263 7.61479C18.188 9.38767 18.1145 11.3009 17.4184 13.0254C16.7223 14.7499 15.4472 16.1781 13.8122 17.0643C12.1772 17.9505 10.2845 18.2394 8.45956 17.8813C6.63463 17.5232 4.99147 16.5405 3.81259 15.1022C2.63372 13.6638 1.99279 11.8597 2 10C2 9.73478 1.89464 9.48043 1.70711 9.29289C1.51957 9.10536 1.26522 9 1 9C0.734784 9 0.48043 9.10536 0.292893 9.29289C0.105357 9.48043 0 9.73478 0 10C0 11.9778 0.58649 13.9112 1.6853 15.5557C2.78412 17.2002 4.3459 18.4819 6.17317 19.2388C8.00043 19.9957 10.0111 20.1937 11.9509 19.8079C13.8907 19.422 15.6725 18.4696 17.0711 17.0711C18.4696 15.6725 19.422 13.8907 19.8079 11.9509C20.1937 10.0111 19.9957 8.00043 19.2388 6.17317C18.4819 4.3459 17.2002 2.78412 15.5557 1.6853C13.9112 0.58649 11.9778 0 10 0ZM10 6C9.73478 6 9.48043 6.10536 9.29289 6.29289C9.10536 6.48043 9 6.73478 9 7V10C9 10.2652 9.10536 10.5196 9.29289 10.7071C9.48043 10.8946 9.73478 11 10 11H12C12.2652 11 12.5196 10.8946 12.7071 10.7071C12.8946 10.5196 13 10.2652 13 10C13 9.73478 12.8946 9.48043 12.7071 9.29289C12.5196 9.10536 12.2652 9 12 9H11V7C11 6.73478 10.8946 6.48043 10.7071 6.29289C10.5196 6.10536 10.2652 6 10 6Z" fill="#1B1B1B"/>
 </svg>
diff --git a/src/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet.css.tsx b/src/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet.css.tsx
deleted file mode 100644
index e2734537..00000000
--- a/src/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet.css.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { keyframes, style } from '@vanilla-extract/css';
-
-export const backGround = style({
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  background: 'rgba(0,0,0,0.3)',
-  zIndex: 999,
-});
-
-export const wrapper = style({
-  padding: '37px 0 43px',
-
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  right: 0,
-
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-
-  backgroundColor: '#ffffff',
-  borderTopLeftRadius: '25px',
-  borderTopRightRadius: '25px',
-
-  transitionProperty: 'all',
-  transitionDuration: '0.2s',
-});
-
-const slideIn = keyframes({
-  from: { transform: 'translateY(100%)' },
-  to: { transform: 'translateY(0)' },
-});
-
-export const sheetActive = style({
-  animation: `${slideIn} 0.2s ease-in-out`,
-});
-
-export const sheetItemWrapper = style({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-
-  ':hover': {
-    backgroundColor: '#EFEFF0',
-  },
-});
-
-export const checkIcon = style({
-  display: 'none',
-  marginRight: '28px',
-
-  selectors: {
-    [`${sheetItemWrapper}:hover &`]: {
-      display: 'block',
-    },
-  },
-});
-
-export const sheetItem = style({
-  width: '100%',
-  fontSize: '1.4rem',
-  cursor: 'pointer',
-  padding: '2.5rem 2.8rem 2.5rem',
-
-  selectors: {
-    [`${sheetItemWrapper}:hover &`]: {
-      color: '#FF5454',
-    },
-  },
-});
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Collaborators.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Collaborators.tsx
deleted file mode 100644
index a302edfb..00000000
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Collaborators.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import Image from 'next/image';
-import CollaboratorsPopOver from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/CollaboratorsPopOver';
-import * as styles from './Collaborators.css';
-import DefaultProfile from '/public/icons/default_profile_temporary.svg';
-import PlusIcon from '/public/icons/collaborators_plus.svg';
-import { CollaboratorType } from '../../mockData/mockdataType';
-
-interface CollaboratorsProps {
-  collaborators: CollaboratorType[] | null;
-}
-
-function Collaborators({ collaborators }: CollaboratorsProps) {
-  const collaboratorsList = collaborators && collaborators?.length >= 3 ? collaborators?.slice(0, 3) : collaborators;
-
-  return (
-    <>
-      {collaborators && (
-        <div className={styles.collaboratorWrapper}>
-          <div className={styles.collaboratorsPopOverWrapper}>
-            <CollaboratorsPopOver collaborators={collaborators} />
-          </div>
-          <span className={styles.collaboratorTitle}>콜라보레이터</span>
-          <div className={styles.wrapper}>
-            <div className={`${styles.ProfileImg} ${styles.profilePlus}`}>
-              <span className={styles.profileText}>{`${collaborators && collaborators?.length - 3}`}</span>
-              <PlusIcon alt="더하기 모양 아이콘" />
-            </div>
-            {collaboratorsList?.map((item: CollaboratorType) => {
-              return (
-                <div key={item.id}>
-                  {item.profileImageUrl ? (
-                    <Image
-                      className={styles.ProfileImg}
-                      src={item.profileImageUrl}
-                      alt="사용자 프로필 이미지"
-                      width={35}
-                      height={35}
-                    ></Image>
-                  ) : (
-                    <DefaultProfile
-                      className={`${styles.ProfileImg} ${styles.defaultProfile}`}
-                      alt="사용자 프로필 이미지"
-                    />
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
-
-export default Collaborators;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.tsx
deleted file mode 100644
index 03b8d1d5..00000000
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Image from 'next/image';
-import * as styles from './CollaboratorsPopOver.css';
-import { CollaboratorType } from '../../mockData/mockdataType';
-
-interface CollaboratorsProps {
-  collaborators: CollaboratorType[] | null;
-}
-
-function CollaboratorsPopOver({ collaborators }: CollaboratorsProps) {
-  return (
-    <div className={styles.wrapper}>
-      <ul className={styles.listWrapper}>
-        {collaborators?.map((item) => {
-          return (
-            <li className={styles.itemWrapper} key={item.id}>
-              {item.profileImageUrl ? (
-                <Image
-                  src={item.profileImageUrl}
-                  className={styles.profileImage}
-                  alt="사용자 프로필 이미지"
-                  width={25}
-                  height={25}
-                ></Image>
-              ) : (
-                <div className={styles.defaultProfileImage}></div>
-              )}
-              <span className={styles.nickname}>{`${item.nickname}`}</span>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}
-
-export default CollaboratorsPopOver;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Comment.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Comment.tsx
deleted file mode 100644
index 577b39a9..00000000
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Comment.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client';
-import Image from 'next/image';
-import Replies from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/Replies';
-import DeleteModalButton from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/DeleteModalButton';
-import timeDiff from '@/lib/utils/timeDiff';
-import * as styles from './Comment.css';
-import DefaultProfile from '/public/icons/default_profile_temporary.svg';
-import { CommentType } from '../../mockData/mockdataType';
-
-interface CommentProps {
-  comment: CommentType | undefined;
-  onUpdate: (userName: string | null) => void;
-  activeNickname?: string | null;
-}
-
-function Comment({ comment, onUpdate }: CommentProps) {
-  const handleActiveNicknameUpdate = () => {
-    const currentUserName = comment?.userName;
-    if (currentUserName) {
-      onUpdate(currentUserName);
-    }
-  };
-
-  return (
-    <>
-      <div className={styles.commentOuterWrapper}>
-        <div className={styles.commentWrapper}>
-          {comment && comment.userProfileImageUrl ? (
-            <Image
-              alt="프로필 이미지"
-              width={30}
-              height={30}
-              src={comment.userProfileImageUrl}
-              className={styles.profileImage}
-            ></Image>
-          ) : (
-            <DefaultProfile />
-          )}
-          <div className={styles.commentContainer}>
-            <div className={styles.commentInformationWrapper}>
-              <span className={styles.commentWriter}>{comment?.userName}</span>
-              <span className={styles.commentCreatedTime}>{comment && timeDiff(comment?.createdDate)}</span>
-            </div>
-            <div className={styles.commentContent}>{comment?.content}</div>
-          </div>
-        </div>
-        <DeleteModalButton />
-      </div>
-      <button className={styles.createReplyButton} onClick={handleActiveNicknameUpdate}>
-        <span>답글 달기</span>
-      </button>
-      <Replies replies={comment?.replies} />
-    </>
-  );
-}
-
-export default Comment;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Comments.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Comments.tsx
deleted file mode 100644
index 8f66675f..00000000
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Comments.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client';
-import { useState } from 'react';
-import Image from 'next/image';
-import Comment from './Comment';
-import * as styles from './Comments.css';
-import { MOCKDATA_COMMENTS } from '../../mockData/mockdata';
-import CancelButton from '/public/icons/cancel_button.svg';
-
-const COMMENTS = MOCKDATA_COMMENTS[1];
-
-function Comments() {
-  const [activeNickname, setActiveNickname] = useState<string | null | undefined>(null);
-
-  const handleActiveNicknameDelete = () => {
-    if (activeNickname) {
-      setActiveNickname(null);
-    }
-  };
-
-  return (
-    <div className={styles.wrapper}>
-      <div className={styles.formWrapperOuter}>
-        {/* {유저 정보 들어오면 이미지 src 추가할 예정} */}
-        <Image
-          src="https://search.pstatic.net/common/?src=http%3A%2F%2Fshop1.phinf.naver.net%2F20240118_50%2F1705570554088lxI8k_JPEG%2F106706388918781213_735035316.jpg&type=sc960_832"
-          alt="프로필 이미지"
-          width={36}
-          height={36}
-          className={styles.profileImage}
-        />
-        <div className={`${styles.formWrapperInner} ${!!activeNickname ? styles.activeFormWrapper : ''}`}>
-          {activeNickname && (
-            <div className={styles.activeReplyWrapper}>
-              <span className={styles.replyNickname}>{`@${activeNickname}님에게 남긴 답글`}</span>
-              <CancelButton className={styles.clearButton} alt="지우기 버튼" onClick={handleActiveNicknameDelete} />
-            </div>
-          )}
-          <form className={styles.formContainer}>
-            <input className={styles.formInput}></input>
-            <button className={styles.formButton}>게시</button>
-          </form>
-        </div>
-      </div>
-      <div className={styles.totalCount}>{`${COMMENTS.totalCount}개의 댓글`}</div>
-      {COMMENTS.comments.map((item) => {
-        return (
-          <div key={item.id}>
-            <Comment comment={item} onUpdate={setActiveNickname} activeNickname={activeNickname} />
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export default Comments;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Header.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Header.tsx
deleted file mode 100644
index 09b3b5b6..00000000
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Header.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client';
-import { useRouter, useParams } from 'next/navigation';
-import OpenBottomSheetButton from './OpenBottomSheetButton';
-import * as styles from './Header.css';
-import BackButton from '/public/icons/back.svg';
-import HistoryButton from '/public/icons/history.svg';
-
-function Header() {
-  const router = useRouter();
-  const params = useParams<{ userNickname: string; listId: string }>();
-
-  const handleBackButtonClick = () => {
-    router.back();
-  };
-
-  const handleHistoryButtonClick = () => {
-    router.push(`/${params?.userNickname}/${params?.listId}/history`);
-  };
-
-  return (
-    <>
-      <div className={styles.wrapper}>
-        <button className={styles.buttonResetStyle} onClick={handleBackButtonClick}>
-          <BackButton alt="뒤로 가기 버튼" />
-        </button>
-        <div className={styles.title}>리스트</div>
-        <div className={styles.headerRightWrapper}>
-          <button className={styles.buttonResetStyle} onClick={handleHistoryButtonClick}>
-            <HistoryButton alt="히스토리 버튼" />
-          </button>
-          <div className={styles.buttonResetStyle}>
-            <OpenBottomSheetButton />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default Header;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.tsx
deleted file mode 100644
index a048864e..00000000
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import Image from 'next/image';
-import { useQuery } from '@tanstack/react-query';
-import { useParams } from 'next/navigation';
-import Label from '@/components/Label/Label';
-import Collaborators from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/Collaborators';
-import { getListDetail } from '@/app/_api/list/getLists';
-import timeDiff from '@/lib/utils/timeDiff';
-import * as styles from './ListInformation.css';
-import { MOCKDATA_LIST } from '../../mockData/mockdata';
-import ListDetailInner from '../ListDetailInner';
-import { LabelType } from '@/lib/types/listType';
-
-const LIST = MOCKDATA_LIST[0];
-
-function ListInformation() {
-  const params = useParams<{ listId: string }>();
-  const { data } = useQuery({ queryKey: ['getListDetail'], queryFn: () => getListDetail(params?.listId) });
-  const list = data;
-
-  return (
-    <>
-      <div className={styles.wrapper}>
-        <div className={styles.categoryWrapper}>
-          <div className={styles.labelWrapper}>
-            <Label colorType="skyblue">음악</Label>
-          </div>
-          {list?.labels.map((item: LabelType, idx: number) => {
-            return (
-              <div className={styles.labelWrapper} key={idx.toString()}>
-                <Label colorType="blue">{`${item.name}`}</Label>
-              </div>
-            );
-          })}
-        </div>
-        <div className={styles.listTitle}>{list?.title}</div>
-        <div className={styles.listDescription}>{list?.description}</div>
-      </div>
-      <ListDetailInner data={list} />
-      <div className={styles.bottomWrapper}>
-        <div className={styles.bottomLeftWrapper}>
-          <Image
-            src={LIST.ownerProfileImageUrl}
-            alt="사용자 프로필 이미지"
-            width={36}
-            height={36}
-            className={styles.profileImage}
-          ></Image>
-          <div className={styles.informationWrapper}>
-            <div className={styles.listOwnerNickname}>{list?.ownerNickname}</div>
-            <div className={styles.infoDetailWrapper}>
-              <span>{timeDiff(list?.createdDate)}</span>
-              <span>{list?.isPublic ? '공개' : '비공개'}</span>
-            </div>
-          </div>
-        </div>
-        <div className={styles.collaboratorWrapper}>
-          <Collaborators collaborators={LIST.collaborators} />
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default ListInformation;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/OpenBottomSheetButton.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/OpenBottomSheetButton.tsx
deleted file mode 100644
index 29f03497..00000000
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/OpenBottomSheetButton.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import useBooleanOutput from '@/hooks/useBooleanOutput';
-import BottomSheet from '@/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet';
-import KebabButton from '/public/icons/vertical_kebab_button.svg';
-import * as styles from './ModalButtonStyle.css';
-
-export default function OpenBottomSheetButton({}) {
-  const { isOn, handleSetOff, handleSetOn } = useBooleanOutput(); //바텀시트 열림,닫힘 상태 관리
-  const bottomSheetOptionList = [
-    {
-      key: 'editList',
-      title: '리스트 수정하기',
-      onClick: () => {
-        handleEditClick();
-      },
-    },
-    {
-      key: 'deleteList',
-      title: '리스트 삭제하기',
-      onClick: () => {
-        handleDeleteClick();
-      },
-    },
-  ];
-
-  const handleEditClick = () => {
-    //확인버튼 클릭시 실행될 로직()
-    handleSetOff(); //닫기
-  };
-
-  const handleDeleteClick = () => {
-    //확인버튼 클릭시 실행될 로직()
-    handleSetOff(); //닫기
-  };
-
-  return (
-    <>
-      <button className={styles.resetButtonStyle} onClick={handleSetOn}>
-        <KebabButton className={styles.buttonCursor} alt="케밥 버튼" />
-      </button>
-
-      {isOn && <BottomSheet onClose={handleSetOff} optionList={bottomSheetOptionList} />}
-    </>
-  );
-}
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/PopOverMenu.css.ts b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/PopOverMenu.css.ts
deleted file mode 100644
index 7ea7c566..00000000
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/PopOverMenu.css.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const wrapper = style({
-  padding: '10px',
-
-  position: 'absolute',
-  top: '30px',
-  right: '3px',
-
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '20px',
-
-  borderRadius: '8px',
-  backgroundColor: '#ffffff',
-  boxShadow: '0 0 10px 0.8px',
-});
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/PopOverMenu.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/PopOverMenu.tsx
deleted file mode 100644
index ea06e826..00000000
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/PopOverMenu.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-'use client';
-
-import * as styles from './PopOverMenu.css';
-
-function PopOverMenu() {
-  return (
-    <div className={styles.wrapper}>
-      <button>수정하기</button>
-      <button>삭제하기</button>
-    </div>
-  );
-}
-
-export default PopOverMenu;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Replies.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Replies.tsx
deleted file mode 100644
index e2683188..00000000
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Replies.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client';
-import { useState } from 'react';
-import Image from 'next/image';
-import timeDiff from '@/lib/utils/timeDiff';
-import DeleteModalButton from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/DeleteModalButton';
-import * as styles from './Replies.css';
-import Line from '/public/icons/horizontal_line.svg';
-import { ReplyType } from '../../mockData/mockdataType';
-
-interface RepliesProps {
-  replies: ReplyType[] | null | undefined;
-}
-
-function Replies({ replies }: RepliesProps) {
-  const [showReplies, setShowReplies] = useState(false);
-
-  const handleShowReplies = () => {
-    setShowReplies((prev) => !prev);
-  };
-
-  return (
-    <>
-      {replies && !showReplies && (
-        <div className={styles.showMoreRepliesWrapper} onClick={handleShowReplies}>
-          <Line alt="답글 구분선" />
-          <div className={styles.showMoreReplies}>{`답글 ${replies?.length}개 더 보기`} </div>
-        </div>
-      )}
-      {showReplies && (
-        <ul className={styles.repliesWrapper}>
-          {replies?.map((item: ReplyType) => {
-            return (
-              <li key={item.id} className={styles.repliesOuterWrapper}>
-                <div className={styles.replyWrapper}>
-                  <Image
-                    src={item.userProfileImageUrl}
-                    className={styles.profileImage}
-                    width={20}
-                    height={20}
-                    alt="사용자 프로필 이미지"
-                  ></Image>
-                  <div className={styles.replyContainer}>
-                    <div className={styles.replyInformationWrapper}>
-                      <span className={styles.replyWriter}>{item.userNickName}</span>
-                      <span className={styles.replyCreatedTime}>{timeDiff(item.createdDate)}</span>
-                    </div>
-                    <div className={styles.replyContent}>{item.content}</div>
-                  </div>
-                </div>
-                <DeleteModalButton />
-              </li>
-            );
-          })}
-        </ul>
-      )}
-    </>
-  );
-}
-
-export default Replies;
diff --git a/src/app/[userNickname]/[listId]/mockData/mockdata.ts b/src/app/[userNickname]/[listId]/mockData/mockdata.ts
deleted file mode 100644
index ee7a4a4e..00000000
--- a/src/app/[userNickname]/[listId]/mockData/mockdata.ts
+++ /dev/null
@@ -1,515 +0,0 @@
-export const MOCKDATA_LIST = [
-  {
-    category: '음악',
-    labels: [
-      {
-        name: '세븐틴',
-      },
-      {
-        name: '음악의 신',
-      },
-      {
-        name: '최애 멤버',
-      },
-    ],
-    title: '세븐틴 최애 멤버 Top 5',
-    description:
-      '내가 좋아하는 세븐틴에서 최애 멤버 top5 내가 좋아하는 세븐틴에서 최애 멤버 top5 내가 좋아하는 세븐틴에서 최애 멤버 top5 내가 좋아하는 세븐틴에서 최애 멤버 top5',
-    createdDate: '2022-01-15T11:00:05.817Z',
-    lastUpdatedDate: '2024-01-20T13:00:05.817Z', // 가장 마지막에 저장된 히스토리의 날짜
-    ownerId: 'tarea202001@gmail.com',
-    ownerNickname: 'nabongee',
-    ownerProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg',
-    collaborators: [
-      // Nullable
-      {
-        id: 1,
-        nickname: '현지',
-        profileImageUrl: null,
-      },
-      {
-        id: 2,
-        nickname: '도우너',
-        profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg',
-      },
-      {
-        id: 3,
-        nickname: '또치',
-        profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg',
-      },
-      {
-        id: 4,
-        nickname: 'Samuel',
-        profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg',
-      },
-      {
-        id: 5,
-        nickname: 'Clark',
-        profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg',
-      },
-      {
-        id: 6,
-        nickname: '나봉이',
-        profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg',
-      },
-      {
-        id: 7,
-        nickname: '미니언',
-        profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg',
-      },
-    ],
-    items: [
-      {
-        id: 1,
-        rank: 1,
-        title: '전원우',
-        comment: '전원우 존잘임', // Nullable
-        link: null, // Nullable
-        imageUrl:
-          'https://yt3.googleusercontent.com/AmdlIs_zKRbg1LUzyDC2aQu9UHklGlWibXNVolKlgseHaCKEOLDESXNwYX0hQp2lSGJoQDBN=s900-c-k-c0x00ffffff-no-rj', // Nullable
-      },
-      {
-        id: 2,
-        rank: 2,
-        title: '호시',
-        comment: '작은 아기 호랑이',
-        link: null,
-        imageUrl: 'https://image.bugsm.co.kr/artist/images/1000/802323/80232314.jpg',
-      },
-      {
-        id: 3,
-        rank: 3,
-        title: '부승관',
-        comment: 'boo',
-        link: null,
-        imageUrl:
-          'https://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2023/10/10/33d10ea7-d2c4-4260-8381-cbf644c9972e.jpg',
-      },
-      {
-        id: 4,
-        rank: 4,
-        title: '정한',
-        comment: '남신',
-        link: null,
-        imageUrl: 'https://news.kbs.co.kr/data/news/2022/04/13/20220413_c85vo7.jpg',
-      },
-      {
-        id: 5,
-        rank: 5,
-        title: '디에잇',
-        comment: '웃김',
-        link: null,
-        imageUrl:
-          'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBIVEhgSEhIYGBgZGRgYGhgYGBISGBgYGRgZGRgYGBgcIS4lHB4rHxgYJjgmKy8xNTU1GiQ9QDs0Py40NTEBDAwMEA8QHhISHjQrJSsxNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ1NDQxNDQ0NDQ0NDQxNTQ0NDQ0NDQ0NDQ0NDQ0NP/AABEIAPoAygMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAAAQIDBAYHBQj/xAA+EAACAQIEAwUFBgUCBwEAAAABAgADEQQSITEFQWEGIlFxkRMygaGxBxQjQlLBM2Jy0fAV8SSCkqKywuE1/8QAGAEBAQEBAQAAAAAAAAAAAAAAAAECAwT/xAAiEQEBAAICAgICAwAAAAAAAAAAAQIRITESQQNREzIiYXH/2gAMAwEAAhEDEQA/AOswhCAQhCAsIx6iqLk2nhcU7TLTH4dMudjc5LdTp9bSXKTtqY29NBCcs4j23xdyC6INDankvl6s2YfEHltPB4l2txVQWOKIH6UcAW6kKCZj8k9Rv8V912ypiEXRnAPhcX9Iw4jwDf8AS0+e34tUvcV3W+5Wo6k+AuuvzjnxYNi+IqtcaKar32tdiSfprHnfo/H/AG+gmxSj3jl6nT1j0ro3usD5G/0nAsFxynSYMxLleVzYnXn+/QTRcF+0JjUvWQ5BcnKdbk6WB3A00lmV+kuEnt16E8LhfafCVgvs6oztsjdx/Ox5T3EcHYg+Ws1LtizR1PeTyFN5NKghCEAhCEAhCEAhCEAhCECCEIhMALWnl4rjNMN7NGDPzAOiDxYj6TJ8e7b4X2jUi5yLcMVYrnI/Jddct/DfynhpxfE4pv8Ah6NJEOmU1KNMMddWzDMT8OUxbb03jJOa1uM4ogJDP3m90ZhmO2mUm4HwPlOf8bNfNmNW4vYixJHkHFgd9QBPX4jwvFKrEUQ5KixGIoNZtQy2yA2tqLH0mG4m9em1mp1EuNQ1yPIG2o21vM6rp5Y6VsXTa/eLHze3ylRqJ6D43MX7yb3vr/MJE199D8bzU2xbKAnix8oxiOX1iMx5xs1pjaRT5SZSSPeHx0+krXheNG0+Z1N1Y30N1J+BBnSew32gMHGHxr3U2CVSDmU8g/6lPjuOs5kjWnqYSsrd1lXo5UllPQgwPpHAYynVUPTdWB5qQw031EvTjHYHC1FxFvaFSCjZffSrSZshYajUFh5TsyLYWiFhYQhKghCEAhCEAhCEAhCECCY77TuLth8AwRsr1GFMEaGx1e3gcoM2M599suHzYFKn6KyH4Mrp9WEUcVeqTzkbNm0O0VxGQL+E4tUpqUS2U6WIBOm1juPK9otTidRzdmv8x48558noYV391SZLJ7alvpI9fN7w/f6yBrchPQqcJqKLsOsrnCtJLFsy9q3xiGKVtEIlYJAQiygEnRgNRf6H5SFTJqY8CPjA2nY7jIWvS9pUsqMCGYr3QSLg31Kmw9J3pWBFxsdR5T5cw5sdCMw63t4a8xOs/Z12orVR93YA5BpmvcDwFtx05fKFdLhG0gbd469NBHQghCEAhCEAhCEAhCECCeB204d94whpa2Y62udgSDYa6ED5z35WxznKQoBY7X92/wC8D5gxeHZHZGFipII6g2MrTofbzh9IVCcqK5uLU2O41OcHncj/AATLcA4OcRXFO2gPePSS3SybujOC8FqVjfKcvj4+U3/DuAqigeE0OD4ciKFAGktCmJxyyuT14Y44vBxPB1cbajUefXpM1juD5HzKpKnQjmPhz5+nr0PLKePwtwSBMzhq6vbknGcBkcZdQwJHw/8Alp5RWbXtWqLUULYkBjYW0uBvMymFqO11TQm3S87S8PPnjPLh5xWIBNH/AKA5HInpeV6vZ+qNlMTKMX48vp4sct5PiMK6+8pEgTea2zZppezfABWBr1u5SXUm5GYDfbWdC7I0sPTrpWw4ZEqfh1Ecn37/AIbrcm1yCu/5gOcy/Z7iNNlpU6jWADMyW0Z72W58ANfjNFikHsqppmwam7r/ACvSIcEfEIR5Tj5WZPXPixuHHenUhHStga+emj/qRW88yg3HrLM7vGIQhAbCOhAbCOhAbCOjYEE8LtU9QUrU1fW4ugzPe3ugDXUX1nuyLE0c6EA2NjY72NoHz9xvj4YGlTpgWY3dr5yRob7HlsxM0n2cYYGm9Xnmy39DPG7dcNqffKhKBABoALZgq3Lbnc35/Se79l9YHD1E5q9z5MosfUH0mMunT47/ACbRhEAklpE7CcnpBcCZHtH2jqX9hhveOjP4dF/vNLiNVIB5TMrw7KzM2p1+sb0vjtncLw85/wAXWy316sACfHY+ktUMXTRmvbLqADbaTY5nNT2dIAu6nfQKq33Pxmd4ZSf29qmHZwEKsrggK5W2YW5Btt9PlZLZusWzG6k3Wt4bj0qNZNevKaD7qDrbX/LTzOzHCfZrcjX/ADaaNUtOd74dfXLzMXwKlVUh0F7b2nNeP8AfDVNQch1U9Oc7Iqyhx3hy1aJBW5XXzGzD0vOmNsccsZXL6FNkdM41OgGhB2PLxDA3HjN9hXBW2wKVtN7AoBb5GY8cPIZKVQt+G7FCN2Rgvdv/AMq2PnPa4viRhsJVqmytUQ06a88zjKzD+lcx+HWS82OmF8cLa6J9n3F0xPDqDr7yIKbj9LoAD8CLEdDNPPnf7NO1H3LFBahPsKtkqC+iG9kqW6bHoT4CfQwM9DwnQhCAQhCAQhCAQhCBWiwhAzfanswmJUugXPzzbMLWIvyNtj4gTnPZql9z4iaBuFqg0yGGVkqJ3kDDbW7AEb5gZ2ueF2n7PJi6akWWqhDU31BBGwJGtr69DrJZuLjdXbI9pu0yUPw6Yzvz8FPU+PSZjCcTxbtndyByUCaReyxQmpXBLsSSCbgG+p8DrzlPi3EaGGQ90swF8qi5tewJ5KL6XM45fUj149eVvC7geIZjlY6y9xChZQw57zFYDjq1qrUyg0JAdDmBsbAjQXB8Z0FEL0BfcTNldJlLzGXbg1T2orUnAOW3Xe/PT5T1MLwpy2eqxJlqm2Uz0KLA6xLsvHJaOHCiwERxrLF9JWdtYrBVaTJqJWkqPLKljxuMcOC/jIBmQWtbcEi3pM1xrhFTE0mLHvjVb/TpN1jWBRgeYMzlHEAAgzNuruNT+U1XI3QoxVhYg2IPiJ2P7K+2VSoowOIUsaa3SqAWCougWoeVtlPPblc5DjXAHxNdfu699jZ+SgfrY8rTpPZvgVPB0BSTU+87nQu/MnpyA5Cd8ctzbyZY+N001XiJ2QfE7+kdhqzNux+QnniORrS7Z09XNb8xPoYpd/yg/GVqdc20EDVbxjaLOep4D5RRVb8yH6ynnbxjkxBjYvqwOojpXpOTqPn/AHk2bpNCGEIQFhCIYFfG4YOpHPl/ac0Th9RHxIqUVqiodM2g0voQd1sRp4zqc8ji+GF84G+/nMZS9x1+Oz9awfBOBJTN/Zqut8ova/mdTNXhRuvjGLTtFD5SCJx98vRfqPNx1MqZVXGtTOZrlOfTr5S7xTFoouwsR/m0zWG4hiKwYewCIRZSzXY8tVA09ZNcukvHLZpVuJE51lbCnKqrvYAX8haSs0VnSVIpMhR4530kZsVsdVspmP4ZUapUZFFyXKgfGe9xzFZKbueQPryifZpw38M4lxqxYL694/t6zWM2mWXi1HCuEpRXTVj7zePQdJ6ATrJGhadZw81tt3Uap6SbIInSKxliHA2iocxt85WW5PSTqtog9FEUbepjXzeIt1lJ6thdmsOptK331Tol26jb1i5SJqvVzn9SxM5/UPWUVcnfSSXHjGzS5CELzaFjYQgLGVaYZSp2MdFg2zuKwzISDKDk30msr0Q4sfgfCeFjcIVO045Y66ejD5N8Vnsdwcu/tDUcjQ5MzFfhfYdJWr1BS0JyjcD62ntuxAPkZzvjWOqPVFGihZ9SzclEzJt6cL9vcrdokTlf5H0lzhXEalYFmp5V/L4n4TN8O4OEHtKxuxPmTNLgH7v7SXTdx1N16IaI7yPNIaz6Tm5sz2wxJYJSTUsdhudbKPiTOm8FwIoYenSH5EAPU8z63nOeBYc4niSMfdQlz5Jov/cVnVBO+M1Hm+S7pDvHDxiARXmnMiC5jilzaLTvHuL+c1IzajYhYwZm20Ec9IHcn5R46Ro2bQ4fTY3qKXP8xJHptPRXDINkX0lNGIMte0XxiSGzilMflHpEzL+kegjDUHJo32h6fKVDzEimJKhYRIsAhCEBZHWpBxZv9pJCFZ/H8OYA6XB5zM0uAU1VtCCTcnmfOdGlPEcOpvt3T029Ji4fTvh81xc6bh1m1JP1/wBpdpUwJ72M4Q662v1Gv+08tsI5NgpPkDOVxsd58ky52rM08ziLnKQNz9JruH9nmc5qt1X9P5j/AGE8rjfAXpsSoLIdj+x8JPCybqeeNuoi7A4EKtSqRqzBAeii5t8W+U2IlLhGF9nRRLagXP8AUdT8zLd9Z0nTy53dPSNeSbCIg1vKh4W0DE6naIXB1F7deflNbTRzRl4itGuZQ8tENXlIw0YTCK2LxzUzmKlk8V1I8x+8X/Vk8T6GSVkupE8r7v1PzmdVeGvaJAwm2RFiRYBCEIURYkWAQhCARYkICxcoykkXFtjziKLm0MU3dtFHmtEprHNHBbCc2yNHAWEFXnHZbyxDQmbVthsPHqYp115D/NIMbmw/wSvi6xAIXSw1PICTo7NdwG3/AHkhEpYIk0wWuL3IBsWsds1+Z36S2j3A0t0+k1LubSm3iFYNvEDSoUyv7MScmJcQPWixIsqCEIQFhCEKIQhAWEIQCEICBImgvKuIbWWnGwlSrqZnKrEKDnA3vJLWFo0DWNKcIjm2kcdNZGguZEFrL1MqugZRfYm566ybGvZSekq16gp0AWPuoCfS5kveljwG4mo4mylhlWmENyAA3vnfQmxA+M9XBcVpViRSdHANmKPTqBTyvlJN9CJxzivEcxLse87M5v8Azm6g+S5ROg9jOOPiaNjRCuGIzImRMo2YnQC21tSbDx0uJlGtMRTF6+MbNMhzE+HyiExuvjA9yLEhKhYQhAWEbWYqubKW6LYmMw2IRxmQ38RsR5iBLCEIUsIkWARU3ESKp1gSVmsJWZbC5+A/eSZyWF+WsjdrmZyVEdo5BzjssjZoga7R1MWF/GRqLmTVDYSCnXGY5fE2mY+0THZMP7MGxqMEHk3vH4LmmqpjvFvDb4zmP2i4u+JRL6Irt/zGyj5Xmas7c84hVz1j4XnRuwvGkUU8CtNs75iWGXJaxdibnVtCNRbbUazmdMZqvx/ee72fx/s8dTqM+RQ9mIBNkYEMLDXY8pro7doweJD5wPyuVJ5ZhqwU/msTYkaXuORkrGV0xAumSmwVl0JGQKotYZT3s38oGgBJtpLDzTJGhniXuIuX/NYHtxYkJULI8SzCm5QXYKxUeLWNh6ySEDneC+0MU6QFQEvqGB3W2+njewt/aQ8Lw2MdzjlreyLnMKQL1O6dvaEkA38AABLfb3sSa7DFYVRnB/EQaZx+pf5h4c/PeXsvSd8P3AyV6Ry1KT57tpdWGZRYka2Fx5TUG4w7sUBYANYXANxfoeYj54HDOI201y3syHRlPOwP0nuo4YBlNwdjJYHQhCQLCJFhSqL7RmWTUo5pmzYq1W5SsxktSRSWrElFeca51kqi0iIlvQa+i/OcV7bV82Lc35ATsuPeynoJw/tSf+Ifr/czGXcjU6ZvBfxL+Z/eTUW7999fWQYU2qH+k/2/eS0N5qpHaOAu1SmlRagdmH4j/lpCw/Bop7qWB1PhqdwJ7VN1ZQym45HkeomB7BcRYt90zWVyWHI3A7yr1ay68gptvN1Rc3K2FhaxGxtuAOSjS3j4DmlMomQayW3WRqJayTTL0ITy8LWxmUE00tlXuuwL3sL5mWwve/KWP9Qdf4mGdeqWcfsZrSLsJBh8dRc2SoM36Wujf9LWMslDJoNlHH8PLMKtJ8lZRZXtdWW98lRfzL8xfS0vwgZbF42i72qMuHxQ3R2AV+QIbZ1PJx5EaEC5ws56ec1PZq2u6gsR+Zb7efOWOP8AAaOLp+zqggjVHWwdG8VPh0ngJicPVK8NqOEr0kprSe9lqDIpyHwbp6cxNbHuY3ioRc6uWUjulchUkGx1+IjOG9oEY5Kv4b7hXt3l5OjDusPmDvMbj/aU6jU6gtlI7mXTL46iz3uNjvaFT2bLap30BDAHMXRgLl1a1xtYjY2N5nx53t0mc8dWT/fbpoN9RCct4HxPHYfiNOhUs9Gu2RKgNXIAoZyFQkhHstiDfQ6EjWdShzTU9pFUePY2FpA0zVRNEQaxWgNpFOB3jU3vFTnEY2EChj2uDOKdrBauT4j9zOzY1u6x6TjfbL+OR4C37/vMX9m50zND3z/SfqJLS3kdP3z5GPTebrMe3wTiPsKoqZc2UNpmane6ldWGoGs6/SNrPe97AZQQgW2uUalr+J6bc+GBvofpOw9kuKUHwlCnROd0poHBLAI2XvF9LA3zWG59SGJk0y04t4qPmUGLNMr8UGJCVEeIw1Nxaoit5gX9ZXTDVKZBpVWKgi6P3lI5hW3WXYQJ6qSFdduUz/E2xgzKjgJc5WtdgDy8+s8ijxerQplqKVMRWd/Z94fhqUbLrlJtYkj1l0bbe04H25e+NrG9rPlHiMgCj/xnRKHavDNjDTrV2w7K1mo4gezJa1vfPcIvbUHXTlOQ8WxLVKj1GYEs7FrG9mZidfXyjRF6v23xrIlOqyVPZ3CO6hnIItZmv3tPj1Mdh+2VQEl8PSchbJ/EAVhsWGbvjxHOZdt4gjaugdg+NVa2OJrszUsuYoqkKhaolNGVV1Cqag1J0W9zO4pvPnr7O+IGhi2dSAxpMq32Jz0yQehCkTu3BuJU8TTFWmeZVhzVx7yn/Oca42ntdqtrIiY6rvIiZzaNJkji2nhG0hdh6+msUnWAqbyLEHlJkHPwlervLeh52L920452w/jt5n9p2bFDQ+U4x2s/ik/zN9Zyv7RudVmkPf8AX6SUSAnvDzkpM6MxK50J6Tof2RPeniadrkMjW/qVh/6zmVSrfQbTY/ZXiimMdSyhHp2a+jEh1CKpvuSxlkS12PC16bF6aVEdkIDqrKxQkXCsBtprrLFpTwC5ARkRASbKo115t4mWc0qL0IRZUEIQgErjBUwTlULdizAbMTuSOR56WliEDMdo8ChsKmEXEI5sFyMzjTa+Ugc7ElR1nLu3/BaWCrp7BciOhuLs1zmIIsxOlradJ3mci+2Qfwf6n/aUcxdeY0Hr6SMTRdm6KmjjMyg2ogi4Bsc41HhPFoKM20ivZ4D2ex9RGxOFoMwQqFNrCoWbIQl9HAPva2AvO69l+CJgqGU2NR7NUYbZre6v8q7Dx35zyvsr/wDzl6O9unemnx/umTK8LO1Ktju90llWBAINwZ4daejwf+G39R+gmMa6ZYzT0cONCfhGSUe5I5quaQDu+crOJbqcvISu8lHm8QayMfAH6TjnapLZG/Vm/adg43/BfyM5X2y/h0PJ/wBpzv7R0x6YWqdYtR76Qrbxs7RzJLvB8c1CvTqq5TK6ksoBYJcB7XG+XMPjKkQyo+hsLxJKyrUw4DIyhs7Zt2tlRRuSB73gbDe9vTzTGfZaxPD2ub2qhRfWy2Gg6anTrNZIP//Zg',
-      },
-    ],
-    isCollected: true,
-    isPublic: false,
-    backgroundColor: null,
-    collectCount: 34,
-    viewCount: 24,
-  },
-  {
-    category: '장소',
-    labels: [
-      {
-        name: '서울',
-      },
-      {
-        name: '카페',
-      },
-      {
-        name: '디저트',
-      },
-    ],
-    title: '맛있는 을지로 카페 Top5',
-    description: '커피가 맛있는 서울 카페들',
-    createdDate: '2024-01-16T13:00:05.817Z',
-    lastUpdatedDate: '2024-01-23T13:00:05.817Z', // 가장 마지막에 저장된 히스토리의 날짜
-    ownerId: 'tarea202001@gmail.com',
-    ownerNickname: 'nabongee',
-    ownerProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg',
-    collaborators: null,
-    items: [
-      {
-        id: 1,
-        rank: 1,
-        title: '이프프커피',
-        comment: '을지로 크림카페, 티라미수 맛집', // Nullable
-        link: 'https://map.naver.com/p/search/%EC%9D%84%EC%A7%80%EB%A1%9C%20%EC%B9%B4%ED%8E%98/place/1113055605?c=15.00,0,0,0,dh&placePath=%3Fentry%3Dbmp', // Nullable
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20240125_142%2F1706170547004iEWpa_JPEG%2F%25BF%25A1%25BD%25BA%25C7%25C1%25B7%25B9%25BC%25D2_%25BA%25B9%25BB%25E7%25BA%25BB.jpg', // Nullable
-      },
-      {
-        id: 2,
-        rank: 2,
-        title: '을지로 문덕 커피',
-        comment: '촙촙 바로 옆 건물 골목길 초입',
-        link: 'https://map.naver.com/p/search/%EC%9D%84%EC%A7%80%EB%A1%9C%20%EC%B9%B4%ED%8E%98/place/1046777005?c=15.00,0,0,0,dh&placePath=%3Fentry%3Dbmp',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20220322_105%2F1647938541721kvaqf_JPEG%2FIMG_20220320_181609_849.jpg',
-      },
-      {
-        id: 3,
-        rank: 3,
-        title: '보잉',
-        comment: '공항 컨셉 카페',
-        link: 'https://m.place.naver.com/share?id=1055469623&tabsPath=%2Fhome&appMode=detail',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20240123_153%2F1705941421630Jj4f6_JPEG%2FIMG_3251.jpeg',
-      },
-      {
-        id: 4,
-        rank: 4,
-        title: '공간갑',
-        comment: '공간이 갑이에요',
-        link: 'https://m.place.naver.com/share?id=1053282197&tabsPath=%2Fhome&appMode=detail',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20210820_184%2F1629432280312yxh2Q_JPEG%2FUuWYISVR47gu08_pqiflKOPd.jpg',
-      },
-      {
-        id: 5,
-        rank: 5,
-        title: '커피한약방',
-        comment: '허준 선생님의 혜민서를 개조한 카페',
-        link: 'https://naver.me/IIqf14Bp',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fpup-review-phinf.pstatic.net%2FMjAyNDAxMjZfMTY0%2FMDAxNzA2MjM4NDU4NjU1.wUX3yX7JmXR1p9WgkkVfRHL4_KLEBbl25r3p3kLmKgkg.F8nRZinwmV_VxMXWbZ2MPcZPpcLzUxurYOTQrn6SFdgg.JPEG%2F763BC882-BB25-4788-809B-DBAED88B1652.jpeg',
-      },
-    ],
-    isCollected: false,
-    isPublic: true,
-    backgroundColor: null,
-    collectCount: 10,
-    viewCount: 55,
-  },
-  {
-    category: '음악',
-    labels: [
-      {
-        name: '세븐틴',
-      },
-      {
-        name: '음악의 신',
-      },
-      {
-        name: '최애 멤버',
-      },
-    ],
-    title: '세븐틴 최애 멤버 Top 5',
-    description: '세븐틴에서 최애 멤버 top5',
-    createdDate: '2024-01-15T13:00:05.817Z',
-    lastUpdatedDate: '2024-01-20T13:00:05.817Z', // 가장 마지막에 저장된 히스토리의 날짜
-    ownerId: 'tarea202001@gmail.com',
-    ownerNickname: 'nabongee',
-    ownerProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg',
-    collaborators: [
-      // Nullable
-      {
-        id: 1,
-        nickname: '현지',
-        profileImageUrl: 'https://cdn.pixabay.com/photo/2023/07/16/12/32/cat-8130611_640.jpg',
-      },
-    ],
-    items: [
-      {
-        id: 1,
-        rank: 1,
-        title: '전원우',
-        comment: '전원우 존잘임', // Nullable
-        link: null, // Nullable
-        imageUrl:
-          'https://yt3.googleusercontent.com/AmdlIs_zKRbg1LUzyDC2aQu9UHklGlWibXNVolKlgseHaCKEOLDESXNwYX0hQp2lSGJoQDBN=s900-c-k-c0x00ffffff-no-rj', // Nullable
-      },
-      {
-        id: 2,
-        rank: 2,
-        title: '호시',
-        comment: '작은 아기 호랑이',
-        link: null,
-        imageUrl: 'https://image.bugsm.co.kr/artist/images/1000/802323/80232314.jpg',
-      },
-      {
-        id: 3,
-        rank: 3,
-        title: '부승관',
-        comment: 'boo',
-        link: null,
-        imageUrl:
-          'https://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2023/10/10/33d10ea7-d2c4-4260-8381-cbf644c9972e.jpg',
-      },
-      {
-        id: 4,
-        rank: 4,
-        title: '정한',
-        comment: '남신',
-        link: null,
-        imageUrl: 'https://news.kbs.co.kr/data/news/2022/04/13/20220413_c85vo7.jpg',
-      },
-      {
-        id: 5,
-        rank: 5,
-        title: '디에잇',
-        comment: '웃김',
-        link: null,
-        imageUrl:
-          'data:image/jpeg;base64,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',
-      },
-    ],
-    isCollected: false,
-  },
-  {
-    category: '장소',
-    labels: [
-      {
-        name: '서울',
-      },
-      {
-        name: '카페',
-      },
-      {
-        name: '디저트',
-      },
-    ],
-    title: '맛있는 을지로 카페 Top5',
-    description: '커피가 맛있는 서울 카페들',
-    createdDate: '2024-01-16T13:00:05.817Z',
-    lastUpdatedDate: '2024-01-23T13:00:05.817Z', // 가장 마지막에 저장된 히스토리의 날짜
-    ownerId: 'tarea202001@gmail.com',
-    ownerNickname: 'nabongee',
-    ownerProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg',
-    collaborators: null,
-    items: [
-      {
-        id: 1,
-        rank: 1,
-        title: '이프프커피',
-        comment: '을지로 크림카페, 티라미수 맛집', // Nullable
-        link: 'https://map.naver.com/p/search/%EC%9D%84%EC%A7%80%EB%A1%9C%20%EC%B9%B4%ED%8E%98/place/1113055605?c=15.00,0,0,0,dh&placePath=%3Fentry%3Dbmp', // Nullable
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20240125_142%2F1706170547004iEWpa_JPEG%2F%25BF%25A1%25BD%25BA%25C7%25C1%25B7%25B9%25BC%25D2_%25BA%25B9%25BB%25E7%25BA%25BB.jpg', // Nullable
-      },
-      {
-        id: 2,
-        rank: 2,
-        title: '을지로 문덕 커피',
-        comment: '촙촙 바로 옆 건물 골목길 초입',
-        link: 'https://map.naver.com/p/search/%EC%9D%84%EC%A7%80%EB%A1%9C%20%EC%B9%B4%ED%8E%98/place/1046777005?c=15.00,0,0,0,dh&placePath=%3Fentry%3Dbmp',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20220322_105%2F1647938541721kvaqf_JPEG%2FIMG_20220320_181609_849.jpg',
-      },
-      {
-        id: 3,
-        rank: 3,
-        title: '보잉',
-        comment: '공항 컨셉 카페',
-        link: 'https://m.place.naver.com/share?id=1055469623&tabsPath=%2Fhome&appMode=detail',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20240123_153%2F1705941421630Jj4f6_JPEG%2FIMG_3251.jpeg',
-      },
-      {
-        id: 4,
-        rank: 4,
-        title: '공간갑',
-        comment: '공간이 갑이에요',
-        link: 'https://m.place.naver.com/share?id=1053282197&tabsPath=%2Fhome&appMode=detail',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20210820_184%2F1629432280312yxh2Q_JPEG%2FUuWYISVR47gu08_pqiflKOPd.jpg',
-      },
-      {
-        id: 5,
-        rank: 5,
-        title: '커피한약방',
-        comment: '허준 선생님의 혜민서를 개조한 카페',
-        link: 'https://naver.me/IIqf14Bp',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fpup-review-phinf.pstatic.net%2FMjAyNDAxMjZfMTY0%2FMDAxNzA2MjM4NDU4NjU1.wUX3yX7JmXR1p9WgkkVfRHL4_KLEBbl25r3p3kLmKgkg.F8nRZinwmV_VxMXWbZ2MPcZPpcLzUxurYOTQrn6SFdgg.JPEG%2F763BC882-BB25-4788-809B-DBAED88B1652.jpeg',
-      },
-    ],
-    isCollected: false,
-  },
-  {
-    category: '장소',
-    labels: [
-      {
-        name: '청라',
-      },
-      {
-        name: '맛집',
-      },
-    ],
-    title: '호주에서 갓 귀국한 내가 가고싶은 청라 맛집 Top 7',
-    description: '청라에서 제일 가고싶은 맛집 순위',
-    createdDate: '2024-01-15T13:00:05.817Z',
-    lastUpdatedDate: '2024-01-20T13:00:05.817Z', // 가장 마지막에 저장된 히스토리의 날짜
-    ownerId: '',
-    ownerNickname: 'minchi',
-    ownerProfileImageUrl: 'https://www.ynow.co.kr/data/photos/20230728/art_16894886847033_93d9b7.png',
-    collaborators: [
-      // Nullable
-      {
-        id: 1,
-        nickname: 'nabongee',
-        profileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg',
-      },
-    ],
-    items: [
-      {
-        id: 1,
-        rank: 1,
-        title: '우리동네쭈꾸미',
-        comment: '쭈꾸미 존맛', // Nullable
-        link: 'https://naver.me/Gi9EzhJA', // Nullable
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20180326_180%2F1522025612368rCHNT_JPEG%2FtR5PurBnequRELzopz7GEM1Z.jpg', // Nullable
-      },
-      {
-        id: 2,
-        rank: 2,
-        title: '명태어장',
-        comment: '명태 존맛집',
-        link: 'https://naver.me/GJrF376V',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20171107_168%2F1510060558275xNH3k_JPEG%2F_6kwBr6aasuwJKu7m1QGzdvO.jpg',
-      },
-      {
-        id: 3,
-        rank: 3,
-        title: '한촌설렁탕',
-        comment: '설렁탕 맛집',
-        link: 'https://naver.me/FzH4YkvZ',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20211118_275%2F16372277273592SGLC_JPEG%2FKakaoTalk_20211118_182752353_01.jpg',
-      },
-      {
-        id: 4,
-        rank: 4,
-        title: '양양입암막국수',
-        comment: '막국수 존맛집',
-        link: 'https://naver.me/FiLOFLrN',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20190617_242%2F1560762962654Ezyom_JPEG%2F6dB5oiAUzHvqsq3j5aDWiG4p.jpg',
-      },
-      {
-        id: 5,
-        rank: 5,
-        title: '진천토종순대국',
-        comment: '순대국 존맛집',
-        link: 'https://naver.me/F9QppBBM',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20180904_125%2F1536063146640tTQ9B_JPEG%2Fopi3rrEu2yGDbmLTLAjE451c.jpg',
-      },
-      {
-        id: 6,
-        rank: 6,
-        title: '우리할매떡볶이',
-        comment: '떡볶이는 여기서만 먹어',
-        link: 'https://naver.me/x50vcmB9',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20210517_241%2F16212167904568orwP_JPEG%2FAT_ddo48d0TcgCi1tyyp_sQb.jpg',
-      },
-      {
-        id: 7,
-        rank: 7,
-        title: '신간짬뽕',
-        comment: '간짬뽕 존맛탱',
-        link: 'https://naver.me/GWozhL8h',
-        imageUrl:
-          'https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20220218_274%2F1645146029164uJlrY_JPEG%2FKakaoTalk_20220218_091621489.jpg',
-      },
-    ],
-    isCollected: true,
-  },
-];
-
-export const MOCKDATA_COMMENTS = [
-  {
-    totalCount: 2,
-    comments: [
-      {
-        id: 1,
-        userId: 24,
-        userName: '전원우 아내',
-        userProfileImageUrl: 'https://img.hankyung.com/photo/202006/03.22990548.1.jpg',
-        createdDate: '2024-01-25T06:50:12.962Z',
-        content: '전원우 고앵이!',
-        replies: [
-          {
-            id: 3,
-            userId: 5,
-            userNickName: '나현',
-            userProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg',
-            createdDate: '2024-01-25T18:50:12.962Z',
-            content: '애기 고양이',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    totalCount: 5,
-    comments: [
-      {
-        id: 2,
-        userId: 36,
-        userName: '승화',
-        userProfileImageUrl:
-          'https://yt3.googleusercontent.com/mFpxH8XLL_uupbtB1U489iAss84q-Phzdz9hZBZcxtQvlKH292PdCwtfd6Lf6YwCQHbtjvhSCXY=s900-c-k-c0x00ffffff-no-rj',
-        createdDate: '2024-01-24T06:50:12.962Z',
-        content: '여기 저도 너무 좋아하는 곳들이에요~~',
-        replies: [
-          {
-            id: 3,
-            userId: 5,
-            userNickName: '나현',
-            userProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg',
-            createdDate: '2024-01-25T18:50:12.962Z',
-            content: '매니저님~ 혹시 여기 말고 또 추천해주실 카페 있으신가요?~',
-          },
-          {
-            id: 4,
-            userId: 36,
-            userNickName: '승화',
-            userProfileImageUrl:
-              'https://yt3.googleusercontent.com/mFpxH8XLL_uupbtB1U489iAss84q-Phzdz9hZBZcxtQvlKH292PdCwtfd6Lf6YwCQHbtjvhSCXY=s900-c-k-c0x00ffffff-no-rj',
-            createdDate: '2024-01-26T18:50:12.962Z',
-            content: '물론이죠~ 00이라는 카페에 가보세요!!',
-          },
-        ],
-      },
-      {
-        id: 5,
-        userId: 37,
-        userName: '유진',
-        userProfileImageUrl:
-          'https://yt3.googleusercontent.com/mFpxH8XLL_uupbtB1U489iAss84q-Phzdz9hZBZcxtQvlKH292PdCwtfd6Lf6YwCQHbtjvhSCXY=s900-c-k-c0x00ffffff-no-rj',
-        createdDate: '2024-01-25T06:50:12.962Z',
-        content: '저 더 맛있는 데 알고 있어요~~',
-        replies: [
-          {
-            id: 3,
-            userId: 5,
-            userNickName: '나현',
-            userProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg',
-            createdDate: '2024-01-25T18:50:12.962Z',
-            content: '어디에요 당장 공유해주세요',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    totalCount: 1,
-    comments: [
-      {
-        id: 2,
-        userId: 36,
-        userName: '나현',
-        userProfileImageUrl: 'https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg',
-        createdDate: '2024-01-24T06:50:12.962Z',
-        content: '털기 성공??',
-        replies: null,
-      },
-    ],
-  },
-];
diff --git a/src/app/[userNickname]/[listId]/mockData/mockdataType.ts b/src/app/[userNickname]/[listId]/mockData/mockdataType.ts
deleted file mode 100644
index 7c989b6d..00000000
--- a/src/app/[userNickname]/[listId]/mockData/mockdataType.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export interface RepliesType {
-  id: number;
-  userId: number;
-  userNickName: string;
-  userProfileImageUrl: string;
-  createdDate: string;
-  content: string;
-}
-
-export interface ReplyType {
-  id: number;
-  userId: number;
-  userNickName: string;
-  userProfileImageUrl: string;
-  createdDate: string;
-  content: string;
-}
-
-export interface CommentType {
-  id: number;
-  userId: number;
-  userName: string;
-  userProfileImageUrl: string;
-  createdDate: string;
-  content: string;
-  replies: RepliesType[] | null;
-}
-
-export interface CollaboratorType {
-  id?: number;
-  nickname: string;
-  profileImageUrl: string | null;
-}
diff --git a/src/app/[userNickname]/[listId]/page.tsx b/src/app/[userNickname]/[listId]/page.tsx
deleted file mode 100644
index e499e160..00000000
--- a/src/app/[userNickname]/[listId]/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-'use client';
-import * as styles from './ListDetail.css';
-import Comments from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/Comments';
-import Header from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/Header';
-import ListInformation from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation';
-
-export default function ListDetail() {
-  return (
-    <div className={styles.wrapper}>
-      <Header />
-      <ListInformation />
-      <Comments />
-    </div>
-  );
-}
diff --git a/src/app/_api/comment/createComment.ts b/src/app/_api/comment/createComment.ts
index 5e900d00..9c1bdcb3 100644
--- a/src/app/_api/comment/createComment.ts
+++ b/src/app/_api/comment/createComment.ts
@@ -1,8 +1,20 @@
 import axiosInstance from '@/lib/axios/axiosInstance';
-import { ListCreateType, ListIdType } from '@/lib/types/listType';
-
-export const createList = async (listId: string, data: string) => {
-  const response = await axiosInstance.post<ListIdType>(`/lists/${listId}/comment`, data);
+import { CreateCommentType } from '@/lib/types/commentType';
+import { ListIdType } from '@/lib/types/listType';
 
+async function createComment({ listId, comment }: CreateCommentType) {
+  const response = await axiosInstance.post<ListIdType>(
+    `/lists/${listId}/comments`,
+    {
+      content: comment,
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  );
   return response.data;
-};
+}
+
+export default createComment;
diff --git a/src/app/_api/comment/createReply.ts b/src/app/_api/comment/createReply.ts
index e69de29b..ca0f7734 100644
--- a/src/app/_api/comment/createReply.ts
+++ b/src/app/_api/comment/createReply.ts
@@ -0,0 +1,29 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+interface CreateReplyType {
+  listId: number | undefined;
+  commentId: number | undefined | null;
+  data: string;
+}
+
+async function createReply({ listId, commentId, data }: CreateReplyType) {
+  if (commentId === null) {
+    return;
+  }
+
+  const response = await axiosInstance.post(
+    `/lists/${listId}/comments/${commentId}/replies`,
+    {
+      content: data,
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  );
+
+  return response.data;
+}
+
+export default createReply;
diff --git a/src/app/_api/comment/deleteComment.ts b/src/app/_api/comment/deleteComment.ts
index e69de29b..17d992c8 100644
--- a/src/app/_api/comment/deleteComment.ts
+++ b/src/app/_api/comment/deleteComment.ts
@@ -0,0 +1,14 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+interface DeleteCommentType {
+  listId: number | undefined;
+  commentId: number | undefined;
+}
+
+//댓글 삭제 api
+async function deleteComment({ listId, commentId }: DeleteCommentType) {
+  const response = await axiosInstance.delete(`/lists/${listId}/comments/${commentId}`);
+  return response.data;
+}
+
+export default deleteComment;
diff --git a/src/app/_api/comment/deleteReply.ts b/src/app/_api/comment/deleteReply.ts
index e69de29b..ac1cf6b8 100644
--- a/src/app/_api/comment/deleteReply.ts
+++ b/src/app/_api/comment/deleteReply.ts
@@ -0,0 +1,15 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+interface DeleteReplyType {
+  listId: number | undefined;
+  commentId: number | undefined | null;
+  replyId: number | undefined | null;
+}
+
+//답글 삭제 api
+async function deleteReply({ listId, commentId, replyId }: DeleteReplyType) {
+  const response = await axiosInstance.delete(`/lists/${listId}/comments/${commentId}/replies/${replyId}`);
+  return response.data;
+}
+
+export default deleteReply;
diff --git a/src/app/_api/comment/getComments.ts b/src/app/_api/comment/getComments.ts
index e69de29b..2bfe4e2e 100644
--- a/src/app/_api/comment/getComments.ts
+++ b/src/app/_api/comment/getComments.ts
@@ -0,0 +1,24 @@
+// 리스트 조회 api
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+interface GetCommentsType {
+  listId: number | undefined;
+  cursorId: number | undefined | null;
+}
+
+//리스트 상세 페이지 리스트 조회 api
+async function getComments({ listId, cursorId }: GetCommentsType) {
+  const params = new URLSearchParams({
+    size: '5',
+  });
+
+  if (cursorId) {
+    params.append('cursorId', cursorId.toString());
+  }
+
+  const response = await axiosInstance.get(`/lists/${listId}/comments?${params.toString()}`);
+
+  return response.data;
+}
+
+export default getComments;
diff --git a/src/app/_api/explore/getRecommendedLists.ts b/src/app/_api/explore/getRecommendedLists.ts
index fe7b207a..bfcafd1c 100644
--- a/src/app/_api/explore/getRecommendedLists.ts
+++ b/src/app/_api/explore/getRecommendedLists.ts
@@ -1,8 +1,9 @@
 // 리스트 조회 api
 import axiosInstance from '@/lib/axios/axiosInstance';
+import { ListRecommendationType } from '@/lib/types/exploreType';
 //리스트 추천 상위 10개
-export async function getRecommendedLists() {
-  const response = await axiosInstance.get(`/lists`);
+async function getRecommendedLists() {
+  const response = await axiosInstance.get<ListRecommendationType>(`/lists`);
   return response.data;
 }
 
diff --git a/src/app/_api/explore/getRecommendedUsers.ts b/src/app/_api/explore/getRecommendedUsers.ts
index b313b475..17fe578c 100644
--- a/src/app/_api/explore/getRecommendedUsers.ts
+++ b/src/app/_api/explore/getRecommendedUsers.ts
@@ -1,8 +1,9 @@
 // 리스트 조회 api
 import axiosInstance from '@/lib/axios/axiosInstance';
+import { UsersRecommendationType } from '@/lib/types/exploreType';
 //리스트 추천 상위 10개
-export async function getRecommendedUsers() {
-  const response = await axiosInstance.get(`/users/recommend`);
+async function getRecommendedUsers() {
+  const response = await axiosInstance.get<UsersRecommendationType>(`/users/recommend`);
   return response.data;
 }
 
diff --git a/src/app/_api/explore/getTrendingLists.ts b/src/app/_api/explore/getTrendingLists.ts
index 72c864f1..4e919461 100644
--- a/src/app/_api/explore/getTrendingLists.ts
+++ b/src/app/_api/explore/getTrendingLists.ts
@@ -1,8 +1,9 @@
 // 리스트 조회 api
 import axiosInstance from '@/lib/axios/axiosInstance';
+import { TrendingListType } from '@/lib/types/exploreType';
 //리스트 추천 상위 10개
-export async function getTrendingLists() {
-  const response = await axiosInstance.get(`/lists/explore`);
+async function getTrendingLists() {
+  const response = await axiosInstance.get<TrendingListType>(`/lists/explore`);
   return response.data;
 }
 
diff --git a/src/app/_api/list/deleteList.ts b/src/app/_api/list/deleteList.ts
index d0064953..5a7743f0 100644
--- a/src/app/_api/list/deleteList.ts
+++ b/src/app/_api/list/deleteList.ts
@@ -1 +1,10 @@
 // 리스트 삭제 api
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+//댓글 삭제 api
+async function deleteList(listId: string | undefined) {
+  const response = await axiosInstance.delete(`/lists/${listId}`);
+  return response.data;
+}
+
+export default deleteList;
diff --git a/src/app/_api/user/updateProfile.ts b/src/app/_api/user/updateProfile.ts
index b4d4c6c2..6b72efc3 100644
--- a/src/app/_api/user/updateProfile.ts
+++ b/src/app/_api/user/updateProfile.ts
@@ -11,7 +11,7 @@ interface UserPresignedUrlsType {
 }
 
 interface UpdateProfileParams {
-  userId: Number;
+  userId: number;
   data: UserProfileEditType;
 }
 
diff --git a/src/app/[userNickname]/[listId]/ListDetail.css.ts b/src/app/user/[userId]/list/[listId]/ListDetail.css.ts
similarity index 100%
rename from src/app/[userNickname]/[listId]/ListDetail.css.ts
rename to src/app/user/[userId]/list/[listId]/ListDetail.css.ts
diff --git a/src/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet.css.ts b/src/app/user/[userId]/list/[listId]/_components/BottomSheet/BottomSheet.css.ts
similarity index 75%
rename from src/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/BottomSheet/BottomSheet.css.ts
index e2734537..bff33f60 100644
--- a/src/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet.css.ts
+++ b/src/app/user/[userId]/list/[listId]/_components/BottomSheet/BottomSheet.css.ts
@@ -40,6 +40,9 @@ export const sheetActive = style({
 });
 
 export const sheetItemWrapper = style({
+  width: '100%',
+  textAlign: 'left',
+
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -72,3 +75,26 @@ export const sheetItem = style({
     },
   },
 });
+
+export const disabledSheetItemWrapper = style({
+  ':hover': {
+    backgroundColor: '#ffffff',
+  },
+});
+
+export const disabledSheetItem = style({
+  cursor: 'not-allowed',
+  selectors: {
+    [`${sheetItemWrapper}:hover &`]: {
+      color: '#e9e9e9',
+    },
+  },
+});
+
+export const disabledCheckIcon = style({
+  selectors: {
+    [`${sheetItemWrapper}:hover &`]: {
+      display: 'none',
+    },
+  },
+});
diff --git a/src/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet.tsx b/src/app/user/[userId]/list/[listId]/_components/BottomSheet/BottomSheet.tsx
similarity index 64%
rename from src/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet.tsx
rename to src/app/user/[userId]/list/[listId]/_components/BottomSheet/BottomSheet.tsx
index d89d4769..3a040189 100644
--- a/src/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet.tsx
+++ b/src/app/user/[userId]/list/[listId]/_components/BottomSheet/BottomSheet.tsx
@@ -9,6 +9,7 @@ interface BottomSheetOptionsProps {
   key: string;
   title: string;
   onClick: () => void;
+  disabled?: boolean;
 }
 
 interface BottomSheetProps {
@@ -26,12 +27,20 @@ function BottomSheet({ onClose, isActive, optionList }: BottomSheetProps) {
     <div className={styles.backGround} onClick={onClose}>
       <div ref={ref} className={`${styles.wrapper} ${isActive ? `${styles.sheetActive}` : ''}`}>
         {optionList.map((option) => (
-          <div key={option.key} className={styles.sheetItemWrapper}>
-            <div key={option.key} className={styles.sheetItem} onClick={option.onClick}>
+          <button
+            key={option.key}
+            className={`${styles.sheetItemWrapper} ${option.disabled ? styles.disabledSheetItemWrapper : ''}`}
+            disabled={option.disabled}
+          >
+            <div
+              key={option.key}
+              className={`${styles.sheetItem} ${option.disabled ? styles.disabledSheetItem : ''}`}
+              onClick={option.onClick}
+            >
               {option.title}
             </div>
-            <CheckIcon className={styles.checkIcon} />
-          </div>
+            <CheckIcon className={`${styles.checkIcon} ${option.disabled ? styles.disabledCheckIcon : ''}`} />
+          </button>
         ))}
       </div>
     </div>
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/Footer.css.ts b/src/app/user/[userId]/list/[listId]/_components/ListDetailInner/Footer.css.ts
similarity index 100%
rename from src/app/[userNickname]/[listId]/_components/ListDetailInner/Footer.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailInner/Footer.css.ts
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/Footer.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailInner/Footer.tsx
similarity index 96%
rename from src/app/[userNickname]/[listId]/_components/ListDetailInner/Footer.tsx
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailInner/Footer.tsx
index e3e20924..39cae209 100644
--- a/src/app/[userNickname]/[listId]/_components/ListDetailInner/Footer.tsx
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailInner/Footer.tsx
@@ -2,8 +2,8 @@
 
 import { useParams, useRouter } from 'next/navigation';
 import { MouseEvent, useState } from 'react';
-import BottomSheet from '@/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet';
-import ModalPortal from '@/components/ModalPortal';
+import BottomSheet from '@/app/user/[userId]/list/[listId]/_components/BottomSheet/BottomSheet';
+import ModalPortal from '@/components/modal-portal';
 import saveImageFromHtml from '@/lib/utils/saveImageFromHtml';
 import copyUrl from '@/lib/utils/copyUrl';
 import toasting from '@/lib/utils/toasting';
@@ -27,7 +27,7 @@ interface SheetTypeProps {
 
 interface FooterProps {
   category: string;
-  listId: string;
+  listId: string | null;
   title: string;
   description: string;
   items: ItemType[];
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/Header.css.ts b/src/app/user/[userId]/list/[listId]/_components/ListDetailInner/Header.css.ts
similarity index 100%
rename from src/app/[userNickname]/[listId]/_components/ListDetailInner/Header.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailInner/Header.css.ts
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/Header.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailInner/Header.tsx
similarity index 100%
rename from src/app/[userNickname]/[listId]/_components/ListDetailInner/Header.tsx
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailInner/Header.tsx
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.css.ts b/src/app/user/[userId]/list/[listId]/_components/ListDetailInner/RankList.css.ts
similarity index 100%
rename from src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailInner/RankList.css.ts
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailInner/RankList.tsx
similarity index 98%
rename from src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.tsx
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailInner/RankList.tsx
index 77e03a5b..15088b12 100644
--- a/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.tsx
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailInner/RankList.tsx
@@ -26,7 +26,7 @@ export function SimpleList({ listData }: RankListProps) {
             }
           >
             {index === 0 && <CrownIcon className={styles.crownIcon} />}
-            <div className={styles.rankText}>{item.ranking}</div>
+            <div className={styles.rankText}>{item.rank}</div>
           </div>
           <div className={styles.titleText}>{item.title}</div>
         </div>
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.css.ts b/src/app/user/[userId]/list/[listId]/_components/ListDetailInner/index.css.ts
similarity index 100%
rename from src/app/[userNickname]/[listId]/_components/ListDetailInner/index.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailInner/index.css.ts
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailInner/index.tsx
similarity index 57%
rename from src/app/[userNickname]/[listId]/_components/ListDetailInner/index.tsx
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailInner/index.tsx
index 0b4f6b95..38d10f79 100644
--- a/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.tsx
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailInner/index.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import { useState } from 'react';
-import Header from '@/app/[userNickname]/[listId]/_components/ListDetailInner/Header';
-import RankList from '@/app/[userNickname]/[listId]/_components/ListDetailInner/RankList';
-import Footer from '@/app/[userNickname]/[listId]/_components/ListDetailInner/Footer';
+import Header from '@/app/user/[userId]/list/[listId]/_components/ListDetailInner/Header';
+import RankList from '@/app/user/[userId]/list/[listId]/_components/ListDetailInner/RankList';
+import Footer from '@/app/user/[userId]/list/[listId]/_components/ListDetailInner/Footer';
 import * as styles from './index.css';
-import { CollaboratorType, ListItemsType } from '@/lib/types/listType';
+import { ListDetailType } from '@/lib/types/listType';
 
 export interface ListItemProps {
   id?: number;
@@ -23,26 +23,11 @@ interface OptionsProps {
 }
 
 interface ListDetailInnerProps {
-  listId: string;
-  category: string;
-  labels: [];
-  title: string;
-  description: string;
-  createdDate: string;
-  lastUpdatedDate: string;
-  ownerId: number;
-  ownerNickname: string;
-  ownerProfileImageUrl: string;
-  collaborators: CollaboratorType[];
-  items: ListItemsType[];
-  isCollected: boolean;
-  isPublic: boolean;
-  backgroundColor: string;
-  collectCount: number;
-  viewCount: number;
+  data: ListDetailType;
+  listId: string | null;
 }
 
-function ListDetailInner({ data }: { data: ListDetailInnerProps }) {
+function ListDetailInner({ data, listId }: ListDetailInnerProps) {
   const listData = data?.items;
   const [listType, setListType] = useState('simple');
   const handleChangeListType = (target: OptionsProps) => {
@@ -52,7 +37,7 @@ function ListDetailInner({ data }: { data: ListDetailInnerProps }) {
 
   const footerData = {
     category: data?.category,
-    listId: data?.listId,
+    listId: listId,
     title: data?.title,
     description: data?.description,
     items: listData,
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Collaborators.css.ts b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Collaborators.css.ts
similarity index 64%
rename from src/app/[userNickname]/[listId]/_components/ListDetailOuter/Collaborators.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Collaborators.css.ts
index bbbc1c23..63328e56 100644
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Collaborators.css.ts
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Collaborators.css.ts
@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
 
 export const collaboratorWrapper = style({
   position: 'relative',
@@ -9,11 +10,11 @@ export const wrapper = style({
   display: 'flex',
   flexDirection: 'row-reverse',
   justifyContent: 'center',
-  alignItems: 'cemter',
+  alignItems: 'center',
   transform: 'translateZ(0px)',
 });
 
-export const ProfileImg = style({
+export const profileImage = style({
   marginRight: '-10px',
   width: '36px',
   height: '36px',
@@ -22,26 +23,19 @@ export const ProfileImg = style({
   justifyContent: 'center',
   alignItems: 'center',
 
-  outline: '3px solid #ffffff',
+  border: `3px solid ${vars.color.white}`,
   borderRadius: '9999px',
 });
 
 export const profilePlus = style({
-  backgroundColor: '#AEB0B6',
+  backgroundColor: vars.color.gray7,
 });
 
 export const profileText = style({
-  color: '#DEE7EE',
+  color: vars.color.lightblue,
   fontSize: '2rem',
 });
 
-export const collaboratorTitle = style({
-  marginRight: '11px',
-
-  fontSize: '1rem',
-  fontWeight: 600,
-});
-
 export const collaboratorsPopOverWrapper = style({
   display: 'none',
 
@@ -51,11 +45,3 @@ export const collaboratorsPopOverWrapper = style({
     },
   },
 });
-
-export const defaultProfile = style({
-  width: '36px',
-  height: '36px',
-
-  outline: '3px solid #ffffff',
-  borderRadius: '9999px',
-});
diff --git a/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Collaborators.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Collaborators.tsx
new file mode 100644
index 00000000..4a116830
--- /dev/null
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Collaborators.tsx
@@ -0,0 +1,54 @@
+import Image from 'next/image';
+import CollaboratorsPopOver from '@/app/user/[userId]/list/[listId]/_components/ListDetailOuter/CollaboratorsPopOver';
+import * as styles from './Collaborators.css';
+import PlusIcon from '/public/icons/collaborators_plus.svg';
+import { UserProfileType } from '@/lib/types/userProfileType';
+
+interface CollaboratorsProps {
+  collaborators: UserProfileType[] | undefined;
+}
+
+function Collaborators({ collaborators }: CollaboratorsProps) {
+  //콜라보레이터 목록이 3명 이상일 경우, 3명의 프로필 이미지만 보이고 그 이외에는 +로 처리하기 위한 로직
+  const MAX_NUMBER = 3;
+  const collaboratorsList =
+    collaborators && collaborators?.length >= MAX_NUMBER ? collaborators?.slice(0, MAX_NUMBER) : collaborators;
+
+  return (
+    <>
+      {collaborators && (
+        <div className={styles.collaboratorWrapper}>
+          <div className={styles.collaboratorsPopOverWrapper}>
+            <CollaboratorsPopOver collaborators={collaborators} />
+          </div>
+          <div className={styles.wrapper}>
+            {collaborators.length > MAX_NUMBER && (
+              <div className={`${styles.profileImage} ${styles.profilePlus}`}>
+                <span className={styles.profileText}>{`${collaborators && collaborators?.length - 3}`}</span>
+                <PlusIcon alt="더하기 모양 아이콘" />
+              </div>
+            )}
+            {collaboratorsList?.map((item: UserProfileType) => {
+              return (
+                <div key={item.id}>
+                  <Image
+                    className={styles.profileImage}
+                    src={item.profileImageUrl}
+                    alt="사용자 프로필 이미지"
+                    width={35}
+                    height={35}
+                    style={{
+                      objectFit: 'cover',
+                    }}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default Collaborators;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.css.ts b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.css.ts
similarity index 74%
rename from src/app/[userNickname]/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.css.ts
index fe8a5160..f37b3525 100644
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.css.ts
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.css.ts
@@ -1,8 +1,13 @@
 import { style } from '@vanilla-extract/css';
 
+/**
+ * @todo 공용 폰트 스타일 적용
+ */
+
 export const wrapper = style({
   padding: '12px',
-  height: '142px',
+  height: 'auto',
+  maxHeight: '142px',
   width: 'auto',
 
   position: 'absolute',
@@ -11,8 +16,8 @@ export const wrapper = style({
 
   overflow: 'scroll',
   borderRadius: '10px',
-  background: 'rgba(255, 255, 255, 0.8)',
-  boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
+  background: 'rgba(255, 255, 255, 1)',
+  boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px',
   zIndex: 20,
 
   '::-webkit-scrollbar': {
@@ -47,11 +52,3 @@ export const nickname = style({
   fontWeight: 600,
   letterSpacing: '-0.36px',
 });
-
-export const defaultProfileImage = style({
-  width: '25px',
-  height: '25px',
-
-  borderRadius: '9999px',
-  backgroundColor: '#494949',
-});
diff --git a/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.tsx
new file mode 100644
index 00000000..a1fb60ed
--- /dev/null
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.tsx
@@ -0,0 +1,36 @@
+import Image from 'next/image';
+import * as styles from './CollaboratorsPopOver.css';
+import { UserProfileType } from '@/lib/types/userProfileType';
+
+interface CollaboratorsProps {
+  collaborators: UserProfileType[] | null;
+}
+
+function CollaboratorsPopOver({ collaborators }: CollaboratorsProps) {
+  return (
+    <div className={styles.wrapper}>
+      <span>콜라보레이터</span>
+      <ul className={styles.listWrapper}>
+        {collaborators?.map((item: UserProfileType) => {
+          return (
+            <li className={styles.itemWrapper} key={item.id}>
+              <Image
+                src={item.profileImageUrl}
+                className={styles.profileImage}
+                alt="사용자 프로필 이미지"
+                width={25}
+                height={25}
+                style={{
+                  objectFit: 'cover',
+                }}
+              />
+              <span className={styles.nickname}>{item.nickname}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default CollaboratorsPopOver;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Comment.css.ts b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comment.css.ts
similarity index 61%
rename from src/app/[userNickname]/[listId]/_components/ListDetailOuter/Comment.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comment.css.ts
index c5d190ac..68fe12c3 100644
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Comment.css.ts
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comment.css.ts
@@ -1,12 +1,17 @@
 import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
+import { caption1 } from '@/styles/font.css';
+
+/**@todo 공용폰트 스타일 적용 */
 
 export const commentOuterWrapper = style({
-  marginBottom: '10px',
+  marginBottom: '9px',
 
   position: 'relative',
 
   display: 'flex',
   justifyContent: 'space-between',
+  gap: '16px',
 });
 
 export const profileImage = style({
@@ -16,19 +21,20 @@ export const profileImage = style({
   flex: '0 0 1',
 
   borderRadius: '16px',
-  backgroundColor: '#909090',
+  backgroundColor: vars.color.gray7,
 });
 
 export const commentWrapper = style({
   display: 'flex',
-  gap: '8px',
+  gap: '8.85px',
   alignItems: 'center',
 });
 
 export const commentContainer = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: '5px',
+  justifyContent: 'space-between',
+  gap: '8px',
 });
 
 export const commentInformationWrapper = style({
@@ -37,28 +43,33 @@ export const commentInformationWrapper = style({
   gap: '8px',
 });
 
-export const commentWriter = style({
-  fontSize: '1.2rem',
-  fontWeight: 600,
-});
+export const commentWriter = style([
+  caption1,
+  {
+    fontWeight: 600,
+    lineHeight: 'normal',
+  },
+]);
 
 export const commentCreatedTime = style({
   fontSize: '1rem',
   fontWeight: 500,
-  color: '#494949',
+  color: vars.color.gray9,
 });
 
-export const commentContent = style({
-  fontSize: '1.2rem',
-  fontWeight: 500,
-});
+export const commentContent = style([
+  caption1,
+  {
+    fontWeight: 500,
+    lineHeight: 'normal',
+  },
+]);
 
 export const createReplyButton = style({
   padding: '0 0 0 36px',
-  marginBottom: '16px',
 
   background: 'none',
   fontSize: '1rem',
-  color: '#494949',
+  color: vars.color.gray9,
   fontWeight: 500,
 });
diff --git a/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comment.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comment.tsx
new file mode 100644
index 00000000..cd5e76f9
--- /dev/null
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comment.tsx
@@ -0,0 +1,96 @@
+'use client';
+import Image from 'next/image';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import Replies from '@/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Replies';
+import deleteComment from '@/app/_api/comment/deleteComment';
+import DeleteModalButton from '@/app/user/[userId]/list/[listId]/_components/ListDetailOuter/DeleteModalButton';
+
+import timeDiff from '@/lib/utils/time-diff';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import { CommentType } from '@/lib/types/commentType';
+import { UserType } from '@/lib/types/userProfileType';
+
+import * as styles from './Comment.css';
+import DefaultProfile from '/public/icons/default_profile_temporary.svg';
+
+/**
+ * @todo 타입 정리 필요
+ */
+interface CommentProps {
+  comment: CommentType | undefined;
+  onUpdate: (userName: string | undefined) => void;
+  activeNickname?: string | null;
+  handleSetCommentId: (id: number | undefined) => void;
+  listId?: number | undefined;
+  commentId?: null | number | undefined;
+  currentUserInfo?: UserType;
+}
+
+function Comment({ comment, onUpdate, handleSetCommentId, listId, commentId, currentUserInfo }: CommentProps) {
+  const queryClient = useQueryClient();
+
+  //현재 작성중인 답글의 원댓글 정보를 업데이트 하는 로직
+  const handleActiveNicknameAndIdUpdate = () => {
+    const currentUserName = comment?.userNickname;
+    const currentCommentId = comment?.id;
+    if (!currentUserName && !currentCommentId) {
+      return null;
+    }
+    onUpdate(currentUserName);
+    handleSetCommentId(currentCommentId);
+  };
+
+  //댓글 삭제 리액트 쿼리 함수
+  const deleteCommentMutation = useMutation({
+    mutationFn: () => deleteComment({ listId: Number(listId), commentId: comment?.id }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getComments] });
+    },
+  });
+
+  //댓글 삭제 실행 함수
+  const handleClickDeleteButton = () => {
+    deleteCommentMutation.mutate();
+  };
+
+  return (
+    <>
+      <div className={styles.commentOuterWrapper}>
+        <div className={styles.commentWrapper}>
+          {comment && !comment.isDeleted && (
+            <Image
+              alt="프로필 이미지"
+              width={30}
+              height={30}
+              src={comment.userProfileImageUrl}
+              className={styles.profileImage}
+              style={{
+                objectFit: 'cover',
+              }}
+            />
+          )}
+          {comment?.isDeleted && <DefaultProfile width={30} height={30} />}
+          <div className={styles.commentContainer}>
+            <div className={styles.commentInformationWrapper}>
+              <span className={styles.commentWriter}>{comment?.isDeleted ? '알 수 없음' : comment?.userNickname}</span>
+              <span className={styles.commentCreatedTime}>{comment && timeDiff(comment?.createdDate)}</span>
+            </div>
+            <div className={styles.commentContent}>
+              {comment?.isDeleted ? '작성자의 요청으로 삭제된 댓글이에요.' : comment?.content}
+            </div>
+          </div>
+        </div>
+        {!comment?.isDeleted && currentUserInfo?.id === comment?.userId && (
+          <DeleteModalButton onDelete={handleClickDeleteButton} />
+        )}
+      </div>
+      <button className={styles.createReplyButton} onClick={handleActiveNicknameAndIdUpdate}>
+        <span>답글 달기</span>
+      </button>
+      <Replies replies={comment?.replies} listId={listId} commentId={commentId} currentUserInfo={currentUserInfo} />
+    </>
+  );
+}
+
+export default Comment;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Comments.css.ts b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comments.css.ts
similarity index 78%
rename from src/app/[userNickname]/[listId]/_components/ListDetailOuter/Comments.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comments.css.ts
index bc86fa97..f37b8d75 100644
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Comments.css.ts
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comments.css.ts
@@ -1,8 +1,11 @@
 import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
+
+/**@todo 공용폰트 스타일 적용 */
 
 export const wrapper = style({
   height: 'auto',
-  padding: '20px 24px 80px',
+  padding: '0 27.5px 80px',
 });
 
 export const formWrapperOuter = style({
@@ -17,25 +20,25 @@ export const formWrapperOuter = style({
   right: 0,
 
   display: 'flex',
-  alignItems: 'center',
+  alignItems: 'flex-end',
   gap: '4px',
 
-  border: '1px solid rgba(0, 0, 0, 0.10)',
-  background: '#fff',
-  zIndex: 30,
+  border: `1px solid ${vars.color.gray5}`,
+  background: vars.color.white,
+  zIndex: 1,
 });
 
 export const formWrapperInner = style({
   width: '100%',
   height: 'auto',
-  padding: '8px 12px',
+  padding: '7px 12px',
 
   display: 'flex',
   flexDirection: 'column',
   gap: '4px',
 
   borderRadius: '50px',
-  border: '1px solid #D9D9D9',
+  border: `1px solid ${vars.color.gray5}`,
 });
 
 export const activeFormWrapper = style({
@@ -52,6 +55,8 @@ export const formInput = style({
   height: 'auto',
 
   flex: '1 0 0',
+
+  fontSize: '1.2rem',
   wordBreak: 'break-all',
   wordWrap: 'break-word',
   whiteSpace: 'pre-wrap',
@@ -65,7 +70,7 @@ export const replyNickname = style({
 
   fontSize: '1.2rem',
   fontWeight: 400,
-  color: '#AFB1B6',
+  color: vars.color.gray7,
 });
 
 export const formButton = style({
@@ -91,7 +96,11 @@ export const profileImage = style({
   flex: '0 0 1',
 
   borderRadius: '16px',
-  backgroundColor: '#909090',
+  backgroundColor: vars.color.gray9,
+});
+
+export const commentWrapper = style({
+  marginBottom: '20px',
 });
 
 export const activeReplyWrapper = style({
diff --git a/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comments.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comments.tsx
new file mode 100644
index 00000000..25845a9e
--- /dev/null
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comments.tsx
@@ -0,0 +1,195 @@
+'use client';
+import { useParams } from 'next/navigation';
+import Image from 'next/image';
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { useMutation, useQueryClient, useInfiniteQuery, useQuery } from '@tanstack/react-query';
+
+import Comment from './Comment';
+import CommentsSkeleton from './CommentsSkeleton';
+import createComment from '@/app/_api/comment/createComment';
+import createReply from '@/app/_api/comment/createReply';
+import getComments from '@/app/_api/comment/getComments';
+import { getUserOne } from '@/app/_api/user/getUserOne';
+import useIntersectionObserver from '@/hooks/useIntersectionObserver';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import { CommentType } from '@/lib/types/commentType';
+import { UserType } from '@/lib/types/userProfileType';
+import { useUser } from '@/store/useUser';
+
+import * as styles from './Comments.css';
+import CancelButton from '/public/icons/cancel_button.svg';
+
+function Comments() {
+  const [activeNickname, setActiveNickname] = useState<string | null | undefined>(null);
+  const [commentId, setCommentId] = useState<null | number | undefined>(null);
+  const [comment, setComment] = useState<string>('');
+  const params = useParams<{ listId: string }>();
+  const queryClient = useQueryClient();
+
+  //zustand로 관리하는 user정보 불러오기
+  const { user } = useUser();
+  const userId = user?.id;
+
+  //user정보 불러오는 리액트 쿼리 함수
+  const { data: userInformation } = useQuery<UserType>({
+    queryKey: [QUERY_KEYS.userOne, userId],
+    queryFn: () => getUserOne(userId),
+    enabled: userId !== 0,
+  });
+
+  //댓글 무한스크롤 리액트 쿼리 함수
+  const {
+    data: commentsData,
+    hasNextPage,
+    fetchNextPage,
+    isFetching,
+  } = useInfiniteQuery({
+    queryKey: [QUERY_KEYS.getComments, params?.listId],
+    queryFn: ({ pageParam: cursorId }) => {
+      return getComments({ listId: Number(params?.listId), cursorId: cursorId });
+    },
+    initialPageParam: null,
+    getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.cursorId : null),
+  });
+
+  //댓글 주요 정보 변수화
+  const comments = useMemo(() => {
+    const totalCount = commentsData ? commentsData.pages[commentsData.pages.length - 1].totalCount : 0;
+    const commentsList = commentsData ? commentsData.pages.flatMap(({ comments }) => comments) : [];
+    return { commentsList, totalCount };
+  }, [commentsData]);
+
+  //옵저버 훅 사용
+  const ref = useIntersectionObserver(() => {
+    if (hasNextPage) {
+      fetchNextPage();
+    }
+  });
+
+  //작성중이던 답글의 원댓글에 관련된 정보를 리셋하는 함수
+  const handleReplyInformationDelete = () => {
+    if (activeNickname) {
+      setActiveNickname(null);
+      setCommentId(null);
+    }
+  };
+
+  //답글 생성중인 댓글에 대한 id를 받아오는 함수
+  const handleSetCommentId = (id: number | undefined) => {
+    setCommentId(id);
+  };
+
+  //댓글 폼 사용(추후 리액트 훅폼으로 수정해 볼 예정)
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setComment(e.target.value);
+  };
+
+  //댓글 생성 리액트 쿼리 함수
+  const createCommentMutation = useMutation({
+    mutationFn: () => createComment({ listId: Number(params?.listId), comment: comment }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getComments] });
+    },
+    onSettled: () => {
+      setComment('');
+    },
+  });
+
+  //답글 생성 리액트 쿼리 함수
+  const createReplyMutation = useMutation({
+    mutationFn: () => createReply({ listId: Number(params?.listId), commentId: commentId, data: comment }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getComments] });
+    },
+    onSettled: () => {
+      setComment('');
+      setCommentId(null);
+      setActiveNickname(null);
+    },
+  });
+
+  //댓글/답글 폼 submit 함수
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!userId) {
+      return;
+    }
+    if (commentId && activeNickname) {
+      createReplyMutation.mutate();
+      return;
+    }
+    createCommentMutation.mutate();
+  };
+
+  //무한 스크롤시 필요한 쿼리 리셋함수
+  useEffect(() => {
+    return () => {
+      queryClient.removeQueries({
+        queryKey: [QUERY_KEYS.getComments],
+        exact: true,
+      });
+    };
+  }, [queryClient]);
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.formWrapperOuter}>
+        <Image
+          src={userInformation?.profileImageUrl}
+          alt="프로필 이미지"
+          width={36}
+          height={36}
+          className={styles.profileImage}
+          style={{
+            objectFit: 'cover',
+          }}
+        />
+        <div className={`${styles.formWrapperInner} ${!!activeNickname ? styles.activeFormWrapper : ''}`}>
+          {activeNickname && (
+            <div className={styles.activeReplyWrapper}>
+              <span className={styles.replyNickname}>{`@${activeNickname}님에게 남긴 답글`}</span>
+              <CancelButton className={styles.clearButton} alt="지우기 버튼" onClick={handleReplyInformationDelete} />
+            </div>
+          )}
+          <form className={styles.formContainer} onSubmit={handleSubmit}>
+            <input
+              className={styles.formInput}
+              value={comment}
+              onChange={handleInputChange}
+              placeholder={userId === 0 ? '로그인 후 댓글을 작성할 수 있습니다.' : ''}
+            />
+            {comment && userId !== 0 && (
+              <button type="submit" className={styles.formButton}>
+                게시
+              </button>
+            )}
+          </form>
+        </div>
+      </div>
+      <div className={styles.totalCount}>{`${comments?.totalCount}개의 댓글`}</div>
+      {comments?.commentsList?.map((item: CommentType) => {
+        return (
+          <div key={item.id} className={styles.commentWrapper}>
+            {isFetching ? (
+              <CommentsSkeleton />
+            ) : (
+              <Comment
+                comment={item}
+                onUpdate={setActiveNickname}
+                activeNickname={activeNickname}
+                handleSetCommentId={handleSetCommentId}
+                listId={Number(params?.listId)}
+                commentId={commentId}
+                currentUserInfo={userInformation}
+              />
+            )}
+          </div>
+        );
+      })}
+      {/* {옵저버를 위한 요소} */}
+      <div ref={ref}></div>
+    </div>
+  );
+}
+
+export default Comments;
diff --git a/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/CommentsSkeleton.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/CommentsSkeleton.tsx
new file mode 100644
index 00000000..fe222420
--- /dev/null
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/CommentsSkeleton.tsx
@@ -0,0 +1,19 @@
+import Skeleton from '@mui/material/Skeleton';
+import * as styles from './Comment.css';
+
+function CommentsSkeleton() {
+  return (
+    <div className={styles.commentWrapper}>
+      <Skeleton variant="circular" width={30} height={30} animation="wave" />
+      <div className={styles.commentContainer}>
+        <div className={styles.commentInformationWrapper}>
+          <Skeleton variant="rounded" width={20} height={16} animation="wave" />
+          <Skeleton variant="rounded" width={20} height={16} animation="wave" />
+        </div>
+        <Skeleton variant="rounded" width={300} height={16} animation="wave" />
+      </div>
+    </div>
+  );
+}
+
+export default CommentsSkeleton;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/DeleteModalButton.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/DeleteModalButton.tsx
similarity index 89%
rename from src/app/[userNickname]/[listId]/_components/ListDetailOuter/DeleteModalButton.tsx
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/DeleteModalButton.tsx
index 009d0038..564c3977 100644
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/DeleteModalButton.tsx
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/DeleteModalButton.tsx
@@ -6,12 +6,13 @@ import DeleteButton from '/public/icons/trash_can.svg';
 
 interface DeleteModalProps {
   children?: ReactNode;
+  onDelete: () => void;
 }
 
-export default function DeleteModal({ children }: DeleteModalProps) {
+export default function DeleteModal({ children, onDelete }: DeleteModalProps) {
   const { isOn, handleSetOff, handleSetOn } = useBooleanOutput(); //모달 열림,닫힘 상태 관리
   const handleConfirmButtonClick = () => {
-    //확인버튼 클릭시 실행될 로직()
+    onDelete();
     handleSetOff(); //닫기
   };
 
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Header.css.ts b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/HeaderRight.css.ts
similarity index 54%
rename from src/app/[userNickname]/[listId]/_components/ListDetailOuter/Header.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/HeaderRight.css.ts
index ef6a60de..3e2c6bc2 100644
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Header.css.ts
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/HeaderRight.css.ts
@@ -1,21 +1,5 @@
 import { style } from '@vanilla-extract/css';
 
-export const wrapper = style({
-  height: '90px',
-  padding: '0 16px',
-
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-
-  borderBottom: '1px solid rgba(0, 0, 0, 0.10)',
-});
-
-export const title = style({
-  fontWeight: 600,
-  fontSize: '2rem',
-});
-
 export const buttonResetStyle = style({
   width: '24px',
   height: '24px',
diff --git a/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/HeaderRight.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/HeaderRight.tsx
new file mode 100644
index 00000000..e2feb9a0
--- /dev/null
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/HeaderRight.tsx
@@ -0,0 +1,42 @@
+'use client';
+import { useRouter, useParams } from 'next/navigation';
+
+import { useUser } from '@/store/useUser';
+import OpenBottomSheetButton from './OpenBottomSheetButton';
+import * as styles from './HeaderRight.css';
+import HistoryButton from '/public/icons/history.svg';
+
+interface HeaderRightProps {
+  isCollaborator: boolean | undefined;
+}
+
+function HeaderRight({ isCollaborator }: HeaderRightProps) {
+  const router = useRouter();
+  const params = useParams<{ userId: string; listId: string }>();
+
+  //zustand로 관리하는 user정보 불러오기
+  const { user } = useUser();
+  const userId = user?.id;
+
+  const handleHistoryButtonClick = () => {
+    router.push(`/${params?.userId}/${params?.listId}/history`);
+  };
+
+  return (
+    <>
+      <div className={styles.headerRightWrapper}>
+        <button className={styles.buttonResetStyle} onClick={handleHistoryButtonClick}>
+          <HistoryButton alt="히스토리 버튼" />
+        </button>
+        {/* {리스트 관리 버튼은 리스트 오너일 때만 보이게 하기} */}
+        {(Number(params?.userId) === userId || isCollaborator) && (
+          <div className={styles.buttonResetStyle}>
+            <OpenBottomSheetButton listId={params?.listId} isCollaborator={isCollaborator} />
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default HeaderRight;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.css.ts b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/ListInformation.css.ts
similarity index 68%
rename from src/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/ListInformation.css.ts
index 54f91d15..06103729 100644
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.css.ts
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/ListInformation.css.ts
@@ -1,7 +1,10 @@
 import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
+import { body2, title3 } from '@/styles/font.css';
+/**@todo 공용폰트 스타일 적용 */
 
 export const wrapper = style({
-  padding: '48px 38px',
+  padding: '25px 32px 15px',
 });
 
 export const categoryWrapper = style({
@@ -10,27 +13,25 @@ export const categoryWrapper = style({
   display: 'flex',
   justifyContent: 'flex-start',
   alignItems: 'center',
-
-  fontSize: '.75rem',
 });
 
 export const labelWrapper = style({
   marginRight: '8px',
 });
 
-export const listTitle = style({
-  marginBottom: '1.6rem',
+export const listTitle = style([
+  title3,
+  {
+    marginBottom: '1.6rem',
+  },
+]);
 
-  fontSize: '2rem',
-  fontWeight: 600,
-});
-
-export const listDescription = style({
-  fontSize: '1.5rem',
-  fontWeight: 500,
-  lineHeight: '25px',
-  color: '#909090',
-});
+export const listDescription = style([
+  body2,
+  {
+    color: vars.color.black,
+  },
+]);
 
 export const listComponentTemporary = style({
   padding: '0 38px',
@@ -39,7 +40,7 @@ export const listComponentTemporary = style({
 });
 
 export const bottomWrapper = style({
-  padding: '21px 24px',
+  padding: '21px 24px 25px',
 
   display: 'flex',
   justifyContent: 'space-between',
@@ -54,7 +55,7 @@ export const bottomLeftWrapper = style({
 export const informationWrapper = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: '2px',
+  gap: '8px',
 });
 
 export const profileImage = style({
@@ -62,12 +63,13 @@ export const profileImage = style({
   height: '36px',
 
   borderRadius: '9999px',
-  backgroundColor: '#909090',
+  backgroundColor: vars.color.gray7,
 });
 
 export const listOwnerNickname = style({
   fontSize: '1.2rem',
   fontWeight: 600,
+  lineHeight: 'normal',
 });
 
 export const infoDetailWrapper = style({
@@ -75,7 +77,9 @@ export const infoDetailWrapper = style({
   gap: '7.5px',
 
   fontSize: '1rem',
-  color: '#909090',
+  fontWeight: 500,
+  lineHeight: 'normal',
+  color: vars.color.black,
 });
 
 export const collaboratorWrapper = style({
diff --git a/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/ListInformation.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/ListInformation.tsx
new file mode 100644
index 00000000..dd647182
--- /dev/null
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/ListInformation.tsx
@@ -0,0 +1,114 @@
+'use client';
+import Image from 'next/image';
+import { useQuery } from '@tanstack/react-query';
+import { useParams, useRouter } from 'next/navigation';
+
+import Collaborators from '@/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Collaborators';
+import getListDetail from '@/app/_api/list/getListDetail';
+import Label from '@/components/Label/Label';
+import Modal from '@/components/Modal/Modal';
+import Header from '@/components/Header/Header';
+import HeaderRight from './HeaderRight';
+import Comments from './Comments';
+import useBooleanOutput from '@/hooks/useBooleanOutput';
+import { useUser } from '@/store/useUser';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import timeDiff from '@/lib/utils/time-diff';
+import { UserProfileType } from '@/lib/types/userProfileType';
+import { LabelType, ListDetailType } from '@/lib/types/listType';
+import ListDetailInner from '@/app/user/[userId]/list/[listId]/_components/ListDetailInner';
+import * as styles from './ListInformation.css';
+
+function ListInformation() {
+  const params = useParams<{ listId: string; userId: string }>();
+  const router = useRouter();
+  const { handleSetOff } = useBooleanOutput();
+
+  //zustand로 관리하는 user정보 불러오기
+  const { user } = useUser();
+  const userId = user?.id;
+
+  const { data: list, error } = useQuery<ListDetailType>({
+    queryKey: [QUERY_KEYS.getListDetail],
+    queryFn: () => getListDetail(Number(params?.listId)),
+    enabled: !!params?.listId,
+    retry: 0,
+  });
+
+  //리스트 생성자 제외한 사람들만 콜라보레이터들로 설정
+  const filteredCollaboratorsList = list?.collaborators.filter((item: UserProfileType) => item?.id !== list.ownerId);
+  //리스트 오너가 아니고 콜라보레이터인 경우에 권한을 설정하기 위한 변수
+  const isCollaborator: boolean | undefined =
+    list?.collaborators.some((item: UserProfileType) => item?.id === userId) && userId !== Number(params?.userId);
+
+  const handleConfirmButtonClick = () => {
+    router.push('/');
+  };
+
+  if (error && error?.message.includes('404')) {
+    return (
+      <Modal handleModalClose={handleSetOff}>
+        <Modal.Title>이 리스트는 삭제 또는 비공개 처리 되었어요.</Modal.Title>
+        <Modal.Button onCancel={handleSetOff} onClick={handleConfirmButtonClick}>
+          확인
+        </Modal.Button>
+      </Modal>
+    );
+  }
+
+  if (!list) {
+    return null;
+  }
+
+  return (
+    <>
+      <Header
+        title="리스트"
+        left="back"
+        right={<HeaderRight isCollaborator={isCollaborator} />}
+        leftClick={() => router.back()}
+      />
+      <div className={styles.wrapper}>
+        <div className={styles.categoryWrapper}>
+          <div className={styles.labelWrapper}>
+            <Label colorType="skyblue">{list?.category}</Label>
+          </div>
+          {list?.labels.map((item: LabelType) => {
+            return (
+              <div className={styles.labelWrapper} key={item.name}>
+                <Label colorType="blue">{`${item.name}`}</Label>
+              </div>
+            );
+          })}
+        </div>
+        <div className={styles.listTitle}>{list?.title}</div>
+        <div className={styles.listDescription}>{list?.description}</div>
+      </div>
+      <ListDetailInner data={list} listId={params && params?.listId} />
+      <div className={styles.bottomWrapper}>
+        <div className={styles.bottomLeftWrapper}>
+          <Image
+            src={list?.ownerProfileImageUrl}
+            alt="사용자 프로필 이미지"
+            width={36}
+            height={36}
+            className={styles.profileImage}
+          />
+          <div className={styles.informationWrapper}>
+            <div className={styles.listOwnerNickname}>{list?.ownerNickname}</div>
+            <div className={styles.infoDetailWrapper}>
+              <span>{timeDiff(String(list?.createdDate))}</span>
+              <span>{list?.isPublic ? '공개' : '비공개'}</span>
+            </div>
+          </div>
+        </div>
+        <div className={styles.collaboratorWrapper}>
+          <Collaborators collaborators={filteredCollaboratorsList} />
+        </div>
+      </div>
+      <Comments />
+    </>
+  );
+}
+
+export default ListInformation;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/ModalButtonStyle.css.ts b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/ModalButtonStyle.css.ts
similarity index 100%
rename from src/app/[userNickname]/[listId]/_components/ListDetailOuter/ModalButtonStyle.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/ModalButtonStyle.css.ts
diff --git a/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/OpenBottomSheetButton.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/OpenBottomSheetButton.tsx
new file mode 100644
index 00000000..4a719d10
--- /dev/null
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/OpenBottomSheetButton.tsx
@@ -0,0 +1,71 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import deleteList from '@/app/_api/list/deleteList';
+import useBooleanOutput from '@/hooks/useBooleanOutput';
+import BottomSheet from '@/app/user/[userId]/list/[listId]/_components/BottomSheet/BottomSheet';
+import Modal from '@/components/Modal/Modal';
+import KebabButton from '/public/icons/vertical_kebab_button.svg';
+import * as styles from './ModalButtonStyle.css';
+
+interface OpenBottomSheetButtonProps {
+  listId: string | undefined;
+  isCollaborator: boolean | undefined;
+}
+
+export default function OpenBottomSheetButton({ listId, isCollaborator }: OpenBottomSheetButtonProps) {
+  const router = useRouter();
+  const { isOn, handleSetOff, handleSetOn } = useBooleanOutput(); //바텀시트 열림,닫힘 상태 관리
+  const { isOn: isModalOn, handleSetOff: handleSetModalOff, handleSetOn: handleSetModalOn } = useBooleanOutput(); //모달 상태 관리
+  const bottomSheetOptionList = [
+    {
+      key: 'editList',
+      title: '리스트 수정하기',
+      onClick: () => {
+        handleEditClick();
+      },
+    },
+    {
+      key: 'deleteList',
+      title: '리스트 삭제하기',
+      onClick: () => {
+        handleSetModalOn();
+      },
+      disabled: isCollaborator,
+    },
+  ];
+
+  /**
+   * @todo 유저 정보 받아서 유저 ID로 바꿔줘야 함
+   */
+  const handleEditClick = () => {
+    router.push(`/user/${1}/list/${listId}/edit`);
+    handleSetOff(); //닫기
+  };
+
+  /**
+   * @todo 삭제 시 어느 경로로 이동되는지 확인해야 함
+   */
+  const handleDeleteClick = () => {
+    deleteList(listId);
+    router.push('/');
+  };
+
+  return (
+    <>
+      <button className={styles.resetButtonStyle} onClick={handleSetOn}>
+        <KebabButton className={styles.buttonCursor} alt="케밥 버튼" />
+      </button>
+
+      {isModalOn && (
+        <Modal handleModalClose={handleSetModalOff}>
+          <Modal.Title>정말 리스트를 삭제하시나요?</Modal.Title>
+          <Modal.Button onCancel={handleSetModalOff} onClick={handleDeleteClick}>
+            확인
+          </Modal.Button>
+        </Modal>
+      )}
+
+      {isOn && <BottomSheet onClose={handleSetOff} optionList={bottomSheetOptionList} isActive={isOn} />}
+    </>
+  );
+}
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Replies.css.ts b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Replies.css.ts
similarity index 69%
rename from src/app/[userNickname]/[listId]/_components/ListDetailOuter/Replies.css.ts
rename to src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Replies.css.ts
index f54b5d6d..4f2139aa 100644
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Replies.css.ts
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Replies.css.ts
@@ -1,5 +1,8 @@
 import { style } from '@vanilla-extract/css';
-import './Comment.css';
+import { vars } from '@/styles/theme.css';
+import { caption1 } from '@/styles/font.css';
+
+/**@todo 공용폰트 스타일 적용 */
 
 export const repliesOuterWrapper = style({
   display: 'flex',
@@ -7,7 +10,9 @@ export const repliesOuterWrapper = style({
   marginBottom: '20px',
 });
 
-export const repliesWrapper = style({});
+export const repliesWrapper = style({
+  marginTop: '16px',
+});
 
 export const replyWrapper = style({
   marginLeft: '30px',
@@ -17,8 +22,7 @@ export const replyWrapper = style({
 });
 
 export const showMoreRepliesWrapper = style({
-  marginLeft: '30px',
-  marginBottom: '25px',
+  margin: '14px 0 23px 38px',
 
   display: 'flex',
   alignItems: 'center',
@@ -27,6 +31,9 @@ export const showMoreRepliesWrapper = style({
 
 export const showMoreReplies = style({
   fontSize: '1rem',
+  color: vars.color.gray9,
+  fontWeight: 500,
+  cursor: 'pointer',
 });
 
 export const deleteButton = style({
@@ -40,19 +47,19 @@ export const profileImage = style({
   flex: '0 0 1',
 
   borderRadius: '16px',
-  backgroundColor: '#909090',
+  backgroundColor: vars.color.gray7,
 });
 
 export const replyContainer = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: '5px',
+  gap: '8px',
 });
 
 export const replyInformationWrapper = style({
   display: 'flex',
   alignItems: 'baseline',
-  gap: '8px',
+  gap: '8.85px',
 });
 
 export const replyWriter = style({
@@ -63,10 +70,13 @@ export const replyWriter = style({
 export const replyCreatedTime = style({
   fontSize: '1rem',
   fontWeight: 500,
-  color: '#494949',
+  color: vars.color.gray9,
 });
 
-export const replyContent = style({
-  fontSize: '1.2rem',
-  fontWeight: 500,
-});
+export const replyContent = style([
+  caption1,
+  {
+    fontWeight: 500,
+    lineHeight: 'normal',
+  },
+]);
diff --git a/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Replies.tsx b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Replies.tsx
new file mode 100644
index 00000000..08d4df02
--- /dev/null
+++ b/src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Replies.tsx
@@ -0,0 +1,97 @@
+'use client';
+import { useState } from 'react';
+import Image from 'next/image';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import DeleteModalButton from '@/app/user/[userId]/list/[listId]/_components/ListDetailOuter/DeleteModalButton';
+import deleteReply from '@/app/_api/comment/deleteReply';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import timeDiff from '@/lib/utils/time-diff';
+import { ReplyType } from '@/lib/types/commentType';
+import { UserType } from '@/lib/types/userProfileType';
+
+import * as styles from './Replies.css';
+import Line from '/public/icons/horizontal_line.svg';
+
+interface RepliesProps {
+  replies: ReplyType[] | null | undefined;
+  listId?: number | undefined;
+  commentId?: null | number | undefined;
+  currentUserInfo?: UserType | undefined;
+}
+
+function Replies({ replies, listId, currentUserInfo }: RepliesProps) {
+  const [showReplies, setShowReplies] = useState(false);
+
+  const handleShowReplies = () => {
+    setShowReplies((prev) => !prev);
+  };
+
+  return (
+    <>
+      {replies?.length !== 0 && !showReplies && (
+        <div className={styles.showMoreRepliesWrapper} onClick={handleShowReplies}>
+          <Line alt="답글 구분선" />
+          <div className={styles.showMoreReplies}>{`답글 ${replies?.length}개 더 보기`}</div>
+        </div>
+      )}
+      {showReplies && (
+        <ul className={styles.repliesWrapper}>
+          {replies?.map((item: ReplyType) => {
+            return (
+              <li key={item.id} className={styles.repliesOuterWrapper}>
+                <Reply reply={item} listId={listId} currentUserInfo={currentUserInfo} />
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </>
+  );
+}
+
+export default Replies;
+
+interface ReplyProps {
+  reply: ReplyType;
+  listId?: number | undefined;
+  currentUserInfo: UserType | undefined;
+}
+
+function Reply({ reply, listId, currentUserInfo }: ReplyProps) {
+  const queryClient = useQueryClient();
+  const deleteReplyMutation = useMutation({
+    mutationFn: () => deleteReply({ listId: listId, commentId: reply?.commentId, replyId: reply?.id }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getComments] });
+    },
+  });
+
+  const handleDeleteButtonClick = () => {
+    deleteReplyMutation.mutate();
+  };
+  return (
+    <>
+      <div className={styles.replyWrapper}>
+        <Image
+          src={reply.userProfileImageUrl}
+          className={styles.profileImage}
+          width={20}
+          height={20}
+          alt="사용자 프로필 이미지"
+          style={{
+            objectFit: 'cover',
+          }}
+        />
+        <div className={styles.replyContainer}>
+          <div className={styles.replyInformationWrapper}>
+            <span className={styles.replyWriter}>{reply.userNickname}</span>
+            <span className={styles.replyCreatedTime}>{timeDiff(reply.createdDate)}</span>
+          </div>
+          <p className={styles.replyContent}>{reply.content}</p>
+        </div>
+      </div>
+      {currentUserInfo?.id === reply.userId && <DeleteModalButton onDelete={handleDeleteButtonClick} />}
+    </>
+  );
+}
diff --git a/src/app/user/[userId]/list/[listId]/page.tsx b/src/app/user/[userId]/list/[listId]/page.tsx
index 0b2b5630..e03d9401 100644
--- a/src/app/user/[userId]/list/[listId]/page.tsx
+++ b/src/app/user/[userId]/list/[listId]/page.tsx
@@ -1,3 +1,11 @@
-export default function ListPage() {
-  return <div>리스트페이지</div>;
+import * as styles from './ListDetail.css';
+
+import ListInformation from '@/app/user/[userId]/list/[listId]/_components/ListDetailOuter/ListInformation';
+
+export default function ListDetailPage() {
+  return (
+    <section className={styles.wrapper}>
+      <ListInformation />
+    </section>
+  );
 }
diff --git a/src/components/KakaotalkShare/kakaotalkShare.tsx b/src/components/KakaotalkShare/kakaotalkShare.tsx
index 28bb1fac..4a3b93dd 100644
--- a/src/components/KakaotalkShare/kakaotalkShare.tsx
+++ b/src/components/KakaotalkShare/kakaotalkShare.tsx
@@ -1,15 +1,15 @@
 'use client';
 
-import { CollaboratorType } from '@/lib/types/listType';
+import { UserProfileType } from '@/lib/types/userProfileType';
 
 interface kakaotalkShareProps {
   title: string;
   description: string;
   image?: string;
   listItem?: { title: string }[];
-  collaborators: CollaboratorType[];
+  collaborators: UserProfileType[];
   userNickname: string;
-  listId: string;
+  listId: string | null;
 }
 function kakaotalkShare({
   title,
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 29040b02..55b83028 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import ModalPortal from '@/components/ModalPortal';
+import ModalPortal from '@/components/modal-portal';
 import * as styles from './Modal.css';
 import ModalTitle from './ModalTitle';
 import ModalButton from './ModalButton';
diff --git a/src/components/exploreComponents/ListsRecommendation.tsx b/src/components/exploreComponents/ListsRecommendation.tsx
index 8a7b98ba..813abfe6 100644
--- a/src/components/exploreComponents/ListsRecommendation.tsx
+++ b/src/components/exploreComponents/ListsRecommendation.tsx
@@ -3,9 +3,10 @@
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useQuery } from '@tanstack/react-query';
-import { SimpleList } from '@/app/[userNickname]/[listId]/_components/ListDetailInner/RankList';
+import { SimpleList } from '@/app/user/[userId]/list/[listId]/_components/ListDetailInner/RankList';
 import getRecommendedLists from '@/app/_api/explore/getRecommendedLists';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import { useUser } from '@/store/useUser';
 import * as styles from './ListsRecommendation.css';
 import { ListRecommendationType } from './_mockdata/mockdataType';
 import Label from '@/components/Label/Label';
@@ -22,6 +23,10 @@ function ListRecommendation() {
 
   const recommendLists = result?.lists;
 
+  //zustand로 관리하는 user정보 불러오기
+  const { user } = useUser();
+  const userId = user?.id;
+
   const handleShowMoreButtonClick = (url: string) => {
     router.push(`${url}`);
   };
@@ -69,7 +74,10 @@ function ListRecommendation() {
             >
               <SimpleList listData={item.items} />
               <div className={styles.blurBox}>
-                <button className={styles.showMoreButton} onClick={() => handleShowMoreButtonClick(item.listUrl)}>
+                <button
+                  className={styles.showMoreButton}
+                  onClick={() => handleShowMoreButtonClick(`/user/${item.ownerId}/list/${item.id}`)}
+                >
                   <span>더보기</span>
                 </button>
               </div>
diff --git a/src/components/exploreComponents/TrendingLists.css.ts b/src/components/exploreComponents/TrendingLists.css.ts
index 78735c94..7614b14b 100644
--- a/src/components/exploreComponents/TrendingLists.css.ts
+++ b/src/components/exploreComponents/TrendingLists.css.ts
@@ -41,6 +41,7 @@ export const swiperContainer = style({
   height: '100%',
 
   background: blackLayer,
+  cursor: 'pointer',
 });
 
 export const trendingListTitle = style({
diff --git a/src/components/exploreComponents/TrendingLists.tsx b/src/components/exploreComponents/TrendingLists.tsx
index a756f9d7..60551426 100644
--- a/src/components/exploreComponents/TrendingLists.tsx
+++ b/src/components/exploreComponents/TrendingLists.tsx
@@ -1,5 +1,6 @@
 'use client';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { useQuery } from '@tanstack/react-query';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
@@ -12,6 +13,7 @@ import 'swiper/css';
 import * as styles from './TrendingLists.css';
 
 function TrendingList() {
+  const router = useRouter();
   const { data: trendingLists, isPending } = useQuery({
     queryKey: [QUERY_KEYS.getTrendingLists],
     queryFn: () => getTrendingLists(),
@@ -32,7 +34,13 @@ function TrendingList() {
       >
         {trendingLists?.map((item: TrendingListType) => {
           return (
-            <SwiperSlide key={item.id} className={styles.swiperSlide}>
+            <SwiperSlide
+              key={item.id}
+              className={styles.swiperSlide}
+              onClick={() => {
+                router.push(`/user/${item.ownerId}/list/${item.id}`);
+              }}
+            >
               <div
                 className={styles.swiperContainer}
                 style={assignInlineVars({
diff --git a/src/components/exploreComponents/UsersRecommendation.tsx b/src/components/exploreComponents/UsersRecommendation.tsx
index fd15f7ea..eaf23933 100644
--- a/src/components/exploreComponents/UsersRecommendation.tsx
+++ b/src/components/exploreComponents/UsersRecommendation.tsx
@@ -6,27 +6,16 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import getRecommendedUsers from '@/app/_api/explore/getRecommendedUsers';
 
 import * as styles from './UsersRecommendation.css';
-import { recommendationUsersMockdata } from './_mockdata/mockdata';
-import { UsersRecommendationType } from './_mockdata/mockdataType';
+import { UsersRecommendationItemType } from '@/lib/types/exploreType';
 import CloseButton from '/public/icons/close_x_gray.svg';
 
 function UsersRecommendation() {
-  const [recommendUsersList, setRecommendUserList] = useState<UsersRecommendationType[]>(recommendationUsersMockdata);
   const wrapperRef = useRef<HTMLUListElement>(null);
-
-  const { data: usersList, isPending } = useQuery({
+  const { data: usersList } = useQuery({
     queryKey: [QUERY_KEYS.getRecommendedUsers],
     queryFn: () => getRecommendedUsers(),
   });
 
-  const handleRemoveUser = (id: number) => {
-    if (!recommendUsersList) {
-      return null;
-    }
-    const list = recommendUsersList.filter((listItem) => listItem?.id !== id);
-    setRecommendUserList([...list]);
-  };
-
   const handleScrollToRight = () => {
     if (wrapperRef.current) {
       wrapperRef.current.scrollTo({
@@ -38,21 +27,18 @@ function UsersRecommendation() {
 
   return (
     <div className={styles.wrapper}>
-      {recommendUsersList?.length !== 0 && (
+      {usersList?.length !== 0 && (
         <>
           <div className={styles.userRecommendationTitle}>사용자 추천</div>
           <ul className={styles.recommendUsersListWrapper} ref={wrapperRef}>
-            {usersList?.map((item: UsersRecommendationType) => {
-              return (
-                <li key={item.id}>
-                  <UserRecommendListItem
-                    data={item}
-                    handleRemoveUser={handleRemoveUser}
-                    handleScrollToRight={handleScrollToRight}
-                  />
-                </li>
-              );
-            })}
+            {usersList &&
+              usersList?.map((item: UsersRecommendationItemType) => {
+                return (
+                  <li key={item.id}>
+                    <UserRecommendListItem data={item} handleScrollToRight={handleScrollToRight} />
+                  </li>
+                );
+              })}
           </ul>
         </>
       )}
@@ -63,12 +49,11 @@ function UsersRecommendation() {
 export default UsersRecommendation;
 
 interface UserRecommendListItemProps {
-  data: UsersRecommendationType;
-  handleRemoveUser: (id: number) => null | undefined;
+  data: UsersRecommendationItemType;
   handleScrollToRight: () => void;
 }
 
-function UserRecommendListItem({ data, handleRemoveUser, handleScrollToRight }: UserRecommendListItemProps) {
+function UserRecommendListItem({ data, handleScrollToRight }: UserRecommendListItemProps) {
   const [isFollowing, setIsFollowing] = useState(false);
 
   const handleFollowingState = () => {
@@ -83,12 +68,9 @@ function UserRecommendListItem({ data, handleRemoveUser, handleScrollToRight }:
   return (
     <>
       <div className={styles.recommendUserWrapper}>
-        <button onClick={() => handleRemoveUser(data.id)}>
-          <CloseButton width={24} height={24} alt="닫기 버튼" className={styles.closeButton} />
-        </button>
         <div className={styles.imageWrapper}>
           <Image
-            src={data.profileImageUrl}
+            src={data?.profileImageUrl}
             alt="추천 사용자 프로필 이미지"
             fill
             sizes="100vw 100vh"
diff --git a/src/components/exploreComponents/_mockdata/mockdataType.ts b/src/components/exploreComponents/_mockdata/mockdataType.ts
index 4d841799..99f13aee 100644
--- a/src/components/exploreComponents/_mockdata/mockdataType.ts
+++ b/src/components/exploreComponents/_mockdata/mockdataType.ts
@@ -21,6 +21,7 @@ export interface ListRecommendationType {
   category: string;
   backgroundColor: string;
   listUrl: string;
+  ownerId: number;
   ownerNickname: string;
   ownerProfileImage: string;
   labels: LabelType[];
diff --git a/src/components/ModalPortal.ts b/src/components/modal-portal.ts
similarity index 100%
rename from src/components/ModalPortal.ts
rename to src/components/modal-portal.ts
diff --git a/src/hooks/useInfiniteScroll.ts b/src/hooks/useInfiniteScroll.ts
new file mode 100644
index 00000000..2a5bd38b
--- /dev/null
+++ b/src/hooks/useInfiniteScroll.ts
@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+
+const useInfiniteScroll = (handler: () => void) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  //scroll로 한 번 도전해봤는데 ref wrapper 자체가 clientHeight보다 작으면 문제가 생겨서 document로 걸어주었습니다 ㅠ
+  useEffect(() => {
+    const handleScrollToBottom = () => {
+      const element = document.documentElement;
+      if (!element) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = element;
+      if (scrollHeight - scrollTop <= clientHeight + 0.5) {
+        handler();
+      }
+    };
+
+    document.addEventListener('scroll', handleScrollToBottom);
+    return () => {
+      document.removeEventListener('scroll', handleScrollToBottom);
+    };
+  }, [ref, handler]);
+
+  return { ref };
+};
+
+export default useInfiniteScroll;
diff --git a/src/lib/types/commentType.ts b/src/lib/types/commentType.ts
index c90ca7ab..efd6b3f6 100644
--- a/src/lib/types/commentType.ts
+++ b/src/lib/types/commentType.ts
@@ -1 +1,34 @@
 // 댓글 관련 타입
+export interface ReplyType {
+  commentId: number;
+  content: string;
+  id: number;
+  userId: number;
+  userNickname: string;
+  userProfileImageUrl: string;
+  createdDate: string;
+  updatedDate: string;
+}
+
+export interface CommentType {
+  id: number;
+  userId: number;
+  userNickname: string;
+  userProfileImageUrl: string;
+  createdDate: string;
+  updatedDate: string;
+  content: string;
+  replies: ReplyType[] | null;
+  isDeleted: boolean;
+}
+
+export interface CollaboratorType {
+  id?: number;
+  nickname: string;
+  profileImageUrl: string | null;
+}
+
+export interface CreateCommentType {
+  listId: number;
+  comment: string;
+}
diff --git a/src/lib/types/exploreType.ts b/src/lib/types/exploreType.ts
index 8e7a04ca..8367bf08 100644
--- a/src/lib/types/exploreType.ts
+++ b/src/lib/types/exploreType.ts
@@ -7,13 +7,7 @@ export interface TrendingListType {
   itemImageUrl: string;
 }
 
-export interface UsersRecommendationType {
-  id: number;
-  nickname: string;
-  profileImageUrl: string;
-}
-
-export interface UsersRecommendationType {
+export interface UsersRecommendationItemType {
   id: number;
   nickname: string;
   profileImageUrl: string;
diff --git a/src/lib/utils/timeDiff.ts b/src/lib/utils/time-diff.ts
similarity index 94%
rename from src/lib/utils/timeDiff.ts
rename to src/lib/utils/time-diff.ts
index 94ec223d..9ee2d593 100644
--- a/src/lib/utils/timeDiff.ts
+++ b/src/lib/utils/time-diff.ts
@@ -14,7 +14,7 @@
 
 export default function timeDiff(dateString: string) {
   const dateObject = new Date(dateString);
-  const now = new Date(new Date().getTime() + 9 * 60 * 60 * 1000);
+  const now = new Date(new Date().getTime() - 9 * 60 * 60 * 1000);
   const diff = (now.getTime() - dateObject.getTime()) / 1000;
 
   const year = dateObject.getFullYear().toString();
diff --git a/yarn.lock b/yarn.lock
index e5fa1f06..28f2b46f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1128,7 +1128,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.12.0", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
   integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
@@ -1768,7 +1768,7 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b"
   integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==
 
-"@floating-ui/core@^1.6.0":
+"@floating-ui/core@^1.0.0", "@floating-ui/core@^1.6.0":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
   integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
@@ -1783,7 +1783,22 @@
     "@floating-ui/core" "^1.6.0"
     "@floating-ui/utils" "^0.2.1"
 
-"@floating-ui/utils@^0.2.1":
+"@floating-ui/dom@^1.6.1":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.2.tgz#08eb5dd8da69582eeff26144f366b96f131fbd18"
+  integrity sha512-xymkSSowKdGqo0SRr2Mp4czH5A8o2Pum35PAD0ftb3gCcPacWzwhvtUeUqmVXm9EVtm2hThD/lRrFNcahMOaSQ==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/react-dom@^2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.8.tgz#afc24f9756d1b433e1fe0d047c24bd4d9cefaa5d"
+  integrity sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==
+  dependencies:
+    "@floating-ui/dom" "^1.6.1"
+
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
   integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
@@ -2296,6 +2311,90 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@mui/base@5.0.0-beta.36":
+  version "5.0.0-beta.36"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.36.tgz#29ca2de9d387f6d3943b6f18a84415c43e5f206c"
+  integrity sha512-6A8fYiXgjqTO6pgj31Hc8wm1M3rFYCxDRh09dBVk0L0W4cb2lnurRJa3cAyic6hHY+we1S58OdGYRbKmOsDpGQ==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@floating-ui/react-dom" "^2.0.8"
+    "@mui/types" "^7.2.13"
+    "@mui/utils" "^5.15.9"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
+"@mui/core-downloads-tracker@^5.15.9":
+  version "5.15.9"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.9.tgz#c29138c70cc0fb49cd909c29beef3fb0647e5af7"
+  integrity sha512-CSDpVevGaxsvMkiYBZ8ztki1z/eT0mM2MqUT21eCRiMz3DU4zQw5rXG5ML/yTuJF9Z2Wv9SliIeaRAuSR/9Nig==
+
+"@mui/material@^5.15.9":
+  version "5.15.9"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.9.tgz#4d6a4aee002c6a2d0e174e08c6d23245c18dd828"
+  integrity sha512-kbHTZDcFmN8GHKzRpImUEl9AJfFWI/0Kl+DsYVT3kHzQWUuHiKm3uHXR1RCOqr7H8IgHFPdbxItmCSQ/mj7zgg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/base" "5.0.0-beta.36"
+    "@mui/core-downloads-tracker" "^5.15.9"
+    "@mui/system" "^5.15.9"
+    "@mui/types" "^7.2.13"
+    "@mui/utils" "^5.15.9"
+    "@types/react-transition-group" "^4.4.10"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^5.15.9":
+  version "5.15.9"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.9.tgz#3ea3514ed2f6bf68541dbe9206665a82cd89cb01"
+  integrity sha512-/aMJlDOxOTAXyp4F2rIukW1O0anodAMCkv1DfBh/z9vaKHY3bd5fFf42wmP+0GRmwMinC5aWPpNfHXOED1fEtg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/utils" "^5.15.9"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^5.15.9":
+  version "5.15.9"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.9.tgz#444605039ec3fe456bdd5d5cb94330183be62b91"
+  integrity sha512-NRKtYkL5PZDH7dEmaLEIiipd3mxNnQSO+Yo8rFNBNptY8wzQnQ+VjayTq39qH7Sast5cwHKYFusUrQyD+SS4Og==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/system@^5.15.9":
+  version "5.15.9"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.9.tgz#8a34ac0ab133af2550cc7ab980a35174142fd265"
+  integrity sha512-SxkaaZ8jsnIJ77bBXttfG//LUf6nTfOcaOuIgItqfHv60ZCQy/Hu7moaob35kBb+guxVJnoSZ+7vQJrA/E7pKg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/private-theming" "^5.15.9"
+    "@mui/styled-engine" "^5.15.9"
+    "@mui/types" "^7.2.13"
+    "@mui/utils" "^5.15.9"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.13":
+  version "7.2.13"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.13.tgz#d1584912942f9dc042441ecc2d1452be39c666b8"
+  integrity sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==
+
+"@mui/utils@^5.15.9":
+  version "5.15.9"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.9.tgz#2bdf925e274d87cbe90c14eb52d0835318205e86"
+  integrity sha512-yDYfr61bCYUz1QtwvpqYy/3687Z8/nS4zv7lv/ih/6ZFGMl1iolEvxRmR84v2lOYxlds+kq1IVYbXxDKh8Z9sg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@types/prop-types" "^15.7.11"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
 "@next/env@14.0.4":
   version "14.0.4"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-14.0.4.tgz#d5cda0c4a862d70ae760e58c0cd96a8899a2e49a"
@@ -2406,6 +2505,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -3119,7 +3223,7 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
   integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
 
-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.7.11":
   version "15.7.11"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
   integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
@@ -3163,7 +3267,7 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-transition-group@^4.4.0":
+"@types/react-transition-group@^4.4.0", "@types/react-transition-group@^4.4.10":
   version "4.4.10"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
   integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
@@ -5169,7 +5273,7 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^3.0.2, csstype@^3.0.7:
+csstype@^3.0.2, csstype@^3.0.7, csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
@@ -10589,7 +10693,7 @@ react-is@^17.0.1, react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^18.0.0:
+react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
@@ -10693,7 +10797,7 @@ react-toastify@^10.0.4:
   dependencies:
     clsx "^2.1.0"
 
-react-transition-group@^4.3.0:
+react-transition-group@^4.3.0, react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==