사용자 피드백 제공
사용자의 행동에 따라 즉각적인 피드백을 제공하는 것이 중요하다.
버튼 클릭, 폼 제출 등의 상황에서 사용자에게 상태를 알려주는 것이 좋다.
또한 이걸 이용해서 다른 디자인에서도 뭔가 반응이 있다고 알려준다던지, 밋밋하지 않도록 Snackbar를 이용해서 보여주겠다.
import library
import { Button, TextField, Snackbar, Grid } from '@mui/material';
import { useState } from 'react';
App.js에 추가
const UserFeedback = () => {
const [feedback, setFeedback] = useState('');
const [open, setOpen] = useState(false);
const handleChange = (event) => {
setFeedback(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
// 여기에서 피드백을 처리하십시오 (예: API에 전송).
console.log(feedback);
setFeedback('');
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<Grid container direction="column" alignItems="center" justifyContent="center" spacing={2}>
<Grid item xs={12}>
<TextField
label="피드백을 남겨주세요"
value={feedback}
onChange={handleChange}
multiline
rows={4}
variant="outlined"
fullWidth
/>
</Grid>
<Grid item xs={12}>
<Button variant="contained" color="primary" onClick={handleSubmit}>
피드백 전송
</Button>
</Grid>
<Snackbar
open={open}
autoHideDuration={6000}
onClose={handleClose}
message="피드백이 전송되었습니다."
anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
/>
</Grid>
);
};
해당 리턴을 어디에 둘지 고려하여 작성하면 다음과 같이 구성이 된다.
피드백 전송 버튼을 누르게 되면 피드백이 전송되었습니다. 라고 하단에 스낵바가 나오게된다.
이걸 이용하여 어떤 메시지를 전달 할 것인지 사용자들에게 좀 더 친화적이고, 동적으로 보여주는 페이지를 완성시킬 수 있다.
마지막으로, 웹 접근성 관련이다.
웹 접근성
웹사이트는 다양한 사용자들이 이용할 수 있도록 웹 접근성을 고려해야 한다.
AccessibleApp.js
import React from "react";
import HappyBee from "../images/3153.png";
import SadBee from "../images/3155.png";
import AngryBee from "../images/3154.png";
import LoginForm from "./LoginForm";
import "./AccessibleApp.css";
import { Container, Grid, Paper } from "@mui/material";
const AccessibleApp = () => {
return (
<div>
<header>
<h1>웹사이트 제목</h1>
</header>
<main>
<Container>
<Grid container spacing={12} className="grid-container">
<Grid item xs={3} md={2} lg={3}>
<Paper className="grid-item">
<article>
<h2>기사 제목</h2>
<p>기사 내용...</p>
</article>
</Paper>
</Grid>
<Grid item xs={3} md={6} lg={4}>
<Paper className="grid-item">
<section>
<h2>이미지 갤러리</h2>
<img src={HappyBee} alt="설명이 있는 이미지 1" />
<img src={SadBee} alt="설명이 있는 이미지 2" />
<img src={AngryBee} alt="설명없음." />
</section>
</Paper>
</Grid>
<Grid item xs={3} md={6} lg={4}>
<Paper className="grid-item">
<section>
<LoginForm />
</section>
</Paper>
</Grid>
</Grid>
</Container>
</main>
<footer>
<p>Copyright © 2023 레서드 all rights reserved.</p>
</footer>
</div>
);
};
export default AccessibleApp;
AccessibleApp.css
img {
filter: brightness(1);
}
img:hover{
filter: brightness(0.5);
}