feat: 뚱뚱세로, 뚱뚱가로 마크업

0ne6yte · Nov 12, 2023 · 24ea120 · 24ea120
1 parent 51b22f6
commit 24ea120
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 2 deletions.
diff --git a/public/4cut-horizontal.png b/public/4cut-horizontal.png
diff --git a/public/4cut-long.png → public/4cut-vertical.png b/public/4cut-long.png → public/4cut-vertical.png
diff --git a/src/domain/photo/PhotoList/components/AlbumInsidePages.tsx b/src/domain/photo/PhotoList/components/AlbumInsidePages.tsx
@@ -16,7 +16,7 @@ function ThinVertical() {
   return (
     <div className="flex flex-1 p-8 gap-5">
       <div className="flex flex-col flex-1 gap-5">
-        <img src="4cut-long.png" alt="" className="w-full object-fill h-3/4" />
+        <img src="4cut-vertical.png" alt="" className="w-full object-fill h-3/4" />
         <div className="flex-1">
           <div className="text-[18px] text-white">23.03.01</div>
           <div className="text-[14px] text-white">#태그1 #태그2</div>
@@ -31,7 +31,44 @@ function ThinVertical() {
   );
 }
 
+function FatVertical() {
+  return (
+    <div className="flex flex-1 p-8">
+      <div className="flex flex-col flex-1 gap-5">
+        <img src="4cut-vertical.png" alt="" className="w-full object-fill h-3/4" />
+        <div className="flex-1">
+          <div className="text-[18px] text-white">23.03.01</div>
+          <div className="text-[14px] text-white">#태그1 #태그2</div>
+          <div className="text-[14px] text-white whitespace-pre-line">
+            scrambled it to make a type specimen book. It has survived not only five centuries, but also the scrambled
+            it to make a t
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FatHorizontal() {
+  return (
+    <div className="flex flex-1 p-8 items-center">
+      <div className="flex flex-col flex-1 gap-5">
+        <img src="4cut-horizontal.png" alt="" className="w-full object-fill" />
+        <div className="flex-1">
+          <div className="text-[18px] text-white">23.03.01</div>
+          <div className="text-[14px] text-white">#태그1 #태그2</div>
+          <div className="text-[14px] text-white whitespace-pre-line">
+            scrambled it to make a type specimen book. It has survived not only five centuries, but also the scrambled
+            it to make a t
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
 export const AlbumPages = Object.assign(AlbumPagesContainer, {
   AlbumPages: AlbumPagesContainer,
   ThinVertical,
+  FatVertical,
+  FatHorizontal,
 });
diff --git a/src/domain/photo/PhotoList/index.tsx b/src/domain/photo/PhotoList/index.tsx
@@ -27,7 +27,9 @@ export default function PhotoList() {
       }
       content={
         <AlbumPages>
-          <AlbumPages.ThinVertical />
+          {/* <AlbumPages.ThinVertical /> */}
+          {/* <AlbumPages.FatVertical /> */}
+          <AlbumPages.FatHorizontal />
         </AlbumPages>
       }
       showFooter