[TIL] 2022월 01월 19일

이번 시간에는 게시판을 수정하는 수정페이지를 구현하는 방법을 배웠다.

import React from 'react';
import BoardWrite from '../../../../src/components/units/board/08-write/BoardWrite.container';


export default function BoardsEditPage() {
    
    return <BoardWrite isEdit={true}/>
}

먼저 BoardWrite 컴포넌트에 props 마다 기본 List페이지에서는 수동 버튼이 보이고 삭제페이지에서는 삭제페이지 

가 보일 수있도먼 처음 페이지에는 isEdit라는 수정페이지에 props 값을 잡아준다.

import axios from 'axios';
import { useState } from 'react';
import { useMutation } from '@apollo/client';
import BoardWriteUI from './BoardWrite.presenter';
import { CREATE_BOARD, UPDATE_BOARD } from './BoardWrite.queries';
import { useRouter } from 'next/router';

export default function BoardWrite() {
    const router = useRouter();
    const [isActive, setIsActive] = useState(false);

    const [myWriter, setMyWriter] = useState('');
    const [myTitle, setMyTitle] = useState('');
    const [myContents, setMyContents] = useState('');

    const [aaa, setAaa] = useState('');
    const [qqq] = useMutation(CREATE_BOARD);
    const [www] = useMutation(UPDATE_BOARD);

    const zzz = async () => {
        // const result = await axios.get("https://koreanjson.com/posts/1")
        const result = await qqq({
            variables: { writer: myWriter, title: myTitle, contents: myContents },
        });
        console.log(result.data);

        console.log(result.data.createBoard.message);
        setAaa(result.data.createBoard.message);

        router.push(`/08-05-boards/${result.data.createBoard.number}`);
    };

    const xxx = async () => {
        console.log('수정하기 클릭');

        const result = await www({
            // 몇번째 글 수정
            variables: {
                number: Number(router.query.mynumber),
                writer: myWriter,
                title: myTitle,
                contents: myContents,
            },
        });
        console.log(result.data.updateBoard.message);

        router.push(`/08-05-boards/${router.query.mynumber}`);
    };

    const onChangeMyWriter = event => {
        setMyWriter(event.target.value);
        if (event.target.value && myTitle && myContents) {
            setIsActive(true);
        }
    };

    const onChangeMyTitle = event => {
        setMyTitle(event.target.value);
        if (myWriter && event.target.value && myContents) {
            setIsActive(true);
        }
    };

    const onChangeMyContents = event => {
        setMyContents(event.target.value);
        if (myWriter && myTitle && event.target.value) {
            setIsActive(true);
        }
    };

    return (
        <BoardWriteUI
            bbb={aaa}
            ccc={zzz}
            xxx={xxx}
            ddd={onChangeMyWriter}
            eee={onChangeMyTitle}
            fff={onChangeMyContents}
            isActive={isActive}
        />
    );
}

수정하기를 구현할 async 와 삭제구현을 위한 async를 나눈뒤 BordWriteUI에게 props를 주었다. 수정하기와 삭제가 

완료된 즉시 router.push를 사용해 createboard의 삭제후 이전 게시판 글로 이동. 수정이 완료된 후에는 

 

router.push를 이용해 수정을 적용한 페이지로 이동하도록 router 값을 잡아주었다!!.

 

 

export default function BoardWriteUI(props) {
    return (
        <>
            <h1>{!props.isEdit ? '수정하기' : '등록하기'} </h1>
            작성자: <input type="text" onChange={props.ddd} />
            <br />
            제목: <input type="text" onChange={props.eee} />
            <br />
            내용: <input type="text" onChange={props.fff} />
            <br />
            <input onClick={props.ccc} ggg={props.isActive}></input>
            <button onClick={props.isEdit ? props.xxx : props.ccc} ggg={props.isActive}>
                {props.isEdit ? '수정하기' : '등록하기'}
            </button>
            {/* {props.isEdit ? (
                <button onCLick={props.xxx} ggg={props.isActive}>
                    수정하기
                </button>
            ) : (
                <button onCLick={props.ccc} ggg={props.isActive}>
                    등록하기
                </button>
            )}
            {props.isEdit && (
                <button onCLick={props.xxx} ggg={props.isActive}>
                    수정하기
                </button>
            )}
            {!props.isEdit && (
                <button onCLick={props.ccc} ggg={props.isActive}>
                    등록하기
                </button>
            )} */}
            <div>{props.bbb}</div>
        </>
    );
}

UI부분에는 props마다 수정하기버튼과 등록하기 번튼이 정환 될 수 있도록 props값을 잡아주었다.

   <button onClick={props.isEdit ? props.xxx : props.ccc} ggg={props.isActive}>
                {props.isEdit ? '수정하기' : '등록하기'}
   </button>

