React를 사용한 Slack 클론 | 시맨틱 UI | 그래프QL | PostgresSQL(7부)

이 시리즈의 6부에서는 폴더 구조와 함께 apollo 클라이언트를 설정합니다. 그러나 폴더 구조와 경로를 약간 변경했으므로 시맨틱 UI로 등록 및 로그인 UI로 들어가기 전에 수정하겠습니다.

폴더 구조 리팩터링

보시다시피 이름을 Home.js 에서 Slack.js 로 변경했습니다. 슬랙 앱이 있을 위치입니다(내부의 Hello World 텍스트와 동일).

개인 폴더에는 개인 경로가 있습니다(나중에 생성됨)

styled 폴더에는 styled-components(나중에 만들 예정)가 있습니다

.

*App.js 파일 내부는 이제 다음과 같습니다. *

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Login from "./components/auth/Login";
import Register from "./components/auth/Register";
import Slack from "./Slack";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/" component={Slack} />
          <Route path="/login" component={Login} />
          <Route path="/register" component={Register} />
        </Switch>
      </Router>
    </div>
  );
}
export default App;

시리즈에서 더 나아갈 때까지 지금은 이렇게 보일 것입니다.

시맨틱 UI로 페이지 등록

Register.js 파일 내부

import React from "react";
import { Form, Header, Button } from "semantic-ui-react";
import { Link } from "react-router-dom";
import { Message } from "semantic-ui-react";
import "./auth.css";
const Register = () => {
  return (
    <div className="wrapper">
      <Header as="h2" textAlign="center">
        Join Slack{" "}
        <span>
          <i className="fab fa-slack" style={{ color: "#723975" }}></i>
        </span>
      </Header>
      <Form
        className="auth_form"
        size="large"
      >
        <Form.Group widths="equal">
          <Form.Input
            name="username"
            label="Username"
            type="text"
            placeholder="Username"
          />
          {/* END OF USERNAME FIELD */}
          <Form.Input
            name="email"
            label="Email"
            type="email"
            placeholder="Email"
          />
          {/* END OF EMIAL FIELD */}
          <Form.Input
            type="password"
            name="password"
            label="Password"
            placeholder="Password"
          />
          {/* END OF PASSWORD FIELD */}
        </Form.Group>
        <Button
          type="submit"
          formNoValidate
          style={{
            width: "100%",
            backgroundColor: "#5B2C5D",
            color: "white",
            marginBottom: "0.5em"
          }}
        >
          Submit
        </Button>
        <p style={{ textAlign: "center", fontSize: "0.8em" }}>
          <Link style={{ textDecoration: "none" }} to="/login">
            Already have an account? Log In
          </Link>
        </p>
      </Form>
    </div>
  );
};
export default Register;

Login 형식과 Register 사이를 전환하는 링크를 추가했습니다.

*참고할 사항: *

멋진 글꼴에서 아이콘으로 이동합니다. 동일한 것을 원하면 해당 CDN을 가져와야 합니다.

auth.css 폴더 안에 auth 파일을 생성해야 합니다.

.wrapper {
  margin: 4em auto;
  width: 100%;
}

.wrapper .auth_form {
  margin-top: 3em;
  margin: 3em 2em;
}

디자인은 다음과 같아야 합니다.

로그인 페이지

login.js 파일 내부.

import React from "react";
import { Form, Header, Button, Input } from "semantic-ui-react";
import "./auth.css";
const Login = () => {
  return (
    <div className="wrapper">
      <Header as="h2" textAlign="center">
        Log into Slack{" "}
        <span>
          <i className="fab fa-slack" style={{ color: "#723975" }}></i>
        </span>
      </Header>
      <Form
        className="auth_form"
        size="large"
      >
        <Form.Group widths="equal">
          <Form.Input
            name="email"
            label="Email"     
            type="email"
            placeholder="Email"
          />
          {/* END OF EMIAL FIELD */}
          <Form.Input
            type="password"
            name="password"
            label="Password"
            placeholder="Password"
          />
        </Form.Group>
        <Button
          type="submit"
          formNoValidate
          style={{
            width: "100%",
            backgroundColor: "#5B2C5D",
            color: "white",
            marginBottom: "0.5em"
          }}
        >
          Submit
        </Button>
        <p style={{ textAlign: "center", fontSize: "0.8em" }}>
          <Link style={{ textDecoration: "none" }} to="/register">
            Don't have an account? Create one here
          </Link>
        </p>
      </Form>
    </div>
  );
};
export default Login;

완성된 UI


이것이 이것에 대한 전부입니다. 다음 항목에서는 현재 정적인 것이 있기 때문에 둘 다에 대한 양식 유효성 검사를 시작할 것입니다. 언제나 그렇듯이 도움이 필요하면 알려주세요. 즐기다.