Feat/main page container

README.md

@@ -1,2 +1,82 @@
+<<<<<<< HEAD
+# Study Around 👨🏻‍💻
+
+An web app for study group management
+
+
+
+## Docs
+
+<p align="left">
+	We use Notion for project management.
+  <br/>
+	<a href="https://www.notion.so/Study-Arousnd-9120c0a50855471c82716e0f6cd1cd03" style="text-decoration: none;">
+    click me
+	</a>
+</div>
+<br/>
+
+
+
+## Developers
+
+<table>
+  <tr>
+        <td align="center" style="font-size: 20px">
+          <a href="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/seung-00" style="text-decoration:none;"><img src="https://avatars2.githubusercontent.com/u/46865281?s=460&u=9687af854c3f5ae8a8f8b1e4f10a87587eaf5626&v=4" width="150px;" alt=""/>
+            <br />
+            <sub>
+            <b>오승영</b>
+            </sub>
+          </a>
+          <br />
+          <a href="https://github.com/react-sprint/study-around-front/commits?author=seung-00" title="Code">💻</a> 
+          <a href="https://www.notion.so/Study-Around-9120c0a50855471c82716e0f6cd1cd03" title="Project Management">📆</a>
+    </td>
+    <td align="center" style="font-size: 20px">
+      <a href="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/kimuhjin" style="text-decoration:none;">
+        <img src="https://avatars2.githubusercontent.com/u/56405613?s=460&u=b1dc8505bf966d1364e9aecce175deaa42d6f7f9&v=4" width="150px;" alt=""/>
+        <br />
+        <sub>
+        <b>김어진</b>
+        </sub>
+      </a>
+      <br />
+      <a href="https://github.com/react-sprint/study-around-front/commits?author=kimuhjin" title="Code">💻</a> 
+    </td>
+    <td align="center" style="font-size: 20px">
+      <a href="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/ppamppamman" style="text-decoration:none;">
+        <img src="https://avatars1.githubusercontent.com/u/13144573?s=460&u=9042af1affd7da76dd24c6f12aa8660bdd4e42e5&v=4" width="150px;" alt=""/>
+        <br />
+        <sub>
+          <b>뺨뺨맨</b>
+        </sub>
+      </a>
+      <br />
+      <a href="https://github.com/react-sprint/study-around-front/commits?author=ppamppamman
+" title="Code">💻</a> 
+      </td>
+  </tr>
+</table>
+
+=======
 # study-around-front
 스터디 그룹 관리 프로젝트
+
+
+## error 관련
+
+- If You have an these log **PLZ CHANGE** your typescript version that you are using on vscode.
+  ```sh
+  The following changes are being made to your tsconfig.json file:
+    - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)
+  ```  
+  1. downgrade your typescript version 4.1.x to 4.0.5
+    ```sh
+      yarn add [email protected]
+    ```
+  2. change your typescript version that using on vscode
+  reference:
+  - https://www.reddit.com/r/react/comments/k0bw7y/compileroptionsjsx_must_be_reactjsx_to_support/  
+  - https://github.com/facebook/create-react-app/issues/10103
+>>>>>>> 9eb886c2f24d034a7fd37437cfb87bd6db5e8616

client/.eslintrc

@@ -18,4 +18,4 @@
     "react/jsx-uses-vars": "error"
   },
   "ignorePatterns": ["*.config.js"]
-}
+}

client/.gitignore

@@ -23,4 +23,6 @@ yarn-debug.log*
 yarn-error.log*
 
 # lint
-.eslintcache
+.eslintcache
+# vscode
+/.vscode

client/package.json

@@ -12,6 +12,7 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.11",
     "@types/react-router-dom": "^5.1.6",
+    "axios": "^0.21.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "^4.1.0",
@@ -20,8 +21,10 @@
     "react-scripts": "4.0.1",
     "redux-actions": "^2.6.5",
     "redux-devtools-extension": "^2.13.8",
+    "redux-logger": "^3.0.6",
+    "redux-saga": "^1.1.3",
     "styled-components": "^5.2.1",
-    "typescript": "^4.1.2",
+    "typescript": "4.1.2",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

client/src/App.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import './App.css';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import MainPage from './pages/MainPage';
+import SignupPage from './pages/SignupPage';
+import SigninPage from './pages/SigninPage';
 import { ThemeProvider } from 'styled-components';
 import theme from './styles/theme';
 
