FE-31 상세페이지 UI 제작

src/pageLayout/Epigram/EpigramComment.tsx

@@ -0,0 +1,25 @@
+import { Textarea } from '@/components/ui/textarea';
+import Image from 'next/image';
+
+function CommentSection() {
+  return (
+    <div className='bg-background-100 flex justify-center h-[500px]'>
+      <div className='w-80 md:w-96 lg:w-[640px] pt-6 lg:pt-12 pb-36'>
+        <div className='flex flex-col gap-4 lg:gap-6'>
+          <h3 className='text-base lg:text-xl font-semibold'>댓글(3)</h3>
+          <div className='flex gap-4 lg:gap-6'>
+            <div className='w-12 h-12'>
+              <Image src='/profile.svg' alt='프로필 사진' width={48} height={48} />
+            </div>
+            <Textarea
+              className='bg-background-100 w-full text-base lg:text-xl text-black p-4 border-solid border-line-200 border-2 rounded-lg resize-none focus-visible:ring-0'
+              placeholder='100자 이내로 입력해 주세요.'
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CommentSection;

src/pageLayout/Epigram/EpigramFigure.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+
+function EpigramFigure() {
+  return (
+    <div className='bg-[length:100%_2.5em] bg-[linear-gradient(#eee_.1em,transparent_.1em)] w-full flex justify-center py-6'>
+      <figure className='w-80 md:w-96 lg:w-[640px] flex flex-col lg: gap-8'>
+        <div className='flex gap-2'>
+          <p className='text-gray-400 text-base lg:text-xl font-normal'>#꿈을 이루고싶을때</p>
+          <p className='text-gray-400 text-base lg:text-xl font-normal'>#나아가야할때</p>
+        </div>
+        <blockquote className=''>
+          <p className='text-2xl lg:text-3xl font-normal'>오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아 간다.</p>
+        </blockquote>
+        <figcaption className='text-gray-400 text-right text-base lg:text-2xl font-normal'>-앙드레 말로-</figcaption>
+        <div className='flex justify-center gap-4'>
+          <button type='button'>
+            <div className='w-20 lg:w-28 h-9 lg:h-11 flex items-center justify-center  text-white rounded-full bg-black'>
+              <Image src='/likeIcon.svg' alt='좋아요 아이콘' width={20} height={20} className='lg:w-9 lg:h-9' />
+              <p className='text-sm lg:text-xl'>123</p>
+            </div>
+          </button>
+          <button type='button'>
+            <div className='w-32 lg:w-44 h-9 lg:h-11 flex items-center justify-center rounded-full bg-line-100'>
+              <p className='text-gray-300 text-sm lg:text-xl'>왕도로 가는길</p>
+              <Image src='/placeLink.svg' alt='지도링크' width={20} height={20} className='lg:w-9 lg:h-9' />
+            </div>
+          </button>
+        </div>
+      </figure>
+    </div>
+  );
+}
+
+export default EpigramFigure;

src/pageLayout/Epigram/EpigramLayout.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image';
+import EpigramFigure from './EpigramFigure';
+import CommentSection from './EpigramComment';
+
+function EpigramLayout() {
+  return (
+    <div className='flex flex-col '>
+      <nav className='flex justify-between border-b-2 px-6 py-4'>
+        <Image src='/arrow-left.svg' alt='뒤로가기 버튼' width={36} height={36} />
+        <Image src='/logo.svg' alt='Epigram 로고' width={172} height={48} />
+        <Image src='/share.svg' alt='공유 버튼' width={36} height={36} />
+      </nav>
+      <EpigramFigure />
+      <CommentSection />
+    </div>
+  );
+}
+
+export default EpigramLayout;

src/pages/epigram/[id].tsx

@@ -0,0 +1,7 @@
+import EpigramLayout from '@/pageLayout/Epigram/EpigramLayout';
+
+function DetailPage() {
+  return <EpigramLayout />;
+}
+
+export default DetailPage;