최원석 / 2021-1-database-project

Go to a project
Toggle navigation Toggle navigation pinning
1seok2
b0a0bde5 1 parent 1d5c3304

add basic styles

Inline Side-by-side
Showing 14 changed files with 85 additions and 11 deletions
...@@ -2,12 +2,32 @@ ...@@ -2,12 +2,32 @@
2 2
3 Lookup ID, and Compare! 3 Lookup ID, and Compare!
4 4
5 +<span style="font-size:24px;">SPA</span> with <span style="font-size:16px;">Vanilla Typescript</span>
6 +
7 +and <span style="font-size:24px;">Page Transitions</span> with <span style="font-size:16px;">Scss</span>
8 +
9 +and <span style="font-size:24px;">Instagram Crawler</span> with <span style="font-size:16px;">Python</span>
10 +
11 +---
12 +
13 +### Using ...
14 +
15 +- Typescript
16 +- Webpack
17 +- Scss
18 +- Flask
19 +
5 ## Execute server 20 ## Execute server
21 +listing for __*localhost:8080*__
6 ```shell 22 ```shell
7 python -m pipenv shell 23 python -m pipenv shell
8 python server.py 24 python server.py
9 ``` 25 ```
10 26
27 +or
28 +
29 +> just run server with **Pycharm**
30 +
11 ## Execute only frontend 31 ## Execute only frontend
12 32
13 [link](https://github.com/1Seok2/check-your-instagram/tree/master/app) 33 [link](https://github.com/1Seok2/check-your-instagram/tree/master/app)
......
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
6 * 컴포넌트 제작 후 반환 6 * 컴포넌트 제작 후 반환
7 **/ 7 **/
8 8
9 -import Header from "./views/header/Header"; 9 +import Header from "./views/header";
10 -import Body from "./views/body/Body"; 10 +import Body from "./views/body";
11 -import Footer from "./views/footer/Footer"; 11 +import Footer from "./views/footer";
12 import './assets/style/App.scss'; 12 import './assets/style/App.scss';
13 import './assets/style/PageTransition.scss'; 13 import './assets/style/PageTransition.scss';
14 14
...@@ -16,11 +16,10 @@ const App = (pathname : string) : string => { ...@@ -16,11 +16,10 @@ const App = (pathname : string) : string => {
16 history.pushState('','', pathname); 16 history.pushState('','', pathname);
17 17
18 return ` 18 return `
19 - <div> 19 + <div class="container">
20 ${Header()} 20 ${Header()}
21 ${Body(pathname)} 21 ${Body(pathname)}
22 ${Footer()} 22 ${Footer()}
23 - <a href="/wonseog" id="nav-button" data-link>wonseok!!</a>
24 </div> 23 </div>
25 `; 24 `;
26 } 25 }
......
1 -body{ 1 +body {
2 margin: 0; 2 margin: 0;
3 padding: 0; 3 padding: 0;
4 +}
5 +
6 +.container {
7 + border: 1px solid green;
8 + display: flex;
9 + justify-content: center;
10 + align-items: center;
11 + flex-direction: column;
12 + position: absolute;
13 + top: 50%;
14 + left: 50%;
15 + transform: translate(-50%, -50%);
16 + min-width: 250px;
17 + min-height: 500px;
18 + width: 90%;
19 + height: 100%;
4 } 20 }
...\ No newline at end of file ...\ No newline at end of file
......
1 +.body {
2 + border: 1px solid gray;
3 + width: 100%;
4 + flex-grow: 1;
5 + display: flex;
6 + justify-content: center;
7 + align-items: center;
8 + flex-direction: column;
9 +}
...\ No newline at end of file ...\ No newline at end of file
1 +.footer {
2 + height: 50px;
3 + background-color: #afafaf;
4 + display: flex;
5 + justify-content: center;
6 + align-items: center;
7 + font-size: .8rem;
8 + width: 100%;
9 + color: #fafafa;
10 +}
...\ No newline at end of file ...\ No newline at end of file
1 +.header {
2 + height: 70px;
3 + display: flex;
4 + justify-content: center;
5 + align-items: center;
6 + font-size: 1.8rem;
7 + width: 100%;
8 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
4 <base href="/" /> 4 <base href="/" />
5 <meta charset="UTF-8"> 5 <meta charset="UTF-8">
6 <title>home</title> 6 <title>home</title>
7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 </head> 8 </head>
8 <body> 9 <body>
9 <div id="App"></div> 10 <div id="App"></div>
......
...@@ -23,7 +23,7 @@ window.addEventListener('DOMContentLoaded', () => { ...@@ -23,7 +23,7 @@ window.addEventListener('DOMContentLoaded', () => {
23 23
24 /* change url */ 24 /* change url */
25 window.addEventListener('popstate', ()=>{ 25 window.addEventListener('popstate', ()=>{
26 - $App && ($App.innerHTML = App(pathname)) 26 + $App && ($App.innerHTML = App(pathname));
27 }); 27 });
28 28
29 /* initial render */ 29 /* initial render */
...@@ -52,9 +52,11 @@ window.addEventListener('DOMContentLoaded', () => { ...@@ -52,9 +52,11 @@ window.addEventListener('DOMContentLoaded', () => {
52 } catch (e){ 52 } catch (e){
53 console.log(e); 53 console.log(e);
54 } finally { 54 } finally {
55 - console.log(result) 55 + console.log(result);
56 - result && $App && ($App.innerHTML = App('main')) 56 + result && $App && ($App.innerHTML = App('main'));
57 } 57 }
58 + } else {
59 + alert('아이디를 입력하세요');
58 } 60 }
59 } 61 }
60 }); 62 });
......
...@@ -4,21 +4,24 @@ ...@@ -4,21 +4,24 @@
4 * @description : 페이지 내용 4 * @description : 페이지 내용
5 **/ 5 **/
6 import Home from "./contents/Home"; 6 import Home from "./contents/Home";
7 +import '../../assets/style/Body.scss';
7 8
8 const Body = (pathname: string) : string => { 9 const Body = (pathname: string) : string => {
9 let contentsContainer = ''; 10 let contentsContainer = '';
10 11
11 switch (pathname){ 12 switch (pathname){
12 case 'compare': 13 case 'compare':
14 + /* 팔로워, 팔로잉 비교*/
13 break; 15 break;
14 case 'main': 16 case 'main':
17 + /* 아이디 조회 후 */
15 break; 18 break;
16 default: 19 default:
17 contentsContainer = Home(); 20 contentsContainer = Home();
18 } 21 }
19 22
20 return ` 23 return `
21 - <div class="Body"> 24 + <div class="body">
22 ${contentsContainer} 25 ${contentsContainer}
23 </div> 26 </div>
24 `; 27 `;
......
1 +export {default} from './Body'
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,10 +4,12 @@ ...@@ -4,10 +4,12 @@
4 * @description : 페이지 푸터 4 * @description : 페이지 푸터
5 **/ 5 **/
6 6
7 +import '../../assets/style/Footer.scss'
8 +
7 const Footer = () : string => { 9 const Footer = () : string => {
8 10
9 return ` 11 return `
10 - <div class="Footer">Its my Footer</div> 12 + <div class="footer">Its my Footer</div>
11 `; 13 `;
12 } 14 }
13 15
......
1 +export {default} from './Footer'
...\ No newline at end of file ...\ No newline at end of file
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
5 **/ 5 **/
6 6
7 import Title from "../../components/title"; 7 import Title from "../../components/title";
8 +import '../../assets/style/Header.scss'
8 9
9 const Header = () : string => ` 10 const Header = () : string => `
10 <div class="header"> 11 <div class="header">
......
1 +export {default} from './Header'
...\ No newline at end of file ...\ No newline at end of file