Skip to content

Commit 7571a3f

Browse files
mineiimineii
committed
feat: #16 대기목록 입장, 강제취소 버튼/ 배열
1 parent 28176b4 commit 7571a3f

File tree

4 files changed

+94
-76
lines changed

4 files changed

+94
-76
lines changed

‎src/components/WaitingList/ListTable.tsx

Lines changed: 40 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ interface Column {
2828
}
2929

3030
const columns: readonly Column[] = [
31-
{ id: 'waiting_id', label: '순번', minWidth: 30 },
32-
{ id: 'name', label: '예약자', minWidth: 30 },
31+
{ id: 'waiting_id', label: '순번', minWidth: 30, align: 'center', },
32+
{ id: 'name', label: '예약자', minWidth: 30, align: 'center' },
3333
{
3434
id: 'people',
3535
label: '인원 수',
@@ -54,36 +54,28 @@ export default function ListTable({waiting}:{waiting:waitings[]|undefined}) {
5454
console.log(waiting)
5555
};
5656

57-
58-
59-
useEffect(()=>{
60-
console.log(waiting);
61-
}, [])
62-
63-
6457
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
6558
setRowsPerPage(+event.target.value);
6659
setPage(0);
6760
};
68-
61+
6962
//대기목록 MUI 안에 있는 호출 버튼
70-
// const Call =()=>{
71-
// axios.post('http://15.164.28.246:8000/api/v1/stores/notifications/',{
72-
// token : 'token'
73-
// })
74-
// .then((response) => {
75-
// localStorage.getItem('store_id')
76-
// //" "
77-
// localStorage.getItem('chapter_id')
78-
// })
79-
// .catch((error) => {
80-
// console.log('호출 실패');
81-
// });
82-
// }
63+
const Call =()=>{
64+
axios.post('http://15.164.28.246:8000/api/v1/stores/notifications/',{
65+
token : localStorage.getItem('accessToken')
66+
})
67+
.then((response) => {
68+
console.log(response.data)
69+
})
70+
.catch((error) => {
71+
console.log('호출 실패');
72+
});
73+
}
8374

8475
//대기목록 MUI 안에 있는 입장완료 버튼
8576
const Start = (index: number) => {
86-
if(waiting != undefined)
77+
if(waiting !== undefined) {
78+
console.log(waiting[index].waiting_id);
8779
axios.patch('http://15.164.28.246:8000/api/v1/stores/waitings/',{
8880
waiting_id: waiting[index].waiting_id
8981
},
@@ -97,13 +89,15 @@ export default function ListTable({waiting}:{waiting:waitings[]|undefined}) {
9789
.catch((error) => {
9890
console.log('Error!');
9991
});
100-
}
92+
}}
10193

10294
//대기목록 MUI 안에 있는 대기취소 버튼
10395
const waitingCancel = (index: number) => {
104-
if(waiting != undefined)
105-
axios.patch<res>('http://15.164.28.246:8000/api/v1//stores/cancellations/',{
106-
waiting_id: waiting[index].waiting_id
96+
if(waiting != undefined) {
97+
//console.log(index); //배열(?) 확인용
98+
//console.log(waiting[index].waiting_id);
99+
axios.patch<res>('http://15.164.28.246:8000/api/v1/stores/cancellations/',{
100+
waiting_id: waiting[index].waiting_id
107101
},
108102
{
109103
headers : {Authorization: localStorage.getItem('accessToken')}
@@ -115,7 +109,7 @@ export default function ListTable({waiting}:{waiting:waitings[]|undefined}) {
115109
.catch((error) => {
116110
console.log('Error!');
117111
});
118-
}
112+
}}
119113

120114
return (
121115
<Paper className='tableStyle'>
@@ -140,7 +134,7 @@ export default function ListTable({waiting}:{waiting:waitings[]|undefined}) {
140134
<TableBody>
141135

142136
{waiting?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
143-
.map((row:any) => {
137+
.map((row:any, index:number) => {
144138
if(waiting != undefined) {
145139
abc = waiting.length
146140
}
@@ -158,9 +152,10 @@ export default function ListTable({waiting}:{waiting:waitings[]|undefined}) {
158152
</TableCell>
159153
);
160154
})}
161-
<TableCell align="center"><IconButton><NotificationsActiveIcon color="warning"/></IconButton></TableCell>
162-
<TableCell onClick={() => Start(row.waiting_id)} align="center"><IconButton><CheckCircleIcon color="success"/></IconButton></TableCell>
163-
<TableCell onClick={() => waitingCancel(row.waiting_id)} align="center"><IconButton><CancelIcon color="error"/></IconButton></TableCell>
155+
<TableCell onClick={() => Call()} align="center"><IconButton><NotificationsActiveIcon color="warning"/></IconButton></TableCell>
156+
{/* waiting_id 대신 index를 넣어줘야 waiting_id가 6, 7 일 때 배열 값과 달라서 발생하는 에러를 해결할 수 있음 */}
157+
<TableCell onClick={() => Start(index)} align="center"><IconButton><CheckCircleIcon color="success"/></IconButton></TableCell>
158+
<TableCell onClick={() => waitingCancel(index)} align="center"><IconButton><CancelIcon color="error"/></IconButton></TableCell>
164159
</TableRow>
165160
);
166161
})}
@@ -179,4 +174,15 @@ export default function ListTable({waiting}:{waiting:waitings[]|undefined}) {
179174
/>
180175
</Paper>
181176
);
182-
}
177+
}
178+
// 파일에서 command+shift+f로 검색
179+
// TablePagination의 count가 undefined,count에서 waiting을 못 읽었어!,
180+
// 왜냐면 useEffect가 실행되기 전 컴포넌트(waiting={temp?.data})가 먼저 실행됐기 때문에 undefined 상태,
181+
// undefined상태에서 waiting을 slice 등을 해주라고 하니까 오류가 발생한 거야
182+
// 오류를 해결하기 위해서 undefined일 때 waiting을 빈 배열로 만들어 줘서 초기값을 만들어준겨
183+
184+
ListTable.defaultProps = {
185+
waiting:[]
186+
}
187+
188+
//

‎src/components/WaitingList/SubButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function SubButton() {
1717
}
1818
)
1919
.then((response) => {
20-
console.log('[대기마감]' + localStorage.getItem('accessToken'))
20+
localStorage.getItem('accessToken')
2121
console.log(response.data);
2222
setIs_waiting(response.data.is_waiting);
2323
console.log(is_waiting);

‎src/pages/Login/Login.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,13 @@ function Login() {
3131
})
3232
}
3333

34+
const [hidePassword, setHidePassword] = useState(true);
35+
36+
const toggleHidePassword =()=>{
37+
setHidePassword(!hidePassword);
38+
}
39+
40+
3441
return(
3542
<div>
3643
<Box className="InputStyle"
@@ -42,7 +49,7 @@ function Login() {
4249
autoComplete="off">
4350
<Logo/>
4451
<TextField onChange={(e)=>{setEmail(e.target.value)}} id="standard-basic" label="이메일 주소" variant="standard" />
45-
<TextField type="password" onChange={(e)=>{setPassword(e.target.value)}}id="standard-basic" label="비밀번호" variant="standard" />
52+
<TextField type={hidePassword ? "password":"text"} onChange={(e)=>{setPassword(e.target.value)}}id="standard-basic" label="비밀번호" variant="standard" />
4653
</Box>
4754
<div className="InputStyle">
4855
<button className="ButtonStyle" onClick={storeLogin} >로그인</button>

‎src/pages/WaitingList/WaitingList.tsx

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -16,51 +16,51 @@ import { NULL } from "sass";
1616
//store_id를 백엔드로 넘겨주면, 백엔드에서 is_waiting, waiting(리스트), information를 받아오기 때문에, 그리고 이 정보를 대기자 입장, 웨이팅 취소 등에서도 계속 사용하기에 useState 사용
1717

1818
//props 전달을 상위에서 하위로 가야해염
19-
const test: waitings[] = [
20-
{
21-
people: 3,
22-
phone_num: "01011111111",
23-
name: "string",
24-
waiting_id: 1
25-
},
19+
// const test: waitings[] = [
20+
// {
21+
// people: 3,
22+
// phone_num: "01011111111",
23+
// name: "string",
24+
// waiting_id: 1
25+
// },
2626

27-
{
28-
people: 2,
29-
phone_num: "01011111112",
30-
name: "string2",
31-
waiting_id: 2
32-
},
27+
// {
28+
// people: 2,
29+
// phone_num: "01011111112",
30+
// name: "string2",
31+
// waiting_id: 2
32+
// },
3333

34-
{
35-
people: 3,
36-
phone_num: "0101231112",
37-
name: "string3",
38-
waiting_id: 3
39-
},
40-
{
41-
people: 3,
42-
phone_num: "01011111111",
43-
name: "string",
44-
waiting_id: 1
45-
},
34+
// {
35+
// people: 3,
36+
// phone_num: "0101231112",
37+
// name: "string3",
38+
// waiting_id: 3
39+
// },
40+
// {
41+
// people: 3,
42+
// phone_num: "01011111111",
43+
// name: "string",
44+
// waiting_id: 1
45+
// },
4646

47-
{
48-
people: 2,
49-
phone_num: "01011111112",
50-
name: "string2",
51-
waiting_id: 2
52-
},
47+
// {
48+
// people: 2,
49+
// phone_num: "01011111112",
50+
// name: "string2",
51+
// waiting_id: 2
52+
// },
5353

54-
{
55-
people: 3,
56-
phone_num: "0101231112",
57-
name: "string3",
58-
waiting_id: 3
59-
},
54+
// {
55+
// people: 3,
56+
// phone_num: "0101231112",
57+
// name: "string3",
58+
// waiting_id: 3
59+
// },
6060

6161

6262

63-
]
63+
// ]
6464

6565
function WaitingList() {
6666
document.body.style.backgroundColor = "#FFFBD9";
@@ -85,11 +85,16 @@ function WaitingList() {
8585
.then((response) => {
8686
setTemp(response.data);
8787
})
88+
.catch((error) => {
89+
console.log(localStorage.getItem('accessToken'));
90+
});
8891
}
8992

9093
useEffect(()=>{
9194
getList()
9295
}, [])
96+
97+
console.log('민아 확인')
9398
console.log(temp?.data);
9499

95100
return (
@@ -104,8 +109,8 @@ function WaitingList() {
104109
<div>
105110
<TableTitle/>
106111
<ListTableStyle/>
107-
{/* <ListTable waiting={temp?.data} /> */}
108-
<ListTable waiting={test} />
112+
<ListTable waiting={temp?.data} />
113+
{/* <ListTable waiting={test} /> */}
109114
<SubButton/>
110115
</div>
111116
</Container>

0 commit comments

Comments
 (0)