[ 진행 작업 ]

• Header 생성
• sidebar 생성
• section 생성

[ 문제 사항 ]

• admin 페이지이에 기존의 컴포넌트를 재사용하고 싶었습니다.

const Container = styled.div`
  width: 100px;
  height: 100px;
  background-color: pink;
`;

const AdminContainer = styled(Container)`
  grid-area: header;
  width: 100%;
  height: 100%;
  padding: 1vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(172, 209, 251);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
`;

하지만 hearder style의 몸집이 커진다는 것을 알게 되었습니다. 추후 분리를 할지에 대한 논의가 필요할 거 같습니다.

• css 작업이 많은 시간을 잡아먹은거 같습니다. 처음에는 사이드바에 애니메이션을 넣어서 구현하였지만, 버튼을 통한 메뉴 선택을 버리고, 한 눈에 볼 수 있게 변경하였습니다.
• 반응형으로 구현하고자, grid를 사용하였고, 폰트에도 media를 통한 제어보다는 vmin을 사용하여 적용해보았습니다.
• admin templete 안의 admin logo는 추후 분리해야 할거 같습니다.
• 페이지의 카테고리를 배열(ADMIN_CATEGORY)로 상수화 한 부분에 대한 다른 분들의 생각이 궁금합니다.
• section의 AdminInputProps도 추후 상수타입으로 처리해야 할거 같습니다.

추후 page number를 표기하는 부분을 추가할 생각입니다.

[ 해결 방법 ]

atomic 답게 templete을 잘 사용하는 방법이 아직 익숙하지 않은 거 같습니다. atomic을 잘 적용한 프로젝트를 찾아보니, templete에는 데이터만 제공하여 페이지에 그린다는 부분을 이해하여, 구현하고자 했는데, 로고와 검색 버튼의 사진을 temple단에서 넣는 부분이 효율적이지 않다고 생각하여, atom에서 컴포넌트화하여 구현하였습니다.

⚠️ templete의 사용은 https://github.com/sendbird/quickstart-calls-reactjs 를 참고하였습니다.

[ 진행 작업 ]

• 공지사항 게시판, 자유게시판 구현

[ 문제 사항 ]

• 공지사항게시판을 최대한 로그인 후 메인페이지의 컴포넌트를 재사용하고싶었다.
• 공지사항게시판으로 자유게시판도 만들고 싶었다.

[ 해결 방법 ]

• 공지사항 => 자유게시판은 매우쉬웠다. ( 내 코드를 재사용해서 그런가? )
• 메인 => 공지사항은 은근 어려웠다. ( 한솔이 코드를 내가 재사용 )

추가로, 공지사항 및 자유게시판에서 글 목록 넘어가는 방법 js로 직접 구현하였다. 추가로, recoil select Family사용할때 get에서 에러가난다... 모든 비즈니스 로직을 리코일로 빼고싶다.

[ Feat ]

Admin Page

Calendar Reservation : Accept and Deny Click => Recoil Refresh Study and Project : User Register Accept and Deny => Recoil Refresh

Fn => currying

const  refreshFn = 
    (refresh : () => void) => 
    async ( fn : () => Promise<any> ) => 
    {
        const res = await fn();
        res ? refresh() : null
    }

두잇 로그인 에러

사용자들이 로그인에 실패를 하고, 다시 로그인을 진행할떄 network ReqHeader이슈 가 발생하였습니다.

기존 코드는 아래와 같았으며, 로그인이 진행되지 않았다는 것은, token정보가 없다는 것과 동일합니다. 하지만, GET_HEADER_TOKEN함수를 사용하여 token정보를 요청하여 request header에 넣어주고 있었습니다.

export const postLoginInfo = async (body: LoginInfoType) => {
  const { data } = await axios.post(POST_LOGIN_INFO, body, GET_HEADER_TOKEN());
  return data;
};

위의 코드를, 아래와 같이 변경하여 로그인 api에 대해서 더 이상 request header에 넣어주지 않았고, 문제를 해결하였습니다.

export const postLoginInfo = async (body: LoginInfoType) => {
  const { data } = await axios.post(POST_LOGIN_INFO, body);
  return data;
};

좀 더 근본적인 문제는 request 헤더에 어떤 데이터가 들어가서 에러가 발생했는지 알아내는 것이 이번 이슈 작성의 요점이라 생각합니다.

저녁에 추가하겠습니다