add profile img crawling

@@ -10,13 +10,17 @@ import Header from "./views/header";
 import Body from "./views/body";
 import Body from "./views/body";
 import Footer from "./views/footer";
 import Footer from "./views/footer";
 import './assets/style/App.scss';
 import './assets/style/App.scss';
+import {getState} from "@src/store/state";
 
 
 const App = (pathname : string) : string => {
 const App = (pathname : string) : string => {
+    /* id 없을 시 id 입력으로 redirect */
+    if(!getState().insta_id) pathname = '';
+
     history.pushState('','', pathname);
     history.pushState('','', pathname);
 
 
     return `
     return `
         <div class="container">
         <div class="container">
-            ${Header()}
+            ${pathname && Header()}
             ${Body(pathname)}
             ${Body(pathname)}
         </div>
         </div>
         ${Footer()}
         ${Footer()}

 .footer {
 .footer {
   height: 120px;
   height: 120px;
-  background-color: #afafaf;
+  background-color: #f3f3f3;
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
   font-size: .8rem;
   font-size: .8rem;
   width: 100%;
   width: 100%;
-  color: #fafafa;
+  color: #aaaaaa;
 }
 }
\ No newline at end of file

@@ -6,7 +6,7 @@
 
 
 import {BASE_URL} from "@src/config/url";
 import {BASE_URL} from "@src/config/url";
 import {randomTransition} from "@src/components/pageTransition";
 import {randomTransition} from "@src/components/pageTransition";
-import {getState, setState} from "@src/store/state";
+import {setState} from "@src/store/state";
 
 
 export const addEvent = async (
 export const addEvent = async (
     e : Event,
     e : Event,
@@ -38,11 +38,7 @@ export const addEvent = async (
                 console.log('res!',result);
                 console.log('res!',result);
                 result && $App && (()=>{
                 result && $App && (()=>{
                     randomTransition();
                     randomTransition();
-                    setState({
-                        insta_id : insta_id,
-                        followers : result.followers,
-                        following : result.following
-                    });
+                    setState(result);
                     setTimeout(()=>{
                     setTimeout(()=>{
                         $App.innerHTML = App('main');
                         $App.innerHTML = App('main');
                     },1200)
                     },1200)
@@ -66,11 +62,7 @@ export const addEvent = async (
                 console.log(result);
                 console.log(result);
                 result && $App && (()=>{
                 result && $App && (()=>{
                     randomTransition();
                     randomTransition();
-                    setState({
-                        insta_id : insta_id,
-                        followers : result.followers,
-                        following : result.following
-                    });
+                    setState(result);
                     setTimeout(()=>{
                     setTimeout(()=>{
                         $App.innerHTML = App('main');
                         $App.innerHTML = App('main');
                     },1200)
                     },1200)

-export {default} from './state';

@@ -8,13 +8,15 @@
 export interface StateType{
 export interface StateType{
     insta_id? : string,
     insta_id? : string,
     followers? : Array<string>,
     followers? : Array<string>,
-    following? : Array<string>
+    following? : Array<string>,
+    src? : string
 }
 }
 
 
 const initialState = {
 const initialState = {
     insta_id : '',
     insta_id : '',
     followers : [''],
     followers : [''],
     following : [''],
     following : [''],
+    src : '',
 }
 }
 let state: StateType = initialState;
 let state: StateType = initialState;
 
 
@@ -27,6 +29,4 @@ export const setState = (newState: StateType): void => {
 
 
 export const getState = () => {
 export const getState = () => {
     return state
     return state
-}
-
-export default state;
+}
\ No newline at end of file

@@ -5,20 +5,33 @@
  *                업데이트하기
  *                업데이트하기
  *                다른 메뉴 보기
  *                다른 메뉴 보기
 **/
 **/
-import state from "@src/store";
 import {getState} from "@src/store/state";
 import {getState} from "@src/store/state";
 
 
 const Main = () => {
 const Main = () => {
-    let contents = `<div>${state.insta_id}</div>`
-
-    contents += getState().followers?.map(id => `<div>followers ${id}</div>`)
-
-    contents += getState().following?.map(id => `<div>following ${id}</div>`)
+    const state = getState();
+    let followers : string = '';
+    let following : string = '';
+    state.followers?.forEach(id => {
+        followers += `<div>${id}</div>`
+    });
+    state.following?.forEach(id => {
+        following += `<div>${id}</div>`
+    });
 
 
     return `
     return `
         <div class="main">
         <div class="main">
-            its main
-            ${contents}
+            <div id="profile">
+                <img src="${state.src}" alt="${state.insta_id}-image"/>
+                <span class="profile-id">${state.insta_id}</span>
+            </div>
+            <div id="list">
+                <div id="followers">
+                    ${followers}
+                </div>
+                <div id="following">
+                    ${following}
+                </div>
+            </div>
         </div>
         </div>
     `
     `
 }
 }

@@ -35,6 +35,9 @@ def login(driver):
 
 
 
 
 def get_list(insta_id, driver):
 def get_list(insta_id, driver):
+    # get profile src
+    src = driver.find_element_by_css_selector('.XjzKX .RR-M- span img').get_attribute('src')
+
     # check followers
     # check followers
     followers_list = check_people(driver, "followers")
     followers_list = check_people(driver, "followers")
 
 
@@ -49,7 +52,8 @@ def get_list(insta_id, driver):
     data = {
     data = {
         "followers" : followers_list,
         "followers" : followers_list,
         "following" : following_list,
         "following" : following_list,
-        "insta_id" : insta_id
+        "insta_id" : insta_id,
+        "src" : src
     }
     }
     update_data(insta_id, data)
     update_data(insta_id, data)