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.

Sign up for GitHub

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

Jump to bottom

feat: Implements change color, line-width, pen-mode function #39

Merged
merged 6 commits into from
Nov 12, 2024
Merged

feat: Implements change color, line-width, pen-mode function #39

merged 6 commits into from
Nov 12, 2024

Conversation

dbjoung
Copy link
Collaborator

@dbjoung dbjoung commented Nov 11, 2024 •
edited
Loading

πŸ“‚ μž‘μ—… λ‚΄μš©

closes #37
closes #21
closes #22
closes #23

μž‘μ—… λ‚΄μš©

  • 펜 λͺ¨λ“œλ‘œ μ „ν™˜
  • νŽ˜μΈνŒ… λͺ¨λ“œλ‘œ μ „ν™˜
  • 툴 색상 λ³€κ²½
  • 펜 λͺ¨λ“œμΌ λ•Œ μ„  λ‘κ»˜λ₯Ό λ³€κ²½ν•˜λŠ” κΈ°λŠ₯ κ΅¬ν˜„

CheckPoint

  • 펜 λͺ¨λ“œμΌ λ•Œ 펜 툴둜 μž‘λ™ ν•˜λŠ”κ°€?
  • 펜 λͺ¨λ“œμΌ λ•Œ 색상 잘 λ°”λ€ŒλŠ”κ°€?

πŸ’‘ μžμ„Έν•œ μ„€λͺ…

Note

  • λͺ¨λ“  μ»΄ν¬λ„ŒνŠΈλŠ” μž„μ‹œμž…λ‹ˆλ‹€. (νƒœμ—°λ‹˜ UI에 톡합 μ˜ˆμ •)
  • νŒ”λ ˆνŠΈ color도 μž„μ‹œ μ½”λ“œμž…λ‹ˆλ‹€.

μ„€λͺ…

  • 펜 λͺ¨λ“œ λ³€κ²½ 둜직 κ΅¬ν˜„
  • 펜 색상 λ³€κ²½ 둜직 κ΅¬ν˜„
  • 펜 λ‘κ»˜ λ³€κ²½ 둜직 κ΅¬ν˜„
  • μœ„ μƒνƒœ λͺ¨λ‘ zustand둜 관리 쀑.

πŸ“— μ°Έκ³  자료 & κ΅¬ν˜„ κ²°κ³Ό (선택)

πŸ“’ 리뷰 μš”κ΅¬ 사항 (선택)

🚩 후속 μž‘μ—… (선택)

βœ… μ…€ν”„ 체크리슀트

  • PR 제λͺ©μ„ ν˜•μ‹μ— 맞게 μž‘μ„±ν–ˆλ‚˜μš”?
  • 브랜치 μ „λž΅μ— λ§žλŠ” λΈŒλžœμΉ˜μ— PR을 올리고 μžˆλ‚˜μš”? (main이 μ•„λ‹™λ‹ˆλ‹€.)
  • Reviewers, Labelsλ₯Ό λ“±λ‘ν–ˆλ‚˜μš”?
  • λΆˆν•„μš”ν•œ μ½”λ“œλŠ” μ œκ±°ν–ˆλ‚˜μš”?

리뷰 μ½”λ©˜νŠΈ 반영

  • μ»΄ν¬λ„ŒνŠΈλͺ… 쀑볡 ν”Όν•˜κΈ° (ex. DrawingComponent)
  • 클릭 이벀트 elementλŠ” divλ³΄λ‹€λŠ” button μ‚¬μš© (eslint μ›Ή μ ‘κ·Όμ„± 주석 제거)
  • (UI 병합 μž‘μ—…μ—μ„œ μˆ˜μ •) νŒ”λ ˆνŠΈ 색상은 λ°°μ—΄ 객체 데이터λ₯Ό μ‚¬μš©

@dbjoung dbjoung added ✨ Feature New feature or request πŸ’» FE Frontend Code labels Nov 11, 2024
@dbjoung dbjoung added this to the Week 3 milestone Nov 11, 2024
@dbjoung dbjoung self-assigned this Nov 11, 2024
@dbjoung dbjoung linked an issue Nov 11, 2024 that may be closed by this pull request
21~23번 이슈 톡합 및 레포 이동 (펜 λͺ¨λ“œ μ „ν™˜, 색상 μ „ν™˜, λ‘κ»˜ μ „ν™˜) #37
Closed
1 task
kwaksj329
kwaksj329 requested changes Nov 12, 2024
View reviewed changes
Copy link
Member

@kwaksj329 kwaksj329 left a comment

Choose a reason for hiding this comment

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

