diff --git a/assets/images/imageUrl.ts b/assets/images/imageUrl.ts
index 0301da637..25d3d3420 100644
--- a/assets/images/imageUrl.ts
+++ b/assets/images/imageUrl.ts
@@ -10,6 +10,8 @@ export const GATHER_SHARE_IMAGES = [
   "https://studyabout.s3.ap-northeast-2.amazonaws.com/%EB%AA%A8%EC%9E%84+%EA%B3%B5%EC%9C%A0+%EC%9D%B4%EB%AF%B8%EC%A7%80/%EA%B2%8C%EC%9E%84.jpg",
   "https://studyabout.s3.ap-northeast-2.amazonaws.com/%EB%AA%A8%EC%9E%84+%EA%B3%B5%EC%9C%A0+%EC%9D%B4%EB%AF%B8%EC%A7%80/%EC%98%81%ED%99%94%EA%B4%80.jpg",
   "https://studyabout.s3.ap-northeast-2.amazonaws.com/%EC%86%8C%EB%AA%A8%EC%9E%84/%EB%A9%94%EC%9D%B8%EC%BB%A4%EB%B2%84/%EC%B6%9C%EC%82%AC.webp",
+  "https://studyabout.s3.ap-northeast-2.amazonaws.com/%EB%B0%B0%EB%84%88/%ED%8E%AD%EA%B7%842.jpg",
+  "https://studyabout.s3.ap-northeast-2.amazonaws.com/%EB%B0%B0%EB%84%88/%ED%8E%AD%EA%B7%841.jpg",
 ];
 
 export const DEFAULT_IMAGE_URL =
