(#8) Styling: Impl. Collection Page

betarixm · Mar 30, 2022 · 0f9cd25 · 0f9cd25
1 parent 4cce1e4
commit 0f9cd25
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 17 deletions.
diff --git a/components/collection/Collection.module.scss b/components/collection/Collection.module.scss
@@ -0,0 +1,95 @@
+@import "styles/_variables";
+
+@font-face {
+    font-family: "DungGeunMo";
+    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/DungGeunMo.woff")
+        format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+.content {
+    width: 100%;
+}
+
+.dex {
+    max-width: $content-width / 2;
+    margin: auto;
+
+    .background {
+        position: relative;
+        width: 90%;
+        margin: auto;
+    }
+
+    .overlay {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        bottom: 0;
+        z-index: 1;
+
+        .portrait {
+            position: absolute;
+            width: 32%;
+            left: 30%;
+            top: 38%;
+        }
+
+        .info {
+            position: absolute;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 22%;
+            height: 9%;
+            left: 25.5%;
+            bottom: 12.5%;
+
+            * {
+                color: black;
+                font-family: DungGeunMo, monospace;
+            }
+
+            span {
+                opacity: 0.5;
+                margin-top: 3%;
+                font-size: 1.5vw;
+            }
+
+            .name {
+                opacity: 0.9;
+                display: flex;
+                flex-grow: 1;
+                margin-bottom: 3%;
+                margin-left: 2%;
+                margin-right: 2%;
+                strong {
+                    font-size: 1.5vw;
+                    vertical-align: center;
+                    margin: auto;
+                }
+            }
+        }
+
+        .buttons {
+            opacity: 0.2;
+            position: absolute;
+            bottom: 15%;
+            right: 17%;
+            height: 8%;
+            width: 33%;
+
+            button {
+                height: 100%;
+                width: 50%;
+                background-color: transparent;
+                border: none;
+                cursor: pointer;
+                font-weight: 700;
+            }
+        }
+    }
+}
diff --git a/pages/collection.tsx b/pages/collection.tsx
@@ -3,8 +3,8 @@ import type { Ponix } from "../typings/models";
 import React from "react";
 import { Layout } from "../layout";
 import { LOCALSTORAGE_KEY } from "../constants/strings";
-import styles from "../components/draw/Draw.module.scss";
-import Image from "next/image";
+import { CollectionDex } from "../components/collection";
+import Popup from "../components/Popup";
 
 interface CollectionProps {}
 
@@ -37,21 +37,12 @@ class Collection extends React.Component<CollectionProps, CollectionState> {
     render = () => {
         return (
             <Layout title={"Collection"}>
-                {this.state.ponixList.map((ponix: Ponix) => (
-                    <div className={styles.ponix} key={ponix.id}>
-                        <div className={styles.image}>
-                            <Image
-                                src={`/ponix/${ponix.img}`}
-                                width={"1080px"}
-                                height={"1080px"}
-                                layout={"responsive"}
-                                alt={`${ponix.no} ${ponix.name}`}
-                            />
-                        </div>
-                        <div className={styles.no}>{ponix.no}</div>
-                        <div className={styles.name}>{ponix.name}</div>
-                    </div>
-                ))}
+                <Popup title={"🔔"}>화면을 캡쳐해서 이벤트에 참여하세요!</Popup>
+                {this.state.ponixList.length > 0 ? (
+                    <CollectionDex ponixList={this.state.ponixList} />
+                ) : (
+                    <></>
+                )}
             </Layout>
         );
     };