next+ts14차 del+mypage

유튜브:https://www.youtube.com/watch?v=dDPPBFPUWfY 
깃허브: https://github.com/qjawns0222/caremaker/tree/next+ts14%EC%9D%BC%EC%B0%A8 

오늘은 axios 공부 하고 삭제 버튼과 마이페이지 버튼에 데이터 넣어줬습니다.

container부분

component부분

import { NextPage } from "next";

import Link from "next/link";

import { MouseEventHandler } from "react";

import { CounterState } from "../store/types/state";

import { da } from "../type";

const MyPage = ({

  main,

  del,

}: {

  main: CounterState;

  del: (e: EventTarget) => void;

}) => {

  const Delete = (e: React.MouseEvent<HTMLButtonElement>) => {

    del(e.target);

  };

  return (

    <div className="section">

      <div className="welcome">

        <div className="nick">아이디 </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>수정</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;

다른건 저번에 다했는데 삭제 버튼 누를시 해당요소의 idx를 전송해주는거에 애먹었어요 id로 넣어서 저장을 했는데 자꾸 넘겨주고 받을때 타입 에러가 나서 찾아봤어요.

 

일단 인자는 마우스 이벤트의 button 요소로 넣어줬어요.그런데 e.targe.id하니까 id가 없다고 오류가 뜨더라고요 여러가지 해보다가 e.target까지만 넘겨주고 type을 EventTarge으로 해주고 전달했습니다.

글런데 전달받아서 e.id하는데 똑 안된다고 하길래 <>이거해서 캐스팅해줬더니 오류가 나서 또 as로이용해서 타입캐스팅 해주니까 해결이 되었습니다.

 

redux 부분에서는 map으로 걸려주고  state.data에 저장해서 그 state를 넣어주는 방식으로 했습니다.

내일은 usecallback Saga useEffect 조금 공부해보고 로그인 기능 한번 해보겟습니다.