Showing
4 changed files
with
19 additions
and
37 deletions
... | @@ -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> | ... | ... |
-
Please register or login to post a comment