diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
deleted file mode 100644
index 3a421e6..0000000
--- a/.github/workflows/deploy.yml
+++ /dev/null
@@ -1,58 +0,0 @@
-name: MAIN CI
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  Deploy:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout source code
-        uses: actions/checkout@v3
-
-      - name: Install pnpm
-        run: |
-          npm install -g pnpm
-
-      - name: Get pnpm store path
-        id: pnpm-cache-path
-        run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_ENV
-
-      - name: Cache pnpm modules
-        id: cache
-        uses: actions/cache@v3
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-
-            ${{ runner.os }}-
-
-      - name: Install Dependencies
-        run: |
-          pnpm install --frozen-lockfile
-          pnpm store prune
-
-      - name: Set up .env file
-        run: |
-          echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > .env.production
-          echo "HTTPS=true" >> .env.production
-
-      - name: Build
-        run: pnpm run build
-
-      - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@v2
-        with:
-          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: ${{ secrets.AWS_REGION }}
-
-      - name: Deploy to S3
-        run: aws s3 sync ./dist s3://${{ secrets.AWS_BUCKET_NAME }} --delete
-
-      - name: Invalidate CloudFront Cache
-        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_DISTRIBUTION_ID }} --paths "/*"
diff --git a/src/apis/share.ts b/src/apis/share.ts
index 37a3087..6018376 100644
--- a/src/apis/share.ts
+++ b/src/apis/share.ts
@@ -163,7 +163,6 @@ export const postSharePostLike = async (sharePostId: string) => {
     return response.data;
   } catch (error) {
     console.error('❌ 편지 좋아요 중 에러가 발생했습니다', error);
-    throw new Error('편지 좋아요 실패');
   }
 };
 
@@ -175,6 +174,15 @@ export const getSharePostLikeCount = async (sharePostId: string) => {
     return response.data;
   } catch (error) {
     console.error('❌ 편지 좋아요 갯수 조회 중 에러가 발생했습니다', error);
-    throw new Error('편지 좋아요 갯수 조회 실패');
+  }
+};
+
+export const deleteSharePost = async (sharePostId: string) => {
+  try {
+    const response = await client.delete(`/api/share-posts/${sharePostId}`);
+    if (!response) throw new Error('error while deleting post');
+    return response;
+  } catch (error) {
+    console.error('❌ 편지 삭제 중 에러가 발생했습니다', error);
   }
 };
diff --git a/src/components/MenuButton.tsx b/src/components/MenuButton.tsx
index 681e59a..d911338 100644
--- a/src/components/MenuButton.tsx
+++ b/src/components/MenuButton.tsx
@@ -16,44 +16,48 @@ export default function MenuButton() {
         <Link
           to="/letter/box"
           className={twMerge(
-            'bg-primary-3 fixed bottom-[220px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            'bg-primary-3 fixed bottom-[220px] z-30 flex h-12 w-12 rotate-360 content-center items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
             isOpen
               ? 'translate-y-0 rotate-0 opacity-100'
-              : 'translate-y-[120%] rotate-180 opacity-0',
+              : 'pointer-events-none translate-y-[120%] rotate-180 opacity-0',
           )}
+          onClick={() => setIsOpen(false)}
         >
-          <MarkunreadOutlinedIcon fontSize="small" onClick={() => setIsOpen(false)} />
+          <MarkunreadOutlinedIcon fontSize="small" />
         </Link>
         <Link
           to="/board/letter"
           className={twMerge(
-            'bg-primary-3 fixed bottom-[160px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            'bg-primary-3 fixed bottom-[160px] z-30 flex h-12 w-12 rotate-360 content-center items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
             isOpen
               ? 'translate-y-0 rotate-0 opacity-100'
-              : 'translate-y-[120%] rotate-180 opacity-0',
+              : 'pointer-events-none translate-y-[120%] rotate-180 opacity-0',
           )}
+          onClick={() => setIsOpen(false)}
         >
-          <CalendarTodayOutlinedIcon fontSize="small" onClick={() => setIsOpen(false)} />
+          <CalendarTodayOutlinedIcon fontSize="small" />
         </Link>
         <Link
           to="/letter/write"
           className={twMerge(
-            'bg-primary-3 fixed bottom-[100px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            'bg-primary-3 fixed bottom-[100px] z-30 flex h-12 w-12 rotate-360 content-center items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
             isOpen
               ? 'translate-y-0 rotate-0 opacity-100'
-              : 'translate-y-[120%] rotate-180 opacity-0',
+              : 'pointer-events-none translate-y-[120%] rotate-180 opacity-0',
           )}
+          onClick={() => setIsOpen(false)}
         >
-          <EditNoteRoundedIcon fontSize="medium" onClick={() => setIsOpen(false)} />
+          <EditNoteRoundedIcon fontSize="medium" />
         </Link>
 
         <div
           className={twMerge(
-            'bg-primary-3 fixed bottom-[30px] z-50 h-13 w-13 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            'bg-primary-3 fixed bottom-[30px] z-30 flex h-13 w-13 content-center items-center justify-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
             isOpen ? 'rotate-90' : 'rotate-0',
           )}
+          onClick={() => setIsOpen((state) => !state)}
         >
-          <MenuRoundedIcon onClick={() => setIsOpen((state) => !state)} />
+          <MenuRoundedIcon />
         </div>
       </div>
     </>
diff --git a/src/main.tsx b/src/main.tsx
index 4df6fa6..41bea78 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -15,11 +15,11 @@ queryClient.setDefaultOptions({
 });
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </QueryClientProvider>
-  </StrictMode>,
+  // <StrictMode>
+  <QueryClientProvider client={queryClient}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </QueryClientProvider>,
+  // </StrictMode>,
 );
