-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat: Tutorial 및 Block Tab Menu #33
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
반응형 디자인, 튜토리얼도 멋지게 추가해주시고
액션별로 블록을 확인할 수 있는 탭 메뉴를 만들어주신 덕분에
UI가 크게 개선되었네요 고생하셨습니다! 😊
src/components/BlockContainer.jsx
Outdated
inputBlocks: inputBlocks.filter((block) => | ||
block.actions.includes(action), | ||
), | ||
|
||
methodBlocks: methodBlocks.filter((block) => | ||
block.actions.includes(action), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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),
};
};
이렇게 바꿔본다면 코드의 효율성과 가독성도 훨씬 좋아질 것 같아요! 😊
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
용섭님 의견대로 중복을 줄여주니 가독성이 좋아진 것 같습니다.
해당 의견 반영하여 수정 작업 진행하겠습니다!
src/components/BlockContainer.jsx
Outdated
blocks.inputBlocks.forEach((block) => | ||
block.actions.forEach((action) => allActions.add(action)), | ||
); | ||
blocks.methodBlocks.forEach((block) => | ||
block.actions.forEach((action) => allActions.add(action)), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 코드도 함수를 추가해 중복을 줄일 수 있을 것 같아요!
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
함수를 호출하면
코드의 중복을 줄이고 유지 보수성을 높일 수 있을 것 같아요! 😊👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
용섭님 좋은 의견 감사합니다.
가독성을 높일 수 있도록 수정 작업 진행하겠습니다!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
케이스별로 자주 사용될 것 같은 블록들을 카테고리화 하고, 튜토리얼을 추가함으로써 사용자 경험이 크게 향상된 것 같습니다! 고생하셨습니다~!
const renderBlocks = async () => { | ||
try { | ||
const blocks = await fetchBlocks(); | ||
|
||
setInputBlocks(blocks.inputBlocks); | ||
setMethodBlocks(blocks.methodBlocks); | ||
|
||
const allActions = new Set(["All"]); | ||
|
||
const updateAction = (allBlocks) => { | ||
allBlocks.forEach((block) => | ||
block.actions.forEach((action) => allActions.add(action)), | ||
); | ||
}; | ||
|
||
[blocks.inputBlocks, blocks.methodBlocks].forEach(updateAction); | ||
|
||
setActions([...allActions]); | ||
} catch (error) { | ||
console.error("Fetch Error"); | ||
} | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
코드의 가독성과 함수 재사용성을 고려했을 때 useEffect 외부로 분리해주는 것도 좋을 것 같아요! 물론, 아직은 다른 곳에서 renderBlocks가 사용되고있지는 않지만, 별도로 분리한다면 코드의 가독성이 향상될 것 같아요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
감사합니다. 기연님 의견 반영하여 전체적인 로직을 리팩토링할 때, useEffect를 외부로 분리하는 작업을 이슈로 생성하여 추후에 한 번에 진행하겠습니다! #36
제목
Block Tab 메뉴
내용
Action별로 활용할 수 있는 블록들을 보여주도록 Tab 메뉴를 만들었습니다.
2024-08-24.4.41.29.mov
default.mov
항목
주의 사항
PR 전 체크리스트