diff --git a/src/App.jsx b/src/App.jsx index 1f983b7..6e3c0de 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,5 @@ -// import { useEffect } from 'react'; -// import Api from './api/Api'; +import { useEffect } from 'react'; +import Api from './Api'; import WantedList from './components/WantedList'; import ListNavBar from './components/ListNavBar'; @@ -10,7 +10,7 @@ import kSoup from './assets/img/k-soup.png'; import board2 from './assets/img/board2.jpg'; import subway from './assets/img/subway.png'; import walk from './assets/img/walk.jpg'; -import AddPost from './components/AddPost'; +import AddPostBtn from './components/AddPostBtn'; const tempOriginal = [ { @@ -60,12 +60,12 @@ const tempWantedListData = [0, 1, 2, 3, 4, 5].reduce((prev, idx) => { }, []); function App() { - // useEffect(() => { - // data = await Api.getCards(); <- 이런거 부르면됩니다. - // }, []); + useEffect(() => { + console.log(Api.getPosts()); // TODO: Post 업데이트 + }, []); return (
- +
diff --git a/src/Routers.jsx b/src/Routers.jsx index 7027c78..da2e2f1 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -1,18 +1,9 @@ -/* eslint-disable prettier/prettier */ -/* eslint-disable no-unused-vars */ -import React, { - createContext, - useState, - useMemo, -} from 'react'; +import React, { createContext, useState, useMemo } from 'react'; -import { - BrowserRouter as Router, - Routes, - Route, -} from 'react-router-dom'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import App from './App'; +import AddPost from './pages/AddPost'; import Redirect from './pages/Redirect'; export const UserContext = createContext({ @@ -31,18 +22,8 @@ const Routers = () => { } /> } /> - {/* - - - - - - - - - - */} - {/* */} + } /> + {/* } /> */} diff --git a/src/api/index.js b/src/api/index.js index 6e40b21..d045638 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -48,6 +48,10 @@ class Api { return await handlePromiseGet('/posts', tags ? { tag: tags } : {}); } + async pushPost(info) { + return await handlePromisePost('/posts', info); + } + async toggleEye() { return await handlePromiseGet('/toggleEye'); } @@ -63,19 +67,18 @@ class Api { export default new Api(); -// /* -// {headers: authHeader()} -// Record -// */ -// function authHeader(Iany) { -// const tokenStr = localStorage.getItem('accessToken'); -// return tokenStr -// ? { -// headers: { 'Authorization': tokenStr }, -// ...Iany, -// } -// : { ...Iany }; -// } +/* + {headers: authHeader()} + Record +*/ +function authHeader(token) { + // eslint-disable-next-line no-unused-vars + return token + ? { + headers: { Authorization: token }, + } + : {}; +} // eslint-disable-next-line no-unused-vars const handlePromiseGet = async (url, params = {}) => { @@ -90,3 +93,16 @@ const handlePromiseGet = async (url, params = {}) => { .catch((e) => reject(e)); }); }; + +const handlePromisePost = async (url, params = {}, token = '') => { + return new Promise((resolve, reject) => { + Interceptor.getInstance() + .post(CONFIG.API_SERVER + url, params, authHeader(token)) + .then((res) => res.data) + .then((res) => { + if (!res.error) resolve(res.data); + throw new Error(res.error); + }) + .catch((e) => reject(e)); + }); +}; diff --git a/src/components/AddPost/index.css b/src/components/AddPostBtn/index.css similarity index 100% rename from src/components/AddPost/index.css rename to src/components/AddPostBtn/index.css diff --git a/src/components/AddPost/index.jsx b/src/components/AddPostBtn/index.jsx similarity index 74% rename from src/components/AddPost/index.jsx rename to src/components/AddPostBtn/index.jsx index c0f1dd7..e24d3ac 100644 --- a/src/components/AddPost/index.jsx +++ b/src/components/AddPostBtn/index.jsx @@ -2,14 +2,14 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; import './index.css'; -const AddPost = () => { +const AddPostBtn = () => { const navigate = useNavigate(); const handleClick = () => { - return navigate('/add-post'); + return navigate('/addpost'); }; return ; }; -export default AddPost; +export default AddPostBtn; diff --git a/src/components/ListNavBar/index.jsx b/src/components/ListNavBar/index.jsx index 18dab09..7c35b6f 100644 --- a/src/components/ListNavBar/index.jsx +++ b/src/components/ListNavBar/index.jsx @@ -1,7 +1,15 @@ import React from 'react'; +import Api from '../../Api'; import './index.css'; const NavBar = () => { + const handleSignin = () => { + Api.signin().then((res) => { + if (res) window.location.href = res.response; + //TODO : handle login + }); + }; + return (
@@ -9,6 +17,9 @@ const NavBar = () => {

소마

번

개

+ + 로그인 버튼 +
); diff --git a/src/components/WantedList/index.jsx b/src/components/WantedList/index.jsx index 3ebf659..ec47b0b 100644 --- a/src/components/WantedList/index.jsx +++ b/src/components/WantedList/index.jsx @@ -2,77 +2,94 @@ import './index.css'; import React from 'react'; import { List } from 'semantic-ui-react'; +import Api from '../../Api'; -const CURRENT_CATEGORY = '모두 표시'; +const CURRENT_CATEGORY = '모두 표시'; // MEAL, COFFEE, ALCOHOL, GAME, ETC const MAX_NAMES_TO_DISPLAY = 2; -const WantedList = ({ list }) => ( - -
{CURRENT_CATEGORY}
+const WantedList = ({ list }) => { + const handleEye = () => { + Api.toggleEye().then((res) => { + if (res) console.log('toggle eye success'); // TODO: update Eye + }); + }; - {list.map(({ id, thumbnailImage, authorName, messageBody, beginAt }) => { - // 각 라인 별 더미 데이터 생성 로직 - const isEyesSelected = authorName !== '김성빈' && Math.random() > 0.5; - const isParticipating = isEyesSelected && Math.random() > 0.5; - const eyesCount = - Math.floor(Math.random() * 5) + (isEyesSelected ? 1 : 0); - const handsCount = - Math.floor(Math.random() * 10) + (isParticipating ? 1 : 0); - const _names = '이상빈 김민겸 김수홍 이형창' - .split(' ') - .slice(0, Math.min(handsCount, MAX_NAMES_TO_DISPLAY)) // MAX 혹은 카운터 이상으로 표시 x - .map((e) => (Math.random() > 0.5 ? e : '')) // 50% 확률로 선택 - .filter((e) => !!e) // 빈 값 제외 - .join(' '); // 문자열로 반환 + const handleHand = () => { + Api.toggleHand().then((res) => { + if (res) console.log('toggle handle success'); // TODO: update handle + }); + }; - const names = - _names + (_names.length > 0 && handsCount > 1 ? ' ...' : ''); + return ( + +
{CURRENT_CATEGORY}
- const isClosed = Math.random() < 0.25; + {list.map(({ id, thumbnailImage, authorName, messageBody, beginAt }) => { + // 각 라인 별 더미 데이터 생성 로직 + const isEyesSelected = authorName !== '김성빈' && Math.random() > 0.5; + const isParticipating = isEyesSelected && Math.random() > 0.5; + const eyesCount = + Math.floor(Math.random() * 5) + (isEyesSelected ? 1 : 0); + const handsCount = + Math.floor(Math.random() * 10) + (isParticipating ? 1 : 0); + const _names = '이상빈 김민겸 김수홍 이형창' + .split(' ') + .slice(0, Math.min(handsCount, MAX_NAMES_TO_DISPLAY)) // MAX 혹은 카운터 이상으로 표시 x + .map((e) => (Math.random() > 0.5 ? e : '')) // 50% 확률로 선택 + .filter((e) => !!e) // 빈 값 제외 + .join(' '); // 문자열로 반환 - return ( - -
- thumbnail -
- - - {authorName} - - - {messageBody} - - - {beginAt} - - -
- - {eyesCount} -
-
- - - {handsCount} {names} - -
- - - - ); - })} - -); + const names = + _names + (_names.length > 0 && handsCount > 1 ? ' ...' : ''); + + const isClosed = Math.random() < 0.25; + + return ( + +
+ thumbnail +
+ + + {authorName} + + + {messageBody} + + + {beginAt} + + +
+ + {eyesCount} +
+
+ + + {handsCount} {names} + +
+ + + + ); + })} + + ); +}; export default WantedList; diff --git a/src/index.css b/src/index.css index 5e8a623..413476a 100644 --- a/src/index.css +++ b/src/index.css @@ -9,3 +9,7 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +.cursor-pointer { + cursor: pointer; +} \ No newline at end of file diff --git a/src/pages/AddPost.jsx b/src/pages/AddPost.jsx new file mode 100644 index 0000000..f161f55 --- /dev/null +++ b/src/pages/AddPost.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Container, Input, Button } from 'semantic-ui-react'; +import Api from '../Api'; +import NavBar from '../components/ListNavBar'; + +const AddPost = () => { + const handleSubmit = () => { + Api.pushPost('input 정보'); + }; + + return ( + <> + + + + + + + + + + + ); +}; + +export default AddPost;