diff --git a/src/pages/LetterBoardDetail/components/Header.tsx b/src/pages/LetterBoardDetail/components/Header.tsx
index 26c306e..437ef61 100644
--- a/src/pages/LetterBoardDetail/components/Header.tsx
+++ b/src/pages/LetterBoardDetail/components/Header.tsx
@@ -14,6 +14,7 @@ interface HeaderProps {
   isWriter: boolean;
   onToggleLike: () => void;
   onOpenReportModal: () => void;
+  onDeleteLetter: () => void;
   isShareLetterPreview?: boolean;
 }
 
@@ -23,10 +24,10 @@ const Header = ({
   isWriter,
   onToggleLike,
   onOpenReportModal,
+  onDeleteLetter,
   isShareLetterPreview = false,
 }: HeaderProps) => {
   const navigate = useNavigate();
-
   return (
     <header className="fixed top-0 z-40 w-full max-w-150">
       <div className="flex h-16 items-center justify-between bg-white p-5">
@@ -46,8 +47,7 @@ const Header = ({
               <p className="body-l-m text-primary-1">{likeCount}</p>
             </div>
             {isWriter ? (
-              // TODO: 게시물 삭제
-              <DeleteIcon className="text-primary-1 h-6 w-6" />
+              <DeleteIcon className="text-primary-1 h-6 w-6" onClick={onDeleteLetter} />
             ) : (
               <button type="button" onClick={onOpenReportModal}>
                 <SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
diff --git a/src/pages/LetterBoardDetail/components/Letter.tsx b/src/pages/LetterBoardDetail/components/Letter.tsx
index 58c80a2..468366f 100644
--- a/src/pages/LetterBoardDetail/components/Letter.tsx
+++ b/src/pages/LetterBoardDetail/components/Letter.tsx
@@ -14,7 +14,7 @@ const Letter = ({ letter, isWriter = false }: LetterProps) => {
     <MemoWrapper isSender={isWriter}>
       <div className="flex flex-col gap-2 text-black">
         <p className="body-sb">To. {letter.receiverZipCode}</p>
-        <p className="body-r leading-[26px] whitespace-pre-wrap">{letter.content}</p>
+        <p className="body-r leading-[26px] break-all whitespace-pre-wrap">{letter.content}</p>
         <p className="body-m place-self-end">From. {letter.writerZipCode}</p>
       </div>
     </MemoWrapper>
diff --git a/src/pages/LetterBoardDetail/index.tsx b/src/pages/LetterBoardDetail/index.tsx
index 4a9de3a..9c7ed31 100644
--- a/src/pages/LetterBoardDetail/index.tsx
+++ b/src/pages/LetterBoardDetail/index.tsx
@@ -6,13 +6,16 @@ import {
   SharePost,
   getSharePostLikeCount,
   postSharePostLike,
+  deleteSharePost,
 } from '@/apis/share';
 import ReportModal from '@/components/ReportModal';
 
 import Header from './components/Header';
 import Letter from './components/Letter';
-import { useParams } from 'react-router';
+
+import { useNavigate, useParams } from 'react-router';
 import useAuthStore from '@/stores/authStore';
+import useToastStore from '@/stores/toastStore';
 
 const LetterBoardDetailPage = () => {
   const [likeCount, setLikeCount] = useState(0);
@@ -20,13 +23,11 @@ const LetterBoardDetailPage = () => {
   const [isWriter, setIsWriter] = useState(false);
   const [postDetail, setPostDetail] = useState<SharePost>();
   const [activeReportModal, setActiveReportModal] = useState(false);
-  // const location = useLocation();
-  // const sharePostId: string = location.pathname.split('/')[3];
-  // const isShareLetterPreview = location.state?.isShareLetterPreview || false;
 
   const { id } = useParams();
-
   const myZipCode = useAuthStore.getState().zipCode;
+  const setToastActive = useToastStore((state) => state.setToastActive);
+  const navigate = useNavigate();
 
   const postLike = async (sharePostId: string) => {
     try {
@@ -35,7 +36,6 @@ const LetterBoardDetailPage = () => {
       console.log('✅ 편지 좋아요 추가됨:', response);
     } catch (error) {
       console.error('❌ 편지 좋아요 추가 중 에러가 발생했습니다', error);
-      throw new Error('편지 좋아요 추가 실패');
     }
   };
 
@@ -48,6 +48,26 @@ const LetterBoardDetailPage = () => {
     postLike(sharePostId);
   };
 
+  const handleDeleteLetter = async () => {
+    try {
+      if (id) {
+        const response = await deleteSharePost(id);
+        if (!response) throw new Error('deleteSharePost: no response');
+        navigate(-1);
+        setToastActive({
+          toastType: 'Success',
+          title: '게시물 삭제 완료',
+        });
+      } else throw new Error('deleteSharePost: id 값을 조회할 수 없습니다.');
+    } catch (error) {
+      console.error(error);
+      setToastActive({
+        toastType: 'Error',
+        title: '삭제 실패했습니다. 다시 시도해주세요.',
+      });
+    }
+  };
+
   useEffect(() => {
     const fetchPostDetail = async (postId: string) => {
       try {
@@ -100,12 +120,13 @@ const LetterBoardDetailPage = () => {
           isWriter={isWriter}
           onToggleLike={() => (id ? handleToggleLike(id) : handleToggleLike('error'))}
           onOpenReportModal={() => setActiveReportModal(true)}
+          onDeleteLetter={() => handleDeleteLetter()}
         />
         <main className="px-5 pt-18 pb-3">
           <p className="body-b mb-6 px-5">FROM. {postDetail?.zipCode}</p>
           <p
             className={twMerge(
-              'body-r bg-[repeating-linear-gradient(transparent,transparent_25px,#ffe6e3_26px)] px-5 whitespace-pre-wrap',
+              'body-r bg-[repeating-linear-gradient(transparent,transparent_25px,#ffe6e3_26px)] px-5 break-all whitespace-pre-wrap',
               'leading-[26px]',
             )}
           >
diff --git a/src/pages/LetterBoxDetail/index.tsx b/src/pages/LetterBoxDetail/index.tsx
index d0523b0..15cf537 100644
--- a/src/pages/LetterBoxDetail/index.tsx
+++ b/src/pages/LetterBoxDetail/index.tsx
@@ -222,11 +222,11 @@ const LetterBoxDetailPage = () => {
             disabled={selected.length === 0}
             onClick={() => setIsOpenShareModal(true)}
           >
-            다음으로
+            공유하기
           </button>
         </div>
       )}
-      <MenuButton />
+      {!isShareMode && <MenuButton />}
     </>
   );
 };
diff --git a/src/pages/RandomLetters/components/Matched.tsx b/src/pages/RandomLetters/components/Matched.tsx
index 0bc3857..3e58736 100644
--- a/src/pages/RandomLetters/components/Matched.tsx
+++ b/src/pages/RandomLetters/components/Matched.tsx
@@ -5,6 +5,7 @@ import { deleteRandomLetterMatching } from '@/apis/randomLetter';
 import ResultLetter from '@/components/ResultLetter';
 import { formatNumber } from '@/utils/formatNumber';
 import { timeFormatter } from '@/utils/timeFormatter';
+import useToastStore from '@/stores/toastStore';
 
 export default function Matched({
   matchedLetter,
@@ -18,6 +19,7 @@ export default function Matched({
   setOpenSelectedDetailModal: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
   const navigate = useNavigate();
+  const setToastActive = useToastStore((state) => state.setToastActive);
 
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
 
@@ -43,7 +45,7 @@ export default function Matched({
   const handleDeleteRandomLetterMatching = async () => {
     const res = await deleteRandomLetterMatching();
     if (res?.status === 200) {
-      alert('매칭이 취소되었습니다.');
+      setToastActive({ title: '매칭이 취소되었습니다.', toastType: 'Success' });
       navigate(-1);
     }
   };
diff --git a/src/pages/RandomLetters/components/MatchedLetter.tsx b/src/pages/RandomLetters/components/MatchedLetter.tsx
index 3ff4907..e54546a 100644
--- a/src/pages/RandomLetters/components/MatchedLetter.tsx
+++ b/src/pages/RandomLetters/components/MatchedLetter.tsx
@@ -14,7 +14,7 @@ const MatchedLetter = ({ matchedLetter }: { matchedLetter: MatchedLetter }) => {
     <>
       <div
         className={twMerge(
-          `flex grow flex-col gap-3 px-5 pb-7.5`,
+          `z-50 flex grow flex-col gap-3 px-5 pb-7.5`,
           PAPER_TYPE_OBJ[matchedLetter.paperType],
         )}
       >
diff --git a/src/pages/RandomLetters/index.tsx b/src/pages/RandomLetters/index.tsx
index c1b12d9..d71c3d1 100644
--- a/src/pages/RandomLetters/index.tsx
+++ b/src/pages/RandomLetters/index.tsx
@@ -75,6 +75,14 @@ const RandomLettersPage = () => {
   }, []);
   return (
     <>
+      {openSelectModal && (
+        <MatchingSelectModal
+          setOpenModal={setOpenSelectModal}
+          selectedLetter={selectedLetter}
+          setOpenSelectedDetailModal={setOpenSelectedDetailModal}
+          setMatchedLetter={setMatchedLetter}
+        />
+      )}
       {openSelectedDetailModal ? (
         <MatchedLetter matchedLetter={matchedLetter} />
       ) : (
@@ -103,15 +111,6 @@ const RandomLettersPage = () => {
                 setOpenSelectedDetailModal={setOpenSelectedDetailModal}
               />
             )}
-
-            {openSelectModal && (
-              <MatchingSelectModal
-                setOpenModal={setOpenSelectModal}
-                selectedLetter={selectedLetter}
-                setOpenSelectedDetailModal={setOpenSelectedDetailModal}
-                setMatchedLetter={setMatchedLetter}
-              />
-            )}
           </div>
           <BackgroundBottom />
         </>
diff --git a/src/pages/RollingPaper/index.tsx b/src/pages/RollingPaper/index.tsx
index 28fc0f6..06069c1 100644
--- a/src/pages/RollingPaper/index.tsx
+++ b/src/pages/RollingPaper/index.tsx
@@ -129,8 +129,8 @@ const RollingPaperPage = () => {
           )}
         </section>
         <WriteCommentButton rollingPaperId={id} />
+        <MenuButton />
       </main>
-      <MenuButton />
       <BackgroundBottom />
     </>
   );