Merge pull request hi-hyein#255 from hi-hyein/feature/212-new-welcome

Feature/212 new welcome
ThinkAboutSoftware · Sep 8, 2020 · b577981 · b577981
2 parents b0bbe69 + fd6d502
commit b577981
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 12 deletions.
diff --git a/packages/backend/join.js b/packages/backend/join.js
@@ -122,7 +122,7 @@ router.get("/user/join/welcome", (req, res) => {
                 );
             } else {
                 // 인증상태가 true일때
-                res.sendFile(path.join(__dirname + "/welcome2.html"));
+                res.redirect(`http://127.0.0.1:3000/join/welcome/complete`);
             }
         }
     );

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -62,7 +62,7 @@
 		"resolve": "1.10.0",
 		"sass-loader": "7.1.0",
 		"style-loader": "0.23.1",
-		"styled-components": "^4.2.0",
+		"styled-components": "^5.2.0",
 		"terser-webpack-plugin": "1.2.2",
 		"url-loader": "1.1.2",
 		"webpack": "4.28.3",

diff --git a/packages/frontend/src/Components/App.js b/packages/frontend/src/Components/App.js
@@ -1,12 +1,13 @@
 import React, { Component, Fragment } from "react";
-import { BrowserRouter as Router, Route } from "react-router-dom";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import styled from "styled-components";
 import GlobalStyle from "./GlobalStyles";
 import Header from "./layout/Header";
 import Nav from "./Nav";
 import Home from "./Home";
 import MemberList from "./admin/MemberList";
 import Welcome from "./Welcome";
+import WelcomeComplete from "./WelcomeComplete";
 
 const Wrapper = styled.div`
     position: relative;
@@ -25,15 +26,21 @@ class App extends Component {
                         <Header />
                         <Wrapper>
                             <GlobalStyle />
-                            <Route exact path='/' component={Home} />
-                            <Route
-                                path='/admin/member'
-                                component={MemberList}
-                            />
-                            <Route
-                                path='/join/welcome/:email'
-                                component={Welcome}
-                            />
+                            <Switch>
+                                <Route exact path='/' component={Home} />
+                                <Route
+                                    path='/admin/member'
+                                    component={MemberList}
+                                />
+                                <Route
+                                    path='/join/welcome/complete'
+                                    component={WelcomeComplete}
+                                />
+                                <Route
+                                    path='/join/welcome/:email'
+                                    component={Welcome}
+                                />
+                            </Switch>
                         </Wrapper>
                         <Nav />
                     </div>

diff --git a/packages/frontend/src/Components/WelcomeComplete.js b/packages/frontend/src/Components/WelcomeComplete.js
@@ -0,0 +1,137 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+import Done from "@material-ui/icons/Done";
+import Button from "@material-ui/core/Button";
+import Layer from "./popup/Layer";
+import LayerLogin from "./popup/LayerLogin";
+import LayerJoin from "./popup/LayerJoin";
+import LayerFindPassword from "./popup/LayerFindPassword";
+
+const WelcomeTitle = styled.h2`
+    font-weight: 500;
+    font-size: 60px;
+    letter-spacing: 5px;
+    color: #a1ceab;
+    margin-bottom: 30px;
+    padding-top: 25vh;
+`;
+
+const WelcomeBody = styled.div`
+    font-size: 18px;
+    line-height: 1.8;
+`;
+
+const DoneIcon = styled(Done)`
+    .welcome_complete & {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 6rem;
+    }
+`;
+
+const IconCircle = styled.span`
+    position: relative;
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    border: 6px solid #a1ceab;
+`;
+
+export default class WelcomeComplete extends Component {
+    state = {
+        openLogin: false,
+        openJoin: false,
+        openFindPassword: false,
+    };
+
+    popupOpenLogin = () => {
+        this.setState({
+            openLogin: true,
+        });
+    };
+
+    popupOpenJoin = () => {
+        this.setState({
+            openJoin: true,
+        });
+    };
+
+    popupOpenFindPassword = () => {
+        this.setState({
+            openFindPassword: true,
+            openLogin: false,
+        });
+    };
+
+    popupCLose = () => {
+        this.setState({
+            openLogin: false,
+            openJoin: false,
+            openModify: false,
+            openFindPassword: false,
+            openUnresister: false,
+        });
+    };
+
+    render() {
+        const { openLogin, openJoin, openFindPassword } = this.state;
+
+        return (
+            <div className='welcome_complete'>
+                <WelcomeTitle>
+                    <IconCircle>
+                        <DoneIcon></DoneIcon>
+                    </IconCircle>
+                </WelcomeTitle>
+                <WelcomeBody>
+                    이미 인증된 회원입니다.
+                    <div style={{ marginTop: 30 }}>
+                        <Button
+                            size='large'
+                            variant='contained'
+                            style={{
+                                marginRight: "10px",
+                                background: "#a1ceab",
+                                color: "#fff",
+                            }}
+                            onClick={this.popupOpenLogin}
+                        >
+                            로그인하기
+                        </Button>
+                        <Button
+                            size='large'
+                            variant='contained'
+                            onClick={this.popupOpenFindPassword}
+                        >
+                            내 계정 찾기
+                        </Button>
+                        {openLogin && (
+                            <Layer onClose={this.popupCLose} layerTitle='Login'>
+                                <LayerLogin
+                                    onClose={this.popupCLose}
+                                    openJoinLayer={this.popupOpenJoin}
+                                />
+                            </Layer>
+                        )}
+                        {openFindPassword && (
+                            <Layer
+                                onClose={this.popupCLose}
+                                layerTitle='이메일 / 비밀번호 찾기'
+                            >
+                                <LayerFindPassword />
+                            </Layer>
+                        )}
+                        {openJoin && (
+                            <Layer onClose={this.popupCLose} layerTitle='Join'>
+                                <LayerJoin />
+                            </Layer>
+                        )}
+                    </div>
+                </WelcomeBody>
+            </div>
+        );
+    }
+}