(#8) Styling: Refactor with Container

components/Container.module.scss

@@ -0,0 +1,39 @@
+@import "styles/_variables";
+
+.container {
+    @include containerMixin;
+
+    .inner {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+    }
+}
+
+.buttons {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    grid-gap: 0.75rem;
+    margin: 2rem auto auto;
+    @include tablet {
+        flex-direction: column;
+        width: 50%;
+    }
+
+    button {
+        @include buttonMixin;
+        width: 100%;
+        margin: auto;
+
+        &.gray {
+            background-color: $color-background-dim;
+        }
+
+        @include tablet {
+            margin: auto;
+            width: 50%;
+        }
+    }
+}

components/draw/Container.tsx → components/Container.tsx

@@ -1,23 +1,26 @@
 import React, { ReactElement } from "react";
 
-import styles from "./Draw.module.scss";
+import styles from "./Container.module.scss";
 
 interface ContainerProps {
     title: string;
     buttons: ReactElement[];
+    className?: string;
+    overrideContainerStyle?: string;
+    overrideInnerStyle?: string;
 }
 
 interface ContainerState {}
 
 class Container extends React.Component<ContainerProps, ContainerState> {
     render = () => {
         return (
-            <section className={styles.container}>
-                <div className={styles.inner}>
+            <section className={`${styles.container} ${this.props.overrideContainerStyle}`}>
+                <div className={`${styles.inner} ${this.props.overrideInnerStyle}`}>
                     <div className={styles.title}>
                         <h1>{this.props.title}</h1>
                     </div>
-                    <div className={styles.content}>
+                    <div className={this.props.className}>
                         {this.props.children}
                         <div className={styles.buttons}>{this.props.buttons}</div>
                     </div>

components/draw/Draw.module.scss

@@ -1,16 +1,5 @@
 @import "styles/_variables";
 
-.container {
-    @include containerMixin;
-
-    .inner {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-    }
-}
-
 .content {
     width: 100%;
 
@@ -33,7 +22,7 @@
         }
     }
 
-    .ponix {
+    .portrait {
         display: flex;
         flex-direction: column;
         grid-gap: 1rem;
@@ -44,39 +33,11 @@
         }
 
         .name {
+            line-height: $text-base-line-height;
             font-weight: 200;
-
             strong {
                 font-weight: 500;
             }
         }
     }
-
-    .buttons {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        grid-gap: 0.75rem;
-        margin-top: 2rem;
-        margin-bottom: 2rem;
-
-        @include tablet {
-            flex-direction: column;
-        }
-
-        button {
-            @include buttonMixin;
-            width: 100%;
-            margin: auto;
-
-            &.gray {
-                background-color: $color-background-dim;
-            }
-
-            @include tablet {
-                margin: auto;
-                width: 50%;
-            }
-        }
-    }
 }

components/draw/Failed.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import styles from "./Draw.module.scss";
-import Container from "./Container";
+import Container from "../Container";
 
 interface DrawFailedProps {
     onRedrawPressed(): void;
@@ -19,6 +19,7 @@ class Failed extends React.Component<DrawFailedProps, DrawFailedState> {
                         다시 시도해보자
                     </button>,
                 ]}
+                className={styles.content}
             >
                 <p>넙죽단이 포닉씰을 훔쳐가버렸다...</p>
             </Container>

components/draw/Init.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import styles from "./Draw.module.scss";
 import Image from "next/image";
-import Container from "./Container";
+import Container from "../Container";
 
 interface InitProps {
     onDrawPressed(): void;
@@ -20,6 +20,7 @@ class Init extends React.Component<InitProps, InitState> {
                         포장을 뜯어보자
                     </button>,
                 ]}
+                className={styles.content}
             >
                 <div className={styles.bread}>
                     <Image

components/draw/Loading.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Image from "next/image";
 import styles from "./Draw.module.scss";
-import Container from "./Container";
+import Container from "../Container";
 
 interface LoadingProps {}
 
@@ -10,7 +10,7 @@ interface LoadingState {}
 class Loading extends React.Component<LoadingProps, LoadingState> {
     render = () => {
         return (
-            <Container title={""} buttons={[]}>
+            <Container title={""} buttons={[]} className={styles.content}>
                 <div className={styles.bread}>
                     <Image
                         src={"/bread.png"}

components/draw/Success.tsx

@@ -2,8 +2,9 @@ import React from "react";
 import { Ponix } from "../../typings/models";
 
 import styles from "./Draw.module.scss";
+import containerStyles from "../Container.module.scss";
 import Image from "next/image";
-import Container from "./Container";
+import Container from "../Container";
 
 interface DrawSuccessProps {
     onRedrawPressed(): void;
@@ -23,14 +24,19 @@ class Success extends React.Component<DrawSuccessProps, DrawSuccessState> {
                 title={"신난다~!"}
                 buttons={[
                     <button key={0} onClick={this.props.onRedrawPressed}>
-                        또 뽑아보자
+                        또 해보자
                     </button>,
-                    <button key={1} className={styles.gray} onClick={this.props.onRedirectPressed}>
+                    <button
+                        key={1}
+                        className={containerStyles.gray}
+                        onClick={this.props.onRedirectPressed}
+                    >
                         도감으로
                     </button>,
                 ]}
+                className={styles.content}
             >
-                <div className={styles.ponix}>
+                <div className={styles.portrait}>
                     <div className={styles.image}>
                         <Image
                             src={`/ponix/${ponix.img}`}
@@ -40,10 +46,11 @@ class Success extends React.Component<DrawSuccessProps, DrawSuccessState> {
                             alt={`${ponix.no} ${ponix.name}`}
                         />
                     </div>
-                    <div className={styles.name}>
+                    <p className={styles.name}>
                         <span>No. {ponix.no} </span>
-                        <strong>{ponix.name}</strong>
-                    </div>
+                        <br />
+                        <strong>{ponix.name}</strong>(을)를 뽑았다!
+                    </p>
                 </div>
             </Container>
         );