로그인, 회원가입 기능 구현

- 로그인 모달 UI 구현 - 회원가입 모달 UI 구현 - 구글 api 연동 todo: 서버 구현 후 로그인, 회원가입 기능 구현 #3
lucent-intern-org · Aug 12, 2022 · ed1403d · ed1403d
1 parent 8d604c6
commit ed1403d
Show file tree

Hide file tree

Showing 17 changed files with 26,448 additions and 28,747 deletions.
diff --git a/frontend/web/.gitignore b/frontend/web/.gitignore
@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/frontend/web/package-lock.json b/frontend/web/package-lock.json
diff --git a/frontend/web/package.json b/frontend/web/package.json
@@ -1,65 +1,67 @@
 {
-  "name": "web",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@tanstack/react-query": "^4.0.10",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.11.47",
-    "@types/react": "^18.0.16",
-    "@types/react-dom": "^18.0.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
-    "recoil": "^0.7.4",
-    "styled-components": "^5.3.5",
-    "typescript": "^4.7.4",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint './src/**/*.{ts,tsx}'",
-    "lint:fix": "eslint --fix './src/**/*.{ts,tsx}'",
-    "prettier": "prettier --write --config ./.prettierrc './src/**/*.{ts,tsx}'"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/styled-components": "^5.1.25",
-    "@typescript-eslint/eslint-plugin": "^5.25.0",
-    "@typescript-eslint/parser": "^5.25.0",
-    "eslint": "^8.16.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "prettier": "^2.6.2"
-  }
+    "name": "web",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@leecheuk/react-google-login": "^5.4.0",
+        "@tanstack/react-query": "^4.0.10",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.3.0",
+        "@testing-library/user-event": "^13.5.0",
+        "@types/jest": "^27.5.2",
+        "@types/node": "^16.11.47",
+        "@types/react": "^18.0.16",
+        "@types/react-dom": "^18.0.6",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.4.0",
+        "react-router-dom": "^6.3.0",
+        "react-scripts": "5.0.1",
+        "recoil": "^0.7.4",
+        "styled-components": "^5.3.5",
+        "typescript": "^4.7.4",
+        "web-vitals": "^2.1.4"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject",
+        "lint": "eslint './src/**/*.{ts,tsx}'",
+        "lint:fix": "eslint --fix './src/**/*.{ts,tsx}'",
+        "prettier": "prettier --write --config ./.prettierrc './src/**/*.{ts,tsx}'"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@types/styled-components": "^5.1.25",
+        "@typescript-eslint/eslint-plugin": "^5.25.0",
+        "@typescript-eslint/parser": "^5.25.0",
+        "eslint": "^8.16.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-airbnb-typescript": "^17.0.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-react": "^7.30.0",
+        "eslint-plugin-react-hooks": "^4.5.0",
+        "prettier": "^2.6.2"
+    }
 }
diff --git a/frontend/web/public/index.html b/frontend/web/public/index.html
@@ -9,5 +9,6 @@
     </head>
     <body>
         <div id="root"></div>
+        <div id="modal-root"></div>
     </body>
 </html>
diff --git a/frontend/web/src/atom.tsx b/frontend/web/src/atom.tsx
@@ -1,3 +1,20 @@
 import { atom } from 'recoil';
 
