Skip to content

Commit e9368ce

Browse files
limkhllimkhl
committed
add: project 4 메세지 보내기 UI 구현
1 parent 43eb6c5 commit e9368ce

File tree

10 files changed

+315
-1
lines changed

10 files changed

+315
-1
lines changed

‎project4-TheMessage/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>메세지 보내기</title>
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css" />
13+
<link rel="stylesheet" href="../src/styles/style.css" />
14+
<link rel="stylesheet" href="./src/style.css" />
15+
</head>
16+
<body>
17+
<main class="wrap"></main>
18+
<script src="/src/main.js" type="module"></script>
19+
</body>
20+
</html>

‎project4-TheMessage/src/App.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Form from './Form.js';
2+
3+
export default function App({ $target }) {
4+
const $messageBox = document.createElement('div');
5+
const $previewBox = document.createElement('p');
6+
$messageBox.className = 'messageBox';
7+
$previewBox.className = 'previewBox';
8+
$target.append($messageBox);
9+
10+
$messageBox.innerHTML = /* html */ `
11+
<h2>메시지 보내기</h2>
12+
<hr />
13+
`;
14+
15+
new Form({
16+
$target: $messageBox,
17+
onSubmit: (messageContent) => {
18+
$previewBox.textContent = messageContent;
19+
},
20+
});
21+
22+
$messageBox.append($previewBox);
23+
}

‎project4-TheMessage/src/Form.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
export default function Form({ $target, onSubmit }) {
2+
const $form = document.createElement('form');
3+
$target.append($form);
4+
5+
$form.innerHTML = /* html */ `
6+
<label for="messageInput">메시지를 입력하세요.</label>
7+
<div class="inputBox">
8+
<button type="button">💌</button>
9+
<input type="text" name="message" id="messageInput" />
10+
</div>
11+
<button class="button__submit">SEND</button>
12+
`;
13+
14+
$form.addEventListener('submit', (e) => {
15+
e.preventDefault();
16+
const $input = document.querySelector('#messageInput');
17+
if (!$input.value) {
18+
alert('한 글자 이상 입력해주세요.');
19+
return;
20+
}
21+
const messageContent = $input.value;
22+
$input.value = '';
23+
onSubmit(messageContent);
24+
});
25+
}

‎project4-TheMessage/src/main.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import App from './App.js';
2+
3+
const $target = document.querySelector('main');
4+
const $page = document.createElement('div');
5+
$target.append($page);
6+
$page.className = 'project4 page';
7+
8+
new App({ $target: $page });

