1
- import React , { useState , useCallback , useMemo } from " react" ;
2
- import styles from " ../css/Notice.Write.module.css" ;
3
- import axios from " axios" ;
4
- import { useNavigate } from " react-router-dom" ;
5
- import plus from " ../img/plus.png" ;
1
+ import React , { useState , useMemo } from ' react' ;
2
+ import styles from ' ../css/Notice.Write.module.css' ;
3
+ import axios from ' axios' ;
4
+ import { useNavigate } from ' react-router-dom' ;
5
+ import plus from ' ../img/plus.png' ;
6
6
7
7
const NoticeWrite = ( ) => {
8
8
const [ Title , setTitle ] = useState ( null ) ;
@@ -19,7 +19,7 @@ const NoticeWrite = () => {
19
19
//클릭했을 때 true면 false로 false면 true로 바꾸는 함수 - 단일코드
20
20
const handleClick = ( e ) => {
21
21
//e.target.name과 같은 state같을 찾는다.
22
- if ( e . target . name === " tag1" ) {
22
+ if ( e . target . name === ' tag1' ) {
23
23
if ( tag1 ) {
24
24
//tag1이 true일때
25
25
setTag1 ( false ) ;
@@ -31,7 +31,7 @@ const NoticeWrite = () => {
31
31
setTag3 ( false ) ;
32
32
setTag ( 1 ) ;
33
33
}
34
- } else if ( e . target . name === " tag2" ) {
34
+ } else if ( e . target . name === ' tag2' ) {
35
35
if ( tag2 ) {
36
36
//tag1이 true일때
37
37
setTag1 ( false ) ;
@@ -43,7 +43,7 @@ const NoticeWrite = () => {
43
43
setTag3 ( false ) ;
44
44
setTag ( 2 ) ;
45
45
}
46
- } else if ( e . target . name === " tag3" ) {
46
+ } else if ( e . target . name === ' tag3' ) {
47
47
if ( tag3 ) {
48
48
//tag1이 true일때
49
49
setTag1 ( false ) ;
@@ -60,62 +60,62 @@ const NoticeWrite = () => {
60
60
61
61
//usememo 최적화 연산 함수
62
62
const textColor1 = useMemo ( ( ) => {
63
- return tag1 ? " #4C966E" : " #c4c4c4" ;
63
+ return tag1 ? ' #4C966E' : ' #c4c4c4' ;
64
64
} , [ tag1 ] ) ;
65
65
//tag1가 변화하면 윗줄이 동작함
66
66
const textColor2 = useMemo ( ( ) => {
67
- return tag2 ? " #d0c7de" : " #c4c4c4" ;
67
+ return tag2 ? ' #d0c7de' : ' #c4c4c4' ;
68
68
} , [ tag2 ] ) ;
69
69
70
70
const textColor3 = useMemo ( ( ) => {
71
- return tag3 ? " #e7d0b6" : " #c4c4c4" ;
71
+ return tag3 ? ' #e7d0b6' : ' #c4c4c4' ;
72
72
} , [ tag3 ] ) ;
73
73
74
74
const handleChange = ( e ) => {
75
75
e . preventDefault ( ) ;
76
76
const {
77
77
target : { name, value } ,
78
78
} = e ;
79
- if ( name === " title" ) {
79
+ if ( name === ' title' ) {
80
80
setTitle ( value ) ;
81
- } else if ( name === " content" ) {
81
+ } else if ( name === ' content' ) {
82
82
setContent ( value ) ;
83
- } else if ( name === " tag" ) {
83
+ } else if ( name === ' tag' ) {
84
84
setTag ( value ) ;
85
- } else if ( name === " noImg" ) {
85
+ } else if ( name === ' noImg' ) {
86
86
setImg ( URL . createObjectURL ( e . target . files [ 0 ] ) ) ;
87
87
setimg ( e . target . files [ 0 ] ) ;
88
88
}
89
89
} ;
90
90
91
91
const handleSubmit = ( e ) => {
92
92
e . preventDefault ( ) ;
93
- formData . append ( " noTitle" , Title ) ;
94
- formData . append ( " noText" , Content ) ;
95
- formData . append ( " noTag" , Tag ) ;
96
- formData . append ( " noImg" , noimg ) ;
93
+ formData . append ( ' noTitle' , Title ) ;
94
+ formData . append ( ' noText' , Content ) ;
95
+ formData . append ( ' noTag' , Tag ) ;
96
+ formData . append ( ' noImg' , noimg ) ;
97
97
if ( Title !== null && Content !== null && Tag !== null ) {
98
98
const config = {
99
99
Headers : {
100
- " content-type" : " multipart/form-data" ,
100
+ ' content-type' : ' multipart/form-data' ,
101
101
} ,
102
102
} ;
103
103
104
104
axios
105
- . post ( " http://localhost:3001/notice" , formData , config )
105
+ . post ( ' http://localhost:3001/notice' , formData , config )
106
106
. then ( ( res ) => {
107
- setTitle ( "" ) ; //text 초기화
108
- setContent ( "" ) ;
109
- setTag ( "" ) ;
110
- setimg ( "" ) ;
111
- setImg ( "" ) ;
112
- navigate ( " /Notice" ) ;
107
+ setTitle ( '' ) ; //text 초기화
108
+ setContent ( '' ) ;
109
+ setTag ( '' ) ;
110
+ setimg ( '' ) ;
111
+ setImg ( '' ) ;
112
+ navigate ( ' /Notice' ) ;
113
113
} )
114
114
. catch ( ( error ) => {
115
- console . log ( " Network Error : " , error ) ;
115
+ console . log ( ' Network Error : ' , error ) ;
116
116
} ) ;
117
117
} else {
118
- alert ( " 모든 빈칸을 작성해주세요." ) ;
118
+ alert ( ' 모든 빈칸을 작성해주세요.' ) ;
119
119
}
120
120
//formData.append('noImg', noImg);
121
121
} ;
@@ -130,16 +130,14 @@ const NoticeWrite = () => {
130
130
className = { styles . ntcTitle }
131
131
value = { Title }
132
132
onChange = { handleChange }
133
- name = "title"
134
- > </ input >
133
+ name = "title" > </ input >
135
134
< textarea
136
135
name = "content"
137
136
rows = "9"
138
137
className = { styles . ntcContent }
139
138
placeholder = "내용을 입력하세요"
140
139
value = { Content }
141
- onChange = { handleChange }
142
- > </ textarea >
140
+ onChange = { handleChange } > </ textarea >
143
141
</ div >
144
142
< div >
145
143
< p className = { styles . tagstyle } > 태그</ p >
@@ -150,8 +148,7 @@ const NoticeWrite = () => {
150
148
style = { { backgroundColor : textColor1 } }
151
149
name = "tag1"
152
150
value = "1"
153
- onClick = { handleClick }
154
- >
151
+ onClick = { handleClick } >
155
152
NOTICE
156
153
</ button >
157
154
< button
@@ -160,8 +157,7 @@ const NoticeWrite = () => {
160
157
style = { { backgroundColor : textColor2 } }
161
158
name = "tag2"
162
159
value = "2"
163
- onClick = { handleClick }
164
- >
160
+ onClick = { handleClick } >
165
161
EVENT
166
162
</ button >
167
163
< button
@@ -170,8 +166,7 @@ const NoticeWrite = () => {
170
166
style = { { backgroundColor : textColor3 } }
171
167
name = "tag3"
172
168
value = "3"
173
- onClick = { handleClick }
174
- >
169
+ onClick = { handleClick } >
175
170
PROGRAM
176
171
</ button >
177
172
</ div >
@@ -188,31 +183,21 @@ const NoticeWrite = () => {
188
183
id = "input-file"
189
184
type = "file"
190
185
accept = "image/*"
191
- style = { { display : " none" } }
186
+ style = { { display : ' none' } }
192
187
name = "noImg"
193
- onChange = { handleChange }
194
- > </ input >
188
+ onChange = { handleChange } > </ input >
195
189
< label for = "input-file" >
196
190
< div className = { styles . plusdiv } >
197
191
{ noImg ? (
198
192
< img src = { noImg } alt = "preview-img" className = { styles . plusdiv } />
199
193
) : (
200
- < img
201
- className = { styles . plusimg }
202
- id = "input-file"
203
- alt = "plus"
204
- src = { plus }
205
- > </ img >
194
+ < img className = { styles . plusimg } id = "input-file" alt = "plus" src = { plus } > </ img >
206
195
) }
207
196
</ div >
208
197
</ label >
209
198
</ div >
210
199
< div className = { styles . button } >
211
- < input
212
- type = "submit"
213
- value = "글 남기기"
214
- className = { styles . submitbtn }
215
- > </ input >
200
+ < input type = "submit" value = "글 남기기" className = { styles . submitbtn } > </ input >
216
201
</ div >
217
202
</ form >
218
203
</ div >
0 commit comments