한 일
게시글등록 페이지 오류수정
수정하기 데이터 값을 가져오는 작업을 위해 이것저것 시도해보다 css에 (음식 메뉴를 선택하는 태그가 세로로 정렬되는)문제가 생겨 수정했다.
쪽지함
쪽지함, 쪽지 디테일 페이지에서는 gnb, footer가 보이지 않도록 하는 작업을 했다.
공통 컴포넌트인 layout에서 예외 목록을 작성하였다.
[messageInfoId]는 쪽지 디테일 페이지에 접근하기 위한 router ID이다.
const NO_HEADER_LIST = [
"/message/received/[messageInfoId]",
"/message/send/[messageInfoId]",
"/message/received",
"/message/send",
"/message",
"/message/write",
"/login",
"/signup",
];
const NP_FOOTER_LIST = [
"/message/received/[messageInfoId]",
"/message/send/[messageInfoId]",
"/message/received",
"/message",
"/message/send",
"/message/write",
];router.pathname 을 사용했다.
만약 router.asPath를 사용하고 싶다면 list의 값들 맨 뒤에 /을 전부 추가해주어야 한다.
const noHeader = NO_HEADER_LIST.includes(router.pathname);
const noFooter = NP_FOOTER_LIST.includes(router.pathname);그리고 이런식으로 마무리했다.
<Wrapper>
{!noHeader && <LayoutHeader />}
{isMainPage && <LayoutBanner />}
<Body>{props.children}</Body>
{!noFooter && <LayoutFooter />}
</Wrapper>게시글 수정 tag 기존 값 불러오기
수정할 때 기존 값을 가져오는 것은 큰 문제가 없었는데 선택된 모습을 보여주는 것에서 문제가 있었다.
useEffect(() => {
const defaultMoodList = [];
if (props.updateData) {
// 음식분류
for (let i = 0; i < menuTagData.length; i++) {
if (
menuTagData[i].value ===
props.updateData?.boardSides[0]?.boardTags.boardTagName
) {
menuTagData[i].checked = true;
}
}
setBoardTagMenu(props.updateData?.boardSides[0]?.boardTags.boardTagName);
// 분위기
for (let i = 2; i < props.updateData.boardSides.length; i++) {
if (
props.updateData.boardSides[i].boardTags.boardTagRefName === "MOOD"
) {
defaultMoodList.push(
props.updateData?.boardSides[i].boardTags.boardTagName
);
}
}
for (let i = 0; i < moodTagData.length; i++) {
if (defaultMoodList.includes(moodTagData[i].value)) {
moodTagData[i].checked = true;
}
}
setMoodHashTag(defaultMoodList);
}
}, [props.updateData]);그래서 useEffect로 updateData에서 받아온 값과 일치하는 태그의 checked를 true로 바꿔주도록 설정했다.
이 방법으로 메뉴 종류는 잘 선택되는데.. 분위기 값도 checked 되어있는 상태이지만 css 적용이 되지 않아 이유와 방법을 생각해봐야 할 것 같다.
게시글 수정 contents 기존 값 불러오기
contents 기존 값이 있어도 수정하기 페이지에 진입하면 새로 작성하기 페이지의 initialValue값만 뜨고 rerender가 일어나야 보이는 문제가 있었다.
<>java script
<Editor
hooks={{
addImageBlobHook: onUploadImage,
}}
toolbarItems={[
["heading", "bold", "italic", "strike"],
["hr", "quote"],
["ul", "ol"],
["table", "image", "link"],
]}
initialEditType="wysiwyg"
previewStyle="tab"
plugins={[colorSyntax]}
onChange={onChangeContents}
initialValue={props.updateData?.boardContents ||"사진을 드래그&드롭 해보세요."}
ref={editorRef}
/>
</>updateData의 내용을 받아오기 전에 페이지가 출력이 되면서 생기는 문제같았다.
여러가지 방법을 고민, 검색하다 방법을 찾았다.
editor 파일을 하나 더 만들어 하나는 write용, 하나는 edit용으로 이용했다.
뭔가 더 좋은 방법이 있을 것 같다.
//edit용
<>
{props.updateData&&<Editor
hooks={{
addImageBlobHook: onUploadImage,
}}
toolbarItems={[
["heading", "bold", "italic", "strike"],
["hr", "quote"],
["ul", "ol"],
["table", "image", "link"],
]}
initialEditType="wysiwyg"
previewStyle="tab"
plugins={[colorSyntax]}
initialValue={props.updateData?.boardContents}
ref={props.editorRef}
/>}
</>edit 버전에서는 updateData가 있을 때 만 보여주는 && 연산자를 사용했고 initialValue로 기존 contents 정보를 주었다.
//write용
<>
<Editor
hooks={{
addImageBlobHook: onUploadImage,
}}
toolbarItems={[
["heading", "bold", "italic", "strike"],
["hr", "quote"],
["ul", "ol"],
["table", "image", "link"],
]}
initialEditType="wysiwyg"
previewStyle="tab"
plugins={[colorSyntax]}
ref={props.editorRef}
/>
</>반응형 css작업
게시글 목록 페이지의 모바일버전(width 360px) css작업을 일부 진행했다.
할 일
css작업 마무리, 분위기 태그 css도 뜨는 방법 찾아보기, contents 기존 값 불러오는 다른 방법 고민하기
