diff --git a/src/components/Common/NotificationBadge/NotificationBadge.stories.tsx b/src/components/Common/NotificationBadge/NotificationBadge.stories.tsx
deleted file mode 100644
index 18397485..00000000
--- a/src/components/Common/NotificationBadge/NotificationBadge.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { NotificationBadge } from './NotificationBadge';
-
-const meta: Meta<typeof NotificationBadge> = {
-    component: NotificationBadge,
-    title: 'atoms/NotificationBadge',
-    tags: ['autodocs'],
-    argTypes: {}
-};
-export default meta;
-
-type Story = StoryObj<typeof NotificationBadge>;
-
-export const notificationMin: Story = {
-    args: { badgeType: 'basic', count: 1 }
-};
-
-export const notificationMax: Story = {
-    args: { badgeType: 'basic', count: 100 }
-};
-
-export const dday: Story = {
-    args: { badgeType: 'dday', count: 5 }
-};
diff --git a/src/components/LetterDetailPage/Delete/DeleteModal.tsx b/src/components/LetterDetailPage/Delete/DeleteModal.tsx
index f7aee84f..f0a2973b 100644
--- a/src/components/LetterDetailPage/Delete/DeleteModal.tsx
+++ b/src/components/LetterDetailPage/Delete/DeleteModal.tsx
@@ -15,28 +15,29 @@ export const DeleteModal = ({ closeModal }: DeleteModalProps) => {
     const navigate = useNavigate();
     const { pathname } = useLocation();
     const letterType = pathname.split('/')[2];
-    const { dataType, letterId } = useParams<{
+    const { dataType, letterId, replyLetterId } = useParams<{
         dataType: string;
         letterId: string;
+        replyLetterId: string;
     }>();
     const transformedLetterType = dataType === 'sent' ? 'SEND' : 'RECEIVE';
 
     const keywordMutation = useDeleteKeywordLetter({
-        letterId: Number(letterId),
+        letterId: Number(letterId) || Number(replyLetterId),
         boxType: transformedLetterType
     });
 
     const mapMutation = useDeleteMapSentLetter({
-        letterIds: [Number(letterId)]
+        letterIds: [Number(letterId) || Number(replyLetterId)]
     });
 
     const keywordReplyMutation = useDeleteKeywordReplyLetter({
-        letterId: Number(letterId),
+        letterId: Number(letterId) || Number(replyLetterId),
         boxType: transformedLetterType
     });
 
     const mapReceivedMutation = useDeleteMapReceivedLetter({
-        letterIds: [Number(letterId)]
+        letterIds: [Number(letterId) || Number(replyLetterId)]
     });
 
     const mutation =
diff --git a/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx b/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx
index 249b8f87..9c35605f 100644
--- a/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx
+++ b/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx
@@ -4,8 +4,8 @@ import { Margin } from '@/components/Common/Margin/Margin';
 import { KeywordList } from '../../Keyword/KeywordList';
 import { DeleteButton } from '../../Delete/DeleteButton';
 import clsx from 'clsx';
-import { useGetKeywordReplyList } from '@/hooks/useGetKeywordReplyList';
-import { ReplyList } from '../../ReplyList/ReplyList';
+// import { useGetKeywordReplyList } from '@/hooks/useGetKeywordReplyList';
+// import { ReplyList } from '../../ReplyList/ReplyList';
 import { ReportButton } from '../../Report/ReportButton';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Label } from '@/components/Common/BottleLetter/Label/Label';
@@ -19,6 +19,7 @@ type KeywordLetterDetailProps = {
         createdAt: string;
         font: string;
         label: string;
+        isReplied?: boolean;
     };
 };
 
@@ -30,28 +31,35 @@ export const KeywordLetterDetail = ({
         letterType: string;
     }>();
     const navigate = useNavigate();
-    const { letterId, title, content, keywords, createdAt, font, label } =
-        letterData;
-
     const {
-        data: keywordReplyListData,
-        isLoading: isKeywordReplyListDataLoading,
-        error: keywordReplyListDataError
-    } = useGetKeywordReplyList({
-        letterId: Number(letterId) || 0,
-        page: 1,
-        size: 1,
-        sort: 'createdAt'
-    });
+        letterId,
+        title,
+        content,
+        keywords,
+        createdAt,
+        font,
+        label,
+        isReplied
+    } = letterData;
+
+    // const {
+    //     data: keywordReplyListData,
+    //     isLoading: isKeywordReplyListDataLoading,
+    //     error: keywordReplyListDataError
+    // } = useGetKeywordReplyList({
+    //     letterId: Number(letterId) || 0,
+    //     page: 1,
+    //     size: 1,
+    //     sort: 'createdAt'
+    // });
 
-    if (isKeywordReplyListDataLoading) {
-        return <div>로딩 중...</div>;
-    }
+    // if (isKeywordReplyListDataLoading) {
+    //     return <div>로딩 중...</div>;
+    // }
 
