/component
import Link from "next/link";
import { MouseEvent } from "react";
import { CounterState } from "../store/types/state";
import { da } from "../type";
const MyPage = ({
main,
del,
update,
}: {
main: CounterState;
del: (e: EventTarget) => void;
update: (e: EventTarget) => void;
}) => {
const Delete = (e: React.MouseEvent<HTMLButtonElement>) => {
del(e.target);
};
const updatepage = (e: React.MouseEvent<HTMLButtonElement>) => {
update(e.target);
};
return (
<div className="section">
<div className="welcome">
<div className="nick">{main.common.login} </div>
<div className="content">님 어서오세요.</div>
</div>
<hr className="welcomeline" />
<div className="cards">
<div className="firstform">
<div className="firsttitle">약속</div>
{main.data.map((state: da, index: number) => {
if (state.maker == main.common.login) {
return (
<div key={index} className="firstlists">
<div className="firstlist">
<div className="url">
<Link href={`/form/firstform/${state.idx}`}>
<a>{`http://localhost:3000/form/firstform/${state.idx}`}</a>
</Link>
</div>
<div className="button">
<div className="delbutton">
<button id={state.idx} onClick={Delete}>
삭제
</button>
</div>
<div className="updatebutton">
<button id={state.idx} onClick={updatepage}>
수정
</button>
</div>
</div>
</div>
<hr />
</div>
);
}
})}
</div>
</div>
<style jsx>
{`
.section {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background-color:whitesmoke;
min-height:850px;
}
.section > .welcome {
display: flex;
align-items: end;
justify-content: center;
font-weight: bolder;
margin: 2%;
width: 100%;
}
.section > .welcome > .nick {
text-align: center;
font-size: 38px;
}
.section > .welcome > .content {
text-align: center;
font-size: 18px;
display: flex;
flex-direction: column;
}
.section > .welcomeline {
width: 90%;
border: 1px solid black;
}
.section > .cards {
display: flex;
align-items: end;
justify-content: center;
margin: 2%;
width: 100%;
}
.section > .cards > .firstform {
width: 90%;
border: 4px solid blue;
border-radius: 10px;
}
.section > .cards > .firstform > .firsttitle {
display: flex;
flex-direction: column;
font-weight: bolder;
font-size: 28px;
}
.section > .cards > .firstform > .firsttitle::after {
border: 1px solid blue;
width: 99%;
margin: auto;
border-radius: 10px;
content: "";
}
.section > .cards > .firstform > .firstlists > .firstlist {
display: flex;
font-weight: bolder;
font-size: 18px;
margin: 1%;
justify-content: space-between;
}
.section > .cards > .firstform > .firstlists > .firstlist > .button {
display:flex;
}
.section > .cards > .firstform > .firstlists > .firstlist > .button {
width: 20%;
display-flex;
justify-content:space-around;
}
.section
> .cards
> .firstform
> .firstlists
> .firstlist
> .button
> * {
max-width: 50%;
margin: 1%;
}
.section
> .cards
> .firstform
> .firstlists
> .firstlist
> .button
> *
> button {
font-weight: bolder;
font-size: 18px;
width: 100%;
}
.section > .cards > .firstform > .firstlists > hr {
border: 1px solid black;
margin: auto;
margin-bottom: 2%;
width: 99%;
}
`}
</style>
</div>
);
};
export default MyPage;
/container
import { NextPage } from "next";
import { useRouter } from "next/router";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import MyPage from "../components/mypage";
import { datadel } from "../store/actions/action";
import { CounterState, RootState } from "../store/types/state";
import { js } from "../type";
const MypageContainer: NextPage = () => {
const dispatch = useDispatch();
const router = useRouter();
const { main }: { main: CounterState } = useSelector(
(state: RootState) => state
);
const del = (e: EventTarget) => {
dispatch(datadel((e as HTMLButtonElement).id));
};
const update = (e: EventTarget) => {
console.log((e as HTMLButtonElement).id);
router.push(`/form/firstform/update/${(e as HTMLButtonElement).id}`);
};
return (
<div>
<MyPage main={main} del={del} update={update} />
</div>
);
};
export default MypageContainer;
const del = (e: EventTarget) => {
dispatch(datadel((e as HTMLButtonElement).id));
};
데이터를 주고 받을때 있을지 없을지 정확하지 않는 데이터는 주고 받을수 없는거 같더라고요 그래서 확실한 target속성을 넘겨줘서 그걸로 value를 가져왔습니다. 그리고 인자가 필요한건 바로 onclick에 넣을 수 없는거 같아서 함수로 한번 더 감싸서 실행했습니다. 또한 target의 type을 지정해줘야지 제대로 동작했습니다.
dispatch로 redux함수를 실행하도록 했습니다.
const update = (e: EventTarget) => {
console.log((e as HTMLButtonElement).id);
router.push(`/form/firstform/update/${(e as HTMLButtonElement).id}`);
};
위에랑 똑같은이유로 데이터를 전달했고 router로 해당 update 페이지로 이동하도록 했습니다.
'next+ts' 카테고리의 다른 글
| next+ts Redux reducer(SAGA제외) 전체 코드 둘러보기 (0) | 2022.05.09 |
|---|---|
| next+ts Redux action 전체 코드 둘러보기 (0) | 2022.05.08 |
| next+ts 로그인 페이지 전체 코드 둘러보기(Component+container) (0) | 2022.05.04 |
| next+ts 기본 페이지 전체 코드 둘러보기(Component+container) (0) | 2022.05.04 |
| next+ts 폼선택 페이지 전체 코드 둘러보기(Component+container) (0) | 2022.05.04 |