-export {};
+const signUpModalVisibleState = atom({
+    key: 'signUpModal',
+    default: false,
+});
+
+export const logInModalVisibleState = atom({
+    key: 'LogInModal',
+    default: false,
+});
+
+export const userSignUpInfoState = atom({
+    key: 'UserSignUpInfo',
+    default: { slackId: '', name: '', email: '', group: '', role: '' },
+});
+
+export const LogInState = atom({ key: 'IsLogIn', default: false });
+
+export default signUpModalVisibleState;
diff --git a/frontend/web/src/components/atoms/drop_down.tsx b/frontend/web/src/components/atoms/drop_down.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const DropDownBox = styled.select<{ letterSpace?: string | number }>`
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    margin-top: 3vh;
+    letter-spacing: ${(props) => `${props.letterSpace}rem`};
+`;
+
+type dropDownProps = {
+    options: Array<{
+        groupName: string;
+        groupId: string;
+    }>;
+    placeholder: string;
+    letterSpacing?: string | number;
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+};
+
+const DropDown: React.FC<dropDownProps> = ({
+    options,
+    placeholder,
+    letterSpacing = 'normal',
+    onChange,
+}: dropDownProps) => {
+    return (
+        <DropDownBox letterSpace={letterSpacing} onChange={onChange} defaultValue='default'>
+            <option key='0' value='default' disabled hidden style={{ color: '#808080' }}>
+                {placeholder}
+            </option>
+            {options.map((option) => (
+                <option key={option.groupName} value={option.groupName}>
+                    {option.groupName}
+                </option>
+            ))}
+        </DropDownBox>
+    );
+};
+export default DropDown;
diff --git a/frontend/web/src/components/atoms/input.tsx b/frontend/web/src/components/atoms/input.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+type inputProps = {
+    type: string;
+    value?: string;
+    placeholder?: string;
+    fontSize?: number;
+    width?: number;
+    letterSpacing?: string | number;
+
+    marginTop?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+const Input: React.FC<inputProps> = ({
+    type = 'text',
+    value,
+    placeholder,
+    fontSize = 0.8,
+    width,
+    letterSpacing = 'normal',
+
+    marginTop = '0vh',
+    onChange,
+}: inputProps) => {
+    let input;
+    if (type === 'text') {
+        input = (
+            <input
+                type={type}
+                placeholder={placeholder}
+                value={value}
+                onChange={onChange}
+                style={{
+                    fontSize: `${fontSize}rem`,
+                    letterSpacing: `${letterSpacing}rem`,
+                    width: `${width}px`,
+                    marginTop: marginTop,
+                }}
+            />
+        );
+    } else if (type === 'checkbox') {
+        input = (
+            <input
+                type={type}
+                onChange={onChange}
+                style={{ height: 'auto', marginTop: marginTop, marginRight: '10px' }}
+            />
+        );
+    } else {
+        input = (
+            <input
+                type={type}
+                placeholder={placeholder}
+                style={{ fontSize: `${fontSize}rem`, marginTop: '3vh' }}
+            />
+        );
+    }
+    return input;
+};
+export default Input;
diff --git a/frontend/web/src/components/atoms/text.tsx b/frontend/web/src/components/atoms/text.tsx
@@ -5,14 +5,20 @@ type textProps = {
     fontSize?: number;
     fontWeight?: string | number;
     letterSpacing?: string | number;
-    onClick?: (e: any) => void;
+    color?: string;
+    marginTop?: string;
+
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
 const Text: React.FC<textProps> = ({
     children,
     fontSize = 1.2,
     fontWeight = 'normal',
     letterSpacing = 'normal',
+    color = 'black',
+    marginTop = '0vh',
+
     onClick,
 }: textProps) => {
     return onClick ? (
@@ -23,6 +29,8 @@ const Text: React.FC<textProps> = ({
                 fontWeight: fontWeight,
                 letterSpacing: `${letterSpacing}rem`,
                 fontFamily: 'inter',
+                color: color,
+                marginTop: marginTop,
             }}
             onClick={onClick}
         >
@@ -31,9 +39,12 @@ const Text: React.FC<textProps> = ({
     ) : (
         <span
             style={{
+                display: 'inline-block',
                 fontSize: `${fontSize}rem`,
                 fontWeight: fontWeight,
                 letterSpacing: `${letterSpacing}rem`,
+                marginTop: marginTop,
+                fontFamily: 'inter',
             }}
         >
             {children}

diff --git a/frontend/web/src/components/molecules/modal_header.tsx b/frontend/web/src/components/molecules/modal_header.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { IoMdClose } from 'react-icons/io';
+import { RecoilState, useSetRecoilState } from 'recoil';
+
+import Text from '../atoms/text';
+import FlexRow from './flex_row';
+
+type modalHeaderProps = {
+    children: string;
+    setState: RecoilState<boolean>;
+};
+
+const ModalHeader: React.FC<modalHeaderProps> = ({ children, setState }: modalHeaderProps) => {
+    const setModalOpen = useSetRecoilState(setState);
+
+    return (
+        <div>
+            <FlexRow>
+                <div />
+                <button type='button' onClick={() => setModalOpen(false)} style={{ padding: 0 }}>
+                    <IoMdClose size={50} color='#808080' />
+                </button>
+            </FlexRow>
+
+            <div style={{ marginTop: '1vh' }}>
+                <Text fontSize={1.7} fontWeight={900} letterSpacing='0.15'>
+                    LUCENTBLOCK
+                </Text>
+                <br />
+                <Text fontSize={1.2} fontWeight={900} letterSpacing='0.15' marginTop='1vh'>
+                    {children}
+                </Text>
+            </div>
+        </div>
+    );
+};
+
+export default ModalHeader;
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,5 +9,6 @@ @@
         </head>
         <body>
             <div id="root"></div>
+            <div id="modal-root"></div>
         </body>
     </html>