isEdit 라는 onChange 변수에 props값에 함수를 적용하고 props에 게시판 메인 페이지에서 보여질 수정하기 버튼과 

상세페이지에 수정 페이지에서 등록하기 버튼이 보일 수 있도록 true와 false 상태로 props를 지정해주었다.

---

import * as S from './BoardDetail.styles'
import { getMyDate } from '../commons/lib/utils.js';


export default function BoardDetailUI(props){
    return (
        <S.Wrapper>
            <S.CardWrapper>
                <S.Header>
                <S.AvatarWrapper>
                    <S.Avatar src="/images/avatar.png" />
                    <S.Info>
                    <S.Writer>{props.data?.fetchBoard?.writer}</S.Writer>
                    <S.CreatedAt>{getMyDate(props.data?.fetchBoard?.createdAt)}</S.CreatedAt>
                    </S.Info>
                </S.AvatarWrapper>
                <S.IconWrapper>
                    <S.LinkIcon src="/images/board/detail/link.png" />
                </S.IconWrapper>
                </S.Header>
                <S.Body>
                <S.Title>{props.data?.fetchBoard?.title}</S.Title>
                <S.Contents>{props.data?.fetchBoard?.contents}</S.Contents>
                </S.Body>
            </S.CardWrapper>
            <S.BottomWrapper>
                <S.Button>목록으로</S.Button>
                <S.Button>수정하기</S.Button>
                <S.Button>삭제하기</S.Button>
            </S.BottomWrapper>
        </S.Wrapper>
    )
}

게시판의 목록페이지이다. 게시판에서 props로 상태값을 주었는데 이곳에서 가장 중요하게 보아야 할곳은 날짜이다.

 

 

기존의 fetchBoard의 createAt를 불러오면 뒤에까지 값이 딸려나오는 현상이 발생한다. 이것은 GraphQL에서 게시판을 생성할때 생성한 날짜를 구분하기 위해서 만들어진 함수인 것 같다. 이것은 간단하게 slice로 짤라줄 수 있지만 

 

메인페이지에서 상세페이지로 생성된 날짜값을 가져오기 때문에 공통 변수로 만들어주어야한다.

export const getMyDate = myDate => {
    const aaa = new Date(myDate);
    const y = aaa.getFullYear();
    const m = aaa.getMonth() + 1;
    const d = aaa.getDate();
    const t = aaa.getTime();

    return `${y}-${m}-${d}`;
};

getMyDate라는 변수를 선언할 공통 파일을 만들어준뒤 export로 내보내준다.

 

    const aaa = new Date(myDate);

하나하나 씩 설명하자면 Javascript에서는 날짜 함수인 new Date라는 것이 있는데 이곳에 생성된 날짜를 myDate에 담아주면 된다.

함수	반환값
getFullYear()	YYYY
getMonth()	MM
getDay()	DD
getHours()	HH
getMinutes()	MM
getSeconds()	SS
getMiliseconds()	mmm

날짜 함수들로는 반환되는 함수들이 여러가지가 있다 제일 중요한 부분은 년 월 일 시간으로 설정해야하니

 

getFullYear 과 getMonth, getDay, getHours, getMinutes까지 선언해주면 된다.

import * as S from './BoardDetail.styles'
import getMyDate from '../commons/lib/utils'

export default function BoardDetailUI(props){
    return (
        <S.Wrapper>
            <S.CardWrapper>
                <S.Header>
                <S.AvatarWrapper>
                    <S.Avatar src="/images/avatar.png" />
                    <S.Info>
                    <S.Writer>{props.data?.fetchBoard?.writer}</S.Writer>
                    <S.CreatedAt>{getMyDate(props.data?.fetchBoard?.createdAt)}</S.CreatedAt>
                    </S.Info>
                </S.AvatarWrapper>
                <S.IconWrapper>
                    <S.LinkIcon src="/images/board/detail/link.png" />
                </S.IconWrapper>
                </S.Header>
                <S.Body>
                <S.Title>{props.data?.fetchBoard?.title}</S.Title>
                <S.Contents>{props.data?.fetchBoard?.contents}</S.Contents>
                </S.Body>
            </S.CardWrapper>
            <S.BottomWrapper>
                <S.Button>목록으로</S.Button>
                <S.Button>수정하기</S.Button>
                <S.Button>삭제하기</S.Button>
            </S.BottomWrapper>
        </S.Wrapper>
    )
}

그러면 설정된 시간을 불러와주기 위해 getMyDate에 createAt변수를 담겨주면 된다