Skip to content

๐Ÿ› ๏ธ ๋ฉ”์ธํŽ˜์ด์ง€ ๊ด€๋ จ ์‚ฌ์ด๋“œ๋ฐ” ๊ตฌํ˜„ ์š”์ฒญย #22

@revy7289

Description

@revy7289

๐Ÿ“Œ ํ•ต์‹ฌ ์š”๊ตฌ ์‚ฌํ•ญ 1

๋ฉ”์ธํŽ˜์ด์ง€์˜ ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ํ†ตํ•ด ํ”„๋กœ์ ํŠธ, ํŒ€, ๋‹ด๋‹น์ž ๋“ฑ์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ๊ณ  ์„ ํƒํ•œ ๊ฐ’์— ๋”ฐ๋ผ ํ•„ํ„ฐ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • ํ”„๋กœ์ ํŠธ, ํŒ€, ๋‹ด๋‹น์ž ๋ฆฌ์ŠคํŠธ๋Š” ํ•˜๋“œ์ฝ”๋”ฉํ•œ ๋ฐฐ์—ด์„ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์œผ๋‚˜, ๊ฐ€๊ธ‰์  TS๋กœ ์ •์˜๋˜์–ด ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉ์ž๊ฐ€ ์„ ํƒํ•œ ๊ฐ’์— ๋”ฐ๋ผ ํ•ด๋‹นํ•˜๋Š” ์นธ๋ฐ˜๋งŒ UI์— ๋…ธ์ถœ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฒ€์ƒ‰์— ๋”ฐ๋ผ ๋‹ด๋‹น์ž๋ฅผ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•˜๊ณ , ๋‹ด๋‹น์ž๋ฅผ ํฌํ•จํ•˜๋Š” ์นธ๋ฐ˜๋งŒ UI์— ๋…ธ์ถœ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ›  ์ž‘์—… ์ƒ์„ธ ๋‚ด์šฉ

์ฒดํฌ๋ฐ•์Šค๋Š” ์šฐ์„ ๋„๊ฐ€ ๋†’์•„ ๋ณด์ด๋Š” ์ž‘์—…์œผ๋กœ ๊ฐ€๊ธ‰์  ๋จผ์ € ํ•ด๊ฒฐ๋˜์—ˆ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค.
๋ถˆ๋ฆฟ์ผ€์ด์Šค๋Š” ๊ทธ ๋‹ค์Œ ์ž‘์—…์œผ๋กœ ์˜ˆ์ƒ๋˜๋Š” ์ง€์ ์ž…๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ์œ ์—ฐํ•˜๊ฒŒ ํŒ๋‹จํ•˜์—ฌ ๋ถˆ๋ฆฟ์ผ€์ด์Šค ๋จผ์ € ์ž‘์—…ํ•ด์ฃผ์…”๋„ ์ƒ๊ด€ ์—†์Šต๋‹ˆ๋‹ค.

UI/UX

๋ฐ˜๋ณต๋˜๋Š” UIํŒจํ„ด์ด ๋งŽ์Šต๋‹ˆ๋‹ค. ์žฌ์‚ฌ์šฉ์„ฑ์„ ์ตœ๋Œ€ํ•œ ์ƒ๊ฐํ•˜์—ฌ ์ž‘์—…ํ•ด ๋ด…์‹œ๋‹ค.

  • ํ”„๋กœ์ ํŠธ, ํŒ€, ๋‹ด๋‹น์ž ๋“ฑ์„ ๋ฆฌ์ŠคํŒ…ํ•˜๋Š” ๋ฐฐ์—ด์„ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค. ( TS ํ™œ์šฉ ๊ถŒ์žฅ )
  • ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ์„น์…˜๋ณ„๋กœ ๊ตฌ๋ถ„์ง“๋Š” wrapper ui๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ , ํ•ด๋‹นํ•˜๋Š” ๋ฐฐ์—ด์„ props์œผ๋กœ ๋‚ด๋ ค์ค๋‹ˆ๋‹ค.
  • props์œผ๋กœ ์ „๋‹ฌ๋ฐ›์€ dataํ™œ์šฉ, checkbox๋กœ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ui๋ฅผ map์œผ๋กœ ๋ฟŒ๋ ค์ค๋‹ˆ๋‹ค.
    • ์ „์ฒด UI๋ฅผ ๊ฐ์‹ธ๋Š” side-bar Component๋ฅผ ๋ชจ๋ฐ”์ผ ๋ฐ˜์‘์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ์™„์„ฑํ•ฉ๋‹ˆ๋‹ค.

FEATURE

  • checkbox๋‚˜ button์œผ๋กœ ์„ ํƒํ•œ ๊ฐ’์— ๋”ฐ๋ผ ํŠน์ •ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ํฌํ•จํ•˜๋„๋ก ๋ฐฐ์—ด์„ ํ•„ํ„ฐ ํ•ฉ๋‹ˆ๋‹ค.
  • ์„ ํƒ๋œ ๊ฐ’์— ๋”ฐ๋ผ ํ•ด๋‹นํ•˜๋Š” ์นธ๋ฐ˜๋งŒ UI์— ํ‘œํ˜„๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. (ํ”„๋กœ์ ํŠธ, ํŒ€, ๋‹ด๋‹น์ž ๋“ฑ)
  • ๊ฒ€์ƒ‰์„ ํ†ตํ•ด ํŠน์ •ํ•œ ๊ฐ’์„ ํฌํ•จํ•˜๋Š” ์นธ๋ฐ˜๋งŒ UI์— ํ‘œํ˜„๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
    • ๊ณผ๋„ํ•œ ๋ Œ๋”๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋„๋ก ์Šค๋กœํ‹€๋ง์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ”— ์ฐธ๊ณ ํ• ๋งŒํ•œ ์ž๋ฃŒ (์„ ํƒ)

๊ด€๋ จ ๋ฌธ์„œ, ๋งํฌ ๋“ฑ์„ ์ฒจ๋ถ€ํ•ด ์ฃผ์„ธ์š”.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions