[편지] 편지함 디테일 페이지 (#36)

* [Letter/View] 편지 디테일 페이지 init (#15)

* [Letter/Detail] 편지 디테일 페이지 내용 추가 (#15)

* [Letter/Detail] add detail page (#15)

* [Letter/Detail] fix build error (#15)

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",

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;

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>

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;

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%'}>

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>