๐Ÿ‘‰ ๊ฐœ๋ฐœ ๋ถ€๋ถ„

  1. ์Šคํ„ฐ๋”” ๋งŒ๋“ค๊ธฐ ํŽ˜์ด์ง€ (โ€™StudyCreateโ€™ Comp)
  2. ๋น„๋ฐ€๋ฒˆํ˜ธ ํ™•์ธ ๋ชจ๋‹ฌ (โ€™VerifyPasswordModalโ€™ Comp)
  3. Create API ์ž‘์„ฑ ๋ฐ ๋ฐฑ์—”๋“œ ์—ฐ๋™
  4. ํ™ˆ ํ™”๋ฉด์˜ ์Šคํ„ฐ๋””์˜ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง€

๐Ÿ‘‰ ์–ด๋ ค์› ๋˜ ์ 

  1. ์Šคํ„ฐ๋”” ๋งŒ๋“ค๊ธฐ ํŽ˜์ด์ง€ (โ€™StudyCreateโ€™ Comp)

    1. State๊ฐ€ ๋งŽ์•„ ์งˆ๋• ๊ณตํ†ต ๋ฐ์ดํ„ฐ๋“ค์€ ๊ฐ์ฒด๋กœ ๊ด€๋ฆฌ
    2. ๊ฒ€์ฆ ์ฒ˜๋ฆฌ ๊ตฌํ˜„์ด ์‰ฝ์ง€ ์•Š์•˜๋‹ค
    3. ์ด ๋‹น์‹œ ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌํ•˜๋Š”๊ฒŒ ์ต์ˆ™ํ•˜์ง€ ์•Š์•„์„œ, ์ฝ”๋“œ๊ฐ€ ๋„ˆ๋ฌด ๊ธธ๊ฒŒ ์ž‘์„ฑ๋˜์—ˆ๋‹ค. โ†’ inputํƒœ๊ทธ๋“ค์„ ์ปดํฌ๋„ŒํŠธ๋กœ ๋งŒ๋“ค์–ด์„œ ๋ถ„๋ฆฌํ•˜์ž๋‹ˆ, ์“ธ๋•Œ์—†์ด ๋ณต์žก๋„๋งŒ ์˜ฌ๋ฆฌ๋Š”๊ฒƒ ๊ฐ™์•„์„œ ๋ถ„๋ฆฌํ•˜์ง€ ์•Š์•˜๋‹ค.
  2. ๋น„๋ฐ€๋ฒˆํ˜ธ ํ™•์ธ ๋ชจ๋‹ฌ (โ€™VerifyPasswordModalโ€™ Comp)

  3. Create API ์ž‘์„ฑ ๋ฐ ๋ฐฑ์—”๋“œ ์—ฐ๋™

  4. ํ™ˆ ํ™”๋ฉด์˜ ์Šคํ„ฐ๋””์˜ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง€

    image.png

๐Ÿ‘‰ ๋ฐฐ์šด ์ 

  1. Component์˜ ์ตœ์ƒ๋‹จ ํƒœ๊ทธ์— ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„๊ณผ ๋™์ผํ•œ ํด๋ž˜์Šค๋ฅผ ๋ถ€์—ฌํ•ด์„œ ์ถ”ํ›„ css ์ˆ˜์ •ํ• ๋•Œ ๋ฐ˜์˜ํ•˜๊ธฐ
    1. ex) StudyCreate Comp โ†’ <div className=โ€StudyCreateโ€>โ€ฆ</div>
    2. .StudyCreate { ..style }
    3. ์ด๋ ‡๊ฒŒ ํ•˜์ง€์•Š์œผ๋ฉด ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ์ž‘์„ฑํ•œ css์™€ ๊ฒน์น˜๋Š” ์ผ์ด ๋งŽ์ด ๋ฐœ์ƒ
  2. ๋ชจ๋“ ๊ฑด State.. State๋งŒ ์ž˜๋‹ค๋ค„๋„ ๋ฐ˜ ์ด์ƒ์€ ํ•˜๊ฒ ๋‹ค.
  3. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ˜‘์—…์— ์—„์ฒญ ํšจ์œจ์ ์ด๋ž€๊ฑธ ๊นจ๋‹ฌ์•˜๋‹ค.