💛카부커넥션💛 : peopleDetail 페이지 + zustand

드뎌 사원증받음

주리언니 봐줘용~~

끝나고 네트워킹 갔다

2차는 UCPC 사람들 약속으로 빠졌다가

우경오빠가 정말 무슨 말만 하면 부회장 한다고? 되물어서 감동받았다

도파민 놓침

이걸못갔네...근데 UCPC사람들만난거재밌었다 노후회

---

🌟peopleList 페이지 틀 잡기

Common 컴포넌트 파일에 box 컴포넌트 추가!

너비높이를 props로 조절해서 쓸 수 있다~

기본 정보 헤더?를 구성한다.

가로정렬 세로정렬 왼쪽정렬 오른쪽정렬

몇겹씩싸여있다...

힘들었다...

{?:} 이용해서 내 페이지에는 로그아웃 버튼, 

Common 컴포넌트 파일에 line 컴포넌트 추가!

길이를 props로 조절해서 쓸 수 있다~

---

🌟peopleList 페이지 마크다운 + zustand

 

마크다운을 HTML로 변환하기 위해서는 마크다운 파서 라이브러리가 필요!!

react-markdown, marked, remarkable 등의 라이브러리

npm install react-markdown

 

import ReactMarkdown from 'react-markdown';

export const StyledMarkdown = styled(ReactMarkdown)`
    font-family: KakaoRegular;
    font-size: 17px;
    line-height: 1.6;
`;

이렇게 스타일에서 이모션으로 사용했다

이렇게도 할 수 있구나

---

🌟 zustand

<마크다운 편집기의 상태를 관리하는 상태 저장소>

stores 파일에 저장!

import { create } from 'zustand';

const useMarkDownStore = create(set => ({
  content: '### **자기소개** 부탁드려요! \n 블로그, 깃허브 링크 첨부 등 마크다운 문법을 이용하여 자유롭게!',
  editMode: false,
  setContent: newContent => set({ content: newContent }),
  setEditMode: newEditMode => set({ editMode: newEditMode })
}));

export default useMarkDownStore;

 

• content: 마크다운 편집기의 현재 내용을 저장
• editMode: 사용자가 편집 모드에 있는지 여부를 표시
• setContent: 새로운 내용으로 content를 업데이트하는 함수
• setEditMode: 편집 모드의 활성화/비활성화를 제어하는 함수

<컴포넌트에서의 사용>

function MarkdownEditor() {
  const { content, editMode, setContent, setEditMode } = useMarkDownStore();
  const [tempContent, setTempContent] = React.useState(content);

  const handleEdit = () => setEditMode(true);
  const handleSave = () => {
    setContent(tempContent);
    setEditMode(false);
  };

  return (
    // JSX 코드
  );
}

 

useMarkDownStore 훅을 사용하여 상태를 읽고, 

setContent 및 setEditMode 함수를 통해 상태를 업데이트

 

상태 관리가 컴포넌트 로직과 분리되어 있어 유지관리와 테스트가 용이함!!!

---

---

 

🌟docker

세호오빠가 세팅한 도커파일을 들여다본다

실행해보자.

..

내일 해보자

---

 

 

 

대단한녀석...원근법은 틀렸지만

내 모니터가 뭔지 알았다!

주모니터는 LG 32un550  서브모니터는 LG 29wq500다