Feature/#32

front/jsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es6"
+    "target": "es6",
+    "jsx": "react-jsx",
+    "moduleResolution": "node"
   }
 }

front/jsdoc.json

@@ -0,0 +1,16 @@
+{
+  "source": {
+    "include": ["src"],
+    "includePattern": ".js$",
+    "excludePattern": "(node_modules/|docs)"
+  },
+  "plugins": ["node_modules/jsdoc/plugins/markdown"],
+  "templates": {
+    "cleverLinks": true,
+    "monospaceLinks": true
+  },
+  "opts": {
+    "recurse": true,
+    "destination": "./docs/"
+  }
+}

front/package.json

@@ -6,9 +6,11 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "doc": "jsdoc -c jsdoc.json"
   },
   "dependencies": {
+    "@types/axios": "^0.14.0",
     "immer": "^9.0.15",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",

front/src/App.jsx

@@ -1,6 +1,15 @@
+//@ts-check
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Routes } from 'react-router-dom';
+import {
+  RecoilRoot,
+  atom,
+  selector,
+  useRecoilState,
+  useRecoilValue,
+} from 'recoil';
 
 import Header from './components/common/Header';
 import Footer from './components/common/Footer';

front/src/atoms/Article.jsx

@@ -0,0 +1,34 @@
+export const articleState = atom({
+  key: 'src/atoms/Article.jsx-articleState',
+  default: {},
+});
+
+export const singleArticleState = atom({
+  key: 'src/atoms/Article.jsx-singleArticleState',
+  default: {},
+});
+
+export const multipleArticlesResponseState = atom({
+  key: 'src/atoms/Article.jsx-multipleArticlesResponseState',
+  default: {},
+});
+
+export const newArticleState = atom({
+  key: 'src/atoms/Article.jsx-newArticleState',
+  default: {},
+});
+
+export const newArticleRequestState = atom({
+  key: 'src/atoms/Article.jsx-newArticleRequestState',
+  default: {},
+});
+
+export const updateArticleState = atom({
+  key: 'src/atoms/Article.jsx-updateArticleState',
+  default: {},
+});
+
+export const updateArticleRequestState = atom({
+  key: 'src/atoms/Article.jsx-updateArticleRequestState',
+  default: {},
+});

front/src/atoms/Comment.jsx

@@ -0,0 +1,24 @@
+export const commentState = atom({
+  key: 'src/atoms/Comment.jsx-commentState',
+  default: {},
+});
+
+export const singleCommentResponseState = atom({
+  key: 'src/atoms/Comment.jsx-singleCommentResponseState',
+  default: {},
+});
+
+export const multipleCommentResponseState = atom({
+  key: 'src/atoms/Comment.jsx-multipleCommentResponseState',
+  default: {},
+});
+
+export const newCommentState = atom({
+  key: 'src/atoms/Comment.jsx-newCommentState',
+  default: {},
+});
+
+export const newCommentRequestState = atom({
+  key: 'src/atoms/Comment.jsx-newCommentRequestState',
+  default: {},
+});

front/src/atoms/Etc.jsx

@@ -0,0 +1,9 @@
+export const tagsResponseState = atom({
+  key: 'src/atoms/Etc.jsx-tagsResponseState',
+  default: {},
+});
+
+export const genericErrorModelState = atom({
+  key: 'src/atoms/Etc.jsx-genericErrorModelState',
+  default: {},
+});

front/src/atoms/Login.jsx

@@ -0,0 +1,7 @@
+//@ts-check
+import { atom } from 'recoil';
+
+export const LoginState = atom({
+  key: 'src/atoms/Login.jsx-LoginState',
+  default: false,
+});

front/src/atoms/Proflie.jsx

@@ -0,0 +1,9 @@
+export const profileResponseState = atom({
+  key: 'src/atoms/Profile.jsx-profileResponseState',
+  default: {},
+});
+
+export const profileState = atom({
+  key: 'src/atoms/Profile.jsx-profileState',
+  default: {},
+});

front/src/atoms/user.jsx

@@ -1,4 +1,40 @@
-export const userNameState = atom({
-  key: 'src/atoms/user.jsx-userNameState',
-  default: '',
+export const loginUserState = atom({
+  key: 'src/atoms/User.jsx-loginUserState',
+  default: {},
+});
+
+export const loginUserRequestState = atom({
+  key: 'src/atoms/User.jsx-loginUserRequestState',
+  default: {},
+});
+
+export const newUserState = atom({
+  key: 'src/atoms/User.jsx-newUserState',
+  default: {},
+});
+
+export const newUserRequestState = atom({
+  key: 'src/atoms/User.jsx-newUserRequestState',
+  default: {},
+});
+
+export const userState = atom({
+  key: 'src/atoms/User.jsx-userState',
+  default: {},
+});
+
+export const userResponseState = atom({
+  key: 'src/atoms/User.jsx-userResponseState',
+  default: {},
+});
+
+export const updateUserState = atom({
+  key: 'src/atoms/User.jsx-updateUserState',
+  default: {},
+});
+
+export const updateUserRequestState = atom({
+  key: 'src/atoms/User.jsx-updateUserRequestState',
+  default: {},
+
 });

front/src/auth/Login.jsx

@@ -0,0 +1,111 @@
+import { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+
+// useEffect(() => {
+//   const fetchData = async () => {
+//     setLoading(true);
+//     try {
+//       const query = category === 'all' ? '' : `&category=${category}`;
+//       const response = await axios.get(``);
+//       setArticles(response.data.articles);
+//     } catch (e) {
+//       console.log(e);
+//     }
+//     setLoading(false);
+//   };
+//   fetchData();
+// }, [category]);
+
+// if (loading) {
+//   return <NewsListBlock>대기 중...</NewsListBlock>;
+// }
+// if (!articles) {
+//   return null;
+// }
+
+const LoginInsert = ({ onInsert }) => {
+  const [value, setValue] = useState('');
+  const onChange = useCallback((e) => {
+    setValue(e.target.value);
+  }, []);
+
+  const onSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      onInsert(value);
+      setValue('');
+    },
+    [onInsert, value],
+  );
+  const loginDB = (e, id, password) => {
+    e.preventDefault();
+    return function (getState, { history }) {
+      axios({
+        method: 'post',
+        url: '',
+        data: {
+          email: id,
+          password: password,
+        },
+      })
+        .then((res) => {
+          console.log(res);
+          setUser({
+            email: res.data.email,
+            nickname: res.data.nickname,
+          });
+          const accessToken = res.data.token;
+          //쿠키에 토큰 저장
+          setCookie('is_login', `${accessToken}`);
+          document.location.href = '/';
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    };
+  };
+
+  const Login = () => {
+    return (
+      <div>
+        <div class="auth-page">
+          <div class="container page">
+            <div class="row">
+              <div class="col-md-6 offset-md-3 col-xs-12">
+                <h1 class="text-xs-center">Sign In</h1>
+                <p class="text-xs-center">
+                  <a href="">Need an account?</a>
+                </p>
+
+                <ul class="error-messages">
+                  <li>That email is already taken</li>
+                </ul>
+
+                <form onSubmit={onSubmit}>
+                  <fieldset class="form-group">
+                    <input
+                      class="form-control form-control-lg"
+                      type="text"
+                      placeholder="Email"
+                    />
+                  </fieldset>
+                  <fieldset class="form-group">
+                    <input
+                      class="form-control form-control-lg"
+                      type="password"
+                      placeholder="Password"
+                    />
+                  </fieldset>
+                  <button class="btn btn-lg btn-primary pull-xs-right">
+                    Sign In
+                  </button>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+};
+export default Login;