fixed refresh bugs

src/App.js

@@ -4,10 +4,10 @@ import { Container, Jumbotron } from 'react-bootstrap';
 import logo from './resources/images/logo.png';
 import { Redirect, Route, BrowserRouter as Router, Switch, Link } from 'react-router-dom';
 
-import NavBar from './features/navBar/NavBar';
-import Home from './features/home/Home';
-import Intro from './features/intro/Intro';
-import Loc from './features/loc/Loc';
+import {NavBar} from './features/navBar/NavBar';
+import {Home} from './features/home/Home';
+import {Intro} from './features/intro/Intro';
+import {Loc} from './features/loc/Loc';
 import { PostsList } from './features/posts/PostsList'
 import { SinglePostPage } from './features/posts/SinglePostPage'
 
@@ -33,18 +33,7 @@ function App() {
             <Route exact path="/" component={Home} />
             <Route exact path="/intro" component={Intro} />
             <Route exact path="/location" component={Loc} />
-            <Route exact path="/posts/swedu" render={() => (
-                <React.Fragment>
-                  <PostsList label="SW교육"/>
-                </React.Fragment>
-              )}
-            />
-            <Route exact path="/posts/reference" render={() => (
-                <React.Fragment>
-                  <PostsList label="교육자료실" />
-                </React.Fragment>
-              )}
-            />
+            <Route exact path="/categories/:label" component={PostsList}/>
             <Route exact path="/posts/:postId" component={SinglePostPage} />
             <Redirect to="/" />
           </Switch>

src/features/home/Home.js

@@ -33,4 +33,4 @@ function Home() {
   );
 }
 
-export default Home;
+export {Home};

src/features/intro/Intro.js

@@ -20,4 +20,4 @@ function Intro() {
   );
 }
 
-export default Intro;
+export {Intro};

src/features/loc/Loc.js

@@ -109,4 +109,4 @@ function Loc() {
 
 }
 
-export default Loc;
+export {Loc};

src/features/navBar/NavBar.js

@@ -2,28 +2,32 @@ import React from 'react'
 import Navbar from 'react-bootstrap/Navbar';
 import Nav from 'react-bootstrap/Nav';
 import logo from '../../resources/images/logo.png';
+import { Link } from 'react-router-dom';
 
 function NavBar() {
   return (
-    <Navbar bg="light" expand="md" className="px-4 py-1 w-100" style={{position: 'absolute', zIndex: 3}}>
+    <div>
+          <Navbar bg="light" expand="md" className="px-4 py-1 w-100" style={{position: 'absolute', zIndex: 3}}>
       <div className="d-flex justify-content-between w-100 align-items-center d-block d-md-none">
-        <Navbar.Brand className="text-left" href="/">
-          <img src={logo} height="80px" alt="와이즈쿱 로고" className="m-0" />
-          <p className="m-0 text-secondary"><small>와이즈쿱협동조합</small></p>
+        <Navbar.Brand className="text-left">
+          <Link style={{textDecoration: 'none'}} to="/"><img src={logo} height="80px" alt="와이즈쿱 로고" className="m-0" />
+          <p className="m-0 text-secondary"><small>와이즈쿱협동조합</small></p></Link>
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="basic-navbar-nav" className="ml-auto" />
       </div>
       <Navbar.Collapse id="basic-navbar-nav">
         <Nav className="m-auto p-1" style={{fontSize: 18}}>
-          <Nav.Link href="/" className="font-weight-bold text-dark">홈</Nav.Link>
-          <Nav.Link href="/intro" className="font-weight-bold text-dark">조합 소개</Nav.Link>
-          <Nav.Link href="/posts/swedu" className="font-weight-bold text-dark">SW교육</Nav.Link>
-          <Nav.Link href="/posts/reference" className="font-weight-bold text-dark">교육자료실</Nav.Link>
-          <Nav.Link href="/location" className="font-weight-bold text-dark">오시는길</Nav.Link>
+          <Nav.Link><Link style={{textDecoration: 'none'}} to="/" className="font-weight-bold text-dark">홈</Link></Nav.Link>
+          <Nav.Link><Link style={{textDecoration: 'none'}} to="/intro" className="font-weight-bold text-dark">조합 소개</Link></Nav.Link>
+          <Nav.Link><Link style={{textDecoration: 'none'}} to="/categories/SW교육" className="font-weight-bold text-dark">SW교육</Link></Nav.Link>
+          <Nav.Link><Link style={{textDecoration: 'none'}} to="/categories/교육자료실" className="font-weight-bold text-dark">교육자료실</Link></Nav.Link>
+          <Nav.Link><Link style={{textDecoration: 'none'}} to="/location" className="font-weight-bold text-dark">오시는길</Link></Nav.Link>
         </Nav>
       </Navbar.Collapse>
     </Navbar>
+    </div>
+
   );
 }
 
-export default NavBar;
+export {NavBar};

