diff --git a/package-lock.json b/package-lock.json
index 2bff11e..decd0fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "framer-motion": "^11.3.8",
         "next": "14.2.5",
         "react": "^18",
+        "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "^18",
         "react-hook-form": "^7.52.1",
         "zustand": "^4.5.4"
@@ -28,6 +29,7 @@
         "@tanstack/react-query-devtools": "^5.51.11",
         "@types/node": "^20",
         "@types/react": "^18",
+        "@types/react-copy-to-clipboard": "^5.0.7",
         "@types/react-dom": "^18",
         "eslint": "^8",
         "eslint-config-next": "14.2.5",
@@ -2321,6 +2323,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-copy-to-clipboard": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.7.tgz",
+      "integrity": "sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
@@ -6620,6 +6631,18 @@
         "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-copy-to-clipboard": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
+      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
+      "dependencies": {
+        "copy-to-clipboard": "^3.3.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || 16 || 17 || 18"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
diff --git a/package.json b/package.json
index 3586a2d..5cbb67a 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "framer-motion": "^11.3.8",
     "next": "14.2.5",
     "react": "^18",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
     "zustand": "^4.5.4"
@@ -30,6 +31,7 @@
     "@tanstack/react-query-devtools": "^5.51.11",
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
diff --git a/src/app/letter/view/[id]/page.tsx b/src/app/letter/view/[id]/page.tsx
new file mode 100644
index 0000000..531cec4
--- /dev/null
+++ b/src/app/letter/view/[id]/page.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { useParams, useRouter } from 'next/navigation';
+import Header from '@/component/layout/header';
+import { VStack, Heading, Image, Button, HStack } from '@chakra-ui/react';
+import ShareLetterButton from '@/component/common/shareLetter';
+import Link from 'next/link';
+
+const LetterDetailPage = () => {
+  const params = useParams();
+
+  const removeLetter = () => {
+    //@todo letterId로 편지 삭제
+    alert(`${params?.id}가 삭제되었습니다.`);
+  };
+
+  return (
+    <VStack gap={'1rem'} w={'100%'} h={'100vh'}>
+      <Header />
+      <VStack spacing={4}>
+        <Heading size={'lg'}>제목</Heading>
+        <Image
+          objectFit={'contain'}
+          w={'100%'}
+          h={'100%'}
+          alt={'편지 이미지'}
+          src={'https://picsum.photos/200/300'}
+        />
+        <HStack>
+          <Button onClick={removeLetter}>삭제하기</Button>
+          <ShareLetterButton />
+        </HStack>
+        <HStack>
+          <Link href={'/letter/view'}>
+            <Button>목록으로</Button>
+          </Link>
+        </HStack>
+      </VStack>
+    </VStack>
+  );
+};
+
+export default LetterDetailPage;
diff --git a/src/app/letter/view/page.tsx b/src/app/letter/view/page.tsx
index 3786957..1a9f741 100644
--- a/src/app/letter/view/page.tsx
+++ b/src/app/letter/view/page.tsx
@@ -2,48 +2,39 @@
 
 import { Box, Grid, GridItem, HStack, Select, VStack } from '@chakra-ui/react';
 import Header from '@/component/layout/header';
+import Link from 'next/link';
 
 const View = () => {
   const mockUpData = [
     {
       title: '편지1',
       img: 'img1',
+      id: 1,
     },
     {
       title: '편지2',
       img: 'img2',
+      id: 2,
     },
     {
       title: '편지3',
       img: 'img3',
+      id: 3,
     },
     {
       title: '편지4',
       img: 'img4',
+      id: 4,
     },
     {
       title: '편지5',
       img: 'img5',
+      id: 5,
     },
     {
       title: '편지6',
       img: 'img6',
-    },
-    {
-      title: '편지7',
-      img: 'img7',
-    },
-    {
-      title: '편지8',
-      img: 'img8',
-    },
-    {
-      title: '편지9',
-      img: 'img9',
-    },
-    {
-      title: '편지10',
-      img: 'img10',
+      id: 6,
     },
   ];
 
@@ -83,9 +74,11 @@ const View = () => {
           {mockUpData.map((data) => (
             <GridItem w="100%" h="35vh" border={'1px solid'} key={data?.title}>
               <VStack h={'100%'}>
-                <Box bg={'white'} flexGrow={1}>
-                  {data?.img}
-                </Box>
+                <Link href={`/letter/view/${data?.id}`}>
+                  <Box bg={'white'} flexGrow={1}>
+                    {data?.img}
+                  </Box>
+                </Link>
                 <Box h={'2rem'}>{data?.title}</Box>
               </VStack>
             </GridItem>
diff --git a/src/component/common/shareLetter.tsx b/src/component/common/shareLetter.tsx
new file mode 100644
index 0000000..3f042f2
--- /dev/null
+++ b/src/component/common/shareLetter.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { Button } from '@chakra-ui/react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+const ShareLetterButton = () => {
+  const currentUrl = window.location.href;
+
+  return (
+    <CopyToClipboard
+      text={currentUrl}
+      onCopy={() => alert('URL이 복사되었습니다.')}
+    >
+      <Button>공유하기</Button>
+    </CopyToClipboard>
+  );
+};
+
+export default ShareLetterButton;
diff --git a/src/component/layout/header.tsx b/src/component/layout/header.tsx
index 92cc342..e63a731 100644
--- a/src/component/layout/header.tsx
+++ b/src/component/layout/header.tsx
@@ -1,11 +1,11 @@
 import { Box, Center, Heading, HStack } from '@chakra-ui/react';
 
-const Header = ({ title }: { title: string }) => {
+const Header = ({ title }: { title?: string }) => {
   return (
     <HStack as={'header'} h={16} w={'100%'} px={'6'} bgColor={'orange'}>
       <Box flex={1}>
         <Heading as="h4" size="md">
-          {title}
+          {title ?? ''}
         </Heading>
       </Box>
       <Center flex={1} w={'100%'}>
diff --git a/src/component/layout/mainPageLayout.tsx b/src/component/layout/mainPageLayout.tsx
index 6ae9841..38c8045 100644
--- a/src/component/layout/mainPageLayout.tsx
+++ b/src/component/layout/mainPageLayout.tsx
@@ -39,7 +39,7 @@ const MainPageLayout = () => {
         <Link href={'/calender'}>
           <Button>캘린더</Button>
         </Link>
-        <Link href={'/view'}>
+        <Link href={'/letter/view'}>
           <Button>편지함</Button>
         </Link>
       </HStack>