κ³ μƒν•˜μ…¨μŠ΅λ‹ˆλ‹€. μ „μ—­ μƒνƒœ κ΄€λ ¨ν•΄μ„œλŠ” μ•„λž˜ κΈ€ 읽어보심 쒋을 것 κ°™μ•„μš”.

https://velog.io/@woohm402/no-global-state-manager
https://methodpoet.com/why-is-global-state-bad/
https://dev.to/jess/what-are-your-opinions-on-local-state-vs-global-state-in-react-201

client/src/components/canvas/DrawingComponent.tsx Outdated
Comment on lines 4 to 5
const DrawingComponent = () => {
return (
Copy link
Member

Choose a reason for hiding this comment

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

μ»΄ν¬λ„ŒνŠΈ 이름에 componentλŠ” 이미 νŒŒμΌμ΄λ‚˜ 디렉토리 μ»¨ν…μŠ€νŠΈμ—μ„œ μ•”μ‹œμ μœΌλ‘œ λ‚΄ν¬λ˜μ–΄μžˆλŠ” μ •λ³΄μ΄λ―€λ‘œ λΆˆν•„μš”ν•˜κ²Œ μ€‘λ³΅λ˜λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€!

client/src/components/canvas/CanvasToolbar.tsx Outdated
Comment on lines 29 to 32
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
<div key={i} className={`bg-canvas-${i} h-16 w-16`} onClick={() => handleChangeToolColor(i)}>
{color}
</div>
Copy link
Member

Choose a reason for hiding this comment

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

μ›Ή μ ‘κ·Όμ„± κ΄€λ ¨ ESLint 였λ₯˜ λ•Œλ¬Έμ— μ£Όμ„μ²˜λ¦¬ 해두신 것 같은데 divλ³΄λ‹€λŠ” button μ‚¬μš©ν•˜μ‹œκ³  주석 μ •λ¦¬ν•΄μ£Όμ‹œλ©΄ 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€.

rhino-ty
rhino-ty approved these changes Nov 12, 2024
View reviewed changes
Copy link
Collaborator

@rhino-ty rhino-ty left a comment

Choose a reason for hiding this comment

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

μˆ˜κ³ ν•˜μ…¨μŠ΅λ‹ˆλ‹€! 일단 Approveν•˜λŠ”λ°, 리뷰 μš”κ΅¬μ‚¬ν•­ 반영 ν›„ λ¨Έμ§€ν•΄μ£Όμ„Έμš”!

client/src/components/canvas/MainCanvas.tsx
import { useCanvasStore } from '@/stores/useCanvasStore';
import { CanvasStore } from '@/types/canvas.types';

const CANVAS_SIZE_WIDTH = 640; //μž„μ‹œ μ‚¬μ΄μ¦ˆ
const CANVAS_SIZE_HEIGHT = 420;

const CV = ['#000', '#f257c9', '#e2f724', '#4eb4c2', '#d9d9d9'];
//μž„μ‹œ 색상 λ°°μ—΄

Copy link
Collaborator

@rhino-ty rhino-ty Nov 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

색상 배열이 μ•„λ‹Œ 객체둜 ν•΄μ„œ, key-value둜 κ΄€λ¦¬ν•˜λŠ” 게 쒋을 κ±° κ°™λ„€μš”.
제 μ½”λ“œλ₯Ό 따라 보면 κ·Έλ ‡κ²Œ μž‘μ„±ν–ˆμ–΄μ„œμš”. 접근성도 μ“Έ 수 있고, ν—·κ°ˆλ¦¬μ§€λ„ μ•Šμ•„μ„œ λ°˜μ˜ν•΄μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€!

@dbjoung dbjoung requested a review from kwaksj329 November 12, 2024 08:06
@github-actions GitHub Actions
Copy link
Contributor

πŸ“š Storybook preview deployed to: Visit Storybook Preview

@dbjoung dbjoung merged commit 9dbd7a0 into develop Nov 12, 2024
2 checks passed
@dbjoung dbjoung deleted the feature/#37 branch November 12, 2024 09:35
@github-actions GitHub Actions
Copy link
Contributor

🧹 Storybook preview for PR #39 has been removed.

github-actions bot added a commit that referenced this pull request Nov 12, 2024
@github-actions
docs: remove storybook preview for PR #39
f4a4ffd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rhino-ty rhino-ty rhino-ty approved these changes

@kwaksj329 kwaksj329 kwaksj329 approved these changes

@choiseona choiseona Awaiting requested review from choiseona

@ssum1ra ssum1ra Awaiting requested review from ssum1ra

Assignees

@dbjoung dbjoung

Labels
πŸ’» FE Frontend Code ✨ Feature New feature or request
Projects
None yet
Milestone
Week 3
3 participants
@dbjoung @kwaksj329 @rhino-ty