:bulb: imprv contributor model

src/client/js/components/StaffCredit/Contributor.js

@@ -1,8 +1,20 @@
 const contributors = [
-  [
-    { team: 'soncho', position: '1st', name: 'Sou Mizobuchi' },
-    { team: 'soncho', position: '2nd', name: 'Yusuke Takizawa' },
-  ],
+  {
+    sectionName: 'GROWI VILLAGE',
+    additionalClass: 'col-md-12',
+    members: [
+      { position: 'Soncho 1st', name: 'Sou Mizobuchi' },
+      { position: 'Soncho 2nd', name: 'Yusuke Takizawa' },
+    ],
+  },
+  {
+    sectionName: 'SPECIAL THANKS',
+    additionalClass: 'col-md-6 secial-thanks',
+    members: [
+      { name: 'Crowi Team' },
+      { position: 'Ambassador', name: 'Tsuyoshi Suzuki' },
+    ],
+  },
 ];
 
 module.exports = contributors;

src/client/js/components/StaffCredit/StaffCredit.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import keydown from 'react-keydown';
+import contributors from './Contributor';
 
 /**
  * Page staff credit component
@@ -39,8 +40,7 @@ export default class StaffCredit extends React.Component {
       }
     }
     else {
-      // clear UserCommand
-      this.state.userCommand = [];
+      this.setState({ userCommand: [] });
     }
   }
 
@@ -52,14 +52,34 @@ export default class StaffCredit extends React.Component {
 
   render() {
     if (this.state.isShown) {
+      const credit = contributors.map((contributor) => {
+        const section = <p key={contributor.sectionName} className="dev-team mt-5">{contributor.sectionName}</p>;
+        const members = contributor.members.map((member) => {
+          const name = <p className="dev-name mb-5">{member.name}</p>;
+          if (member.position) {
+            return (
+              <React.Fragment>
+                <span className="dev-position">{member.position}</span>
+                {name}
+              </React.Fragment>
+            );
+          }
+          return name;
+        });
+        return (
+          <React.Fragment key={contributor.sectionName}>
+            <div className={contributor.additionalClass}>
+              {section}
+              {members}
+            </div>
+          </React.Fragment>
+        );
+      });
       return (
         <div className="text-center credit-curtain" onClick={this.deleteCredit}>
           <div className="credit-body">
-            <p className="title my-5">Growi Soncho</p>
-            <span className="dev-position">1st</span>
-            <p className="dev-name mb-5">Sou Mizobuchi</p>
-            <span className="dev-position">2nd</span>
-            <p className="dev-name mb-5">Yusuke Takizawa</p>
+            <p className="title my-5">Growi Contributor</p>
+            {credit}
           </div>
         </div>
       );

src/client/styles/scss/_staff_credit.scss

@@ -2,6 +2,7 @@
 #staff-credit {
   font-family: 'Press Start 2P', $basefont1;
   color: white;
+  $credit-length: -50em;
 
   .credit-curtain {
     position: fixed;
@@ -15,8 +16,9 @@
 
   .credit-body {
     position: relative;
-    top: -30em;
+    top: $credit-length;
     animation-name: Credit;
+    // credit duration
     animation-duration: 15s;
     animation-timing-function: linear;
   }
@@ -26,19 +28,24 @@
       top: 100%;
     }
     to {
-      top: -30rem;
+      // credit length
+      top: $credit-length;
     }
   }
 
   .title {
-    font-size: 1.8em;
+    font-size: 2.5em;
+  }
+
+  .dev-team {
+    font-size: 1.5em;
   }
 
   .dev-position {
-    font-size: 1.2em;
+    font-size: 1em;
   }
 
   .dev-name {
-    font-size: 2.4em;
+    font-size: 2em;
   }
 }