Feat: Tutorial 및 Block Tab Menu

[whoisrey]

제목

Block Tab 메뉴

내용

Action별로 활용할 수 있는 블록들을 보여주도록 Tab 메뉴를 만들었습니다.

2024-08-24.4.41.29.mov

default.mov

항목

• 페이지 진입 화면에서 튜토리얼 실행 추가
• Action별로 블록을 확인할 수 있는 Tab Menu 추가
• 반응형 디자인 추가

주의 사항

• PR 크기는 300~500줄로 하되 최대 1000줄 미만으로 합니다.
• conflict를 모두 해결하고 PR을 올려주세요

PR 전 체크리스트

• 가장 최신 브랜치를 pull 하였습니다
• base 브랜치명을 확인하였습니다
• 코드 컨벤션을 모두 확인하였습니다
• 셀프 리뷰를 진행하였습니다.
• 브랜치명을 확인하였습니다.
• 작업 중 dependency 변경사항이 있는 경우 안내해주세요!

[choiOV]

반응형 디자인, 튜토리얼도 멋지게 추가해주시고
액션별로 블록을 확인할 수 있는 탭 메뉴를 만들어주신 덕분에
UI가 크게 개선되었네요 고생하셨습니다! 😊

[choiOV]

inputBlocks와 methodBlocks를 filter하는 로직이 유사하기 때문에
하나의 함수로 분리해 중복을 줄일 수 있을 것 같아요!

const filterBlocksByAction = (blocks, action) => {
  return blocks.filter((block) => block.actions.includes(action));
};

const filterBlocks = (action) => {
  if (action === "All") {
    return { inputBlocks, methodBlocks };
  }

  return {
    inputBlocks: filterBlocksByAction(inputBlocks, action),
    methodBlocks: filterBlocksByAction(methodBlocks, action),
  };
};

이렇게 바꿔본다면 코드의 효율성과 가독성도 훨씬 좋아질 것 같아요! 😊

[whoisrey]

용섭님 의견대로 중복을 줄여주니 가독성이 좋아진 것 같습니다.
해당 의견 반영하여 수정 작업 진행하겠습니다!

[choiOV]

이 코드도 함수를 추가해 중복을 줄일 수 있을 것 같아요!

useEffect(() => {
  const renderBlocks = async () => {
    try {
      const blocks = await fetchBlocks();
      setInputBlocks(blocks.inputBlocks);
      setMethodBlocks(blocks.methodBlocks);

      const allActions = new Set(["All"]);

      const addActionsFromBlocks = (allBlocks) => {
        allBlocks.forEach(block => block.actions.forEach(action => allActions.add(action)));
      };

      [blocks.inputBlocks, blocks.methodBlocks].forEach(addActionsFromBlocks);

      setActions([...allActions]);
    } catch (error) {
      console.error("Fetch Error");
    }
  };
  renderBlocks();
}, []);

함수 addActionsFromBlocks의 인수로 allBlocks를 받아
각 블록의 액션을 allActions Set에 추가하면
inputBlocks와 methodBlocks를 처리하는 중복 로직을 한 곳에서 관리할 수 있을 것 같아요!

그리고 배열 [blocks.inputBlocks, blocks.methodBlocks] 을 생성하고
각 요소에 대해 addActionsFromBlocks 함수를 호출하면
코드의 중복을 줄이고 유지 보수성을 높일 수 있을 것 같아요! 😊👍

[whoisrey]

용섭님 좋은 의견 감사합니다.
가독성을 높일 수 있도록 수정 작업 진행하겠습니다!

[noeyigg]

케이스별로 자주 사용될 것 같은 블록들을 카테고리화 하고, 튜토리얼을 추가함으로써 사용자 경험이 크게 향상된 것 같습니다! 고생하셨습니다~!

[noeyigg]

코드의 가독성과 함수 재사용성을 고려했을 때 useEffect 외부로 분리해주는 것도 좋을 것 같아요! 물론, 아직은 다른 곳에서 renderBlocks가 사용되고있지는 않지만, 별도로 분리한다면 코드의 가독성이 향상될 것 같아요!

[whoisrey]

감사합니다. 기연님 의견 반영하여 전체적인 로직을 리팩토링할 때, useEffect를 외부로 분리하는 작업을 이슈로 생성하여 추후에 한 번에 진행하겠습니다! #36