✨feat: 상세페이지 UI 변경 및 댓글 기능 구현

[rkdcodus]

✅ 체크리스트

• [x] 상세페이지 UI 변경
• [x] 댓글 기능 구현
• [x] semantic.ts inverse 색상 추가

📝 작업 상세 내용

1️⃣ 상세 페이지 UI 변경

상세페이지 UI가 변경되었습니다. TYPO.body가 사용된 일기 상세 내용, 모달 내용, 댓글 내용은 아직 KoPubWorldDotum_Pro 폰트로 적용되어있습니다.

상세페이지

모달 이미지

모달을 컴포넌트로 분리했습니다.

const Modal = ({ setClose, title, content, children }: ModalProps) => {
  return (
    <Background>
      <ModalContainer>
        <TopSection>
          <Title>{title}</Title>
          <CloseBtn onClick={setClose} />
        </TopSection>
        <Content>{content}</Content>
        <Divider />
        <BottomSection>{children}</BottomSection>
      </ModalContainer>
    </Background>
  );
};

모달의 title, content, x 아이콘을 통해 모달을 닫을 함수를 지정합니다. children은 모달의 버튼을 받습니다. 버튼은 기본 확인 버튼과 커스텀 버튼을 만들어두었습니다.

// 확인 버튼 

const CheckButton = ({ onClick }: CheckButtonProps) => {
  return (
    <ButtonWrapper>
      <Interaction4 onClick={onClick} topRadius={12} bottomRadius={12} />
      <CheckBtn>확인</CheckBtn>
    </ButtonWrapper>
  );
};

// 커스텀 버튼 

const CustomButton = ({ onClick, text, color }: CustomButtonProps) => {
  return (
    <ButtonWrapper>
      <Interaction1 onClick={onClick} topRadius={12} bottomRadius={12} />
      <CustomBtn $color={color}>{text}</CustomBtn>
    </ButtonWrapper>
  );
};

만든 컴포넌트는 아래 방식처럼 사용하였습니다.

 <Modal
        setClose={closeModal}
        title="일기 삭제 안내"
        content={'일기를 삭제하시겠어요?\n삭제된 일기는 다시 되돌릴 수 없어요.'}
     >
        <CustomButton onClick={closeModal} text={'취소'} />
        <CustomButton
          onClick={handleDelete}
          text={'삭제하기'}
          color={semantic.light.feedback.solid.negative}
        />
</Modal>

삭제 완료 토스트 알림

기존 삭제 완료 알림이 모달 -> 토스트로 변경되었습니다. 삭제가 성공적으로 이루어졌을 때에만 토스트 알림이 뜨도록 되어 있습니다. 토스트 알림 상태 관리는 zustand를 활용했습니다.

const useToastStore = create<ToastState>(set => ({
  text: 'test',
  active: false,
  setText: text => set({ text }),
  setActive: () => set(state => ({ active: !state.active })),
}));

export const useToastText = () => useToastStore(state => state.text);
export const useToastActive = () => useToastStore(state => state.active);
export const useToastSetText = () => useToastStore(state => state.setText);
export const useToastSetActive = () => useToastStore(state => state.setActive);

useToastStore은 토스트에 들어갈 내용 상태 text와 텍스트를 변경할 수 있는 setText, 활성화 상태 active와 활성화 상태를 변경할 수 있는 setActive를 가지고 있습니다

export const useToast = () => {
  const setText = useToastSetText();
  const setActive = useToastSetActive();

  const toast = (text: string) => {
    setText(text);
    setActive();

    setTimeout(() => {
      setActive();
    }, 5000);
  };

  return { toast };
};

useToast 훅을 사용하여 토스트 알림을 사용할 수 있습니다. useToast 훅 내부에 있는 toast 함수는 인수로 토스트 알림 문구를 받아 토스트 알림의 text 상태를 변경하고 5초간 active: true 상태를 유지합니다. 5초 동안 변경한 문구를 가진 Toast 컴포넌트가 하단에 나타납니다.

이미지 모달

Footer

NavBar 컴포넌트 폴더 내 Footer 컴포넌트를 분리해두었습니다.

2️⃣ 댓글 기능 구현

댓글 및 대댓글 작성/수정/삭제 기능을 구현했습니다. 댓글 수는 아직 제대로 구현되지 않았습니다. 이 부분 데이터는 백에서 작업 완료되는대로 작업하겠습니다! 댓글 관련 컴포넌트들은 component/comment 폴더로 분리했고 get/post/patch/delete api는 훅 생성하여 hooks/api/comment 폴더로 분리했습니다.

3️⃣ inverse 색상 추가

semantic 상수객체에 inverse 색상을 추가했습니다.

// light

inverse: {
      solid: {
        accent: '#00A66E' as HexColor,
        negative: '#F17961' as HexColor,
        hero: '#ffffff' as HexColor,
        normal: '#E2E2E2' as HexColor,
        bg: '#2B2B2B' as HexColor,
      },
    },

// dark

inverse: {
      solid: {
        accent: '#00895A' as HexColor,
        negative: '#D93526' as HexColor,
        hero: '#262626' as HexColor,
        normal: '#3B3B3B' as HexColor,
        bg: '#ffffff' as HexColor,
      },
    },

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

1. ~px -> rem 작업이 필요합니다.~ (완료)
2. 현재 상세페이지 인터렉션 작업이 되어있지 않습니다. (모달엔 적용되어있음) 전에 만들어두었던 Interaction/ButtonWrap 컴포넌트가 인터렉션 작업으로 적합하지 않다고 판단되어 새로운 방법을 찾아봐야할 것 같습니다😢 TYPO 처럼 상수로 만들어 사용하면 어떨까 싶어 한번 시도해보겠습니다.
3. Header, Footer, Toast 컴포넌트를 고정영역으로 분리하는 작업이 필요합니다. ( ex, Layout 컴포넌트 )
4. 폰트 설정 수정이 필요합니다.

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

React Query에서 mutation 이후 데이터를 업데이트하는 4가지 방법

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

• [x] 브랜치 확인하기
• [x] 불필요한 코드가 들어가지 않았는지 재확인하기
• [x] issue 닫기
• [x] reiewers, assignees, Lables 등록 확인하기

이슈 번호: Close #172 Close #131

[rkdcodus]

px -> rem 변경 및 메시지 상수 분리, 수정사항 등 수정 완료 했습니다! 😊

[KKYHH]

styled-components에서 props 활용을 잘 하시는 거 같습니다 몰랐던 부분인데 저도 참고하겠습니다!