마무리

grotesq · Sep 29, 2019 · 6e72ebe · 6e72ebe
1 parent 80ea4aa
commit 6e72ebe
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 72 deletions.
diff --git a/mini-sns/components/AppConatiner.js b/mini-sns/components/AppConatiner.js
@@ -12,13 +12,16 @@ class AppContainer extends React.Component {
     }
 
     componentDidMount() {
-        firebaseApp.auth().getRedirectResult().then(function(result) {
+        firebaseApp.auth().getRedirectResult().then((result) => {
             if (result.credential) {
               // This gives you a Google Access Token.
               var token = result.credential.accessToken;
             }
             var user = result.user;
             console.log( 'getRedirectResult', user );
+            this.props.context.update( {
+                user,
+            } );
           });
         firebaseApp.auth().onAuthStateChanged((user) => {
             if (user) {
@@ -28,11 +31,14 @@ class AppContainer extends React.Component {
               // ...
               if( user.providerData.length ) {
                 console.log( 'user', user );
+                this.props.context.update( {
+                    user,
+                } );
               }
               else {
                 console.log( 'anonymous user', user );
                 this.props.context.update( {
-                    user,
+                    anonymous: user,
                 } );
               }
             } else {

diff --git a/mini-sns/components/FeedForm.js b/mini-sns/components/FeedForm.js
@@ -1,10 +1,13 @@
 import React from 'react';
 import axios from 'axios';
+import { withAppContext } from '../contexts/AppContext';
 
-export default () => {
+let FeedForm = props => {
     const [ content, setContent ] = React.useState('');
     const submit = () => {
         axios.post('/api/feeds', {
+            displayName: props.context.user.displayName,
+            avatar: props.context.user.photoURL,
             content,
         } )
         .then( () => {
@@ -31,4 +34,8 @@ export default () => {
             </div>
         </>
     )
-}
+}
+
+FeedForm = withAppContext(FeedForm);
+
+export default FeedForm;
diff --git a/mini-sns/components/nav.js b/mini-sns/components/nav.js
@@ -1,56 +1,70 @@
 import React from 'react'
 import Link from 'next/link'
+import firebase from 'firebase';
+import firebaseApp from '../firebase/firebaseApp';
+import { withAppContext } from '../contexts/AppContext';
 
-const links = [
-  { href: 'https://zeit.co/now', label: 'ZEIT' },
-  { href: 'https://github.com/zeit/next.js', label: 'GitHub' }
-].map(link => {
-  link.key = `nav-link-${link.href}-${link.label}`
-  return link
-})
-
-const Nav = () => (
-  <nav>
-    <ul>
-      <li>
-        <Link href='/'>
-          <a>Home</a>
-        </Link>
-      </li>
-      {links.map(({ key, href, label }) => (
-        <li key={key}>
-          <a href={href}>{label}</a>
+let Nav = props => {
+  const googleLogin = () => {
+      var provider = new firebase.auth.GoogleAuthProvider();
+      provider.addScope('profile');
+      provider.addScope('email');
+      firebaseApp.auth().signInWithPopup(provider);
+      // firebaseApp.auth().signInWithRedirect(provider);
+  }
+  return(
+    <nav>
+      <ul>
+        <li>
+          <Link href='/feeds'>
+            <a>피드 목록</a>
+          </Link>
+        </li>
+        <li>
+          { props.context.user && (
+              <>
+                { props.context.user.displayName }
+              </>
+          ) }
+          { !props.context.user && (
+              <button className="btn btn-white" onClick={ googleLogin }>
+                로그인
+              </button>
+          ) }
+
         </li>
-      ))}
-    </ul>
+      </ul>
+
+      <style jsx>{`
+        :global(body) {
+          margin: 0;
+          font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
+            Helvetica, sans-serif;
+        }
+        nav {
+          text-align: center;
+        }
+        ul {
+          display: flex;
+          justify-content: space-between;
+        }
+        nav > ul {
+          padding: 4px 16px;
+        }
+        li {
+          display: flex;
+          padding: 6px 8px;
+        }
+        a {
+          color: #067df7;
+          text-decoration: none;
+          font-size: 13px;
+        }
+      `}</style>
+    </nav>
+  )
+}
 
-    <style jsx>{`
-      :global(body) {
-        margin: 0;
-        font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
-          Helvetica, sans-serif;
-      }
-      nav {
-        text-align: center;
-      }
-      ul {
-        display: flex;
-        justify-content: space-between;
-      }
-      nav > ul {
-        padding: 4px 16px;
-      }
-      li {
-        display: flex;
-        padding: 6px 8px;
-      }
-      a {
-        color: #067df7;
-        text-decoration: none;
-        font-size: 13px;
-      }
-    `}</style>
-  </nav>
-)
+Nav = withAppContext( Nav );
 
 export default Nav
diff --git a/mini-sns/contexts/AppContext.js b/mini-sns/contexts/AppContext.js
@@ -11,6 +11,7 @@ class AppProvider extends Component {
       // 글로벌 데이터
       key: 'value',
       user: null,
+      anonymous: null,
       // update
       update: (state, callback) => {
         this.setState(state, callback);

diff --git a/mini-sns/pages/_app.js b/mini-sns/pages/_app.js
@@ -27,13 +27,6 @@ class MyApp extends App {
 
     return <div>
             <AppProvider>
-                <div>
-                    <header>
-                        <Link href='/feeds'>
-                            <a>피드 목록</a>
-                        </Link>
-                    </header>
-                </div>
                 <AppContainer>
                     <Component {...pageProps} />
                 </AppContainer>

diff --git a/mini-sns/pages/feed.js b/mini-sns/pages/feed.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import firebaseApp from '../firebase/firebaseApp';
 import { withAppContext } from '../contexts/AppContext';
+import Nav from '../components/nav';
+import Head from 'next/head';
 
 const db = firebaseApp.firestore();
 
@@ -10,7 +12,27 @@ let Feed = ( props ) => {
     const id = router.query.id;
     return (
         <>
-            { props.data.content }
+            <Head>
+                <title>{ props.data.displayName }님의 피드</title>
+                <meta type="title" content={ props.data.displayName + '님의 피드' }/>
+                <meta type="description" content={ props.data.content }/>
+                <meta type="keyword" content="SNS, Social Media, 소셜 미디어"/>
+                <meta property="og:url" content={ 'https://domain.com' + '/feed/' + id } />
+
+                <meta type="og:title" content={ props.data.displayName + '님의 피드' }/>
+            </Head>
+            <Nav/>
+            <div className="card">
+                <div className="card-body">
+                    { props.data.content }
+
+                    <br/>
+                    <span>
+                        <img src={ props.data.avatar } style={{ height: '1.2em' }}/>
+                        { props.data.displayName }
+                    </span>
+                </div>
+            </div>
         </>
     )
 }

diff --git a/mini-sns/pages/feeds.js b/mini-sns/pages/feeds.js
@@ -4,6 +4,8 @@ import axios from 'axios';
 import firebaseApp from '../firebase/firebaseApp';
 import Link from 'next/link';
 import { withAppContext } from '../contexts/AppContext';
+import Nav from '../components/nav';
+import Head from 'next/head';
 
 const db = firebaseApp.firestore();
 
@@ -25,23 +27,37 @@ class Feeds extends React.Component {
     }
     render() {
         return <>
+            <Head>
+                <title>피드 목록</title>
+                <meta type="title" content="피드 목록"/>
+                <meta type="keyword" content="SNS, Social Media, 소셜 미디어"/>
+            </Head>
+            <Nav/>
             { this.props.context.user && (
-                <div>
+                <div className="mb-4">
                     <FeedForm/>
                 </div>
             ) }
-            <ul>
+            <ul className="list-unstyled row">
                 { this.state.list.map( item => {
                     return (
-                        <li key={ item.id }>
-                            <p>
-                                <Link href={ '/feed?id=' + item.id }
-                                      as={ '/feed/' + item.id }>
-                                    <a>{ item.content }</a>
-                                </Link>
-                                <br/>
-                                <small>{ item.created_at }</small>
-                            </p>
+                        <li className="card col-3" key={ item.id }>
+                            <div className="card-body">
+                                <p>
+                                    <Link href={ '/feed?id=' + item.id }
+                                        as={ '/feed/' + item.id }>
+                                        <a>{ item.content }</a>
+                                    </Link>
+                                    <br/>
+                                    <span>
+                                        <img src={ item.avatar } style={{ height: '1.2em' }}/>
+                                        { item.displayName }
+                                    </span>
+                                    <br/>
+                                    <small>{ item.created_at }</small>
+                                </p>
+                            </div>
+
                         </li>
                     )
                 })}

diff --git a/mini-sns/server.js b/mini-sns/server.js
@@ -32,9 +32,13 @@ api.get( '/feeds', async context => {
     context.body = list;
 });
 api.post( '/feeds', async context => {
+    const displayName = context.request.body.displayName;
+    const avatar = context.request.body.avatar;
     const content = context.request.body.content;
     const now = moment().format( 'YYYY-MM-DD HH:mm:ss' );
     const doc = await db.collection('feeds').add({
+        displayName,
+        avatar,
         content,
         created_at: now,
         updated_at: now,