‎project4-TheMessage/src/style.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
:root .project4 {
2+
--bg-color: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
3+
--base-font-family: 'Noto Sans KR', sans-serif;
4+
--border-radius: 0.4rem;
5+
--box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
6+
--base-margin: 1.3rem;
7+
--base-padding: 1.6rem;
8+
--base-button-padding: 0.5rem;
9+
--base-button-border: 1px solid gray;
10+
--base-button-color: #d4e1e6;
11+
--base-button-hover-color: #f4d9e4;
12+
--base-line-height: 1.6rem;
13+
}
14+
15+
.wrap {
16+
width: 100vw;
17+
height: 100vh;
18+
}
19+
20+
.page {
21+
width: 100%;
22+
height: 100%;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
}
27+
28+
.project4.page {
29+
background-image: var(--bg-color);
30+
padding: 1.6rem;
31+
box-sizing: border-box;
32+
flex-direction: row;
33+
font-weight: bold;
34+
}
35+
36+
.project4 .messageBox {
37+
font-family: var(--base-font-family);
38+
padding: 0 var(--base-padding);
39+
background-color: white;
40+
border-radius: var(--border-radius);
41+
box-shadow: var(--box-shadow);
42+
flex-basis: 500px;
43+
box-sizing: border-box;
44+
}
45+
46+
.project4 .messageBox h2 {
47+
font-size: 1.5rem;
48+
font-weight: bold;
49+
padding: var(--base-padding);
50+
text-align: center;
51+
}
52+
53+
.project4 .messageBox hr {
54+
background-color: lightgray;
55+
height: 2px;
56+
border: 0;
57+
margin-top: 0;
58+
}
59+
60+
.project4 .messageBox label {
61+
display: block;
62+
font-weight: normal;
63+
margin: var(--base-margin) 0;
64+
}
65+
66+
.project4 .messageBox .inputBox {
67+
display: flex;
68+
}
69+
70+
.project4 .messageBox .inputBox button {
71+
padding: var(--base-button-padding);
72+
border: var(--base-button-border);
73+
border-right-width: 0;
74+
border-radius: 0;
75+
border-top-left-radius: var(--border-radius);
76+
}
77+
78+
.project4 .messageBox .inputBox button:hover {
79+
background-color: var(--base-button-hover-color);
80+
}
81+
82+
.project4 .messageBox #messageInput {
83+
flex-grow: 1;
84+
padding: 0.5rem;
85+
font-family: var(--base-font-family);
86+
border: 1px solid gray;
87+
border-radius: 0;
88+
border-top-right-radius: var(--border-radius);
89+
}
90+
91+
.project4 .messageBox #messageInput:focus {
92+
outline: none;
93+
}
94+
95+
.project4 .messageBox .button__submit {
96+
width: 100%;
97+
font-family: var(--base-font-family);
98+
padding: var(--base-button-padding);
99+
border-radius: 0;
100+
border-bottom-left-radius: var(--border-radius);
101+
border-bottom-right-radius: var(--border-radius);
102+
border: var(--base-button-border);
103+
border-top-width: 0;
104+
background-color: var(--base-button-color);
105+
}
106+
107+
.project4 .messageBox .button__submit:hover {
108+
background-color: var(--base-button-hover-color);
109+
}
110+
111+
.project4 .messageBox .previewBox {
112+
padding: 1.4rem;
113+
text-align: center;
114+
}

‎src/components/App.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import NotFoundPage from '../pages/NotFoundPage.js';
55
import Project1Page from '../../project1-colors/src/Project1Page.js';
66
import Project2Page from '../../project2-HexColorsGradient/src/Project2Page.js';
77
import Project3Page from '../../project3-RandomQuoteGenerator/src/Project3Page.js';
8+
import Project4Page from '../pages/Project4Page.js';
89

