Finish Site

lemonshushu · Apr 5, 2021 · c2b2918 · c2b2918
1 parent e634ce0
commit c2b2918
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 33 deletions.
diff --git a/src/App.js b/src/App.js
@@ -33,9 +33,15 @@ function App() {
             <Route exact path="/" component={Home} />
             <Route exact path="/intro" component={Intro} />
             <Route exact path="/location" component={Loc} />
-            <Route exact path="/posts" render={() => (
+            <Route exact path="/posts/swedu" render={() => (
                 <React.Fragment>
-                  <PostsList />
+                  <PostsList label="SW교육"/>
+                </React.Fragment>
+              )}
+            />
+            <Route exact path="/posts/reference" render={() => (
+                <React.Fragment>
+                  <PostsList label="교육자료실" />
                 </React.Fragment>
               )}
             />

diff --git a/src/features/navBar/NavBar.js b/src/features/navBar/NavBar.js
@@ -17,8 +17,8 @@ function NavBar() {
         <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" className="font-weight-bold text-dark">SW교육</Nav.Link>
-          <Nav.Link href="/posts" 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>
       </Navbar.Collapse>

diff --git a/src/features/posts/PostsList.js b/src/features/posts/PostsList.js
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Card, Spinner } from 'react-bootstrap';
+import { Card, Col, Row, Spinner } from 'react-bootstrap';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { fetchPosts, selectPostIds, selectPostById } from './postsSlice';
@@ -9,23 +9,25 @@ import { TimeAgo } from './TimeAgo';
 let PostExcerpt = ({ postId }) => {
   const post = useSelector(state => selectPostById(state, postId));
   return (
-    <article className="post-excerpt" key={post.id}>
-      <Card style={{ width: '18rem' }} className="post-excerpt m-3" key={post.id}>
-        <Link to={`/posts/${post.id}`} style={{ textDecoration: 'none', color: 'black' }}>
-          <Card.Img variant="top" src={post.images[0].url} />
-          <Card.Body className="p-3">
-            <Card.Title style={{fontWeight: 700}}>{post.title}</Card.Title>
-          </Card.Body>
-        </Link>
-        <Card.Footer style={{fontWeight: 300}} className="p-1"><TimeAgo timestamp={post.published} /></Card.Footer>
-      </Card>
-    </article>
+    <Col>
+      <article className="post-excerpt" key={post.id}>
+        <Card style={{width: 'auto'}} className="post-excerpt m-3" key={post.id}>
+          <Link to={`/posts/${post.id}`} style={{ textDecoration: 'none', color: 'black' }}>
+            <Card.Img variant="top" src={post.images[0].url} />
+            <Card.Body className="p-3">
+              <Card.Title style={{ fontWeight: 700 }}>{post.title}</Card.Title>
+            </Card.Body>
+          </Link>
+          <Card.Footer style={{ fontWeight: 300 }} className="p-1"><TimeAgo timestamp={post.published} /></Card.Footer>
+        </Card>
+      </article>
+    </Col>
   );
 }
 
 PostExcerpt = React.memo(PostExcerpt);
 
-export const PostsList = () => {
+export const PostsList = (params) => {
   const dispatch = useDispatch();
   const orderedPostIds = useSelector(selectPostIds);
 
@@ -34,29 +36,30 @@ export const PostsList = () => {
 
   useEffect(() => {
     if (postStatus === 'idle') {
-      dispatch(fetchPosts());
+      dispatch(fetchPosts(params.label));
     }
-  }, [postStatus, dispatch]);
+  }, [postStatus, dispatch, params.label]);
 
   let content;
 
   if (postStatus === 'loading') {
-    content = 
-    <div className="loader">
-      <div>로딩 중...</div>
-      <Spinner animation="border" role="status">
-        <span className="sr-only">로딩 중..</span>
-      </Spinner>
-    </div>
+    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} />);
+    content = <Row xs={1} md={2} lg={3}>{content}</Row>;
   } else if (postStatus === 'failed') {
     content = <div>{error}</div>
   }
 
   return (
     <section className="posts-list">
-      <h2 className="text-primary mt-3 mb-5">SW교육</h2>
+      <h2 className="text-primary mt-3 mb-5">{params.label}</h2>
       {content}
     </section>
   );

diff --git a/src/features/posts/SinglePostPage.js b/src/features/posts/SinglePostPage.js
@@ -1,10 +1,11 @@
 import React from 'react';
+import { Button, Card} from 'react-bootstrap';
 import { useSelector } from 'react-redux';
 import { selectPostById } from './postsSlice';
 import { TimeAgo } from './TimeAgo';
 
 export const SinglePostPage = ({ match }) => {
-  const {postId} = match.params;
+  const { postId } = match.params;
 
   const post = useSelector(state => selectPostById(state, postId));
 
@@ -20,10 +21,21 @@ export const SinglePostPage = ({ match }) => {
   return (
     <section>
       <article className="post">
-        <h2>{post.title}</h2>
-        <TimeAgo timestamp={post.date} />
-        <div dangerouslySetInnerHTML={ {__html: post.content} }></div>
+        <Card>
+          <Card.Header className="p-4">
+            <Card.Title><strong>{post.title}</strong></Card.Title>
+            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+              <TimeAgo timestamp={post.published} />
+            </div>
+          </Card.Header>
+          <Card.Body>
+            <Card.Text>
+              <div dangerouslySetInnerHTML={{ __html: post.content }}></div>
+            </Card.Text>
+          </Card.Body>
+        </Card>
       </article>
+      <Button variant="light" className="m-3" size="lg" href={post.labels[0]=== "SW교육" ? 'swedu' : 'reference'} >목록</Button>
     </section>
   );
 };
diff --git a/src/features/posts/postsSlice.js b/src/features/posts/postsSlice.js
@@ -13,10 +13,14 @@ const initialState = postsAdapter.getInitialState({
   error: null
 });
 
-export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
+export const fetchPosts = createAsyncThunk('posts/fetchPosts', async (label) => {
   const response = await fetch(`https://www.googleapis.com/blogger/v3/blogs/8051615640630699138/posts?key=${apiKey}&fetchImages=true`)
   const jsonResponse = await response.json();
-  return jsonResponse.items;
+  console.log(jsonResponse.items);
+  console.log(label);
+  const result = jsonResponse.items.filter(post => {return post.labels.indexOf(label) !== -1});
+  console.log(result);
+  return result;
 });
 
 const postsSlice = createSlice({