Implements Reordering system via Sortablejs

Author: velopert

velog-frontend/src/components/series/SeriesEditor/SeriesEditor.js

@@ -1,7 +1,11 @@
 // @flow
 import React, { Component } from 'react';
-import { type SeriesData } from 'store/modules/series';
+import { type SeriesData, type SeriesPostData } from 'store/modules/series';
 import TextareaAutosize from 'react-autosize-textarea';
+import Button from 'components/common/Button';
+import { fromNow } from 'lib/common';
+import Sortable from 'sortablejs';
+
 import './SeriesEditor.scss';
 
 type Props = {
@@ -10,15 +14,21 @@ type Props = {
 
 type State = {
   name: string,
+  tempPosts: SeriesPostData[],
 };
 class SeriesEditor extends Component<Props, State> {
+  sortable: any = null;
+  list = React.createRef();
+
   state = {
     name: '',
+    tempPosts: [],
   };
 
   constructor(props: Props) {
     super(props);
     this.state.name = props.series.name;
+    this.state.tempPosts = props.series.posts;
   }
 
   onKeyPress = (e: KeyboardEvent) => {
@@ -33,7 +43,35 @@ class SeriesEditor extends Component<Props, State> {
     });
   };
 
+  reorder = (oldIndex: number, newIndex: number) => {
+    const nextPosts = [...this.state.tempPosts];
+    const temp = nextPosts[oldIndex];
+    nextPosts.splice(oldIndex, 1);
+    nextPosts.splice(newIndex, 0, temp);
+    this.setState({
+      tempPosts: nextPosts,
+    });
+  };
+
+  initialize = () => {
+    this.sortable = Sortable.create(this.list.current, {
+      animation: 150,
+      chosenClass: 'chosen',
+      ghostClass: 'ghost',
+      dragClass: 'drag',
+      onUpdate: (e: any) => {
+        const { oldIndex, newIndex } = e;
+        this.reorder(oldIndex, newIndex);
+      },
+    });
+    window.sortable = this.sortable;
+  };
+  componentDidMount() {
+    this.initialize();
+  }
+
   render() {
+    const { series } = this.props;
     return (
       <div className="SeriesEditor">
         <TextareaAutosize
@@ -42,6 +80,18 @@ class SeriesEditor extends Component<Props, State> {
           value={this.state.name}
           onKeyPress={this.onKeyPress}
         />
+        <div className="buttons-wrapper">
+          <Button cancel>취소</Button>
+          <Button>적용</Button>
+        </div>
+        <div className="list" ref={this.list}>
+          {this.state.tempPosts.map(post => (
+            <div className="item" key={post.id}>
+              <div className="post-title">{post.title}</div>
+              <div className="post-date">{fromNow(post.released_at)}</div>
+            </div>
+          ))}
+        </div>
       </div>
     );
   }

velog-frontend/src/components/series/SeriesEditor/SeriesEditor.scss

@@ -1,11 +1,11 @@
 @import 'utils';
 
 .SeriesEditor {
+  color: $oc-gray-9;
   .title {
     resize: none !important;
     width: 100%;
     margin-top: 1.5rem;
-    color: $oc-gray-9;
     font-size: 2.5rem;
     font-weight: 800;
     border-bottom: 1px solid $oc-gray-2;
@@ -14,5 +14,41 @@
     border: 1px solid $oc-gray-3;
     outline: none;
     font-family: inherit;
+    display: block;
+  }
+  .buttons-wrapper {
+    margin-top: 0.5rem;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .list {
+    margin-top: 2rem;
+    .item {
+      background: $oc-gray-0;
+      border: 1px solid $oc-gray-2;
+      padding: 1rem;
+      cursor: pointer;
+      .post-title {
+        font-size: 1.3125rem;
+        font-weight: 600;
+      }
+      .date {
+        margin-top: 0.5rem;
+        color: $oc-gray-6;
+        font-size: 0.875rem;
+      }
+
+      &.chosen {
+        border: 1px solid $oc-violet-6;
+      }
+      &.ghost {
+        opacity: 0.4;
+      }
+      &.drag {
+      }
+      & + .item {
+        margin-top: 0.5rem;
+      }
+    }
   }
 }