ing

package.json

@@ -33,7 +33,6 @@
     "@types/react-router-redux": "^5.0.3",
     "@types/react-tap-event-plugin": "^0.0.30",
     "@types/redux": "^3.6.0",
-    "@types/socket.io-client":"^1.4.29",
     "awesome-typescript-loader": "^3.1.3",
     "check-dependencies": "^1.0.1",
     "copy-webpack-plugin": "^4.0.1",
@@ -67,6 +66,7 @@
     "auth0-lock": "^10.18.0",
     "history": "^4.6.3",
     "immutable": "^3.8.1",
+    "inversify": "^4.2.0",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
@@ -78,10 +78,9 @@
     "react-tap-event-plugin": "^2.0.1",
     "redux": "^3.7.1",
     "redux-saga": "^0.15.4",
+    "reflect-metadata": "^0.1.10",
     "reselect": "^3.0.1",
-    "semantic-ui-css":"^2.2.10",
+    "semantic-ui-react": "^0.71.1"
-    "semantic-ui-react": "^0.70.0",
-    "socket.io-client": "^2.0.3"
   },
   "jest": {
     "moduleFileExtensions": [

src/ts/@overflow/commons/api/Service.ts

@@ -1,5 +1,9 @@
+import { inject } from 'inversify';
+import WebSocketRPC from '../websocket/WebSocketRPC';
 
 abstract class Service {
+  @inject(WebSocketRPC)
+  private webSocketRPC: WebSocketRPC;
   private name: string;
   protected constructor(name: string) {
     this.name = name;

src/ts/@overflow/commons/context/index.ts

@@ -1,17 +0,0 @@
-class AppContext {
-  private static context: AppContext;
-
-  private constructor() {
-
-  }
-
-  public static getService<T>(): T {
-    return null;
-  }
-
-  public static getContext(): AppContext {
-    return AppContext.context;
-  }
-}
-
-export default AppContext;

src/ts/@overflow/commons/websocket/WebSocketRPC.ts

@@ -9,7 +9,7 @@ import {
   RPCRequest,
   RPCResponse,
 } from './protocol/rpc';
-
+import { injectable } from 'inversify';
 
 export type OnConnectFunc = () => void;
 export type OnDisconnectFunc = () => void;
@@ -22,6 +22,7 @@ interface RequestQueue {
   reject: (reason?: any) => void;
 }
 
+@injectable()
 export default class WebSocketRPC {
   private url: string;
   private conn: WebSocket;

src/ts/@overflow/member/api/service/MemberService.ts

@@ -1,7 +1,8 @@
 import Service from '@overflow/commons/api/Service';
 import Member from '../model/Member';
+import service from '@overflow/commons/context/decorator/service';
 
-@ServiceClass
+@service()
 export class MemberService extends Service {
 
   public constructor() {

src/ts/@overflow/member/react/SignIn.tsx

@@ -1,21 +1,21 @@
 import { connect, Dispatch } from 'react-redux';
 import {
-  Signin,
+  SignIn,
-  Props as SigninProps,
+  Props as SignInProps,
-  State as SigninState,
+  State as SignInState,
-} from './components/Signin';
+} from './components/SignIn';
 import State from '../redux/state/Signin';
 
 import * as signinActions from '../redux/action/signin';
 
 
-export function mapStateToProps(state: any): SigninProps {
+export function mapStateToProps(state: any): SignInProps {
   return {
 
   };
 }
 
-export function mapDispatchToProps(dispatch: Dispatch<any>): SigninProps {
+export function mapDispatchToProps(dispatch: Dispatch<any>): SignInProps {
   return {
     onSignin: (signinId: string, signinPw: string) => {
       dispatch(signinActions.request(signinId, signinPw));
@@ -29,4 +29,4 @@ export function mapDispatchToProps(dispatch: Dispatch<any>): SigninProps {
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Signin);
+export default connect(mapStateToProps, mapDispatchToProps)(SignIn);

src/ts/@overflow/member/react/components/SignIn.tsx

@@ -0,0 +1,123 @@
+import *as React from 'react';
+import {
+  Input,
+  InputOnChangeData,
+  Select,
+  Button,
+  Header,
+  Modal,
+  Grid,
+  Form,
+  Container,
+} from 'semantic-ui-react';
+
+const options = [{ key: 'southkorea', value: '82', text: 'South Korea(82)' },
+{ key: 'unitedstates', value: '1', text: 'United States(1)' }];
+
+
+export interface Props {
+
+}
+
+export interface State {
+  forgotPopup: boolean;
+  sendComPopup: boolean;
+  email: string;
+  pass: string;
+}
+
+export class SignIn extends React.Component<Props, State> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+      forgotPopup: false,
+      sendComPopup: false,
+      email: '',
+      pass: '',
+    };
+
+
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column mobile={16} tablet={5} computer={5}>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={6} computer={6}>
+              <Form>
+                <Form.Input fluid placeholder='Email' onChange={
+                (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ email: data.value });
+                }} />
+                <Form.Input fluid placeholder='Password' type='password' onChange={
+                (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ pass: data.value });
+                }} />
+                <div style={{textAlign:'right'}}>
+                  <a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password</a>
+                </div>
+                <Form.Group>
+                <Button fluid primary style={{margin:'7'}} onClick={this.onSignIn}>    Sign In  </Button>
+                <Button fluid style={{margin:'7'}} href='/#/test2'>    Sign Up  </Button>
+                </Form.Group>
+              </Form>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={4} computer={5}>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+
+        <Modal size='small' open={this.state.forgotPopup} onClose={this.PopupClose}>
+          <Modal.Header>Change your password</Modal.Header>
+          <Modal.Content >
+            Enter email address
+            <Grid>
+              <Grid.Column mobile={16} tablet={3} computer={4}>
+              </Grid.Column>
+              <Grid.Column mobile={16} tablet={10} computer={8}>
+               <Input fluid placeholder='Email' />
+              </Grid.Column>
+              <Grid.Column mobile={16} tablet={3} computer={4}>
+              </Grid.Column>
+            </Grid>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button primary onClick={this.sendComOpen}>              Submit      </Button>
+            <Button onClick={this.PopupClose}>              Cancel      </Button>
+          </Modal.Actions>
+        </Modal>
+
+        <Modal size='small' open={this.state.sendComPopup} onClose={this.PopupClose}>
+          <Modal.Header>Send Complete</Modal.Header>
+          <Modal.Content>
+            <Modal.Description>
+              <Header>비밀번호 변경이 신청 되었습니다.</Header>
+              <p>수신하신 메일의 주소에서 비밀번호 변경을 완료 하시기 바랍니다.</p>
+            </Modal.Description>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button primary onClick={this.PopupClose}>              Ok      </Button>
+          </Modal.Actions>
+        </Modal>
+      </Container>
+    );
+  }
+
+  private forgotPopupOpen = () => this.setState({ forgotPopup: true });
+  private PopupClose = () => this.setState({ forgotPopup: false, sendComPopup: false });
+  private sendComOpen = () => {
+    this.setState({
+      forgotPopup: false,
+      sendComPopup: true,
+
+    });
+  }
+
+  private onSignIn = () => {
+    console.log(this.state);
+  }
+}

src/ts/@overflow/member/react/components/Signin.tsx

@@ -1,93 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import {
-  Dialog,
-  Divider,
-  FlatButton,
-  MenuItem,
-  Paper,
-  RaisedButton,
-  SelectField,
-  Slider,
-  TextField,
-} from 'material-ui';
-
-export interface Props {
-  isSignin?: boolean;
-  onSignin?: (signinId: string, signinPw: string) => void;
-  onSignup?: () => void;
-  onResetPassword?: () => void;
-}
-
-export interface State {
-  signinId: string;
-  signinPw: string;
-}
-
-export class Signin extends React.Component<Props, State> {
-  public static defaultProps: Partial<Props> = {
-    onSignin: (signinId: string, signinPw: string): void => {
-      console.log('onSignin');
-    },
-    onSignup: (): void => {
-      console.log('onSignup');
-    },
-    onResetPassword: (): void => {
-      console.log('onResetPassword');
-    },
-  };
-
-  public constructor(props: Props, context: State) {
-    super(props, context);
-
-    this.state = {
-      signinId: '',
-      signinPw: '',
-    };
-  }
-
-  public render(): JSX.Element {
-
-    return (this.props.isSignin ? <div>Signed</div> :
-      <div>
-        <TextField
-          hintText='smith@gmail.com'
-          floatingLabelText='Email address*'
-          errorText=''
-          underlineShow={true}
-          value={this.state.signinId}
-          onChange={(e, newValue) => this.setState({ signinId: newValue })}
-        />
-        <br />
-        <TextField
-          hintText='Password'
-          floatingLabelText='Password'
-          type='password'
-          value={this.state.signinPw}
-          onChange={(e, newValue) => this.setState({ signinPw: newValue })}
-        />
-        <br />
-
-        <RaisedButton
-          label='Sign In'
-          primary={true}
-          onClick={(e) => this.props.onSignin(this.state.signinId, this.state.signinPw)}
-        />
-        <RaisedButton
-          label='Sign Up'
-          primary={false}
-          onClick={this.props.onSignup}
-        />
-        <RaisedButton
-          label='Reset Password'
-          primary={false}
-          onClick={this.props.onResetPassword}
-        />
-
-      </div>
-    );
-  }
-}
-
-export default Signin;

tsconfig.json

@@ -8,7 +8,6 @@
     "jsx": "react",
     "lib": [
       "dom",
-      "es5",
       "es6"
     ],
     "module": "umd",
@@ -28,6 +27,9 @@
     "removeComments": true,
     "sourceMap": true,
     "target": "es5",
+    "types": [
+      "reflect-metadata"
+    ],
     "typeRoots": [
       "node_modules/@types",
       "types"