[💻 코드스테이츠 FE 44기]pre-project - 10일차

✔️ 시작

질문 작성, 수정 페이지 리팩토링 및 이슈 사항을 해결했다.

---

📍 질문 작성, 수정 페이지

질문 작성, 수정 페이지 quill editor 도입,
리덕스 툴킷으로 리팩토링, 커서가 앞으로 오는 이슈를 해결 했다.

store, reduce등은 미리 세팅되어 있어서

🛠️ quill editor

quill 라이브러리 설치하고
textarea로 작성되어 있던 부분을 변경만 해주면 되서 금방 적용이 되었다.

<EditorContent
  value={'안녕!'}
  theme='bubble'
  readOnly
  />

theme: "bubble"를 넣어주면 상단 툴바가 사라지고
input과 동일하게 readonly 를 넣어주면 작성하지 못하도록 막아준다.

이걸 통해 질문 뷰페이지도 수정하면 좋을 듯 싶다.

🛠️ 리덕스 툴킷으로 리팩토링

//modules/index.js
const store = configureStore({
  reducer: {
    question: questionSlice.reducer,
  }
});

export default store;
.
.
.
//modules/questionSlice.jsx
const initialState = {
  tags: [],
}
const questionSlice = createSlice({
  name: "questionSlice",
  initialState,
typeTags: (state, action) => {
      state.tags = [...state.tags, action.payload];
    },
    updateTags: (state, action) => {
      state.tags = action.payload
    },
    checkPlusTags: (state) => {
      state.checkedCount += 1
    },
    checkMinusTags: (state) => {
      state.checkedCount -= 1
    },
	}
})

export const { updateTags, checkPlusTags, checkMinusTags, typeTags } = questionSlice.actions;
export default questionSlice;

원래는 typeTags만 있었는데 updateTags, checkPlusTags,checkMinusTags 추가해 주었다.

action.payload는 각 함수의 인자로 들어오는 값들이라 생각하면 된다.

//question.jsx
import { typeTags , checkPlusTags, checkMinusTags, updateTags} from '../../modules/questionSlice';

const tags = useSelector((state) => state.question.tags);
const checkCount = useSelector(state => state.question.checkedCount)

const handlerTag = (name, description) => {
    const tagSelected = tags.some((el) => el.tagName === name);

    if (tagSelected) {
      const updatedTags = tags.filter((el) => el.tagName !== name);
      dispatch(updateTags(updatedTags));
      dispatch(checkMinusTags())
    } else {
      const newTag = { tagName: name, tagDescription: description };
      dispatch(typeTags(newTag));
      dispatch(checkPlusTags())
    }
  };

state.question.checkedCount
에서 question는 store에 작성된 question: questionSlice.reducer라 생각하면 된다.

question해당 페이지는
useDispatch, useSelection을 이용해 action.payload로 전달될 값을 인자로 넣어주면 된다.

또한 다른 코드에서도 재사용이 가능해서 값을 하나 더 만들 필요가 없었고
확실히 이전 코드와 비교했을 때 간결해 졌다.

🛠️ 에디터 작성 시 커서가 자꾸 맨 앞으로 이동 하는 문제

글 작성시 커서가 계속 맨 앞으로 이동하는 문제가 있었다.

문제는 title 기본 값이 "" 빈 문자열로 들어가는데 이게 문제가 되었던거 같다.
defaultValue={memTitle || title} 이렇게 조건을줘 수정했다.

또한 value="" 로 넣을 경우 input text 내용을 수정할 수 없었다.
이 부분을 defaultValue="" 으로 줘서 해결 할 수 있었다.

const title = useSelector((state) => state.question.title);
<QInput
  type='text'
  placeholder='제목을 작성해 주세요. (80자 이하)'
  defaultValue={memTitle || title}
  onChange={handleChange}
  />

✔️ 질문 작성

✔️ 질문 수정

---

✔️ Keep

• 제목 창이 원래 회색 배경이였는데 에디터에 맞춰 스타일을 수정했다.
• 문제의 답 검색하면서 알게되면 왜 이런 답이 나왔는지 찾아 보았다.

---

✍️ Problem

• quill 말고 toast로 진행하려고 했으나 버전 문제로 진행하지 못했다.
• 에디터 작성시 맨 앞으로 나오는 문제 해결하는데 시간을 뺐겼다.
• 태그 선택 부분은 API 명세서가 변경되기도 했고 백엔드 측에서 [1,2,3] 배열 안에 숫자로 지정해 주셔서... 아직 진행하지 못하고 있다.

---

🚀 Try

• 질문 뷰페이지도 에디터를 이용해 진행하면 좋을 것 같다 생각했다.
  - dangerouslySetInnerHTML 라는 속성을 이용해도 되지만 보안상 문제가 있다고 한다.
  • 에디터에 readonly 속성을 주면 어떨까 싶다.

---

✏️ 마치며

백엔드 측과의 소통이 원활하지 않아
태그 영역에 이슈가 있는거 같다.

또한 OAuth 부분도 아직 구현 중이라고 하셔서
로그인 페이지, 로그인 될 경우 다른 곳도 전면 수정이 필요한 상황이다.

현재 3~4일 정도 남은 상황인데
배포 기간을 제외하면 2일 정도 남았다.

과연... 잘 할 수 있을지 걱정이 된다.