Skip to content
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

Head Node UI 구현 #85

Merged
merged 6 commits into from
Nov 11, 2024
Merged

Head Node UI 구현 #85

merged 6 commits into from
Nov 11, 2024

Conversation

hoqn
Copy link
Collaborator

@hoqn hoqn commented Nov 8, 2024

(rebase해서 올렸습니다)

✏️ 한 줄 설명

이 PR의 주요 변경 사항이나 구현된 내용을 간략히 설명해 주세요.

Space 페이지를 생성하고, 중앙 노드가 렌더링되도록 했어요.

✅ 작업 내용

  • Space 페이지를 추가했어요.
  • Space 렌더링을 위한 Konva 캔버스를 추가했어요.
  • Space 중앙 (0, 0)에 중앙 노드가 배치되는 걸 구현했어요.
  • Space 노드에 대한 Storybook을 작성하고, 이를 위해 필요한 Konva 캔버스도 데코레이터로 나타냈어요.

🏷️ 관련 이슈

close #28

📸 스크린샷/영상

이번 PR에서 변경되거나 추가된 뷰가 있는 경우 이미지나 동작 영상을 첨부해 주세요.

화면 기록 2024-11-07 오후 8 24 40

image

📌 리뷰 진행 시 참고 사항

리뷰 코멘트 작성 시 특정 사실에 대해 짚는 것이 아니라 코드에 대한 의견을 제안할 경우, 강도를 함께 제시해주세요! (1점: 가볍게 참고해봐도 좋을듯 ↔ 5점: 꼭 바꾸는 게 좋을 것 같음!)

아직 확장성 있게 컴포넌트를 설계하기엔 데이터 구조랑이 명확해지기 전까지는 어려울 것 같아, 개략적인 구조만 잡았습니다.

@heegenie heegenie added this to the Node, Edge 표시 milestone Nov 8, 2024
@heegenie heegenie linked an issue Nov 8, 2024 that may be closed by this pull request
@hoqn hoqn force-pushed the feature/head-node-ui branch from 325099a to 216d5eb Compare November 11, 2024 02:54
@hoqn hoqn marked this pull request as ready for review November 11, 2024 02:55
@hoqn hoqn requested a review from a team as a code owner November 11, 2024 02:55
@hoqn hoqn requested review from parkblo and fru1tworld and removed request for a team November 11, 2024 02:55
@fru1tworld
Copy link
Collaborator

고생하셨습니다 b

Copy link
Collaborator

@parkblo parkblo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생 많으셨습니다! 👍 👍
스토리북부터 타입스크립트까지 배울 부분이 정말 많은 코드였어요 😄

);
},
],
} satisfies Meta<typeof SpaceNode>;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

satisfies를 통해서 타입 체킹을 할 수도 있군요 👀

Comment on lines +10 to +25
const [offsetX, setOffsetX] = useState<number | undefined>(undefined);
const [offsetY, setOffsetY] = useState<number | undefined>(undefined);

useEffect(() => {
if (!ref.current || props.offset !== undefined) {
return;
}

if (props.offsetX === undefined) {
setOffsetX(ref.current.width() / 2);
}

if (props.offsetY === undefined) {
setOffsetY(ref.current.height() / 2);
}
}, [props]);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

offsetX, offsetY를 offset 하나로 관리하면 조금 더 간결해질 것 같아요. (1점)

const SpaceNode = forwardRef<Konva.Group, SpaceNodeProps>(
({ label, x, y }, ref) => {
// TODO: 색상에 대해 정하기, 크기에 대해 정하기
const fillColor = "royalblue";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

노드 색상들에 대해서도 논의가 필요하겠네요!

const { entrySpaceId } = useParams<SpacePageParams>();

if (!entrySpaceId) {
throw new Error("");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

나중에 에러 로직을 구체화해보면 좋겠네요 !

@parkblo parkblo merged commit abbbe33 into dev-fe Nov 11, 2024
3 checks passed
@hoqn hoqn deleted the feature/head-node-ui branch November 27, 2024 10:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Head Node UI를 구현한다.
4 participants