-    if (keywordReplyListDataError instanceof Error) {
-        return <div>오류...: {keywordReplyListDataError.message}</div>;
-    }
-    console.log(keywordReplyListData);
+    // if (keywordReplyListDataError instanceof Error) {
+    //     return <div>오류...: {keywordReplyListDataError.message}</div>;
+    // }
 
     return (
         <div className={clsx(font ? font : 'font-sans')}>
@@ -63,7 +71,7 @@ export const KeywordLetterDetail = ({
                         <Label imgSrc={label} />
                     </div>
                     <DeleteButton />
-                    {dataType === 'received' && <ReportButton />}
+                    {letterType === 'REPLY_LETTER' && <ReportButton />}
                 </div>
                 <h1>{title}</h1>
                 <img src={'/to_line.f4c129e6.svg'} className="w-full" />
@@ -74,90 +82,34 @@ export const KeywordLetterDetail = ({
 
                 <Margin top={30} />
                 <div className="flex justify-between w-full ">
-                    <p className="font-bold ">편지의 키워드</p>
+                    {keywords && <p className="font-bold ">편지의 키워드</p>}
                     <p className="">{formatDate(createdAt)}</p>
                 </div>
                 {keywords && <KeywordList keywords={keywords} />}
                 <Margin bottom={5} />
-                {dataType === 'sent' && keywordReplyListData?.content ? (
+                {/* {dataType === 'sent' && keywordReplyListData?.content ? (
                     <div className="mx-auto mt-16">
                         <ReplyList
                             keywordReplyListData={keywordReplyListData.content}
                         />
                     </div>
-                ) : null}
+                ) : null} */}
 
-                {dataType === 'received' && letterType === 'LETTER' && (
-                    <button
-                        className="btn-base flex-center rounded-3xl h-[40px]"
-                        onClick={() =>
-                            navigate(
-                                `/letter/keyword/reply/create/:${letterId}`
-                            )
-                        }
-                    >
-                        편지에 답장하기
-                    </button>
-                )}
+                {dataType === 'received' &&
+                    letterType === 'LETTER' &&
+                    !isReplied && (
+                        <button
+                            className="btn-base flex-center rounded-3xl h-[40px]"
+                            onClick={() =>
+                                navigate(
+                                    `/letter/keyword/reply/create/${letterId}`
+                                )
+                            }
+                        >
+                            편지에 답장하기
+                        </button>
+                    )}
             </div>
         </div>
     );
 };
-
-/*
-   <div className="relative mx-auto mt-4 max-w">
-                    {letterId && (
-                        <div className="absolute top-0 flex mt-10 right-8">
-                            <DeleteButton id={letterId} />
-                            {!data?.isOwner && <ReportButton id={letterId} />}
-                        </div>
-                    )}
-                    <div className="relative mt-16 flex-center">
-                        <img
-                            src={labelItem.src}
-                            alt={labelItem.name}
-                            className="absolute top-4 translate-x-40 w-[125.32px] h-[201.1px]"
-                        />
-                        {type === 'map' ? (
-                            <MapLetterDetail
-                                title="편지제목"
-                                content="편지내용"
-                                date="24.11.18"
-                                place="서울시 종로구 평창동"
-                                hint="서대문역 앞 붕어빵 가게에서"
-                            />
-                        ) : (
-                            data && <KeywordLetterDetail letterData={data} />
-                        )}
-                    </div>
-                </div>
-
-                {data?.isOwner ? (
-                    hasReplies ? (
-                        <div className="mt-16 w-[710px]  mx-auto">
-                            <ReplyList replies={sampleReplies} />
-                        </div>
-                    ) : null
-                ) : type === 'map' ? (
-                    <div className="gap-4 mx-auto mt-4 flex-center max-w">
-                        {!data?.isOwner && (
-                            <>
-                                <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
-                                    보관하기
-                                </button>
-                                <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
-                                    편지에 답장하기
-                                </button>
-                            </>
-                        )}
-                    </div>
-                ) : (
-                    <div className="gap-4 mx-auto mt-4 flex-center max-w">
-                        {!data?.isOwner && (
-                            <button className="btn-base rounded-3xl w-[700px] h-[80px]">
-                                편지에 답장하기
-                            </button>
-                        )}
-                    </div>
-                )}
-*/
diff --git a/src/components/LetterDetailPage/LetterDatail/MapLetterArchieveDetail/MapLetterArchieveDetail.tsx b/src/components/LetterDetailPage/LetterDatail/MapLetterArchieveDetail/MapLetterArchieveDetail.tsx
index e3005742..ea574faf 100644
--- a/src/components/LetterDetailPage/LetterDatail/MapLetterArchieveDetail/MapLetterArchieveDetail.tsx
+++ b/src/components/LetterDetailPage/LetterDatail/MapLetterArchieveDetail/MapLetterArchieveDetail.tsx
@@ -5,18 +5,18 @@ import clsx from 'clsx';
 import { DeleteButton } from '../../Delete/DeleteButton';
 import { TextArea } from '@/components/Common/TextArea/TextArea';
 import { useGetMapReplyList } from '@/hooks/useGetMapReplyList';
-import { ReplyList } from '../../ReplyList/ReplyList';
+// import { ReplyList } from '../../ReplyList/ReplyList';
 import { ReportButton } from '../../Report/ReportButton';
 import { useLocation } from 'react-router-dom';
 import { Label } from '@/components/Common/BottleLetter/Label/Label';
 
 type MapLetterDetailProps = {
     letterData: {
-        title: string;
+        title?: string;
         content: string;
-        description: string;
+        description?: string;
         createdAt: string;
-        profileImg: string;
+        profileImg?: string;
         font: string;
         paper: string;
         label: string;
@@ -90,14 +90,14 @@ export const MapLetterArchieveDetail = ({
                     </span>
                     <span>{DayCounter({ createdAt })}</span>
                 </div>
-                {mapReplyListData?.content ? (
+                {/* {mapReplyListData?.content ? (
                     <div className="mt-16 mx-auto">
                         <ReplyList
                             title={title}
                             keywordReplyListData={mapReplyListData.content}
                         />
                     </div>
-                ) : null}
+                ) : null} */}
             </div>
         </div>
     );
diff --git a/src/components/LetterDetailPage/LetterDatail/MapLetterDetail/MapLetterDetail.tsx b/src/components/LetterDetailPage/LetterDatail/MapLetterDetail/MapLetterDetail.tsx
index 54653a04..21c65c08 100644
--- a/src/components/LetterDetailPage/LetterDatail/MapLetterDetail/MapLetterDetail.tsx
+++ b/src/components/LetterDetailPage/LetterDatail/MapLetterDetail/MapLetterDetail.tsx
@@ -146,13 +146,15 @@ export const MapLetterDetail = ({ letterData }: MapLetterDetailProps) => {
                 {!isOwner && (
                     <>
                         <div className="flex">
-                            <button
-                                className="btn-base flex-center rounded-3xl h-[40px]"
-                                onClick={onStorageClick}
-                            >
-                                {isStored ? '보관됨' : '보관하기'}
-                            </button>
-                            {!isReplied && (
+                            {!isStored && (
+                                <button
+                                    className="btn-base flex-center rounded-3xl h-[40px]"
+                                    onClick={onStorageClick}
+                                >
+                                    보관하기
+                                </button>
+                            )}
+                            {isReplied !== undefined && !isReplied && (
                                 <button
                                     className="btn-base flex-center rounded-3xl h-[40px]"
                                     onClick={onReplyClick}
diff --git a/src/components/LetterDetailPage/LetterDatail/ReplyLetterDetail.tsx b/src/components/LetterDetailPage/LetterDatail/ReplyLetterDetail.tsx
deleted file mode 100644
index 0ceca335..00000000
--- a/src/components/LetterDetailPage/LetterDatail/ReplyLetterDetail.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { DayCounter } from '@/components/Common/DayCounter/DayCounter';
-import { Margin } from '@/components/Common/Margin/Margin';
-import { TextArea } from '@/components/Common/TextArea/TextArea';
-import { useToastStore } from '@/hooks';
-import { usePostNearByLetterStorage } from '@/hooks/usePostNearByLetterStorage';
-import { formatDate } from '@/util/formatDate';
-import { getLetter } from '@/service/storage/getLetter';
-import { useGetCheckMapReplyLetter } from '@/hooks/useGetCheckMapReplyLetter';
-import clsx from 'clsx';
-import { useParams, useNavigate } from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import { ReportButton } from '@/components/LetterDetailPage/Report/ReportButton';
-import { DeleteButton } from '@/components/LetterDetailPage/Delete/DeleteButton';
-
-type ReplyLetterDetailProps = {
-    letterData: {
-        content: string;
-        font: string;
-        label: string;
-        paper: string;
-        createdAt: string;
-    };
-};
-
-export const ReplyLetterDetail = ({ letterData }: ReplyLetterDetailProps) => {
-    const { letterId } = useParams<{ letterId: string }>();
-    const { content, createdAt, font, label } = letterData;
-    const navigate = useNavigate();
-    const [isStored, setIsStored] = useState(false);
-
-    const { data: isReplied } = useGetCheckMapReplyLetter({
-        letterId: Number(letterId)
-    });
-
-    useEffect(() => {
-        const checkStoredLetter = async () => {
-            const storedLetters = await getLetter({
-                apiEndpoint: '/map/archived',
-                page: 1,
-                size: 100
-            });
-
-            const letter = storedLetters.result.content.find(
-                (letter) => letter.letterId === Number(letterId)
-            );
-            if (letter) {
-                setIsStored(true);
-            }
-        };
-
-        checkStoredLetter();
-    }, [letterId]);
-
-    const postMutation = usePostNearByLetterStorage(Number(letterId) || 0);
-
-    const { addToast } = useToastStore();
-
-    const onStorageClick = () => {
-        if (!isStored) {
-            postMutation.mutate(undefined, {
-                onSuccess: (response) => {
-                    if (response.isSuccess) {
-                        if (response.code === 'COMMON201') {
-                            addToast('편지 저장에 성공했습니다', 'success');
-                            setIsStored(true);
-                            localStorage.setItem(
-                                `storedLetter-${letterId}`,
-                                'true'
-                            );
-                        } else if (response.code === 'MAP4009') {
-                            addToast('편지가 이미 저장되어 있습니다.', 'error');
-                            setIsStored(true);
-                            localStorage.setItem(
-                                `storedLetter-${letterId}`,
-                                'true'
-                            );
-                        }
-                    } else {
-                        addToast('편지 저장에 실패했습니다.', 'error');
-                    }
-                }
-            });
-        }
-    };
-
-    const onReplyClick = () => {
-        navigate(`/letter/map/reply/create/${letterId}`);
-    };
-
-    return (
-        <>
-            <div className="absolute top-8 right-16 cursor-pointer">
-                <div className="flex">
-                    <DeleteButton />
-                    <ReportButton />
-                </div>
-            </div>
-            <div className={clsx(font ? font : 'font-sans')}>
-                <Margin top={20} />
-                <div className="relative z-20 flex flex-col justify-center w-9/12 m-auto py-9">
-                    <img src={'/to_line.f4c129e6.svg'} className="w-full" />
-
-                    <div className="relative">
-                        <TextArea
-                            value={content}
-                            font={font}
-                            isReadonly={true}
-                        />
-                    </div>
-
-                    <Margin top={30} />
-                    <div className="flex justify-between w-full ">
-                        <div>
-                            <p className="">{formatDate(createdAt)}</p>
-                        </div>
-                    </div>
-                    <Margin bottom={2} />
-                </div>
-                <div className="flex justify-between">
-                    <span className="block w-9/12 break-words whitespace-normal">
-                        {content}
-                    </span>
-                    <span>{DayCounter({ createdAt })}</span>
-                </div>
-                {!isStored && (
-                    <div className="flex">
-                        <button
-                            className="btn-base flex-center rounded-3xl h-[40px]"
-                            onClick={onStorageClick}
-                        >
-                            보관하기
-                        </button>
-                        {!isReplied && (
-                            <button
-                                className="btn-base flex-center rounded-3xl h-[40px]"
-                                onClick={onReplyClick}
-                            >
-                                편지에 답장하기
-                            </button>
-                        )}
-                    </div>
-                )}
-            </div>
-        </>
-    );
-};
diff --git a/src/components/LetterDetailPage/LetterDetailContainer/KeywordLetterDetailContainer/KeywordLetterDetailContainer.tsx b/src/components/LetterDetailPage/LetterDetailContainer/KeywordLetterDetailContainer/KeywordLetterDetailContainer.tsx
index 4fd274f0..60ab33ff 100644
--- a/src/components/LetterDetailPage/LetterDetailContainer/KeywordLetterDetailContainer/KeywordLetterDetailContainer.tsx
+++ b/src/components/LetterDetailPage/LetterDetailContainer/KeywordLetterDetailContainer/KeywordLetterDetailContainer.tsx
@@ -7,9 +7,10 @@ import { useGetKeywordReplyLetterDetail } from '@/hooks/useGetKeywordReplyLetter
 import { KeywordLetterDetail } from '../../LetterDatail/KeywordLetterDetail/KeywordLetterDetail';
 
 export const KeywordLetterDetailContainer = () => {
-    const { letterId, letterType } = useParams<{
+    const { letterId, replyLetterId, letterType } = useParams<{
         letterId: string;
         letterType: string;
+        replyLetterId: string;
     }>();
 
     const { addToast } = useToastStore();
@@ -28,7 +29,10 @@ export const KeywordLetterDetailContainer = () => {
         isLoading: isReplyLoading,
         error: replyError
     } = useGetKeywordReplyLetterDetail({
-        replyLetterId: letterType === 'REPLY_LETTER' ? Number(letterId) : 0
+        replyLetterId:
+            letterType === 'REPLY_LETTER'
+                ? Number(letterId || replyLetterId)
+                : 0
     });
 
     useEffect(() => {
@@ -65,61 +69,3 @@ export const KeywordLetterDetailContainer = () => {
         </ThemeWrapper>
     );
 };
-
-/*
-   <div className="relative mx-auto mt-4 max-w">
-                    {letterId && (
-                        <div className="absolute top-0 flex mt-10 right-8">
-                            <DeleteButton id={letterId} />
-                            {!data?.isOwner && <ReportButton id={letterId} />}
-                        </div>
-                    )}
-                    <div className="relative mt-16 flex-center">
-                        <img
-                            src={labelItem.src}
-                            alt={labelItem.name}
-                            className="absolute top-4 translate-x-40 w-[125.32px] h-[201.1px]"
-                        />
-                        {type === 'map' ? (
-                            <MapLetterDetail
-                                title="편지제목"
-                                content="편지내용"
-                                date="24.11.18"
-                                place="서울시 종로구 평창동"
-                                hint="서대문역 앞 붕어빵 가게에서"
-                            />
-                        ) : (
-                            data && <KeywordLetterDetail letterData={data} />
-                        )}
-                    </div>
-                </div>
-
-                {data?.isOwner ? (
-                    hasReplies ? (
-                        <div className="mt-16 w-[710px]  mx-auto">
-                            <ReplyList replies={sampleReplies} />
-                        </div>
-                    ) : null
-                ) : type === 'map' ? (
-                    <div className="gap-4 mx-auto mt-4 flex-center max-w">
-                        {!data?.isOwner && (
-                            <>
-                                <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
-                                    보관하기
-                                </button>
-                                <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
-                                    편지에 답장하기
-                                </button>
-                            </>
-                        )}
-                    </div>
-                ) : (
-                    <div className="gap-4 mx-auto mt-4 flex-center max-w">
-                        {!data?.isOwner && (
-                            <button className="btn-base rounded-3xl w-[700px] h-[80px]">
-                                편지에 답장하기
-                            </button>
-                        )}
-                    </div>
-                )}
-*/
diff --git a/src/components/LetterDetailPage/LetterDetailContainer/MapLetterArchieveDetailContainer/MapLetterArchieveDetailContainer.tsx b/src/components/LetterDetailPage/LetterDetailContainer/MapLetterArchieveDetailContainer/MapLetterArchieveDetailContainer.tsx
index 75cffa91..450a15fc 100644
--- a/src/components/LetterDetailPage/LetterDetailContainer/MapLetterArchieveDetailContainer/MapLetterArchieveDetailContainer.tsx
+++ b/src/components/LetterDetailPage/LetterDetailContainer/MapLetterArchieveDetailContainer/MapLetterArchieveDetailContainer.tsx
@@ -4,47 +4,71 @@ import { useToastStore } from '@/hooks';
 import { useEffect } from 'react';
 import { useGetArchivedLetter } from '@/hooks';
 import { MapLetterArchieveDetail } from '../../LetterDatail/MapLetterArchieveDetail/MapLetterArchieveDetail';
+import { useGetMapReplyLetterDetail } from '@/hooks/useGetMapReplyLetterDetail';
 
 export const MapLetterArchieveDetailContainer = () => {
-    const { letterId } = useParams<{
+    const { letterId, replyLetterId, dataType } = useParams<{
         letterId: string;
+        letterType: string;
+        dataType: string;
+        replyLetterId: string;
     }>();
-
     const { addToast } = useToastStore();
-
     const navigate = useNavigate();
 
     const {
         data: mapData,
         isLoading: isMapLoading,
         error: mapError
-    } = useGetArchivedLetter(letterId || '');
+    } = useGetArchivedLetter({
+        letterId: (dataType !== 'REPLY_LETTER' && Number(letterId)) || 0
+    });
+
+    const {
+        data: replyData,
+        isLoading: isReplyLoading,
+        error: replyError
+    } = useGetMapReplyLetterDetail({
+        letterId:
+            dataType === 'REPLY_LETTER' ? Number(replyLetterId || letterId) : 0
+    });
+    console.log(replyLetterId);
 
     useEffect(() => {
-        if (mapError) {
-            addToast(mapError.message, 'error');
+        const error = mapError || replyError;
+        if (error) {
+            addToast(error.message, 'error');
             navigate('/');
         }
-    }, [mapError, addToast]);
+    }, [mapError, replyError, addToast, navigate]);
 
-    if (isMapLoading) {
+    if (isMapLoading || isReplyLoading) {
         return <div>로딩 중...</div>;
     }
 
-    if (!mapData || !letterId) {
+    if (!mapData && !replyData) {
         return (
             <ThemeWrapper themeId={1}>
-                <div>지도 편지를 가져오는 중 문제가 발생했습니다.</div>
+                <div>지도 편지가 존재하지 않습니다.</div>
             </ThemeWrapper>
         );
     }
 
     return (
-        <ThemeWrapper themeId={Number(mapData.result.paper)}>
-            <MapLetterArchieveDetail
-                letterData={mapData.result}
-                letterId={letterId}
-            />
+        <ThemeWrapper themeId={Number(mapData?.paper || replyData?.paper || 1)}>
+            {dataType !== 'REPLY_LETTER' && mapData ? (
+                <MapLetterArchieveDetail
+                    letterData={mapData}
+                    letterId={letterId || ''}
+                />
+            ) : dataType === 'REPLY_LETTER' && replyData ? (
+                <MapLetterArchieveDetail
+                    letterData={replyData}
+                    letterId={replyLetterId || ''}
+                />
+            ) : (
+                <div>잘못된 접근입니다.</div>
+            )}
         </ThemeWrapper>
     );
 };
diff --git a/src/components/LetterDetailPage/Report/ReportModal.stories.tsx b/src/components/LetterDetailPage/Report/ReportModal.stories.tsx
deleted file mode 100644
index 68e98cd9..00000000
--- a/src/components/LetterDetailPage/Report/ReportModal.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ReportModal } from './ReportModal';
-
-const meta: Meta<typeof ReportModal> = {
-    component: ReportModal,
-    title: 'molecule/ReportModal',
-    tags: ['autodocs']
-};
-export default meta;
-
-type Story = StoryObj<typeof ReportModal>;
-
-export const Default: Story = {
-    args: {}
-};
-
-export const WithCustomReason: Story = {
-    args: {},
-    parameters: {
-        docs: {
-            description: {
-                story: '기타 옵션 선택 시, 텍스트 입력 필드가 활성화'
-            }
-        }
-    },
-    render: (args) => {
-        return <ReportModal {...args} />;
-    }
-};
diff --git a/src/components/LetterDetailPage/Report/ReportModal.tsx b/src/components/LetterDetailPage/Report/ReportModal.tsx
index 965b78d7..c0757cf9 100644
--- a/src/components/LetterDetailPage/Report/ReportModal.tsx
+++ b/src/components/LetterDetailPage/Report/ReportModal.tsx
@@ -20,7 +20,11 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {
     const { pathname } = useLocation();
     const mapType = pathname.split('/')[2];
     const letterType = pathname.split('/')[3];
-    const { letterId, lat } = useParams<{ letterId: string; lat: string }>();
+    const { letterId, lat, replyLetterId } = useParams<{
+        letterId: string;
+        lat: string;
+        replyLetterId: string;
+    }>();
     const navigate = useNavigate();
     const { addToast } = useToastStore();
 
@@ -33,7 +37,7 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {
             const description =
                 selectedReason === '기타' ? customReason : selectedReason;
             return await postReportKeywordLetter({
-                letterId: Number(letterId),
+                letterId: Number(letterId || replyLetterId),
                 description
             });
         }
@@ -48,7 +52,7 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {
             const description =
                 selectedReason === '기타' ? customReason : selectedReason;
             return await postReportKeywordReplyLetter({
-                replyLetterId: Number(letterId),
+                replyLetterId: Number(letterId || replyLetterId),
                 description
             });
         }
@@ -63,14 +67,14 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {
             const description =
                 selectedReason === '기타' ? customReason : selectedReason;
             return await postReportMapLetter({
-                letterId: Number(letterId),
+                letterId: Number(letterId || replyLetterId),
                 description
             });
         }
     });
 
     const reportMapReplyLetterMutation = usePostReportMapReplyLetter(
-        Number(letterId),
+        Number(letterId || replyLetterId),
         selectedReason === '기타' ? customReason : selectedReason
     );
 
diff --git a/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx b/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx
index 9fc1eed1..383b4758 100644
--- a/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx
+++ b/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx
@@ -37,7 +37,6 @@ export const MaplibreWithSearch = ({
 
     return (
         <div className="relative h-screen">
-            {/* <TopBar handleBackClick={onBackClick} /> */}
             <div className="absolute z-10 flex items-center p-2 space-x-2 transform -translate-x-1/2 bg-white rounded-lg shadow-md top-[1rem] left-1/2">
                 <input
                     type="text"
@@ -49,6 +48,7 @@ export const MaplibreWithSearch = ({
                 />
                 <IoIosSearch className="w-6 h-8 cursor-pointer" />
             </div>
+
             {searchedLocation?.name && (
 
                 <div className="absolute top-[5rem] w-[340px] h-[48px] left-1/2 transform -translate-x-1/2 z-10 bg-sample-gray shadow-md text-sample-black text-bold rounded-md p-2 flex items-center justify-between">
diff --git a/src/components/NotificationPage/NotificationItem.stories.tsx b/src/components/NotificationPage/NotificationItem.stories.tsx
deleted file mode 100644
index 4205f7d8..00000000
--- a/src/components/NotificationPage/NotificationItem.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { NotificationItem } from './NotificationItem';
-
-const meta: Meta<typeof NotificationItem> = {
-    component: NotificationItem,
-    title: 'molecule/NotificationItem',
-    tags: ['autodocs'],
-    argTypes: {
-        type: {
-            control: 'select',
-            options: [
-                'NEW_LETTER',
-                'TARGET_LETTER',
-                'REPLY_LETTER',
-                'WARNING',
-                'BAN'
-            ]
-        },
-        createdAt: { control: 'date' },
-        isRead: { control: 'boolean' },
-        letterId: { control: 'text' }
-    }
-};
-export default meta;
-
-type Story = StoryObj<typeof NotificationItem>;
-
-export const Default: Story = {
-    args: {
-        type: 'NEW_LETTER', // 기본값으로 "새로운 편지" 타입
-        createdAt: '2024-12-03T11:20:38.6242079', // 현재 시간으로 초기화
-        isRead: false, // 읽지 않은 상태로 설정
-        letterId: 1212 // 임의의 편지 ID
-    }
-};
-
-export const read: Story = {
-    args: {
-        type: 'NEW_LETTER', // 기본값으로 "새로운 편지" 타입
-        createdAt: '2024-12-03T11:20:38.6242079', // 현재 시간으로 초기화
-        isRead: true, // 읽지 않은 상태로 설정
-        letterId: 1212 // 임의의 편지 ID
-    }
-};
diff --git a/src/hooks/useGetArchivedLetter.ts b/src/hooks/useGetArchivedLetter.ts
index 7a0bdede..47863261 100644
--- a/src/hooks/useGetArchivedLetter.ts
+++ b/src/hooks/useGetArchivedLetter.ts
@@ -1,12 +1,18 @@
-import { getArchivedMapLetter } from '@/service/MapLetter/getArchivedLetter';
-import { GetArchivedMapLetterResponseType } from '@/types/letter';
 import { useQuery } from '@tanstack/react-query';
+import { getArchivedMapLetter } from '@/service/MapLetter/getArchivedLetter';
+import { getArchivedMapLetterResultType } from '@/types/letter';
+
+type UseArchivedLetterProps = {
+    letterId: number;
+};
 
-export const useGetArchivedLetter = (letterId: string) => {
-    return useQuery<GetArchivedMapLetterResponseType, Error>({
+export const useGetArchivedLetter = ({ letterId }: UseArchivedLetterProps) => {
+    return useQuery<getArchivedMapLetterResultType, Error>({
         queryKey: ['archivedMapLetter', letterId],
         queryFn: async () => {
-            return await getArchivedMapLetter(letterId);
-        }
+            const response = await getArchivedMapLetter({ letterId });
+            return response;
+        },
+        enabled: !!letterId
     });
 };
diff --git a/src/pages/Letter/Detail/MapLetterArchieveDetailContainerPage/MapLetterArchieveDetailContainerPage.tsx b/src/pages/Letter/Detail/MapLetterArchieveDetailContainerPage/MapLetterArchieveDetailContainerPage.tsx
index d17ac718..5dcd8fae 100644
--- a/src/pages/Letter/Detail/MapLetterArchieveDetailContainerPage/MapLetterArchieveDetailContainerPage.tsx
+++ b/src/pages/Letter/Detail/MapLetterArchieveDetailContainerPage/MapLetterArchieveDetailContainerPage.tsx
@@ -1,7 +1,6 @@
 import { NavigationBar } from '@/components/Common/NavigationBar/NavigationBar';
 import { TopBar } from '@/components/Common/TopBar/TopBar';
 import { MapLetterArchieveDetailContainer } from '@/components/LetterDetailPage/LetterDetailContainer/MapLetterArchieveDetailContainer/MapLetterArchieveDetailContainer';
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 export const MapLetterArchieveDetailContainerPage = () => {
diff --git a/src/pages/Letter/Detail/ReplyLetterDetailPage.stories.tsx b/src/pages/Letter/Detail/ReplyLetterDetailPage.stories.tsx
deleted file mode 100644
index 2e5160da..00000000
--- a/src/pages/Letter/Detail/ReplyLetterDetailPage.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ReplyLetterDetailPage } from './ReplyLetterDetailPage';
-import { Route, Routes, MemoryRouter } from 'react-router-dom';
-
-const meta: Meta<typeof ReplyLetterDetailPage> = {
-    component: ReplyLetterDetailPage,
-    title: 'Pages/ReplyLetterDetailPage',
-    tags: ['autodocs']
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ReplyLetterDetailPage>;
-
-export const Default: Story = {
-    args: {},
-    decorators: [
-        (Story) => {
-            return (
-                <MemoryRouter initialEntries={['/letter/reply/123']}>
-                    <Routes>
-                        <Route path="/letter/reply/:id" element={<Story />} />
-                    </Routes>
-                </MemoryRouter>
-            );
-        }
-    ]
-};
diff --git a/src/pages/Letter/Detail/ReplyLetterDetailPage.tsx b/src/pages/Letter/Detail/ReplyLetterDetailPage.tsx
deleted file mode 100644
index 344c8a0a..00000000
--- a/src/pages/Letter/Detail/ReplyLetterDetailPage.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { TopBar } from '@/components/Common/TopBar/TopBar';
-import { useNavigate, useParams } from 'react-router-dom';
-import { ReplyLetterDetail } from '@/components/LetterDetailPage/LetterDatail/ReplyLetterDetail';
-import { useGetKeywordReplyLetterDetail } from '@/hooks/useGetKeywordReplyLetterDetail';
-import { useGetMapReplyLetterDetail } from '@/hooks/useGetMapReplyLetterDetail';
-import { ThemeWrapper } from '@/components/CreatLetterPage/ThemeWrapper/ThemeWrapper';
-
-export const ReplyLetterDetailPage = () => {
-    const { type, replyLetterId } = useParams<{
-        type: 'map' | 'keyword';
-        replyLetterId: string;
-    }>();
-
-    const navigate = useNavigate();
-    const isMapType = type === 'map';
-
-    const {
-        data: keywordReplyData,
-        isLoading: isKeywordLoading,
-        error: keywordError
-    } = useGetKeywordReplyLetterDetail({
-        replyLetterId: replyLetterId ? Number(replyLetterId) || 0 : 0
-    });
-
-    const {
-        data: mapReplyData,
-        isLoading: isMapLoading,
-        error: mapError
-    } = useGetMapReplyLetterDetail({
-        letterId: replyLetterId ? Number(replyLetterId) || 0 : 0
-    });
-
-    if (isKeywordLoading || isMapLoading) {
-        return <div>Loading...</div>;
-    }
-
-    if (!isMapType && keywordError instanceof Error) {
-        console.error('Keyword Error:', keywordError.message);
-        return <div>Error: 키워드 답장 편지가 존재하지 않습니다.</div>;
-    }
-
-    if (isMapType && mapError instanceof Error) {
-        console.error('Map Error:', mapError.message);
-        return (
-            <div>
-                Error: 지도 답장 데이터를 가져오는 중 문제가 발생했습니다.
-            </div>
-        );
-    }
-
-    const onBackClick = () => {
-        navigate(-1);
-    };
-
-    const letterData = isMapType ? mapReplyData : keywordReplyData;
-
-    return (
-        <div className="w-full min-h-screen">
-            <TopBar handleBackClick={onBackClick} />
-            <ThemeWrapper
-                themeId={Number(
-                    mapReplyData?.paper || keywordReplyData?.paper || 1
-                )}
-            >
-                {letterData ? (
-                    <div className="relative mx-auto max-w">
-                        <div className="relative mt-16 flex-center">
-                            <ReplyLetterDetail letterData={letterData} />
-                        </div>
-                    </div>
-                ) : (
-                    <div>Error: 편지가 존재하지 않습니다.</div>
-                )}
-            </ThemeWrapper>
-        </div>
-    );
-};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4f29acd3..427ae2c5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -8,7 +8,6 @@ import { ArchivedPage } from '@/pages/ArchivedPage';
 import { LabelCollectionsPage } from '@/pages/Storage/LabelCollectionsPage';
 import { KeywordLetterDetailPage } from '@/pages/Letter/Detail/KeywordLetterDetailPage/KeywordLetterDetailPage';
 import { NotificationPage } from '@/pages/Notification/NotificationPage';
-import { ReplyLetterDetailPage } from '@/pages/Letter/Detail/ReplyLetterDetailPage';
 import { SentPage } from '@/pages/SentPage';
 import { ProfileSharePage } from '@/pages/User/Profile/ProfileSharePage';
 import { LabelLotteryPage } from './Label/Lottery/LabelLotteryPage';
@@ -33,7 +32,6 @@ export {
     LabelCollectionsPage,
     KeywordLetterDetailPage,
     MapLetterDetailPage,
-    ReplyLetterDetailPage,
     NotificationPage,
     SentPage,
     ProfileSharePage,
diff --git a/src/router.tsx b/src/router.tsx
index de4bd4e8..a0c2c9ab 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -10,7 +10,6 @@ import {
     LoginPage,
     RegisterPage,
     LabelCollectionsPage,
-    ReplyLetterDetailPage,
     NotificationPage,
     SentPage,
     ProfileSharePage,
@@ -119,10 +118,6 @@ export const router = createBrowserRouter([
                 path: '/profileshare',
                 element: <ProfileSharePage />
             },
-            {
-                path: '/letter/:type/reply/:replyLetterId',
-                element: <ReplyLetterDetailPage />
-            },
             {
                 path: '/lottery',
                 element: <LabelLotteryPage />
@@ -183,6 +178,14 @@ export const router = createBrowserRouter([
             {
                 path: '/mapexplorer',
                 element: <MapExplorerPage />
+            },
+            {
+                path: '/letter/keyword/:letterType/:replyLetterId',
+                element: <KeywordLetterDetailPage />
+            },
+            {
+                path: '/letter/map/:letterType/:replyLetterId',
+                element: <MapLetterArchieveDetailContainerPage />
             }
         ]
     },
diff --git a/src/service/MapLetter/getArchivedLetter.ts b/src/service/MapLetter/getArchivedLetter.ts
index 4c2b0788..7d95e3b7 100644
--- a/src/service/MapLetter/getArchivedLetter.ts
+++ b/src/service/MapLetter/getArchivedLetter.ts
@@ -1,10 +1,21 @@
-import { GetArchivedMapLetterResponseType } from './../../types/letter';
-import { defaultApi } from '../api';
+import { defaultApi } from '@/service/api';
+import { ApiResponseType } from '@/types/apiResponse';
+import { getArchivedMapLetterResultType } from '@/types/letter';
 
-export const getArchivedMapLetter = async (
-    letterId: string
-): Promise<GetArchivedMapLetterResponseType> => {
-    const api = defaultApi();
-    const response = await api.get(`/map/archive/${letterId}`);
-    return response.data;
+type ArchivedMapLetterRequestProps = {
+    letterId: number;
 };
+
+type ArchivedMapLetterResponse =
+    ApiResponseType<getArchivedMapLetterResultType>;
+
+export async function getArchivedMapLetter({
+    letterId
+}: ArchivedMapLetterRequestProps): Promise<getArchivedMapLetterResultType> {
+    const api = defaultApi();
+
+    const response = await api.get<ArchivedMapLetterResponse>(
+        `/map/archive/${letterId}`
+    );
+    return response.data.result;
+}
diff --git a/src/types/letter.ts b/src/types/letter.ts
index edfe512a..a79d81e9 100644
--- a/src/types/letter.ts
+++ b/src/types/letter.ts
@@ -16,7 +16,7 @@ export type MapReplyType = {
 };
 
 export type KeywordType = {
-    letterId : number;
+    letterId: number;
     content: string;
     font: string;
     paper: string;
@@ -101,6 +101,7 @@ export type GetKeywordReplyLetterDetailResponseType = {
     font: string;
     paper: string;
     label: string;
+    isReplied: boolean;
     createdAt: string;
 };