diff --git a/components/atoms/Icons/KakaoShareBtn.tsx b/components/atoms/Icons/KakaoShareBtn.tsx
index e482a10a5..d44829509 100644
--- a/components/atoms/Icons/KakaoShareBtn.tsx
+++ b/components/atoms/Icons/KakaoShareBtn.tsx
@@ -35,6 +35,7 @@ function KakaoShareBtn({
 
   useEffect(() => {
     if (type === "gather" && !img) return;
+
     if (window.Kakao) {
       const options =
         type === "gather" || type === "study"
@@ -110,8 +111,7 @@ function KakaoShareBtn({
 
       window.Kakao.Link.createDefaultButton(options);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [img]);
+  }, [img, type, url, subtitle]);
 
   return (
     <Layout id="kakao-share-button" isFull={isFull}>
@@ -119,7 +119,7 @@ function KakaoShareBtn({
         <i className="fa-light fa-share-nodes fa-lg" />
       ) : (
         <Button as="div" colorScheme="mintTheme" width="100%" size="lg">
-          공유하기
+          카카오톡으로 공유하기
         </Button>
       )}
     </Layout>
@@ -129,6 +129,7 @@ function KakaoShareBtn({
 const Layout = styled.button<{ isFull: boolean }>`
   padding: ${(props) => (props.isFull ? 0 : "8px")};
   width: ${(props) => (props.isFull ? "100%" : "undefined")};
+  width: 100%;
 `;
 
 export default KakaoShareBtn;
diff --git a/modals/gather/GatherKakaoShareModal.tsx b/modals/gather/GatherKakaoShareModal.tsx
index fad5a6794..45630da4f 100644
--- a/modals/gather/GatherKakaoShareModal.tsx
+++ b/modals/gather/GatherKakaoShareModal.tsx
@@ -74,7 +74,6 @@ const Container = styled.div`
 const Item = styled.div<{ isSelected: boolean }>`
   position: relative;
   border: ${(props) => (props.isSelected ? "4px solid var(--color-mint)" : null)};
-
   border-radius: var(--rounded-lg);
   overflow: hidden;
   width: 100%;
diff --git a/pageTemplates/gather/detail/GatherHeader.tsx b/pageTemplates/gather/detail/GatherHeader.tsx
index ba6446133..d2ad8393a 100644
--- a/pageTemplates/gather/detail/GatherHeader.tsx
+++ b/pageTemplates/gather/detail/GatherHeader.tsx
@@ -1,13 +1,17 @@
-import { Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 import dayjs from "dayjs";
+import Image from "next/image";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 import { useState } from "react";
 import { useSetRecoilState } from "recoil";
 import styled from "styled-components";
 
+import { GATHER_SHARE_IMAGES } from "../../../assets/images/imageUrl";
+import KakaoShareBtn from "../../../components/atoms/Icons/KakaoShareBtn";
 import Header from "../../../components/layouts/Header";
-import GatherKakaoShareModal from "../../../modals/gather/GatherKakaoShareModal";
+import RightDrawer from "../../../components/organisms/drawer/RightDrawer";
+import { WEB_URL } from "../../../constants/system";
 import { isGatherEditState } from "../../../recoils/checkAtoms";
 import { sharedGatherWritingState } from "../../../recoils/sharedDataAtoms";
 import { IGather } from "../../../types/models/gatherTypes/gatherTypes";
@@ -29,6 +33,7 @@ function GatherHeader({ gatherData }: IGatherHeader) {
   const setIsGatherEdit = useSetRecoilState(isGatherEditState);
 
   const [isModal, setIsModal] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<number>();
 
   const onClick = () => {
     setGatherWriting({ ...gatherData, date: dayjs(gatherData.date) });
@@ -36,6 +41,10 @@ function GatherHeader({ gatherData }: IGatherHeader) {
     router.push("/gather/writing/category");
   };
 
+  const onClickItem = (idx) => {
+    setSelectedItem(idx);
+  };
+
   return (
     <>
       <Header title="">
@@ -51,12 +60,34 @@ function GatherHeader({ gatherData }: IGatherHeader) {
         </Flex>
       </Header>
       {isModal && (
-        <GatherKakaoShareModal
-          setIsModal={setIsModal}
-          title={title}
-          date={date}
-          locationMain={locationMain}
-        />
+        <RightDrawer title="이미지 공유" onClose={() => setIsModal(false)}>
+          <Box p="16px">
+            <Box fontSize="16px" mt="4px" mb="20px" fontWeight={600}>
+              단톡방에 공유 할 이미지를 선택해 주세요!
+            </Box>
+            <Container>
+              {GATHER_SHARE_IMAGES.map((item, idx) => (
+                <Item key={idx} onClick={() => onClickItem(idx)} isSelected={idx === selectedItem}>
+                  <Image src={item} fill={true} sizes="150px" alt="gatherShareImage" />
+                </Item>
+              ))}
+            </Container>
+          </Box>
+          <Box position="fixed" bottom="0" w="100%" p="16px">
+            <KakaoShareBtn
+              isFull
+              title={title}
+              subtitle={date === "미정" ? date : dayjs(date).format("M월 D일(dd)")}
+              type="gather"
+              url={WEB_URL + router.asPath}
+              location={locationMain}
+              isBig={true}
+              img={
+                selectedItem !== null ? GATHER_SHARE_IMAGES[selectedItem] : GATHER_SHARE_IMAGES[1]
+              }
+            />
+          </Box>
+        </RightDrawer>
       )}
     </>
   );
@@ -71,4 +102,25 @@ const IconWrapper = styled.button`
   margin-left: var(--gap-3);
 `;
 
+const Container = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  width: 100%;
+  height: 100%;
+  gap: var(--gap-3);
+`;
+
+const Item = styled.div<{ isSelected: boolean }>`
+  position: relative;
+  border: ${(props) => (props.isSelected ? "4px solid var(--color-mint)" : null)};
+  border-radius: var(--rounded-lg);
+  overflow: hidden;
+  width: 100%;
+  aspect-ratio: 2/1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 export default GatherHeader;
diff --git a/pageTemplates/square/SecretSquare/SecretSquareComments.tsx b/pageTemplates/square/SecretSquare/SecretSquareComments.tsx
index da215a409..520eb405d 100644
--- a/pageTemplates/square/SecretSquare/SecretSquareComments.tsx
+++ b/pageTemplates/square/SecretSquare/SecretSquareComments.tsx
@@ -34,6 +34,7 @@ function SecretSquareComments({ comments, refetch }: SecretSquareCommentsProps)
       refetch();
     },
   });
+
   const { mutate: writeSubComment } = useSubCommentMutation("post", "square", squareId, {
     onSuccess() {
       refetch();
diff --git a/pages/gather/index.tsx b/pages/gather/index.tsx
index ab734b2ad..a1a144606 100644
--- a/pages/gather/index.tsx
+++ b/pages/gather/index.tsx
@@ -6,7 +6,6 @@ import GatherMain from "../../pageTemplates/gather/GatherMain";
 import GatherReviewSlider from "../../pageTemplates/gather/GatherReviewSlider";
 
 function Gather() {
-
   return (
     <>
       <GatherHeader />
diff --git a/pages/home/index.tsx b/pages/home/index.tsx
index f8265046e..1f38c7e4a 100644
--- a/pages/home/index.tsx
+++ b/pages/home/index.tsx
@@ -13,7 +13,6 @@ import EventBanner from "../../pageTemplates/home/study/EventBanner";
 
 function Home() {
   const [tab, setTab] = useState<HomeTab>();
-;
   return (
     <>
       <HomeInitialSetting />
diff --git a/pages/square/index.tsx b/pages/square/index.tsx
index d58feaae1..6edbc4d46 100644
--- a/pages/square/index.tsx
+++ b/pages/square/index.tsx
@@ -20,6 +20,7 @@ function SquarePage() {
 
   const [tab, setTab] = useState<SquareTab>("시크릿 스퀘어");
   const [isRuleModal, setIsRuleModal] = useState(false);
+
   useEffect(() => {
     if (!tabParam) {
       router.replace("/square?tab=secret");