MypickPage 구현 및 LoginLink, UserCards 컴포넌트 생성

+import React from 'react'
+import {Container, Jumbotron, Button} from 'reactstrap';
+const LoginLink = () => {
+    return (
+        <>
+            <div style={{paddingTop:'8rem', 'display':'flex', 'width':'100%', "height":'100%', 'textAlign':'center', 'alignItems':'center'}}>
+                <Container style={{}}>
+                    <Jumbotron 
+                    style={{'backgroundColor':'#fff'}}
+                    >
+                        <h1 className="display-3">My pick</h1><br/>
+                        <p className="lead">로그인이 필요합니다.
+                        </p>
+                        <br/>
+                        <hr className="my-2" />
+                        <br/>
+                        <Button color="link" href='/signin'>로그인</Button>
+                        <Button color="link" href='/signup'>회원가입</Button>
+                    </Jumbotron>
+                </Container>
+            </div>
+        </>
+    )
+}
+
+export default LoginLink;
\ No newline at end of file

+import React, { useState, useEffect } from 'react';
+import { Container, Row, Col } from 'reactstrap';
+import axios from 'axios';
+import MealCard from '../components/MealCard';
+
+const UserCards = () => {
+    const [datas, setDatas] = useState([]);
+    const [picks, setPicks] = useState([{
+        "id": "1",
+        "name": "#신슨즈(#Shinsons)",
+        "address": "경기도 용인시 기흥구 서그내로15번길 34 (서천동)",
+        "latitude": "37.2464876",
+        "longitude": "127.0768072",
+        "type": "호프",
+        "menu": "칵테일, 술",
+        "img": "/images/1_img.jpg",
+        "img_source": "https://www.picuki.com/profile/shinsons"
+      },
+      {
+        "id": "2",
+        "name": "감쟈",
+        "address": "경기도 용인시 기흥구 서그내로15번길 29, 102호 (서천동)",
+        "latitude": "37.2464608",
+        "longitude": "127.0764465",
+        "type": "술집",
+        "menu": "안주, 술",
+        "img": "/images/2_img.jpg",
+        "img_source": "https://www.facebook.com/gamjua/posts/1408798555882739/"
+      },
+      {
+        "id": "3",
+        "name": "깜냥",
+        "address": "경기도 용인시 기흥구 서그내로15번길 29 (서천동,1층)",
+        "latitude": "37.2464608",
+        "longitude": "127.0764465",
+        "type": "술집",
+        "menu": "안주, 술",
+        "img": "/images/3_img.jpg",
+        "img_source": "https://www.facebook.com/ggamnyang316/"
+      },
+      {
+        "id": "4",
+        "name": "꼬꼬리아통닭",
+        "address": "경기도 용인시 기흥구 서그내로15번길 39 (서천동)",
+        "latitude": "37.2465772",
+        "longitude": "127.0775286",
+        "type": "호프",
+        "menu": "치킨, 술",
+        "img": "/images/4_img.jpg",
+        "img_source": "https://bigsta.net/tag/%EA%BC%AC%EA%BC%AC%EB%A6%AC%EC%95%84/"
+      },
+      {
+        "id": "5",
+        "name": "도스마스수원경희대점",
+        "address": "경기도 용인시 기흥구 서그내로15번길 33 (서천동, 서윤빌딩1층)",
+        "latitude": "37.2467668",
+        "longitude": "127.0768863",
+        "type": "기타",
+        "menu": "부리또, 타코",
+        "img": "/images/5_img.jpg",
+        "img_source": "https://blog.naver.com/alttium/221443978130"
+      }]);
+    
+    useEffect(() => {
+        const fetchData = async () => {
+            const result = await axios(
+              'http://localhost:5000/api/datas',
+              // localhost로 바꾸기
+            );
+            setDatas(result.data);        
+          };
+          fetchData();
+
+    }, []);
+
+
+
+    return (
+        <>
+            <h1 style={{'paddingTop':'3rem'}} className="text-center">
+                <span className="font-weight-bold">User's Pick</span>
+            </h1>  
+            <br/>
+                <hr className="my-2" />
+            <br/>
+            <Container style={{'paddingTop':'1.2rem'}}>
+                <Row xs="2" sm="2" md="4">
+                    {picks.map((data, index) => 
+                    <Col>
+                    <MealCard
+                        key = {index}
+                        id = {data.id}
+                        name = {data.name}
+                        address = {data.address}
+                        latitude = {data.latitude}
+                        longitude = {data.longitude}
+                        type = {data.type}
+                        menu = {data.menu}
+                        img = {data.img}
+                        img_source = {data.img_source}
+                    />
+                    </Col>
+                    ) 
+                    }
+                    </Row>
+            </Container>
+        </>
+    )
+}
+
+export default UserCards;
\ No newline at end of file

@@ -12,7 +12,6 @@ const MenuPage = (props) => {
     const [datas, setDatas] = useState([]);
     const [filteredDatas, setFilteredDatas] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
-
     const [all, setAll] = useState(false);
     const [Kfood, setKfood] = useState(false);
     const [Cfood, setCfood] = useState(false);

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import NavBar from '../components/NavBar';
-
+import LoginLink from '../components/LoginLink';
+import UserCards from '../components/UserCards';
+import { Container } from 'reactstrap';
 // auth로 로그인한 사용자일 때와 아닐때 판단해서 화면을 다르게 
 // 렌더링
+// useEffect로 초기 인증 
 
 const MypickPage = () => {
     const [isLogin, setIsLogin] = useState(false);
+    const [username, setUsername] = useState('');
+    const authApi = () => {
+        const user = JSON.parse(localStorage.getItem('user'));
+        return fetch('/api/auth', {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'authorization': user
+            }
+        }).then(response => response.json())
+        .then(result => {
+            if(result.message === 'valid token') {
+                setIsLogin(true);
+                
+            } else if(result.message === 'expired token') {
+                alert('토큰이 만료되었습니다. 로그인 해주세요.');
+                setIsLogin(false);
+            } else if(result.message === 'invalid token') {
+                setIsLogin(false);
+            }
+        });
+    }
+    
+    useEffect(() => {
+        authApi();
+    }, [isLogin]);
+
     return (
         <>
+        <Container>
             <NavBar/>
             {
-                isLogin ? <h1>mypick</h1> : <a>aaa</a>
+            isLogin ? 
+            (<>
+            
+            <UserCards/>
+            </>) 
+            : 
+            (<>
+            <LoginLink/>
+            </>)
             }
+        </Container>
         </>
     )
 }

@@ -31,7 +31,7 @@ const SigninPage = (props) => {
             if (response.message === "Token issue") {
                 localStorage.setItem("user", JSON.stringify(response.token));
                 alert('Login success');
-                props.history.push('/');
+                props.history.push('/mypick');
             } else if(response.message === "user does not exist"){
                 alert('User does not exist');
                 props.history.push('/signin');

@@ -110,7 +110,6 @@ app.post("/api/signin", (req, res) => {
                         code: 500,
                         message: 'server error',
                       });
-
                   }
 
             } else {
@@ -158,4 +157,4 @@ app.get('/api/auth', (req, res) => {
 });
 
 
-app.listen(port, () => console.log(`Listening on port ${port}`));
+app.listen(port, () => console.log(`Listening on port ${port}`));
\ No newline at end of file