diff --git a/app/(route)/admin/_components/ArtistReqList.tsx b/app/(route)/admin/_components/ArtistReqList.tsx
new file mode 100644
index 00000000..89c23886
--- /dev/null
+++ b/app/(route)/admin/_components/ArtistReqList.tsx
@@ -0,0 +1,92 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import classNames from "classnames";
+import Image from "next/image";
+import { FormEvent, useState } from "react";
+import { useForm } from "react-hook-form";
+import InputFile from "@/components/input/InputFile";
+import { instance } from "@/api/api";
+import useInfiniteScroll from "@/hooks/useInfiniteScroll";
+import { makeImgUrlList } from "@/utils/changeImgUrl";
+import { openToast } from "@/utils/toast";
+
+const SIZE = 12;
+
+const ArtistReqList = () => {
+  const [artistList, setArtistList] = useState<any[]>([]);
+  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+  const { data, fetchNextPage, isSuccess, isLoading } = useInfiniteQuery({
+    queryKey: ["admin_artist"],
+    queryFn: async ({ pageParam }) => {
+      const res = await instance.get("/users/new-artists", { size: SIZE, cursorId: pageParam });
+      pageParam === 500 ? setArtistList(res) : setArtistList((prev) => [...prev, ...res]);
+      return res;
+    },
+    initialPageParam: 500,
+    getNextPageParam: (lastPage) => (lastPage.length < SIZE ? null : lastPage.at(-1)?.cursorId),
+  });
+  const containerRef = useInfiniteScroll({ handleScroll: fetchNextPage, deps: [data] });
+
+  const { control, register, watch, getValues } = useForm();
+  const { artistProfile, artistName, birthday, option } = watch();
+  const isDisabled = !(artistProfile && artistProfile.length > 0 && artistName && birthday);
+
+  const handleArtistSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    try {
+      setIsSubmitLoading(true);
+      const imgUrl = await makeImgUrlList(artistProfile, instance);
+      const res =
+        option === "아티스트"
+          ? await instance.post("/artist", { artistImage: imgUrl[0], artistName, groups: [getValues("groupName")], birthday })
+          : await instance.post("/group", { groupImage: imgUrl[0], debutDate: birthday, groupName: artistName });
+      openToast.success("아티스트 등록 성공!");
+    } catch (err) {
+      openToast.error("아티스트 등록 실패!");
+    } finally {
+      setIsSubmitLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-y-scroll pr-4">
+      <h1 className="text-20 font-600">아티스트/그룹 등록하기</h1>
+      <form className="flex flex-col gap-8 text-black-white" onSubmit={handleArtistSubmit}>
+        <p className="text-white-white">*그룹 / 아티스트를 선택해주세요!!!</p>
+        <select className="rounded-sm p-8" {...register("option")}>
+          <option>그룹</option>
+          <option>아티스트</option>
+        </select>
+        <p className="text-white-white">*이미지 (필수)</p>
+        <div className="flex gap-4">
+          <InputFile control={control} {...register("artistProfile")} />
+          <div className="relative h-120 w-120">
+            {artistProfile && <Image alt="등록 요청할 아티스트 이미지" src={URL.createObjectURL(artistProfile[0])} fill sizes="120, 120" className="object-cover" />}
+          </div>
+        </div>
+        {option === "아티스트" && <input placeholder="그룹 ID(선택)" className="rounded-sm p-8" {...register("groupName")} />}
+        <input placeholder={option === "아티스트" ? "아티스트 이름(필수)" : "그룹 이름(필수)"} className="rounded-sm p-8" {...register("artistName")} />
+        <p className="text-white-white">{option === "아티스트" ? "*생일(필수)" : "*데뷔일(필수)"}</p>
+        <input type="date" placeholder="생일(필수)" className="rounded-sm p-8" {...register("birthday")} />
+        <button disabled={isDisabled || isSubmitLoading} className={classNames("rounded-sm bg-red px-12 py-8 text-white-white", { "!bg-gray-300": isDisabled || isSubmitLoading })}>
+          등록
+        </button>
+      </form>
+      <div className="my-16 border border-white-white" />
+      <h1 className="text-20 font-600">아티스트 등록 요청 목록</h1>
+      {isSuccess &&
+        (data.pages[0].length > 0 ? (
+          <div>
+            {artistList.map(({ id, name }) => (
+              <div key={id}>{name}</div>
+            ))}
+          </div>
+        ) : (
+          <p>아티스트 요청 데이터가 없습니다.</p>
+        ))}
+      {isLoading && <p>로딩중...</p>}
+      <div ref={containerRef} className="h-4" />
+    </div>
+  );
+};
+
+export default ArtistReqList;
diff --git a/app/(route)/admin/_components/EventClaimList.tsx b/app/(route)/admin/_components/EventClaimList.tsx
new file mode 100644
index 00000000..14541848
--- /dev/null
+++ b/app/(route)/admin/_components/EventClaimList.tsx
@@ -0,0 +1,70 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import Link from "next/link";
+import { useState } from "react";
+import { instance } from "@/api/api";
+import useInfiniteScroll from "@/hooks/useInfiniteScroll";
+import { getSession } from "@/store/session/cookies";
+import { openToast } from "@/utils/toast";
+
+const SIZE = 12;
+
+const EventClaimList = () => {
+  const [claimList, setClaimList] = useState<any[]>([]);
+  const { data, fetchNextPage, isSuccess, isLoading } = useInfiniteQuery({
+    queryKey: ["admin_review_claim"],
+    queryFn: async ({ pageParam }) => {
+      const res = await instance.get("/users/events/all", { size: SIZE, cursorId: pageParam });
+      pageParam === 1 ? setClaimList(res) : setClaimList((prev) => [...prev, ...res]);
+      return res;
+    },
+    initialPageParam: 9999,
+    getNextPageParam: (lastPage) => (lastPage.length < SIZE ? null : lastPage.at(-1)?.cursorId),
+  });
+  const containerRef = useInfiniteScroll({ handleScroll: fetchNextPage, deps: [data] });
+
+  const session = getSession();
+  const deleteEvent = async (id: string) => {
+    try {
+      await instance.delete(`/event/${id}`, { userId: session?.user.userId });
+      openToast.success("이벤트 삭제 완료!");
+    } catch (error) {
+      openToast.error("이벤트 삭제 실패!");
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-y-scroll pr-4">
+      {isSuccess &&
+        (data.pages[0].length > 0 ? (
+          claimList.map(({ id, claims }) => (
+            <div key={claims.id} className="flex justify-between gap-4 border-b border-white-white px-4 py-12">
+              <div className="flex flex-col gap-12">
+                <div>
+                  <p>이벤트 id: {id}</p>
+                  <p>신고 개수: {claims.length}</p>
+                  <Link href={`/event/${id}`} className="underline">
+                    보러 가기
+                  </Link>
+                </div>
+                {claims.map(({ content, user }: { content: string; user: { id: string; nickName: string } }) => (
+                  <div className="border border-white-white p-8">
+                    <p>신고 내용: {content}</p>
+                    <p>신고자: {user?.nickName}</p>
+                  </div>
+                ))}
+              </div>
+              <button onClick={() => deleteEvent(id)} className="rounded-sm bg-red p-4">
+                이벤트 삭제
+              </button>
+            </div>
+          ))
+        ) : (
+          <p>신고 데이터가 없습니다.</p>
+        ))}
+      {isLoading && <p>로딩중...</p>}
+      <div ref={containerRef} className="h-4" />
+    </div>
+  );
+};
+
+export default EventClaimList;
diff --git a/app/(route)/admin/_components/EventList.tsx b/app/(route)/admin/_components/EventList.tsx
new file mode 100644
index 00000000..3aca851c
--- /dev/null
+++ b/app/(route)/admin/_components/EventList.tsx
@@ -0,0 +1,34 @@
+import { FormEvent } from "react";
+import { useForm } from "react-hook-form";
+import { instance } from "@/api/api";
+import { getSession } from "@/store/session/cookies";
+import { openToast } from "@/utils/toast";
+
+const EventList = () => {
+  const { register, getValues, setValue } = useForm();
+  const session = getSession();
+
+  const submitDelete = async (event: FormEvent) => {
+    event.preventDefault();
+    const id = getValues("eventId");
+    try {
+      await instance.delete(`/event/${id}`, { userId: session?.user.userId });
+      openToast.success("삭제 완료!");
+    } catch (error) {
+      openToast.error("존재하지 않는 이벤트입니다.");
+    } finally {
+      setValue("eventId", "");
+    }
+  };
+
+  return (
+    <form className="flex w-full flex-col gap-8" onSubmit={submitDelete}>
+      <input {...register("eventId")} className="rounded-sm p-12 text-gray-900" placeholder="이벤트 id 입력" />
+      <button type="submit" className="rounded-sm bg-red px-12 py-8">
+        삭제
+      </button>
+    </form>
+  );
+};
+
+export default EventList;
diff --git a/app/(route)/admin/_components/OptionList.tsx b/app/(route)/admin/_components/OptionList.tsx
new file mode 100644
index 00000000..86051156
--- /dev/null
+++ b/app/(route)/admin/_components/OptionList.tsx
@@ -0,0 +1,22 @@
+import { useStore } from "@/store/index";
+import { AdminOptionType } from "@/store/slice/adminSlice";
+
+const ADMIN_LIST = ["아티스트 요청 목록", "리뷰 신고 목록", "이벤트 신고 목록", "행사 삭제"] as AdminOptionType[];
+
+const OptionList = () => {
+  const { setOption } = useStore((state) => ({ setOption: state.setAdminOption }));
+
+  return (
+    <div className="flex w-full max-w-[51rem] flex-col gap-12">
+      <span className="overflow-hidden whitespace-nowrap text-center text-20 font-600 text-red">WARNING! WARNING! WARNING! WARNING! WARNING!</span>
+      {ADMIN_LIST.map((item) => (
+        <button key={item} type="button" onClick={() => setOption(item)} className="rounded-sm bg-black-white p-16 text-center text-white-black hover:bg-red">
+          {item}
+        </button>
+      ))}
+      <span className="overflow-hidden whitespace-nowrap text-center text-20 font-600 text-red">WARNING! WARNING! WARNING! WARNING! WARNING!</span>
+    </div>
+  );
+};
+
+export default OptionList;
diff --git a/app/(route)/admin/_components/ReviewClaimList.tsx b/app/(route)/admin/_components/ReviewClaimList.tsx
new file mode 100644
index 00000000..a08d3368
--- /dev/null
+++ b/app/(route)/admin/_components/ReviewClaimList.tsx
@@ -0,0 +1,66 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { instance } from "@/api/api";
+import useInfiniteScroll from "@/hooks/useInfiniteScroll";
+import { getSession } from "@/store/session/cookies";
+import { openToast } from "@/utils/toast";
+
+const SIZE = 12;
+
+const ReviewClaimList = () => {
+  const [claimList, setClaimList] = useState<any[]>([]);
+  const { data, fetchNextPage, isSuccess, isLoading } = useInfiniteQuery({
+    queryKey: ["admin_review_claim"],
+    queryFn: async ({ pageParam }) => {
+      const res = await instance.get("/reviews/claims/all", { size: SIZE, cursorId: pageParam });
+      pageParam === 1 ? setClaimList(res) : setClaimList((prev) => [...prev, ...res]);
+      return res;
+    },
+    initialPageParam: 9999,
+    getNextPageParam: (lastPage) => (lastPage.length < SIZE ? null : lastPage.at(-1)?.cursorId),
+  });
+  const containerRef = useInfiniteScroll({ handleScroll: fetchNextPage, deps: [data] });
+
+  const session = getSession();
+  const deleteReview = async (id: string) => {
+    try {
+      await instance.delete(`/reviews/${id}/users/${session?.user.userId}`);
+      openToast.success("후기 삭제 완료!");
+    } catch (error) {
+      openToast.error("후기 삭제 실패!");
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-y-scroll pr-4">
+      {isSuccess &&
+        (data.pages[0].length > 0 ? (
+          claimList.map(({ id, claims }) => (
+            <div key={claims.id} className="flex justify-between gap-4 border-b border-white-white px-4 py-12">
+              <div className="flex flex-col gap-12">
+                <div>
+                  <p>후기 id: {id}</p>
+                  <p>신고 개수: {claims.length}</p>
+                </div>
+                {claims.map(({ content, user }: { content: string; user: { id: string; nickName: string } }) => (
+                  <div className="border border-white-white p-8">
+                    <p>신고 내용: {content}</p>
+                    <p>신고자: {user?.nickName}</p>
+                  </div>
+                ))}
+              </div>
+              <button onClick={() => deleteReview(id)} className="rounded-sm bg-red p-4">
+                후기 삭제
+              </button>
+            </div>
+          ))
+        ) : (
+          <p>신고 데이터가 없습니다.</p>
+        ))}
+      {isLoading && <p>로딩중...</p>}
+      <div ref={containerRef} className="h-4" />
+    </div>
+  );
+};
+
+export default ReviewClaimList;
diff --git a/app/(route)/admin/page.tsx b/app/(route)/admin/page.tsx
new file mode 100644
index 00000000..2fc575ee
--- /dev/null
+++ b/app/(route)/admin/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { FormEvent, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import MetaTag from "@/components/MetaTag";
+import { useStore } from "@/store/index";
+import { getSession } from "@/store/session/cookies";
+import { META_TAG } from "@/constants/metaTag";
+import ArtistReqList from "./_components/ArtistReqList";
+import EventClaimList from "./_components/EventClaimList";
+import EventList from "./_components/EventList";
+import OptionList from "./_components/OptionList";
+import ReviewClaimList from "./_components/ReviewClaimList";
+
+const RENDER_ADMIN = {
+  "선택 화면": <OptionList />,
+  "아티스트 요청 목록": <ArtistReqList />,
+  "리뷰 신고 목록": <ReviewClaimList />,
+  "이벤트 신고 목록": <EventClaimList />,
+  "행사 삭제": <EventList />,
+};
+
+const Admin = () => {
+  const router = useRouter();
+  const session = getSession();
+  const [isAdminLogin, setIsAdminLogin] = useState(false);
+  const { isAuth, setIsAuth, option, setOption } = useStore((state) => ({
+    isAuth: state.isAdminAuth,
+    setIsAuth: state.setIsAdminAuth,
+    option: state.adminOption,
+    setOption: state.setAdminOption,
+  }));
+  const { register, getValues } = useForm();
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    if (process.env.NEXT_PUBLIC_ADMIN_PW === getValues("adminPw")) setIsAuth(true);
+  };
+
+  useEffect(() => {
+    if (session?.user.userId === process.env.NEXT_PUBLIC_ADMIN_USERID) {
+      setIsAdminLogin(true);
+    } else router.replace("/404");
+  }, []);
+
+  return (
+    <>
+      <MetaTag title={META_TAG.admin.title} description={META_TAG.admin.description} />
+      {isAdminLogin && (
+        <div className="relative flex h-[calc(100vh-7.2rem)] items-center justify-center bg-black-white px-20 pb-12 pt-56 text-14 text-white-white pc:h-[calc(100vh-6.4rem)]">
+          {isAuth ? (
+            <>
+              {option !== "선택 화면" && (
+                <button className="absolute left-20 top-20" onClick={() => setOption("선택 화면")}>
+                  뒤로가기
+                </button>
+              )}
+              {RENDER_ADMIN[option]}
+            </>
+          ) : (
+            <form className="flex flex-col items-center gap-16" onSubmit={handleSubmit}>
+              <p className="flex flex-col items-center gap-4">
+                <span className="text-20 font-600 text-red">WARNING!</span>
+                인증이 필요한 페이지입니다.
+              </p>
+              <input {...register("adminPw")} type="text" className="rounded-sm bg-gray-50 p-12 text-gray-800" />
+              <button type="submit" className="hover:text-red">
+                확인
+              </button>
+            </form>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Admin;
diff --git a/app/(route)/artist/[artistId]/_components/MobileTab.tsx b/app/(route)/artist/[artistId]/_components/MobileTab.tsx
new file mode 100644
index 00000000..81ee8b15
--- /dev/null
+++ b/app/(route)/artist/[artistId]/_components/MobileTab.tsx
@@ -0,0 +1,73 @@
+import SortButton from "@/(route)/search/_components/SortButton";
+import Image from "next/image";
+import { Dispatch, SetStateAction } from "react";
+import TimeFilter from "@/components/TimeFilter";
+import { MapCallbackType, MapVarType } from "@/hooks/useCustomMap";
+import { EventCardType } from "@/types/index";
+import SortIcon from "@/public/icon/sort.svg";
+import useArtistSheet from "../_hooks/useArtistSheet";
+import EventCard from "./EventCard";
+
+interface Props {
+  mapVar: MapVarType;
+  mapCallback: MapCallbackType;
+  image: string;
+  name: string;
+  status: number;
+  setStatus: Dispatch<SetStateAction<number>>;
+  sort: "최신순" | "인기순";
+  setSort: Dispatch<SetStateAction<"최신순" | "인기순">>;
+  eventData: EventCardType[];
+}
+
+const MobileTab = ({ mapVar, mapCallback, image, name, status, setStatus, sort, setSort, eventData }: Props) => {
+  const isEmpty = eventData.length === 0;
+
+  const { sheet, content } = useArtistSheet();
+
+  return (
+    <div
+      ref={sheet}
+      className="absolute top-[calc(100vh-384px)] flex min-h-84 w-full flex-col gap-16 rounded-t-lg bg-white-black pt-28 shadow-2xl transition duration-150 ease-out tablet:hidden"
+    >
+      <div className="absolute left-[calc((100%-64px)/2)] top-12 h-4 w-64 rounded-sm bg-gray-700 tablet:hidden" />
+      <div className="flex flex-row items-center justify-start gap-12 px-20 pc:w-full">
+        <div className="relative h-36 w-36 pc:h-64 pc:w-64">
+          <Image src={image ?? "/image/no-profile.png"} alt="아티스트 이미지" fill sizes="64px" className="rounded-full object-cover" />
+        </div>
+        <p className="text-16 leading-[2.4rem] text-gray-700">
+          <span className="font-600">{name}</span> 행사 보기
+        </p>
+      </div>
+      <TimeFilter setStatus={setStatus} status={status} />
+      <div className="flex items-center gap-8 px-20">
+        <SortIcon />
+        <SortButton onClick={() => setSort("최신순")} selected={sort === "최신순"}>
+          최신순
+        </SortButton>
+        <SortButton onClick={() => setSort("인기순")} selected={sort === "인기순"}>
+          인기순
+        </SortButton>
+      </div>
+      <div ref={content} className="max-h-[80rem] min-h-200 overflow-scroll pb-[70rem] scrollbar-none">
+        {isEmpty ? (
+          <p className="flex-center w-full pt-20 text-14 font-500">행사가 없습니다.</p>
+        ) : (
+          <div className="px-20">
+            {eventData.map((event) => (
+              <EventCard
+                key={event.id}
+                data={event}
+                isSelected={mapVar.selectedCard?.id === event.id}
+                onCardClick={() => mapCallback.handleCardClick(event)}
+                scrollRef={mapVar.selectedCard?.id === event.id ? mapCallback.scrollRefCallback : null}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MobileTab;
diff --git a/app/(route)/artist/[artistId]/_components/PcTab.tsx b/app/(route)/artist/[artistId]/_components/PcTab.tsx
new file mode 100644
index 00000000..67425a53
--- /dev/null
+++ b/app/(route)/artist/[artistId]/_components/PcTab.tsx
@@ -0,0 +1,70 @@
+import SortButton from "@/(route)/search/_components/SortButton";
+import Image from "next/image";
+import { Dispatch, SetStateAction } from "react";
+import TimeFilter from "@/components/TimeFilter";
+import { MapCallbackType, MapVarType } from "@/hooks/useCustomMap";
+import { EventCardType } from "@/types/index";
+import SortIcon from "@/public/icon/sort.svg";
+import EventCard from "./EventCard";
+
+interface Props {
+  mapVar: MapVarType;
+  mapCallback: MapCallbackType;
+  image: string;
+  name: string;
+  status: number;
+  setStatus: Dispatch<SetStateAction<number>>;
+  sort: "최신순" | "인기순";
+  setSort: Dispatch<SetStateAction<"최신순" | "인기순">>;
+  eventData: EventCardType[];
+}
+
+const PcTab = ({ mapVar, mapCallback, image, name, status, setStatus, sort, setSort, eventData }: Props) => {
+  const isEmpty = eventData.length === 0;
+
+  return (
+    <>
+      {mapVar.toggleTab && (
+        <div className="tablet:rounded-none absolute bottom-0 top-0 hidden max-h-full min-h-84 w-360 flex-col gap-16 rounded-t-lg border border-gray-100 border-t-transparent bg-white-black pt-20 shadow-none tablet:flex pc:top-0 pc:h-[84rem] pc:w-400 pc:rounded-l-lg pc:border-t-gray-100 pc:py-20">
+          <div className="flex flex-row items-center justify-start gap-12 px-20 pc:w-full">
+            <div className="relative h-36 w-36 pc:h-64 pc:w-64">
+              <Image src={image ?? "/image/no-profile.png"} alt="아티스트 이미지" fill sizes="64px" className="rounded-full object-cover" />
+            </div>
+            <p className="text-16 leading-[2.4rem] text-gray-700">
+              <span className="font-600">{name}</span> 행사 보기
+            </p>
+          </div>
+          <TimeFilter setStatus={setStatus} status={status} />
+          <div className="flex items-center gap-8 px-20">
+            <SortIcon />
+            <SortButton onClick={() => setSort("최신순")} selected={sort === "최신순"}>
+              최신순
+            </SortButton>
+            <SortButton onClick={() => setSort("인기순")} selected={sort === "인기순"}>
+              인기순
+            </SortButton>
+          </div>
+          <div className="min-h-200 overflow-scroll scrollbar-none pc:h-[65rem]">
+            {isEmpty ? (
+              <p className="flex-center w-full pt-20 text-14 font-500">행사가 없습니다.</p>
+            ) : (
+              <div className="px-20">
+                {eventData.map((event) => (
+                  <EventCard
+                    key={event.id}
+                    data={event}
+                    isSelected={mapVar.selectedCard?.id === event.id}
+                    onCardClick={() => mapCallback.handleCardClick(event)}
+                    scrollRef={mapVar.selectedCard?.id === event.id ? mapCallback.scrollRefCallback : null}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default PcTab;
diff --git a/app/(route)/artist/[artistId]/_hooks/useArtistSheet.tsx b/app/(route)/artist/[artistId]/_hooks/useArtistSheet.tsx
new file mode 100644
index 00000000..67442906
--- /dev/null
+++ b/app/(route)/artist/[artistId]/_hooks/useArtistSheet.tsx
@@ -0,0 +1,74 @@
+import { useCallback, useRef } from "react";
+
+interface BottomSheetMetrics {
+  touchStart: number;
+  position: number;
+  isContentAreaTouched: boolean;
+}
+
+const SNAP = {
+  top: 280,
+  bottom: 670,
+};
+
+const useArtistSheet = () => {
+  const metrics = useRef<BottomSheetMetrics>({
+    touchStart: 0,
+    position: 0,
+    isContentAreaTouched: false,
+  });
+
+  const sheet = useCallback((node: HTMLElement | null) => {
+    if (node !== null) {
+      const handleTouchStart = (e: TouchEvent) => {
+        metrics.current.touchStart = e.touches[0].clientY;
+      };
+
+      const handleTouchMove = (e: TouchEvent) => {
+        const { touchStart, isContentAreaTouched, position } = metrics.current;
+        const currentTouch = e.touches[0];
+
+        if (!isContentAreaTouched) {
+          e.preventDefault();
+          const touchOffset = currentTouch.clientY - touchStart + position;
+          node.style.setProperty("transform", `translateY(${touchOffset}px)`);
+        }
+      };
+
+      const handleTouchEnd = (e: TouchEvent) => {
+        const currentY = node.getBoundingClientRect().y;
+
+        if (currentY > SNAP.bottom) {
+          node.style.setProperty("transform", `translateY(240px)`);
+          metrics.current.position = 240;
+        } else if (currentY < SNAP.bottom && currentY > SNAP.top) {
+          node.style.setProperty("transform", "translateY(0px)");
+          metrics.current.position = 0;
+        } else if (currentY < SNAP.top) {
+          node.style.setProperty("transform", `translateY(-360px)`);
+          metrics.current.position = -360;
+        }
+
+        metrics.current.isContentAreaTouched = false;
+      };
+
+      node.addEventListener("touchstart", handleTouchStart);
+      node.addEventListener("touchmove", handleTouchMove);
+      node.addEventListener("touchend", handleTouchEnd);
+    }
+  }, []);
+
+  const content = useCallback((node: HTMLElement | null) => {
+    if (node !== null) {
+      const handleTouchStart = () => {
+        metrics.current.isContentAreaTouched = true;
+      };
+
+      node.addEventListener("touchstart", handleTouchStart);
+    }
+  }, []);
+
+  return { sheet, content };
+};
+
+export default useArtistSheet;
diff --git a/app/(route)/artist/[artistId]/page.tsx b/app/(route)/artist/[artistId]/page.tsx
index 52aa1fc8..ffab9a46 100644
--- a/app/(route)/artist/[artistId]/page.tsx
+++ b/app/(route)/artist/[artistId]/page.tsx
@@ -1,22 +1,19 @@
 "use client";
 
-import SortButton from "@/(route)/search/_components/SortButton";
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import Image from "next/image";
 import { useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import KakaoMap from "@/components/KakaoMap";
-import TimeFilter from "@/components/TimeFilter";
+import MetaTag from "@/components/MetaTag";
 import DottedLayout from "@/components/layout/DottedLayout";
 import { instance } from "@/api/api";
 import useCustomMap from "@/hooks/useCustomMap";
-import useInfiniteScroll from "@/hooks/useInfiniteScroll";
-import { getSession } from "@/store/session/cookies";
 import { getArtist, getGroup } from "@/utils/getArtist";
 import { Res_Get_Type } from "@/types/getResType";
 import { SORT, STATUS, SortItem } from "@/constants/eventStatus";
-import SortIcon from "@/public/icon/sort.svg";
-import EventCard from "./_components/EventCard";
+import MobileTab from "./_components/MobileTab";
+import PcTab from "./_components/PcTab";
 
 const SIZE = 9999;
 
@@ -32,35 +29,19 @@ const ArtistIdPage = () => {
   const [sort, setSort] = useState<SortItem>(SORT[0]);
   const [status, setStatus] = useState(3);
 
-  const session = getSession();
-
-  const getArtistData = async ({ pageParam = 1 }) => {
-    const data: Res_Get_Type["eventSearch"] = await instance.get(`/event/artist/${artistId}`, {
-      sort,
-      size: SIZE,
-      page: pageParam,
-      status: STATUS[status],
-      userId: session?.user.userId ?? "",
-      artistId,
-    });
-    return data;
-  };
-
   const {
     data: artistData,
-    fetchNextPage,
     isSuccess,
     refetch,
-  } = useInfiniteQuery({
-    initialPageParam: 1,
+  } = useQuery<Res_Get_Type["eventSearch"]>({
     queryKey: ["events", artistId],
-    queryFn: getArtistData,
-    getNextPageParam: (lastPage) => (lastPage.page * SIZE < lastPage.totalCount ? lastPage.page + 1 : null),
-  });
-
-  const containerRef = useInfiniteScroll({
-    handleScroll: fetchNextPage,
-    deps: [artistData],
+    queryFn: () =>
+      instance.get(`/event/artist/${artistId}`, {
+        sort,
+        size: SIZE,
+        status: STATUS[status],
+        artistId,
+      }),
   });
 
   useEffect(() => {
@@ -71,68 +52,39 @@ const ArtistIdPage = () => {
 
   if (!isSuccess) return;
 
-  const isEmpty = artistData.pages[0].eventList.length === 0;
-  const mapData = artistData.pages[0].eventList;
+  const eventData = artistData.eventList;
 
   return (
-    <DottedLayout size="wide">
-      <div className="relative h-[calc(100vh-7.2rem)] w-full overflow-hidden pc:mb-128 pc:mt-48 pc:h-[84rem]">
-        <div
-          className={`absolute left-0 top-0 z-zero h-full w-full ${mapVar.toggleTab ? "tablet:pl-360 pc:pl-400" : ""} pb-344 tablet:pb-0 pc:h-[84rem] pc:rounded-lg pc:border pc:border-gray-100`}
-        >
-          <KakaoMap scheduleData={mapData} {...mapVar} />
-        </div>
-        <button
-          onClick={mapCallback.handleButtonClick}
-          className={`tablet:flex-center absolute z-nav hidden h-60 w-24 rounded-r-sm border border-gray-100 bg-white-white tablet:top-44 pc:top-24 ${mapVar.toggleTab ? "border-l-white-white tablet:left-360 pc:left-400" : "left-0"}`}
-        >
-          <Image src="/icon/arrow-left.svg" width={20} height={20} alt="화살표" className={`${mapVar.toggleTab || "scale-x-[-1]"}`} />
-        </button>
-        {mapVar.toggleTab && (
-          <div className="absolute bottom-0 flex max-h-352 min-h-84 w-full flex-col gap-16 rounded-t-lg bg-white-black pt-28 shadow-2xl tablet:top-0 tablet:max-h-full tablet:w-360 tablet:rounded-none tablet:border tablet:border-gray-100 tablet:border-t-transparent tablet:pt-20 tablet:shadow-none pc:top-0 pc:h-[84rem] pc:w-400 pc:rounded-l-lg pc:border-t-gray-100 pc:py-20">
-            <div className="absolute left-[calc((100%-64px)/2)] top-12 h-4 w-64 rounded-sm bg-gray-700 tablet:hidden" />
-            <div className="flex flex-row items-center justify-start gap-12 px-20 pc:w-full">
-              <div className="relative h-36 w-36 pc:h-64 pc:w-64">
-                <Image src={image ? image : "/image/no-profile.png"} alt="아티스트 이미지" fill sizes="64px" className="rounded-full object-cover" />
-              </div>
-              <p className="text-16 leading-[2.4rem] text-gray-700">
-                <span className="font-600">{name}</span> 행사 보기
-              </p>
-            </div>
-            <TimeFilter setStatus={setStatus} status={status} />
-            <div className="flex items-center gap-8 px-20">
-              <SortIcon />
-              <SortButton onClick={() => setSort("최신순")} selected={sort === "최신순"}>
-                최신순
-              </SortButton>
-              <SortButton onClick={() => setSort("인기순")} selected={sort === "인기순"}>
-                인기순
-              </SortButton>
-            </div>
-            <div className="min-h-200 overflow-scroll scrollbar-none pc:h-[65rem]">
-              {isEmpty ? (
-                <p className="flex-center w-full pt-20 text-14 font-500">행사가 없습니다.</p>
-              ) : (
-                <div className="px-20">
-                  {artistData.pages.map((page) =>
-                    page.eventList.map((event) => (
-                      <EventCard
-                        key={event.id}
-                        data={event}
-                        isSelected={mapVar.selectedCard?.id === event.id}
-                        onCardClick={() => mapCallback.handleCardClick(event)}
-                        scrollRef={mapVar.selectedCard?.id === event.id ? mapCallback.scrollRefCallback : null}
-                      />
-                    )),
-                  )}
-                </div>
-              )}
-              <div ref={containerRef} className="h-20 w-full" />
-            </div>
+    <>
+      <MetaTag title={`${name}`} imgUrl={image} description={`${name}의 행사 정보들을 지도를 통해 쉽게 확인해 보세요.`} />
+      <DottedLayout size="wide">
+        <div className="relative h-[calc(100vh-7.2rem)] w-full overflow-hidden pc:mb-128 pc:mt-48 pc:h-[84rem]">
+          <div
+            className={`absolute left-0 top-0 z-zero h-full w-full ${mapVar.toggleTab ? "tablet:pl-360 pc:pl-400" : ""} tablet:pb-0 pc:h-[84rem] pc:rounded-lg pc:border pc:border-gray-100`}
+          >
+            <KakaoMap scheduleData={eventData} {...mapVar} />
           </div>
-        )}
-      </div>
-    </DottedLayout>
+          <button
+            onClick={mapCallback.handleButtonClick}
+            className={`tablet:flex-center absolute z-nav hidden h-60 w-24 rounded-r-sm border border-gray-100 bg-white-white tablet:top-44 pc:top-24 ${mapVar.toggleTab ? "border-l-white-white tablet:left-360 pc:left-400" : "left-0"}`}
+          >
+            <Image src="/icon/arrow-left.svg" width={20} height={20} alt="화살표" className={`${mapVar.toggleTab || "scale-x-[-1]"}`} />
+          </button>
+          <PcTab mapVar={mapVar} mapCallback={mapCallback} eventData={eventData} name={name} image={image} sort={sort} setSort={setSort} status={status} setStatus={setStatus} />
+          <MobileTab
+            mapVar={mapVar}
+            mapCallback={mapCallback}
+            eventData={eventData}
+            name={name}
+            image={image}
+            sort={sort}
+            setSort={setSort}
+            status={status}
+            setStatus={setStatus}
+          />
+        </div>
+      </DottedLayout>
+    </>
   );
 };
 
diff --git a/app/(route)/event/[eventId]/_components/Banner.tsx b/app/(route)/event/[eventId]/_components/Banner.tsx
index 07c4152a..5091a100 100644
--- a/app/(route)/event/[eventId]/_components/Banner.tsx
+++ b/app/(route)/event/[eventId]/_components/Banner.tsx
@@ -145,7 +145,7 @@ const Banner = ({ data, eventId }: Props) => {
             </SubDescription>
             {hasEditApplication && <Alert href={pathname + "/approve"} message="수정요청 정보가 있습니다." />}
           </div>
-          <div className="absolute bottom-0 right-0 hidden text-14 font-400 pc:block">
+          <div className="bottom-0 right-0 pt-12 text-12 font-400 pc:absolute pc:block pc:text-14">
             <Link href={pathname + "/edit"} className="mr-16 text-blue">
               수정하기
             </Link>
@@ -176,7 +176,7 @@ const MainDescription = ({ placeName, artists, eventType }: MainDescriptionProps
 
   return (
     <div className="flex flex-col gap-8 border-b border-gray-100 pb-16 pc:gap-12 pc:pb-32">
-      <h1 className="pr-20 text-20 font-600 pc:text-[2.8rem] pc:leading-[2.4rem]">{placeName}</h1>
+      <h1 className="pr-32 text-20 font-600 pc:text-[2.8rem] pc:leading-[2.8rem]">{placeName}</h1>
       <div className="flex items-center gap-8">
         <span className="text-16 font-600 pc:max-w-308 pc:text-20">{formattedArtist}</span>
         <Chip kind="event" label={eventType} />
diff --git a/app/(route)/mypage/_components/UserProfile.tsx b/app/(route)/mypage/_components/UserProfile.tsx
index c9d707fc..3897410e 100644
--- a/app/(route)/mypage/_components/UserProfile.tsx
+++ b/app/(route)/mypage/_components/UserProfile.tsx
@@ -3,7 +3,7 @@
 import dynamic from "next/dynamic";
 import Image from "next/image";
 import { useAuth } from "@/hooks/useAuth";
-import { useBottomSheet } from "@/hooks/useBottomSheet";
+import useBottomSheet from "@/hooks/useBottomSheet";
 import SettingList from "./SettingList";
 
 const MyPageBottomSheet = dynamic(() => import("@/components/bottom-sheet/MyPageBottomSheet"), { ssr: false });
diff --git a/app/(route)/mypage/_components/tab/MyReviewTab/MyReview.tsx b/app/(route)/mypage/_components/tab/MyReviewTab/MyReview.tsx
index 3dbe28d1..a3a3b455 100644
--- a/app/(route)/mypage/_components/tab/MyReviewTab/MyReview.tsx
+++ b/app/(route)/mypage/_components/tab/MyReviewTab/MyReview.tsx
@@ -6,7 +6,7 @@ import ControlMyDataBottomSheet from "@/components/bottom-sheet/ControlMyDataBot
 import KebabContents from "@/components/card/KebabContents";
 import Chip from "@/components/chip/Chip";
 import { instance } from "@/api/api";
-import { useBottomSheet } from "@/hooks/useBottomSheet";
+import useBottomSheet from "@/hooks/useBottomSheet";
 import { formatAddress, formatDate } from "@/utils/formatString";
 import { MyReviewType } from "@/types/index";
 import HeartIcon from "@/public/icon/heart.svg";
diff --git a/app/(route)/page.tsx b/app/(route)/page.tsx
index c9bb125c..d972242d 100644
--- a/app/(route)/page.tsx
+++ b/app/(route)/page.tsx
@@ -11,7 +11,7 @@ const Home = () => {
     <>
       <MetaTag />
       <DottedLayout size="wide">
-        <div className="flex flex-col pb-72 pt-16 tablet:pt-36 pc:items-center pc:pb-0 pc:pt-56">
+        <div className="flex flex-col pb-72 pt-24 tablet:pt-36 pc:items-center pc:pb-0 pc:pt-56">
           <main className="flex flex-col gap-40 overflow-hidden pc:w-[112rem]">
             <SearchBar />
             <ArtistOfMonth />
diff --git a/app/(route)/post/_components/_inputs/MainInput.tsx b/app/(route)/post/_components/_inputs/MainInput.tsx
index 636de551..76614885 100644
--- a/app/(route)/post/_components/_inputs/MainInput.tsx
+++ b/app/(route)/post/_components/_inputs/MainInput.tsx
@@ -2,7 +2,7 @@ import InitButton from "@/(route)/event/[eventId]/edit/_components/InitButton";
 import dynamic from "next/dynamic";
 import { useFormContext } from "react-hook-form";
 import InputText from "@/components/input/InputText";
-import { useBottomSheet } from "@/hooks/useBottomSheet";
+import useBottomSheet from "@/hooks/useBottomSheet";
 import { validateEdit } from "@/utils/editValidate";
 import { handleEnterDown } from "@/utils/handleEnterDown";
 import { PostType } from "../../page";
diff --git a/app/(route)/post/_components/_inputs/StarInput.tsx b/app/(route)/post/_components/_inputs/StarInput.tsx
index a5f3d51d..5a5d8993 100644
--- a/app/(route)/post/_components/_inputs/StarInput.tsx
+++ b/app/(route)/post/_components/_inputs/StarInput.tsx
@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 import EventTypeList from "@/components/bottom-sheet/content/EventTypeList";
 import InputText from "@/components/input/InputText";
-import { useBottomSheet } from "@/hooks/useBottomSheet";
+import useBottomSheet from "@/hooks/useBottomSheet";
 import useGetWindowWidth from "@/hooks/useGetWindowWidth";
 import { useModal } from "@/hooks/useModal";
 import { checkArrUpdate } from "@/utils/checkArrUpdate";
diff --git a/app/(route)/search/_components/Filter.tsx b/app/(route)/search/_components/Filter.tsx
index 9d33ec71..5f8d4b36 100644
--- a/app/(route)/search/_components/Filter.tsx
+++ b/app/(route)/search/_components/Filter.tsx
@@ -37,7 +37,7 @@ const Filter = ({ visible, filter, resetFilter, sort, handleSort, status, handle
   return (
     <div className={`animate-fadeIn flex-col gap-12 px-20 pb-8 pc:p-0 ${visible ? "flex" : "hidden pc:block"}`}>
       <div className="flex w-full gap-8 overflow-auto scrollbar-hide">
-        <button onClick={resetFilter} type="button" className="flex-center h-32 w-32 rounded-full bg-gray-50">
+        <button onClick={resetFilter} type="button" className="flex-center h-32 w-32 shrink-0 rounded-full bg-gray-50">
           <ResetIcon />
         </button>
         <FilterButton onClick={openSearchBottomSheet.bigRegion} selected={Boolean(filter.bigRegion)}>
diff --git a/app/(route)/search/_hooks/useSearch.tsx b/app/(route)/search/_hooks/useSearch.tsx
index 953efd0d..5cd5387c 100644
--- a/app/(route)/search/_hooks/useSearch.tsx
+++ b/app/(route)/search/_hooks/useSearch.tsx
@@ -2,7 +2,7 @@ import dynamic from "next/dynamic";
 import { ReadonlyURLSearchParams, usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { EVENTS } from "@/components/bottom-sheet/EventBottomSheet";
-import { useBottomSheet } from "@/hooks/useBottomSheet";
+import useBottomSheet from "@/hooks/useBottomSheet";
 import { createQueryString } from "@/utils/handleQueryString";
 import { EventType, GiftType, StatusType } from "@/types/index";
 import { BIG_REGIONS } from "@/constants/regions";
diff --git a/app/(route)/search/page.tsx b/app/(route)/search/page.tsx
index 21dc0853..3198b1bc 100644
--- a/app/(route)/search/page.tsx
+++ b/app/(route)/search/page.tsx
@@ -21,6 +21,7 @@ const SearchPage = () => {
       <MetaTag
         title={keyword ? `${keyword}: 검색 결과` : "행사 둘러보기"}
         description={keyword ? `${keyword}의 Opener 행사 검색 결과입니다.` : "Opener에 등록된 각종 오프라인 행사들을 구경해 보세요."}
+        imgUrl="/image/meta-thumbnail.png"
       />
       <DottedLayout size="wide">
         <main className={`relative w-full pb-84 [overflow-anchor:none] ${visible ? "" : "pt-112 pc:pt-0"}`}>
diff --git a/app/_api/api.ts b/app/_api/api.ts
index 3a01a5e1..6bfdaafb 100644
--- a/app/_api/api.ts
+++ b/app/_api/api.ts
@@ -125,10 +125,14 @@ export class Api {
     return res;
   }
 
-  async delete<T extends DeleteEndPoint>(endPoint: T, body?: DeleteBodyType<T>) {
+  async delete<T extends DeleteEndPoint>(endPoint: T, queryObj?: any, body?: DeleteBodyType<T>) {
     this.baseUrl = "/api" + endPoint;
+    if (queryObj) {
+      this.makeQueryString<T>(queryObj);
+    }
+
+    const newEndPoint = queryObj ? this.baseUrl + this.queryString : this.baseUrl;
 
-    const newEndPoint = this.baseUrl;
     const config = {
       method: "DELETE",
       body: JSON.stringify(body),
@@ -141,7 +145,8 @@ export class Api {
       const refetchResult = await this.refetch(newEndPoint, config);
       return refetchResult;
     }
-
+    const result = await res.json();
+    this.makeError(result);
     return res;
   }
 }
@@ -169,7 +174,9 @@ type GetEndPoint =
   | "artist/group/month"
   | `/event/user/${string}`
   | "/event/new"
-  | "artist/group/month";
+  | "artist/group/month"
+  | "/users/new-artists"
+  | "/users/events/all";
 type PostEndPoint =
   | "/event"
   | "/event/like"
@@ -193,7 +200,14 @@ type PostEndPoint =
   | `/reviews/${string}/claims`;
 
 type DeleteEndPoint = `/users/${string}/artists` | `/reviews/${string}/images` | `/users/${string}` | "/auth" | `/event/${string}` | `/reviews/${string}/users/${string}`;
-type PutEndPoint = `/event/${string}` | `/users/${string}/profile` | `/users/${string}/password` | `/users/${string}/artists` | "/users/password";
+type PutEndPoint =
+  | `/event/${string}`
+  | `/users/${string}/profile`
+  | `/users/${string}/password`
+  | `/users/${string}/artists`
+  | "/users/password"
+  | `/event/${string}`
+  | `/reviews/${string}/users/${string}`;
 type PostQueryType<T> = T extends "/file/upload" ? { category: "event" | "artist" | "user" } : unknown;
 
 type PostBodyType<T> = T extends "/event"
@@ -272,7 +286,6 @@ type GetQueryType<T> = T extends "/event"
                                     ? Req_Query_Type["닉네임"]
                                     : unknown;
 
-// 사용하실 때 직접 추가 부탁드립니다!
 type PutBodyType<T> = T extends `/event/${string}`
   ? Req_Post_Type["event"]
   : T extends `/users/${string}/profile`
diff --git a/app/_components/bottom-sheet/BottomSheetMaterial.tsx b/app/_components/bottom-sheet/BottomSheetMaterial.tsx
index bd8f8051..98057c8e 100644
--- a/app/_components/bottom-sheet/BottomSheetMaterial.tsx
+++ b/app/_components/bottom-sheet/BottomSheetMaterial.tsx
@@ -13,7 +13,7 @@ interface BottomSheetFrameProps {
 const BottomSheetFrame = forwardRef<HTMLDivElement, BottomSheetFrameProps>(({ children, closeBottomSheet }, ref) => {
   return (
     <BottomSheetPortal>
-      <div onClick={closeBottomSheet} className="fixed bottom-0 left-0 z-popup flex h-screen w-full items-end justify-center bg-gray-900 bg-opacity-70 pc:items-center">
+      <div onClick={closeBottomSheet} className="fixed bottom-0 left-0 z-[1002] flex h-screen w-full items-end justify-center bg-gray-900 bg-opacity-70 pc:items-center">
         <div
           ref={ref}
           onClick={(e: SyntheticEvent) => e.stopPropagation()}
diff --git a/app/_components/bottom-sheet/EventBottomSheet.tsx b/app/_components/bottom-sheet/EventBottomSheet.tsx
index c30fc23e..a2a50858 100644
--- a/app/_components/bottom-sheet/EventBottomSheet.tsx
+++ b/app/_components/bottom-sheet/EventBottomSheet.tsx
@@ -23,7 +23,7 @@ const EventBottomSheet = ({ closeBottomSheet, refs, setEventFilter, selected }:
       <BottomSheet.Title>행사유형</BottomSheet.Title>
       <div ref={refs.content} className="w-full pb-12 pt-8">
         {EVENTS.map((event) => (
-          <EventButton onClick={() => handleClick(event)} selected={selected === event}>
+          <EventButton onClick={() => handleClick(event)} selected={selected === event} key={event}>
             {event}
           </EventButton>
         ))}
diff --git a/app/_components/card/HorizontalEventCard.tsx b/app/_components/card/HorizontalEventCard.tsx
index 7cd69cc6..6d7cd591 100644
--- a/app/_components/card/HorizontalEventCard.tsx
+++ b/app/_components/card/HorizontalEventCard.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { SyntheticEvent, useState } from "react";
 import HeartButton from "@/components/button/HeartButton";
 import Chip from "@/components/chip/Chip";
-import { useBottomSheet } from "@/hooks/useBottomSheet";
+import useBottomSheet from "@/hooks/useBottomSheet";
 import useLikeEvent from "@/hooks/useLikeEvent";
 import { formatAddress, formatDate } from "@/utils/formatString";
 import { EventCardType } from "@/types/index";
@@ -24,6 +24,10 @@ interface Props {
 const HorizontalEventCard = ({ data, onHeartClick, isGrow = false, isMypage = false, setDep }: Props) => {
   const formattedDate = formatDate(data.startDate, data.endDate);
   const formattedAddress = formatAddress(data.address);
+  const formattedTagsMobile = data.eventTags.sort((a, b) => TAG_ORDER[a.tagName] - TAG_ORDER[b.tagName]).slice(0, 5);
+  const extraTagNumberMobile = data.eventTags.length - 5 > 0 ? data.eventTags.length - 5 : 0;
+  const formattedTagsPc = data.eventTags.sort((a, b) => TAG_ORDER[a.tagName] - TAG_ORDER[b.tagName]).slice(0, 8);
+  const extraTagNumberPc = data.eventTags.length - 8 > 0 ? data.eventTags.length - 8 : 0;
 
   const { liked, likeCount, handleLikeEvent } = useLikeEvent({ eventId: data.id, initialLike: data.isLike, initialLikeCount: data.likeCount });
 
@@ -84,12 +88,17 @@ const HorizontalEventCard = ({ data, onHeartClick, isGrow = false, isMypage = fa
             <span className="mr-8 border-r border-gray-400 pr-8">{formattedDate}</span>
             <span>{formattedAddress}</span>
           </p>
-          <ul className="flex flex-wrap gap-4">
-            {data.eventTags
-              .sort((a, b) => TAG_ORDER[a.tagName] - TAG_ORDER[b.tagName])
-              .map((tag) => (
-                <Chip key={tag.tagId} kind="goods" label={tag.tagName} />
-              ))}
+          <ul className="flex flex-wrap items-center gap-4 pc:hidden">
+            {formattedTagsMobile.map((tag) => (
+              <Chip key={tag.tagId} kind="goods" label={tag.tagName} />
+            ))}
+            {!!extraTagNumberMobile && <span className="text-center text-12 font-600 text-gray-700">{`외 ${extraTagNumberMobile}개`}</span>}
+          </ul>
+          <ul className="hidden flex-wrap items-center gap-4 pc:flex">
+            {formattedTagsPc.map((tag) => (
+              <Chip key={tag.tagId} kind="goods" label={tag.tagName} />
+            ))}
+            {!!extraTagNumberPc && <span className="text-center text-12 font-600 text-gray-700">{`외 ${extraTagNumberPc}개`}</span>}
           </ul>
         </div>
       </div>
diff --git a/app/_components/header/PcHeader.tsx b/app/_components/header/PcHeader.tsx
index efafdfb4..978664ff 100644
--- a/app/_components/header/PcHeader.tsx
+++ b/app/_components/header/PcHeader.tsx
@@ -3,21 +3,19 @@
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import SearchInput from "@/components/input/SearchInput";
+import { ChangeEvent, FormEvent, useEffect, useRef, useState } from "react";
 import { Session, getSession } from "@/store/session/cookies";
 import AddIcon from "@/public/icon/add.svg";
 import LogoIcon from "@/public/icon/logo.svg";
+import SearchIcon from "@/public/icon/search.svg";
 
 const DEFAULT_PROFILE_SRC = "/icon/no-profile.svg";
 
 const PcHeader = () => {
-  const router = useRouter();
   const newSession = getSession();
   const [session, setSession] = useState<Session>();
   const profileHref = session ? "/mypage" : "/signin";
   const profileSrc = session?.user.profileImage ?? DEFAULT_PROFILE_SRC;
-  const [keyword, setKeyword] = useState("");
 
   useEffect(() => {
     if (!newSession) {
@@ -27,13 +25,6 @@ const PcHeader = () => {
     setSession(newSession);
   }, [newSession?.user.profileImage]);
 
-  useEffect(() => {
-    if (!keyword) {
-      return;
-    }
-    router.push(`/search?sort=최신순&keyword=${keyword}`);
-  }, [keyword]);
-
   return (
     <header className="sticky top-0 z-popup hidden h-64 w-full border-b border-gray-50 bg-white-black px-24 py-12 tablet:block">
       <div className="mx-auto flex h-full max-w-[104rem] items-center justify-between">
@@ -41,9 +32,7 @@ const PcHeader = () => {
           <LogoIcon />
         </Link>
         <div className="flex items-center">
-          <div className="w-320">
-            <SearchInput setKeyword={setKeyword} placeholder="최애의 행사를 찾아보세요!" size="sm" href="/search?sort=최신순" />
-          </div>
+          <SearchInput />
           <Link href={"/post"} className="flex-center ml-20 mr-16 h-40 w-100 rounded-full bg-main-pink-500 text-14 font-600 text-white-black">
             <AddIcon stroke="#FFF" width={20} height={20} viewBox="0 0 24 24" />
             행사 등록
@@ -58,3 +47,33 @@ const PcHeader = () => {
 };
 
 export default PcHeader;
+
+const SearchInput = () => {
+  const [keyword, setKeyword] = useState("");
+  const router = useRouter();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const nextValue = e.target.value;
+    setKeyword(nextValue);
+  };
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    router.push(`/search?sort=최신순&keyword=${keyword}`);
+    setKeyword("");
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="relative">
+      <input
+        onChange={handleChange}
+        value={keyword}
+        placeholder="최애의 행사를 찾아보세요!"
+        className="h-44 w-320 rounded-full bg-gray-50 pl-16 pr-48 text-16 font-400 outline-none placeholder:text-gray-400"
+      />
+      <button className="absolute right-12 top-1/2 -translate-y-1/2">
+        <SearchIcon width="20" height="20" stroke="#494F5A" />
+      </button>
+    </form>
+  );
+};
diff --git a/app/_components/input/SearchInput.tsx b/app/_components/input/SearchInput.tsx
index a3786b60..5f88b7cc 100644
--- a/app/_components/input/SearchInput.tsx
+++ b/app/_components/input/SearchInput.tsx
@@ -1,4 +1,4 @@
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import { Dispatch, SetStateAction, useEffect } from "react";
 import { KeyboardEvent } from "react";
 import { useForm } from "react-hook-form";
@@ -10,11 +10,9 @@ interface Props {
   setKeyword: Dispatch<SetStateAction<string>>;
   initialKeyword?: string;
   placeholder?: string;
-  size?: "lg" | "sm";
-  href?: string;
 }
 
-const SearchInput = ({ keyword, setKeyword, initialKeyword, href, placeholder = "검색어를 입력하세요.", size = "lg" }: Props) => {
+const SearchInput = ({ keyword, setKeyword, initialKeyword, placeholder = "검색어를 입력하세요." }: Props) => {
   const { register, getValues, setValue, watch } = useForm({
     defaultValues: {
       search: initialKeyword,
@@ -29,13 +27,8 @@ const SearchInput = ({ keyword, setKeyword, initialKeyword, href, placeholder =
     }
   };
 
-  const router = useRouter();
   const handleSearchClick = () => {
     const newKeyword = getValues("search") ?? "";
-    if (!newKeyword && href) {
-      router.push(href);
-    }
-
     setKeyword(newKeyword);
   };
 
@@ -60,17 +53,17 @@ const SearchInput = ({ keyword, setKeyword, initialKeyword, href, placeholder =
     <div className="relative">
       <input
         autoFocus={curPath === "/post" || curPath === "/edit"}
-        className={`h-44 w-full rounded-full bg-gray-50 px-16 py-12 pr-68 text-16 text-black-white placeholder:text-gray-400 focus:outline-none ${size === "lg" ? "pc:h-52 pc:border pc:border-gray-100 pc:bg-white-black" : ""} pc:px-20 pc:pr-76`}
+        className="h-44 w-full rounded-full bg-gray-50 px-16 py-12 pr-68 text-16 text-black-white placeholder:text-gray-400 focus:outline-none pc:h-52 pc:border pc:border-gray-100 pc:bg-white-black pc:px-20 pc:pr-76"
         placeholder={placeholder}
         {...register("search")}
         onKeyDown={handleSearchEnter}
         autoComplete="off"
       />
-      <button className={`flex-center absolute right-12 top-4 h-36 w-36 rounded-full bg-gray-50 ${size === "lg" ? "pc:top-8" : ""}`} type="button" onClick={handleSearchClick}>
+      <button className="flex-center absolute right-12 top-4 h-36 w-36 rounded-full bg-gray-50 pc:top-8" type="button" onClick={handleSearchClick}>
         <SearchIcon width="20" height="20" stroke="#494F5A" />
       </button>
       {search && (
-        <button className={`absolute right-48 top-[1.4rem] pc:right-56 ${size === "lg" ? "pc:top-[1.8rem]" : ""}`} type="button" onClick={handleCloseClick}>
+        <button className="absolute right-48 top-[1.4rem] pc:right-56 pc:top-[1.8rem]" type="button" onClick={handleCloseClick}>
           <CloseIcon stroke="#A0A5B1" width="16" height="16" />
         </button>
       )}
diff --git a/app/_constants/metaTag.ts b/app/_constants/metaTag.ts
index bac24dd0..331f3ce7 100644
--- a/app/_constants/metaTag.ts
+++ b/app/_constants/metaTag.ts
@@ -52,6 +52,10 @@ export const META_TAG = {
   },
   resetPassword: {
     title: "비밀번호 재설정",
-    description: "이메일 인증을 통해 비밀번호를 다시 설정하세요."
-  }
+    description: "이메일 인증을 통해 비밀번호를 다시 설정하세요.",
+  },
+  admin: {
+    title: "관리자 페이지",
+    description: "관리자 기능 페이지입니다.",
+  },
 };
diff --git a/app/_hooks/useBottomSheet.tsx b/app/_hooks/useBottomSheet.tsx
index 63f748e1..3773c0ad 100644
--- a/app/_hooks/useBottomSheet.tsx
+++ b/app/_hooks/useBottomSheet.tsx
@@ -9,7 +9,7 @@ interface BottomSheetMetrics {
   isContentAreaTouched: boolean;
 }
 
-export function useBottomSheet() {
+const useBottomSheet = () => {
   const [bottomSheet, setBottomSheet] = useState("");
 
   const openBottomSheet = (type: string) => {
@@ -99,4 +99,6 @@ export function useBottomSheet() {
   }, [bottomSheet]);
 
   return { bottomSheet, openBottomSheet, closeBottomSheet, refs };
-}
+};
+
+export default useBottomSheet;
diff --git a/app/_hooks/useCustomMap.tsx b/app/_hooks/useCustomMap.tsx
index 5fa0473c..febe3445 100644
--- a/app/_hooks/useCustomMap.tsx
+++ b/app/_hooks/useCustomMap.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
 import { EventCardType } from "@/types/index";
 
 const useCustomMap = () => {
@@ -44,3 +44,16 @@ const useCustomMap = () => {
 };
 
 export default useCustomMap;
+
+export interface MapVarType {
+  toggleTab: boolean;
+  setToggleTab: Dispatch<SetStateAction<boolean>>;
+  selectedCard: EventCardType | null;
+  setSelectedCard: Dispatch<SetStateAction<EventCardType | null>>;
+}
+
+export interface MapCallbackType {
+  handleCardClick: (select: EventCardType) => void;
+  handleButtonClick: () => void;
+  scrollRefCallback: (el: HTMLDivElement) => void;
+}
diff --git a/app/_store/index.ts b/app/_store/index.ts
index 7ae49783..b45f25d5 100644
--- a/app/_store/index.ts
+++ b/app/_store/index.ts
@@ -1,12 +1,14 @@
 import { create } from "zustand";
+import { AdminSlice, createAdminSlice } from "./slice/adminSlice";
 import { EventHeaderSlice, createEventHeaderSlice } from "./slice/eventHeaderSlice";
 import { WarningSlice, createWarningSlice } from "./slice/warningSlice";
 import { WriterSlice, createWriterSlice } from "./slice/writerIdSlice";
 
-type SliceType = WarningSlice & EventHeaderSlice & WriterSlice;
+type SliceType = WarningSlice & EventHeaderSlice & WriterSlice & AdminSlice;
 
 export const useStore = create<SliceType>()((...a) => ({
   ...createWarningSlice(...a),
   ...createEventHeaderSlice(...a),
   ...createWriterSlice(...a),
+  ...createAdminSlice(...a),
 }));
diff --git a/app/_store/slice/adminSlice.ts b/app/_store/slice/adminSlice.ts
new file mode 100644
index 00000000..56e8e3c7
--- /dev/null
+++ b/app/_store/slice/adminSlice.ts
@@ -0,0 +1,17 @@
+import { StateCreator } from "zustand";
+
+export type AdminOptionType = "선택 화면" | "아티스트 요청 목록" | "리뷰 신고 목록" | "이벤트 신고 목록" | "행사 삭제";
+
+export interface AdminSlice {
+  isAdminAuth: boolean;
+  setIsAdminAuth: (auth: boolean) => void;
+  adminOption: AdminOptionType;
+  setAdminOption: (selected: AdminOptionType) => void;
+}
+
+export const createAdminSlice: StateCreator<AdminSlice> = (set) => ({
+  isAdminAuth: false,
+  setIsAdminAuth: (auth) => set((state) => ({ ...state, isAdminAuth: auth })),
+  adminOption: "선택 화면",
+  setAdminOption: (selected) => set((state) => ({ ...state, adminOption: selected })),
+});
diff --git a/app/layout.tsx b/app/layout.tsx
index dbf408d4..a1bb6d2f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -9,8 +9,6 @@ import PageLoading from "./_components/PageLoading";
 import "./globals.css";
 
 export const metadata = {
-  title: "Opener | K-pop 행사를 한 눈에",
-  description: "K-pop 팬을 위한 오프라인 행사 정보를 한 곳에서 쉽게 확인할 수 있는 웹사이트. 각종 카페 이벤트부터 팬광고, 포토부스 등 다양한 이벤트 정보를 한눈에 찾아보세요!",
   icons: {
     icon: "/icon/favicon.svg",
   },
diff --git a/robots.txt b/robots.txt
new file mode 100644
index 00000000..d7cd58c9
--- /dev/null
+++ b/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /admin/
\ No newline at end of file