1seok2

refactor: change for fetch data type

...@@ -15,7 +15,7 @@ import { getElement } from "./shared/functions"; ...@@ -15,7 +15,7 @@ import { getElement } from "./shared/functions";
15 15
16 function App(pathname: string): string { 16 function App(pathname: string): string {
17 /* id 없을 시 id 입력으로 redirect */ 17 /* id 없을 시 id 입력으로 redirect */
18 - if (!getState().insta_id) pathname = ""; 18 + if (getState().user[0] === "") pathname = "";
19 history.pushState("", "", pathname); 19 history.pushState("", "", pathname);
20 20
21 return ` 21 return `
......
...@@ -5,28 +5,20 @@ ...@@ -5,28 +5,20 @@
5 * 주로 instaId, followers, following 관리 5 * 주로 instaId, followers, following 관리
6 **/ 6 **/
7 7
8 -export interface StateType{
9 - insta_id? : string,
10 - followers? : Array<string>,
11 - following? : Array<string>,
12 - src? : string
13 -}
14 -
15 const initialState = { 8 const initialState = {
16 - insta_id : '', 9 + user: ["", "", ""],
17 - followers : [''], 10 + follower: [["", "", ""]],
18 - following : [''], 11 +};
19 - src : '',
20 -}
21 -let state: StateType = initialState;
22 12
23 -export const setState = (newState: StateType): void => { 13 +let state = initialState;
24 - state = { 14 +
25 - ...state, 15 +export const setState = (newState): void => {
26 - ...newState 16 + state = {
27 - } 17 + ...state,
18 + ...newState,
19 + };
28 }; 20 };
29 21
30 export const getState = () => { 22 export const getState = () => {
31 - return state
32 -}
...\ No newline at end of file ...\ No newline at end of file
23 + return state;
24 +};
......
...@@ -13,33 +13,23 @@ import { getState } from "@src/store/state"; ...@@ -13,33 +13,23 @@ import { getState } from "@src/store/state";
13 const Main = () => { 13 const Main = () => {
14 const state = getState(); 14 const state = getState();
15 let followers: string = ""; 15 let followers: string = "";
16 - let following: string = "";
17 16
18 - state.followers?.sort().forEach((id, idx) => { 17 + state.follower?.forEach((follower, idx) => {
19 - followers += `<div class="item item-${idx % 2}">${id}</div>`; 18 + followers += `<div class="item item-${idx % 2}">${follower[0]}</div>`;
20 }); 19 });
21 20
22 - state.following?.sort().forEach((id, idx) => { 21 + const followers_num = formatNumber(state.follower?.length || 0);
23 - following += `<div class="item item-${idx % 2}">${id}</div>`;
24 - });
25 -
26 - const followers_num = formatNumber(state.followers?.length || 0);
27 - const followings_num = formatNumber(state.following?.length || 0);
28 22
29 return ` 23 return `
30 <div class="main"> 24 <div class="main">
31 <div class="profile"> 25 <div class="profile">
32 - <img src="${state.src}" alt="${state.insta_id}-image"/> 26 + <img src="${state}" alt="${state.user[0]}-image"/>
33 </div> 27 </div>
34 <div class="list"> 28 <div class="list">
35 <div class="followers"> 29 <div class="followers">
36 <h2 class="title">FOLLOWERS (${followers_num})</h2> 30 <h2 class="title">FOLLOWERS (${followers_num})</h2>
37 <div>${followers}</div> 31 <div>${followers}</div>
38 </div> 32 </div>
39 - <div class="following">
40 - <h2 class="title">FOLLOWINGS (${followings_num})</h2>
41 - <div>${following}</div>
42 - </div>
43 </div> 33 </div>
44 </div> 34 </div>
45 `; 35 `;
......
...@@ -12,7 +12,7 @@ import { getState } from "@src/store/state"; ...@@ -12,7 +12,7 @@ import { getState } from "@src/store/state";
12 import { addEventWithElementByType, handleFetchById } from "@src/shared/event"; 12 import { addEventWithElementByType, handleFetchById } from "@src/shared/event";
13 13
14 const Header = (): string => { 14 const Header = (): string => {
15 - const { insta_id } = getState(); 15 + const { user } = getState();
16 16
17 addEventWithElementByType(document.body, "click", function (e: Event) { 17 addEventWithElementByType(document.body, "click", function (e: Event) {
18 if ((e.target as HTMLButtonElement).id === "update-button") { 18 if ((e.target as HTMLButtonElement).id === "update-button") {
...@@ -25,7 +25,7 @@ const Header = (): string => { ...@@ -25,7 +25,7 @@ const Header = (): string => {
25 return ` 25 return `
26 <div class="header"> 26 <div class="header">
27 <div class="form-container"> 27 <div class="form-container">
28 - <input type="text" name="insta_id" id="id-input" placeholder="${insta_id}" value="${insta_id}" /> 28 + <input type="text" name="insta_id" id="id-input" placeholder="${user[0]}" value="${user[0]}" />
29 <button id="update-button">UPDATE</button> 29 <button id="update-button">UPDATE</button>
30 </div> 30 </div>
31 </div> 31 </div>
......