src/features/posts/PostsList.js

@@ -1,13 +1,12 @@
 import React, { useEffect } from 'react';
-import { Card, Col, Row, Spinner } from 'react-bootstrap';
+import { Card, Col, Row} from 'react-bootstrap';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { fetchPosts, selectPostIds, selectPostById } from './postsSlice';
+import { fetchPosts, selectAllPosts } from './postsSlice';
 import { TimeAgo } from './TimeAgo';
 
 
-let PostExcerpt = ({ postId }) => {
-  const post = useSelector(state => selectPostById(state, postId));
+let PostExcerpt = ({post}) => {
   return (
     <Col>
       <article className="post-excerpt" key={post.id}>
@@ -27,31 +26,32 @@ let PostExcerpt = ({ postId }) => {
 
 PostExcerpt = React.memo(PostExcerpt);
 
-export const PostsList = (params) => {
+export const PostsList = ({match}) => {
+  const {label} = match.params;
+  console.log(label);
   const dispatch = useDispatch();
-  const orderedPostIds = useSelector(selectPostIds);
+  const allPosts = useSelector(selectAllPosts);
 
   const postStatus = useSelector(state => state.posts.status);
   const error = useSelector(state => state.posts.error);
 
   useEffect(() => {
     if (postStatus === 'idle') {
-      dispatch(fetchPosts(params.label));
+      dispatch(fetchPosts());
     }
-  }, [postStatus, dispatch, params.label]);
+  }, [postStatus, dispatch]);
+
 
   let content;
 
   if (postStatus === 'loading') {
     content =
       <div className="loader">
-        <div>로딩 중...</div>
-        <Spinner animation="border" role="status">
-          <span className="sr-only">로딩 중..</span>
-        </Spinner>
       </div>
   } else if (postStatus === 'succeeded') {
-    content = orderedPostIds.map(postId => <PostExcerpt key={postId} postId={postId} />);
+    console.log(allPosts);
+    content = allPosts.filter(post => post.labels[0] === label);
+    content = content.map(post => <PostExcerpt key={post.id} post={post} />);
     content = <Row xs={1} md={2} lg={3}>{content}</Row>;
   } else if (postStatus === 'failed') {
     content = <div>{error}</div>
@@ -60,7 +60,7 @@ export const PostsList = (params) => {
   return (
     <section className="posts-list">
       <div className="d-xs-block d-md-none" style={{ height: 50 }} />
-      <h2 className="text-primary mt-3 mb-5">{params.label}</h2>
+      <h2 className="text-primary mt-3 mb-5">{label}</h2>
       {content}
     </section>
   );

src/features/posts/SinglePostPage.js

@@ -1,13 +1,23 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, Card} from 'react-bootstrap';
-import { useSelector } from 'react-redux';
-import { selectPostById } from './postsSlice';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchPosts, selectPostById } from './postsSlice';
 import { TimeAgo } from './TimeAgo';
 import style from './SinglePostPage.module.css';
+import { Link } from 'react-router-dom';
 
 export const SinglePostPage = ({ match }) => {
   const { postId } = match.params;
+  const postStatus = useSelector(state => state.posts.status);
   const post = useSelector(state => selectPostById(state, postId));
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (postStatus === 'idle') {
+      dispatch(fetchPosts());
+    }
+  }, [postStatus, dispatch]);
+
 
   if (!post) {
     return (
@@ -34,7 +44,7 @@ export const SinglePostPage = ({ match }) => {
           </Card.Body>
         </Card>
       </article>
-      <Button variant="light" className="m-3" size="lg" href={post.labels[0]=== "SW교육" ? 'swedu' : 'reference'} >목록</Button>
+      <Link to={`/categories/${post.labels[0]}`}><Button variant="light" className="m-3" size="lg">목록</Button></Link>
     </section>
   );
 };

src/features/posts/postsSlice.js

@@ -13,14 +13,10 @@ const initialState = postsAdapter.getInitialState({
   error: null
 });
 
-export const fetchPosts = createAsyncThunk('posts/fetchPosts', async (label) => {
+export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
   const response = await fetch(`https://www.googleapis.com/blogger/v3/blogs/8051615640630699138/posts?key=${apiKey}&fetchImages=true`)
   const jsonResponse = await response.json();
-  console.log(jsonResponse.items);
-  console.log(label);
-  const result = jsonResponse.items.filter(post => {return post.labels.indexOf(label) !== -1});
-  console.log(result);
-  return result;
+  return jsonResponse.items;
 });
 
 const postsSlice = createSlice({

src/index.js

@@ -4,7 +4,6 @@ import './index.css';
 import App from './App';
 import store from './app/store';
 import { Provider } from 'react-redux';
-import * as serviceWorker from './serviceWorker';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 
@@ -15,9 +14,4 @@ ReactDOM.render(
     </Provider>
   </React.StrictMode>,
   document.getElementById('root')
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+);