hyesungoh / Like_Amazing_Lion

:money_with_wings: Quiz event web for promoting Likelion

놀라운 사자처럼

멋쟁이 사자처럼 9기 홍보용 이벤트 웹

Development tool

Develop Log / Refactoring Log

Result

• Authenticate

• Auth to About

• Social Login

• Quiz

• Grading quiz - wrong

• Quiz to About

• Grading quiz - correct

• When Corrected user logged in

Firebase

• Facebook social login

• FirebaseError: Missing or insufficient permissions.
  • Fibase Cloud Firestore 규칙 > allow read, write false to true

Material UI

• Tsconfig.json setting

{
    "compilerOptions": {
        "lib": ["es6", "dom"],
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strictNullChecks": true
    }
}

• Basic Usage

import Button from "@material-ui/core/Button";
import Input from "@material-ui/core/Input";
...

<Input id="standard-basic" type="email" value={state} onChange={onChange}></Input>
<Button onClick={onClickSocial} className="btn">something</Button>

// custom
.btn {
    color: #youwant;
}

• Create Theme

import { createMuiTheme } from "@material-ui/core";

const theme = createMuiTheme({
    palette: {
        primary: {
            light: "#c0392b",
            main: "#F79E1C",
            dark: "#141310",
            contrastText: "#c0392b",
        },
    },
});

• Using Theme

import { ThemeProvider } from "@material-ui/core";

function App() {
    return (
        <ThemeProvider theme={theme}>
            <div className="app">
                <AppRouter />
            </div>
        </ThemeProvider>
    );
}

FontAwesome Icon

• Install

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

// in my case
npm install --save @fortawesome/free-brands-svg-icons

• Usage

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGoogle } from "@fortawesome/free-brands-svg-icons";

<FontAwesomeIcon icon={faGoogle} size="4x" className="social__icon" />;

Using image in React TypeScript

// new file image.d.ts
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";

// add in tsconfig.json
{
    "compilerOptions": {
        "typeRoots": ["node_modules/@types", "src/types"],
        ...
    }
}

Transition group

• with Hashrouter
  • Hashrouter는 location key 값이 없어 작동되지 않는 것이였음
  • location.pathname을 key 값으로 사용 시 작동

const TransitionRouter = withRouter(({ location }) => (
    <TransitionGroup className="app">
        <CSSTransition
            key={location.pathname}
            classNames="slide"
            timeout={1200}
        >
            <Switch location={location}>
                <Route exact path="/">
                    <Quiz />
                </Route>
                ...
            </Switch>
        </CSSTransition>
    </TransitionGroup>
));

• different animation element in CSSTranstion

  • JSX, TSX상 추가적인 CSSTransition을 생성하는 것이 아닌 CSS, SCSS상 하드코딩으로 가능하단 것을 알게 됨

.slide-enter,
.slide-exit {
    transition: all 800ms ease-in-out;

    .background {
        transition: transform 800ms ease-in-out 200ms;
    }
}

.slide-exit-active {
    transform: translateX(100vw);

    .background {
        transform: translateX(-200vw);
    }
}