Archive Page Markup

[Jungjjeong]

[32/feature/archive-page] Archive Page Markup

---

🙋‍ Summary (요약)

1. archive page Markup

• preview
• marble-canvas
• marble-grid

참고

• 임시 appBar 포함
• canvas의 글자 색상, 이미지가 살짝 깨져 보여 추후 크기 변경을 고려중입니다.
• 이미 확인한 구슬 / 확인하지 않은 구슬 리스트 상태값의 경우, 추후 archive page 최상단에서 관리할 예정입니다.
• fab-button 의 addAfterStyle variable
  • text가 삽입되어도 tailwind에서 content값이 인식되지 않는 이슈
  • useMemo 사용하여 isOverflow 값에 따른 리렌더링과 상관 없이 값이 유지되게 변경
  • after 스타일 삽입 순서 조정을 위해 after 가상 선택자 관련 스타일 전부 변수로 묶어 삽입

🤔 Describe your Change (변경사항)

1. priview Page

related Components

• marble-card

related Assets

• marble-bg image
• arrow icon

---

2. marble canvas Page

2024-01-07.6.47.12.1.mov

related Components

• archive-title
• fab-button
• marble-modal

related Assets

• marble 01, 02 images
• marble-detail(-bg) image
• bars icon
• Back icon

---

3. marble Grid page

related Components

• archive-title
• fab-button
• marble-modal
• marble-grid-item
• switch

related Assets

• marble icon
• marble-detail(-bg) image

---

4. Common Components

• Confirm

usage

// === EX) Child Component : Pages

const { confirm } = useContext(ConfirmContext);
const result = await confirm(
  {
    title: "칭찬반응을 삭제할까요?",
    description: "삭제된 칭찬반응은 복구할 수 없어요.",
  },
  {
    text: "삭제",
    // or add another button props
  },
  {
    text: "취소",
    // or add another button props
  },
);

// ...


// === EX) Parent Render Components

import { ConfirmDialog } from "@/components/common/confirm/confirm-dialog";
return (
  <ConfirmDialog>
    {/* Child Render Components */}
    <Pages />
  </ConfirmDialog>
)   

🔗 Issue number and link (참고)

• 칭찬 아카이브 화면 #32

TODO

1. preview page

• Add scroll event + Rendering marble-canvas page

2. marble-canvas page

• Calculate canvas height value
• Add fab-button function

3. marble-grid page

• Add detect document.body scroll value
• Add fab-button function

[klmhyeonwoo]

구슬 아이스크림 폼 미쳤네요,,

[2-NOW]

너무 고생많으셨습니다 !!! 🎉

[2-NOW]

혹시 setIsOpen으로 setState를 직접 주입받기보다는
onBackClick 등 이벤트 발생 시 callback을 주입받아서 back button에 넣어주는건 어떻게 생각하시나요 ?
직접 주입받는 것에 비해서 의존성을 덜어낼 수 있다는 장점이 있을 것 같아서요..!

[2-NOW]

여기 useEffect는 함수로 치환할 수 있을 것 같아요 ..!
여기서 useEffect가 필요하지 않다고 느끼는 이유는, 상태의 파생효과를 일으키기위해 사용되는 useEffect는 지양하는게 좋다고 개인적으로는 생각하고있어서입니다 !
상태가 많고 복잡해질 경우 상태변경으로 인한 부수효과를 디버깅하기가 어려웠던 경험이 있어서
개인적으로는 최대한 handler, 혹은 변경이 trigger 되는 쪽으로 상태변경을 작성해주고있어요 !

const removeDupItem = <T>(arr: T[], item: T) => {
  return Array.from(new Set([...arr, item]));
}

// ...
{
  onSlideChange: ({ realIndex: activeMarbleIdx }: SwiperCore) => {
    if (activeMarbleIdx === -1) return;
    const _id = marbleList[activeMarbleIdx].id;
    const newList = removeDupItem(isViewedMarbleList, _id);
    setIsViewedMarbleList(newList);
  }
}

조금 더 변경하자면 setIsViewedMarbleList 주입도 인터페이스로 끌어올려줄 수 있을 것 같습니다..!

{
// ...props
onIdChange: (updatedId) => void;
}
// ...

{
  onSlideChange: ({ realIndex: activeMarbleIdx }: SwiperCore) => 
    onIdChange(activeMarbleIdx);
}

// 컴포넌트 사용처
<MarbleModal
  onIdChange={(updatedId) => {
    const _id = marbleList[activeMarbleIdx].id;
    const newList = removeDupItem(isViewedMarbleList, _id);
    setIsViewedMarbleList(newList);
  }}
/>

이렇게 하면 MarbleModal에 isViewedMarbleList, setIsViewedMarbleList prop을 주입하지않고 의존성을 덜어낼 수 있을 것 같아요..!

[Jungjjeong]

@2-NOW
요 부분은 description에 적어놨던 것과 같이 archive page 최상단에서 상태를 관리할 생각입니다.
작성해주신 리뷰 참고해서 modal open state와 viewedList 상태 관리를 끌어올려 보도록 할게요
최고의 리뷰어 넘 감사합당 💪🏻

[Chaemin-L]

이것이 코드다 👍
"완벽"

[2-NOW]

conflict 해결하고 병합하면 될것같습니다 ..! @Jungjjeong