@@ -11,6 +13,8 @@ function App() {
       <BrowserRouter>
         <Switch>
           <Route exact path="/" component={MainPage} />
+          <Route path="/signup" component={SignupPage} />
+          <Route path="/signin" component={SigninPage} />
         </Switch>
       </BrowserRouter>
     </ThemeProvider>

client/src/composition/Main/MainContainer.tsx

@@ -1,8 +1,24 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { projectsRequest } from '../../modules/ProjectsModule';
 import MainPresentation from './MainPresentation';
 
-function MainContainer() {
-  return <MainPresentation />;
+function MainContainer(): JSX.Element {
+  const dispatch = useDispatch();
+  // const [projects, setProjects] = useState(null);
+  // const [form, setForm] = useState({
+  //   token: '',
+  // });
+  // const { token } = form;
+  const projects = useSelector((state: any) => state.projects);
+  useEffect(() => {
+    dispatch(projectsRequest());
+    // const response = await dispatch(projectsSuccess())
+    console.log('MainContainer', projects);
+    // setProjects(response);
+  }, []);
+
+  return <MainPresentation projects={projects} />;
 }
 
 export default MainContainer;

client/src/composition/Main/MainPresentation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Card from '../Main/Card';
 import styled from 'styled-components';
 import { StudyInfo } from '../../constants/mocks';
@@ -37,7 +37,15 @@ const CardTtile = styled.div`
 
 const TodayStudyInfos = StudyInfo.TodayStudyInfos;
 
-function MainPresentation() {
+function MainPresentation(props: any) {
+  const { projects } = props;
+  console.log('MainPresentation projects', projects);
+  useEffect(() => {
+    // console.log(projects?.projectsStatus?.data);
+    if (projects?.projectsStatus.data.length === 0) {
+      alert('불러올 스터디가 없습니다.');
+    }
+  }, []);
   const Cards = TodayStudyInfos.map((info) => (
     <Card
       key={info.id}

client/src/composition/Signout/index.tsx

@@ -0,0 +1,4 @@
+export const Signout = () => {
+  window.localStorage.setItem('token', '');
+  alert('로그아웃 됐습니다.');
+};

client/src/hooks/useInput.tsx

@@ -0,0 +1,27 @@
+import { useState, Dispatch, SetStateAction } from 'react';
+
+export interface IUseInput {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  setValue: Dispatch<SetStateAction<string>>;
+}
+
+interface IUseInputProps {
+  initialState: string,
+  customOnChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+function useInput(props: IUseInputProps): IUseInput {
+  const { initialState, customOnChange } = props;
+
+  const [value, setValue] = useState(initialState);
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { target: { value: val } } = e;
+    console.log(val);
+    setValue(val);
+    customOnChange(e);
+  };
+  return { value, onChange, setValue };
+}
+
+export default useInput;

client/src/index.tsx

@@ -3,12 +3,29 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
-import { createStore } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
-import rootReducer from './reducers';
+// 임시 시작
+// import rootReducer from './reducers';
+import rootReducer, { rootSaga } from './modules';
+import createSagaMiddleware from 'redux-saga';
+import logger from 'redux-logger';
 
-const store = createStore(rootReducer, composeWithDevTools());
+const sagaMiddleware = createSagaMiddleware();
+
+const store = createStore(
+  rootReducer,
+  composeWithDevTools(
+    applyMiddleware(
+      // ReduxThunk.withExtraArgument({ history: customHistory }),
+      sagaMiddleware,
+      logger
+    )
+  )
+);
+
+sagaMiddleware.run(rootSaga); // 루트 사가를 실행해줍니다.
 
 ReactDOM.render(
   <Provider store={store}>

client/src/modules/ProjectsModule/actions.ts

@@ -0,0 +1,27 @@
+export const PROJECT_LIST_GET_REQUEST = 'project/PROJECT_LIST_GET_REQUEST';
+export const PROJECT_LIST_GET_SUCCESS = 'project/PROJECT_LIST_GET_SUCCESS';
+export const PROJECT_LIST_GET_ERROR = 'project/PROJECT_LIST_GET_ERROR';
+
+export const projectsRequest = () => {
+  return {
+    type: 'PROJECT_LIST_GET_REQUEST',
+  };
+};
+
+export const projectsSuccess = (projectsData: any) => {
+  // window.localStorage.setItem('token', loginData['JWT token']);
+  return {
+    type: 'PROJECT_LIST_GET_SUCCESS',
+    payload: projectsData,
+  };
+};
+
+export const projectsError = (error) => {
+  alert('프로젝트를 불러올 수 없습니다.');
+  console.log(error);
+  return {
+    type: 'PROJECT_LIST_GET_ERROR',
+    error,
+  };
+};
+//

client/src/modules/ProjectsModule/api.ts

@@ -0,0 +1,10 @@
+import Api from '../axiosConfig';
+// import axios from 'axios';
+
+export async function projectsApi() {
+  const response = await Api.get('http://localhost:3030/project/list');
+  console.log('api response', response);
+  return response.data;
+}
+//
+//

client/src/modules/ProjectsModule/index.ts

@@ -0,0 +1,4 @@
+export { default } from './reducer';
+export * from './actions';
+export * from './types';
+export * from './sagas';

client/src/modules/ProjectsModule/reducer.ts

@@ -0,0 +1,29 @@
+const projects = (state = {}, action) => {
+  console.log('reducer action', action);
+  switch (action.type) {
+    case 'PROJECT_LIST_GET_REQUEST':
+      return {
+        ...state,
+        projectsStatus: { loading: true, error: null, data: null },
+      };
+    case 'PROJECT_LIST_GET_SUCCESS':
+      return {
+        ...state,
+        projectsStatus: {
+          loading: false,
+          error: null,
+          data: action.payload,
+        },
+      };
+    case 'PROJECT_LIST_GET_ERROR':
+      return {
+        ...state,
+        projectsStatus: { loading: false, error: action.payload, data: null },
+      };
+    default:
+      return state;
+  }
+};
+
+export default projects;
+//

client/src/modules/ProjectsModule/sagas.ts

@@ -0,0 +1,22 @@
+import { projectsRequest, projectsSuccess, projectsError } from './actions';
+import { call, put, takeEvery } from 'redux-saga/effects';
+import { projectsApi } from './api';
+import history from '../history';
+
+function* projectsFuncSaga(action: ReturnType<typeof projectsRequest>) {
+  try {
+    const projectsData = yield call(projectsApi);
+    console.log('projectsData in saga', projectsData);
+    yield put(projectsSuccess(projectsData));
+  } catch (e) {
+    if (e.response.data.message === 'Not Authenticated') {
+      // yield put() //로그인으로 돌리도록
+    } else {
+      yield put(projectsError(e));
+    }
+  }
+}
+export function* projectsSaga() {
+  yield takeEvery('PROJECT_LIST_GET_REQUEST', projectsFuncSaga);
+}
+//

client/src/modules/ProjectsModule/types.ts

@@ -0,0 +1,14 @@
+import * as actions from './actions';
+
+export type ProjectsAction =
+  | ReturnType<typeof actions.projectsRequest>
+  | ReturnType<typeof actions.projectsSuccess>
+  | ReturnType<typeof actions.projectsError>;
+
+export type ProjectsState = {
+  ProjectsStatus: {
+    loading: boolean;
+    data: any | null;
+    error: Error | null;
+  };
+};

client/src/modules/SignInModule/actions.ts

@@ -0,0 +1,30 @@
+import { loginApiProps } from './api';
+
+export const LOGIN_REQUEST = 'login/LOGIN_REQUEST';
+export const LOGIN_SUCCESS = 'login/LOGIN_SUCCESS';
+export const LOGIN_ERROR = 'login/LOGIN_ERROR';
+
+export const loginRequest = (form) => {
+  return {
+    type: 'LOGIN_REQUEST',
+    payload: form,
+  };
+};
+
+export const loginSuccess = (loginData: loginApiProps) => {
+  console.log('loginSuccess action', loginData);
+  window.localStorage.setItem('token', loginData['JWT token']);
+  return {
+    type: 'LOGIN_SUCCESS',
+    payload: loginData,
+  };
+};
+
+export const loginError = (error) => {
+  alert('아이디 혹은 비밀번호를 확인해주세요.');
+  return {
+    type: 'LOGIN_ERROR',
+    error,
+  };
+};
+//