910
export default function App({ $target }) {
1011
new Header({ $target });
@@ -17,6 +18,7 @@ export default function App({ $target }) {
1718
const project1Page = new Project1Page({ $target: $main });
1819
const project2Page = new Project2Page({ $target: $main });
1920
const project3Page = new Project3Page({ $target: $main });
21+
const project4Page = new Project4Page({ $target: $main });
2022

2123
this.route = () => {
2224
$main.innerHTML = ``;
@@ -36,6 +38,9 @@ export default function App({ $target }) {
3638
case 3:
3739
project3Page.render();
3840
break;
41+
case 4:
42+
project4Page.render();
43+
break;
3944
}
4045
} else {
4146
notFoundPage.render();

‎src/data/projectList.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,8 @@ export const projectList = [
22
{ id: 1, title: 'Colors' },
33
{ id: 2, title: 'Hex Colors Gradient' },
44
{ id: 3, title: 'Random Quote Generator' },
5+
{ id: 4, title: 'The Message' },
6+
{ id: 5, title: 'Counter' },
7+
{ id: 6, title: 'Image Carousel' },
8+
{ id: 7, title: 'Digital Clock' },
59
];

‎src/pages/Project4Page.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import App from '../../project4-TheMessage/src/App.js';
2+
3+
export default function Project4Page({ $target }) {
4+
const $page = document.createElement('div');
5+
6+
$page.className = 'project4 page';
7+
8+
new App({ $target: $page });
9+
10+
this.render = () => {
11+
$target.append($page);
12+
};
13+
}

‎src/styles/project4.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
:root .project4 {
2+
--bg-color: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
3+
--base-font-family: 'Noto Sans KR', sans-serif;
4+
--border-radius: 0.4rem;
5+
--box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
6+
--base-margin: 1.3rem;
7+
--base-padding: 1.6rem;
8+
--base-button-padding: 0.5rem;
9+
--base-button-border: 1px solid gray;
10+
--base-button-color: #d4e1e6;
11+
--base-button-hover-color: #f4d9e4;
12+
--base-line-height: 1.6rem;
13+
}
14+
15+
.project4.page {
16+
background-image: var(--bg-color);
17+
padding: 1.6rem;
18+
box-sizing: border-box;
19+
flex-direction: row;
20+
}
21+
22+
.project4 .messageBox {
23+
font-family: var(--base-font-family);
24+
padding: 0 var(--base-padding);
25+
background-color: white;
26+
border-radius: var(--border-radius);
27+
box-shadow: var(--box-shadow);
28+
flex-basis: 500px;
29+
}
30+
31+
.project4 .messageBox h2 {
32+
font-size: 1.5rem;
33+
font-weight: bold;
34+
padding: var(--base-padding);
35+
text-align: center;
36+
}
37+
38+
.project4 .messageBox hr {
39+
background-color: lightgray;
40+
height: 2px;
41+
border: 0;
42+
margin-top: 0;
43+
}
44+
45+
.project4 .messageBox label {
46+
display: block;
47+
font-weight: normal;
48+
margin: var(--base-margin) 0;
49+
}
50+
51+
.project4 .messageBox .inputBox {
52+
display: flex;
53+
}
54+
55+
.project4 .messageBox .inputBox button {
56+
padding: var(--base-button-padding);
57+
border: var(--base-button-border);
58+
border-right-width: 0;
59+
border-radius: 0;
60+
border-top-left-radius: var(--border-radius);
61+
}
62+
63+
.project4 .messageBox .inputBox button:hover {
64+
background-color: var(--base-button-hover-color);
65+
}
66+
67+
.project4 .messageBox #messageInput {
68+
flex-grow: 1;
69+
padding: 0.5rem;
70+
font-family: var(--base-font-family);
71+
border: 1px solid gray;
72+
border-radius: 0;
73+
border-top-right-radius: var(--border-radius);
74+
}
75+
76+
.project4 .messageBox #messageInput:focus {
77+
outline: none;
78+
}
79+
80+
.project4 .messageBox .button__submit {
81+
width: 100%;
82+
font-family: var(--base-font-family);
83+
padding: var(--base-button-padding);
84+
border-radius: 0;
85+
border-bottom-left-radius: var(--border-radius);
86+
border-bottom-right-radius: var(--border-radius);
87+
border: var(--base-button-border);
88+
border-top-width: 0;
89+
background-color: var(--base-button-color);
90+
}
91+
92+
.project4 .messageBox .button__submit:hover {
93+
background-color: var(--base-button-hover-color);
94+
}
95+
96+
.project4 .messageBox .previewBox {
97+
padding: 1.4rem;
98+
text-align: center;
99+
line-height: var(--base-line-height);
100+
}

‎src/styles/style.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
@import url('./project1.css');
22
@import url('./project2.css');
33
@import url('./project3.css');
4+
@import url('./project4.css');
45

56
:root {
67
--primary-color: #306ba4;
78
--highlight-color: #31d2f7;
89
--border-radius: 1rem;
10+
--base-font-family: 'Noto Sans KR', sans-serif;
911
}
1012

1113
* {
@@ -20,7 +22,7 @@ a {
2022
}
2123

2224
body {
23-
font-family: 'Noto Sans KR', sans-serif;
25+
font-family: var(--base-font-family);
2426
font-weight: bold;
2527
letter-spacing: -1px;
2628
}

0 commit comments

Comments
 (0)