ꯔꯤꯑꯦꯛꯇ ꯑꯃꯁꯨꯡ ꯅꯦꯛꯁꯇꯥ ꯗꯥꯏꯅꯥꯃꯤꯛ ꯐꯣꯔꯃꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯥ.js

By Web Design · · 14 min read · 936 views
Share: ✕ Twitter in LinkedIn f Facebook
Read in: aa ace af ak alz am ar as awa ay az ba ban be bew
+191 more
ꯔꯤꯑꯦꯛꯇ ꯑꯃꯁꯨꯡ ꯅꯦꯛꯁꯇꯥ ꯗꯥꯏꯅꯥꯃꯤꯛ ꯐꯣꯔꯃꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯥ.js

ꯑꯥꯔꯇꯤꯀꯜ ꯑꯁꯤ ꯁꯔꯚꯦꯖꯦ.ꯑꯦꯁ.ꯅꯥ ꯁ꯭ꯄꯣꯟꯁꯔ ꯇꯧꯕꯥ ꯑꯃꯅꯤ꯫ ꯑꯌꯥꯝꯕꯥ ꯔꯤꯑꯦꯛꯇ ꯗꯤꯕꯦꯂꯄꯔꯁꯤꯡꯅꯥ ꯀꯩꯗꯧꯉꯩꯗꯁꯨ ꯌꯥꯝꯅꯥ ꯋꯥꯅꯥ ꯈꯟꯅꯗꯅꯥ ꯁꯦꯌꯔ ꯇꯧꯔꯤꯕꯥ ꯃꯦꯟꯇꯦꯜ ꯃꯣꯗꯦꯜ ꯑꯃꯥ ꯂꯩ꯫ ꯃꯗꯨꯗꯤ ꯐꯔꯃꯁꯤꯡ ꯑꯁꯤ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯣꯏꯅꯥ ꯂꯧꯅꯩ꯫ ꯃꯁꯤꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁ꯭ꯇꯦꯛ ꯑꯃꯥ ꯍꯥꯌꯕꯅꯤ:

ꯂꯣꯀꯦꯜ ꯁ꯭ꯇꯦꯇꯀꯤꯗꯃꯛꯇꯥ ꯔꯤꯑꯦꯛꯇ ꯍꯨꯛ ꯐꯣꯔꯝ (ꯃꯤꯅꯤꯃꯝ ꯔꯤ-ꯔꯦꯟꯗꯔꯁꯤꯡ, ꯑꯦꯔꯒꯣꯅꯣꯃꯤꯛ ꯐꯤꯜꯗ ꯔꯦꯖꯤꯁ꯭ꯠꯔꯦꯁꯟ, ꯏꯝꯄꯦꯔꯦꯇꯤꯚ ꯏꯟꯇꯔꯦꯛꯁꯟ)꯫ ꯚꯦꯂꯤꯗꯦꯁꯅꯒꯤꯗꯃꯛ ꯖꯣꯗ (ꯏꯅꯄꯨꯠ ꯑꯆꯨꯝꯕꯥ, ꯉꯃꯈꯩ ꯚꯦꯂꯤꯗꯦꯁꯟ, ꯇꯥꯏꯞ-ꯁꯦꯐ ꯄꯥꯔꯁꯤꯡ)꯫ ꯕꯦꯀꯑꯦꯟꯗꯀꯤꯗꯃꯛ ꯔꯤꯑꯦꯛꯇ ꯀ꯭ꯕꯦꯔꯤ: ꯁꯕꯃꯤꯁꯟ, ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯍꯣꯠꯅꯕꯥ, ꯀꯦꯁꯤꯡ, ꯁꯔꯚꯔ ꯁꯤꯉ꯭ꯛ, ꯑꯁꯤꯅꯆꯤꯡꯕꯥ꯫

ꯑꯃꯁꯨꯡ ꯐꯣꯔꯝ ꯑꯌꯥꯝꯕꯒꯤ ꯑꯣꯏꯅꯥ — ꯅꯍꯥꯛꯀꯤ ꯂꯣꯒꯏꯟ ꯁ꯭ꯛꯔꯤꯅꯁꯤꯡ, ꯅꯍꯥꯛꯀꯤ ꯁꯦꯇꯤꯡ ꯄꯦꯖꯁꯤꯡ, ꯅꯍꯥꯛꯀꯤ ꯁꯤ.ꯑꯥꯔ.ꯌꯨ.ꯗꯤ.ꯒꯤ ꯃꯣꯗꯂꯁꯤꯡ — ꯃꯁꯤꯅꯥ ꯇꯁꯦꯡꯅꯥ ꯐꯖꯅꯥ ꯊꯕꯛ ꯇꯧꯏ꯫ ꯄꯣꯠ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ ꯃꯁꯥꯒꯤ ꯊꯕꯛ ꯇꯧꯏ, ꯃꯈꯣꯌꯅꯥ ꯁꯦꯡꯅꯥ ꯀꯝꯄꯣꯖ ꯇꯧꯏ, ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯑꯦꯞꯂꯤꯀꯦꯁꯅꯒꯤ ꯁꯔꯨꯀꯁꯤꯡꯗꯥ ꯆꯪꯁꯤꯅꯕꯥ ꯌꯥꯏ, ꯃꯈꯣꯌꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄꯣꯠꯊꯣꯛ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯈꯦꯠꯅꯕꯥ ꯊꯃꯏ꯫ ꯑꯗꯨꯕꯨ ꯃꯇꯝ ꯑꯃꯗꯥ ꯐꯣꯔꯝ ꯑꯃꯅꯥ ꯍꯥꯟꯅꯒꯤ ꯄꯥꯎꯈꯨꯃꯁꯤꯡꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯚꯤꯖꯤꯕꯤꯂꯤꯇꯤ ꯔꯨꯂꯁꯤꯡ, ꯅꯠꯠꯔꯒꯥ ꯂꯝ ꯑꯍꯨꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯀꯦꯁꯀꯦꯗ ꯇꯧꯕꯥ ꯂꯧꯊꯣꯀꯄꯥ ꯚꯦꯜꯌꯨꯁꯤꯡꯒꯨꯝꯕꯥ ꯄꯣꯠꯁꯤꯡ ꯄꯨꯊꯣꯀꯄꯥ ꯍꯧꯏ꯫ ꯔꯟ ꯇꯧꯔꯤꯕꯥ ꯑꯄꯨꯅꯕꯥ ꯑꯃꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯔꯒꯥ ꯊꯥꯗꯣꯛꯀꯗꯕꯥ ꯅꯠꯔꯒꯥ ꯎꯠꯀꯗꯕꯥ ꯄꯦꯖ ꯄꯨꯝꯅꯃꯛ ꯐꯥꯑꯣꯕꯥ ꯑꯣꯏꯔꯕꯁꯨ ꯌꯥꯏ꯫ ꯑꯗꯣꯝꯅꯥ ꯑꯍꯥꯅꯕꯥ ꯀꯟꯗꯤꯁꯅꯦꯜ ꯑꯗꯨ useWatch ꯑꯃꯁꯨꯡ ꯏꯅꯂꯥꯏꯟ ꯕ꯭ꯔꯥꯟꯆ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯦꯟꯗꯜ ꯇꯧꯏ, ꯃꯁꯤ ꯐꯩ꯫ ꯑꯗꯨꯗꯒꯤ ꯑꯇꯣꯞꯄꯥ ꯑꯃꯅꯥ꯫ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯖꯣꯗ ꯁ꯭ꯀꯤꯃꯅꯥ ꯅꯣꯔꯃꯦꯜ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯐꯣꯡꯗꯣꯀꯄꯥ ꯉꯃꯗꯕꯥ ꯀ꯭ꯔꯣꯁ-ꯐꯤꯜꯗ ꯔꯨꯂꯁꯤꯡ ꯑꯦꯅꯀꯣꯗ ꯇꯧꯅꯕꯥ ꯁꯨꯄꯔꯔꯤꯐꯥꯏꯅꯗꯥ ꯌꯧꯔꯛꯂꯤ꯫ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ, ꯁ꯭ꯇꯦꯞ ꯅꯦꯚꯤꯒꯦꯁꯟꯅꯥ ꯕꯤꯖꯤꯅꯦꯁ ꯂꯣꯖꯤꯛ ꯂꯤꯛ ꯇꯧꯕꯥ ꯍꯧꯏ꯫ ꯃꯇꯝ ꯈꯔꯒꯤ ꯃꯇꯨꯡꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯁꯦꯃꯈꯤꯕꯥ ꯑꯗꯨ ꯌꯦꯡꯏ ꯑꯃꯁꯨꯡ ꯐꯣꯔꯝ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯌꯨ.ꯑꯥꯏ. ꯃꯁꯤ ꯍꯦꯟꯅꯥ ꯋꯥꯔꯦꯞ ꯂꯧꯕꯒꯤ ꯊꯧꯑꯣꯡꯅꯤ, ꯑꯃꯁꯨꯡ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯇ꯭ꯔꯤ ꯑꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯊꯃꯈꯤꯕꯥ ꯃꯐꯝ ꯑꯗꯨ ꯈꯛꯇꯅꯤ꯫ ꯃꯁꯤꯗꯥ ꯑꯩꯅꯥ ꯈꯜꯂꯤ ꯃꯗꯨꯗꯤ ꯔꯤꯑꯦꯛꯇꯇꯥ ꯐꯣꯔꯃꯁꯤꯡꯒꯤ ꯃꯦꯟꯇꯦꯜ ꯃꯣꯗꯦꯜ ꯑꯁꯤ ꯊꯨꯒꯥꯏꯔꯤ, ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯇꯁꯦꯡꯅꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯒꯤ ꯑꯁꯣꯏꯕꯥ ꯅꯠꯇꯦ꯫ ꯑꯥꯔ.ꯑꯩꯆ.ꯑꯦꯐ.+ꯖꯣꯗ ꯁ꯭ꯇꯦꯛ ꯑꯁꯤ ꯃꯁꯤꯒꯤꯗꯃꯛꯇꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯈꯤꯕꯥ ꯑꯗꯨꯗꯥ ꯑꯐꯕꯥ ꯑꯣꯏ꯫ ꯏꯁꯨ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯁꯤꯒꯤ ꯑꯦꯕꯁ꯭ꯠꯔꯦꯛꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯄ꯭ꯔꯣꯕ꯭ꯂꯦꯝ ꯑꯗꯨꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯄꯣꯏꯟꯇ ꯑꯗꯨꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯂꯩꯕꯥ ꯊꯦꯡꯅꯩ ꯃꯔꯃꯗꯤ ꯑꯂꯇꯔꯅꯦꯇꯤꯕ ꯑꯁꯤꯅꯥ ꯐꯔꯃꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯈꯅꯕꯒꯤ ꯇꯣꯉꯥꯅꯕꯥ ꯃꯑꯣꯡ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯑꯥꯔꯇꯤꯀꯜ ꯑꯁꯤ ꯑꯂꯇꯔꯅꯦꯇꯤꯕ ꯑꯗꯨꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯣꯏꯔꯤ꯫ ꯃꯁꯤ ꯎꯠꯅꯕꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯃꯜꯇꯤ-ꯁ꯭ꯇꯦꯞ ꯐꯣꯔꯝ ꯑꯗꯨ ꯑꯅꯤꯔꯛ ꯁꯦꯃꯒꯅꯤ:

ꯔꯤꯑꯦꯛꯇ ꯍꯨꯛ ꯐꯣꯔꯝ + ꯖꯣꯗ ꯑꯁꯤ ꯁꯕꯃꯤꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯔꯤꯑꯦꯛꯇ ꯀ꯭ꯕꯦꯔꯤꯗꯥ ꯋꯥꯏꯔ ꯇꯧꯕꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯁꯔꯚꯦꯖꯦꯑꯦꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ, ꯃꯁꯤꯅꯥ ꯐꯣꯔꯝ ꯑꯃꯕꯨ ꯗꯦꯇꯥ ꯑꯣꯏꯅꯥ ꯂꯧꯏ — ꯏꯆꯝ ꯆꯝꯕꯥ JSON ꯁ꯭ꯀꯤꯝ ꯑꯃꯥ — ꯀꯝꯄꯣꯅꯦꯟꯇ ꯇ꯭ꯔꯤ ꯑꯃꯒꯤ ꯃꯍꯨꯠꯇꯥ꯫

ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯁꯤꯡ, ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯀꯟꯗꯤꯁꯅꯦꯜ ꯂꯣꯖꯤꯛ, ꯑꯔꯣꯏꯕꯗꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ API ꯀꯣꯜ꯫ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯀꯔꯤ ꯆꯠꯈꯤꯕꯒꯦ ꯑꯃꯁꯨꯡ ꯀꯔꯤ ꯂꯩꯈꯤꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯑꯆꯨꯝꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯃꯦꯞ ꯇꯧꯒꯅꯤ, ꯑꯃꯁꯨꯡ ꯑꯗꯣꯝꯅꯥ ꯀꯔꯤ ꯃꯣꯗꯦꯜ ꯁꯤꯖꯤꯟꯅꯒꯗꯒꯦ, ꯑꯃꯁꯨꯡ ꯀꯗꯥꯏꯗꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯂꯦꯄꯊꯣꯛꯅꯕꯥ ꯆꯠꯅꯕꯥ ꯌꯥꯕꯥ ꯃꯑꯣꯡ ꯑꯃꯥ ꯊꯃꯒꯅꯤ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯁꯦꯃꯒꯠꯂꯤꯕꯥ ꯐꯣꯔꯝ ꯑꯁꯤ:

ꯐꯣꯔꯝ ꯑꯁꯤꯅꯥ ꯈꯣꯡꯊꯥꯡ ꯴ꯒꯤ ꯐ꯭ꯂꯣ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ: ꯁ꯭ꯇꯦꯞ 1: ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯁꯤꯡ꯫

ꯑꯍꯥꯅꯕꯥ ꯃꯤꯡ (ꯃꯊꯧ ꯇꯥꯕꯥ), . ꯏꯃꯦꯜ (ꯃꯊꯧ ꯇꯥꯕꯥ, ꯆꯠꯅꯕꯥ ꯌꯥꯕꯥ ꯐꯣꯔꯃꯦꯠ)꯫

ꯈꯣꯡꯊꯥꯡ 2: ꯑꯣꯔꯗꯔ ꯇꯧꯕꯥ꯫

ꯌꯨꯅꯤꯠꯀꯤ ꯃꯃꯜ, ꯴. ꯃꯁꯤꯡ, ꯴. ꯇꯦꯛꯁꯀꯤ ꯆꯥꯡ, ꯴. ꯂꯧꯊꯣꯀꯄꯥ: ꯱. ꯁꯕꯇꯣꯇꯦꯜ, ꯴. ꯇꯦꯛꯁ, ꯴. ꯑꯄꯨꯅꯕꯥ ꯑꯣꯏꯅꯥ ꯑꯦꯟ.ꯗꯤ.ꯑꯦ.

ꯁ꯭ꯇꯦꯞ 3: ꯑꯦꯀꯥꯎꯟꯇ & ꯐꯤꯗꯕꯦꯛ꯫

ꯅꯍꯥꯛꯀꯤ ꯑꯦꯀꯥꯎꯟꯇ ꯂꯩꯕ꯭ꯔꯥ? (ꯍꯣꯌ/ꯅꯠꯇꯦ) ꯀꯔꯤꯒꯨꯝꯕꯥ Yes → ꯌꯨꯖꯔꯅꯦꯝ + ꯄꯥꯁꯋꯥꯔꯗ ꯑꯣꯏꯔꯕꯗꯤ, ꯑꯅꯤꯃꯛ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯠꯇꯦ → ꯁ꯭ꯇꯦꯞ 1ꯗꯥ ꯍꯥꯟꯅꯅꯥ ꯈꯣꯃꯖꯤꯜꯂꯕꯥ ꯏꯃꯦꯏꯜ ꯑꯣꯏꯔꯕꯗꯤ꯫

ꯁꯦꯇꯤꯁꯐꯦꯛꯁꯟ ꯔꯦꯇꯤꯡ (꯱–꯵) ꯑꯃꯁꯨꯡ ꯑꯦꯟ. ꯀꯔꯤꯒꯨꯝꯕꯥ ≥ 4 → “ꯅꯍꯥꯛꯅꯥ ꯀꯔꯤ ꯄꯥꯝꯂꯤꯕꯒꯦ?” ꯀꯔꯤꯒꯨꯝꯕꯥ ≤ 2 → “ꯑꯩꯈꯣꯌꯅꯥ ꯀꯔꯤ ꯑꯍꯣꯡꯕꯥ ꯄꯨꯔꯀꯄꯥ ꯉꯃꯒꯅꯤ?”

ꯈꯣꯡꯊꯥꯡ 4: ꯔꯤꯚꯤꯌꯨ ꯇꯧꯕꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯄꯨꯅꯕꯥ >= 100 ꯑꯣꯏꯔꯕꯗꯤ ꯈꯛꯇꯃꯛ ꯎꯕꯥ ꯐꯪꯒꯅꯤ꯫ ꯐꯥꯏꯅꯦꯜ ꯁꯕꯃꯤꯁꯟ ꯇꯧꯕꯥ꯫

ꯃꯁꯤ ꯑꯀꯅꯕꯥ ꯋꯥꯐꯝ ꯅꯠꯇꯦ꯫ ꯑꯗꯨꯕꯨ ꯃꯁꯤꯅꯥ ꯑꯥꯔꯀꯤꯇꯦꯀꯆꯔꯒꯤ ꯈꯦꯠꯅꯕꯥ ꯑꯗꯨ ꯐꯣꯡꯗꯣꯀꯄꯗꯥ ꯃꯇꯤꯛ ꯆꯥꯕꯅꯤ꯫ ꯈꯪꯖꯤꯅꯒꯗꯕꯥ 1: ꯀꯝꯄꯣꯅꯦꯟꯇ-ꯗ꯭ꯔꯥꯏꯚꯟ (ꯔꯤꯑꯦꯛꯇ ꯍꯨꯛ ꯐꯣꯔꯝ + ꯖꯣꯗ) ꯏꯅꯁ꯭ꯇꯣꯂꯦꯁꯟ ꯇꯧꯕꯥ꯫ npm ꯔꯤꯑꯦꯛꯇ-ꯍꯨꯛ-ꯐꯣꯔꯝ ꯖꯣꯗ @hookform/resolvers @tanstack/react-query ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯔꯣ

ꯖꯣꯗ ꯁ꯭ꯀꯤꯝ꯫ ꯖꯣꯗ ꯁ꯭ꯀꯤꯃꯗꯒꯤ ꯍꯧꯔꯁꯤ, ꯃꯔꯃꯗꯤ ꯃꯍꯧꯁꯥꯅꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯐꯔꯝ ꯑꯗꯨꯒꯤ ꯃꯑꯣꯡ ꯃꯇꯧ ꯑꯗꯨ ꯂꯦꯄꯊꯣꯀꯏ꯫ ꯑꯍꯥꯅꯕꯥ ꯈꯣꯡꯊꯥꯡ ꯑꯅꯤꯒꯤꯗꯃꯛ — ꯄꯔꯁꯣꯅꯦꯜ ꯗꯤꯇꯦꯂꯁ ꯑꯃꯁꯨꯡ ꯑꯣꯔꯗꯔ ꯏꯅꯄꯨꯠꯁꯤꯡ — ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯁꯣꯏꯗꯅꯥ ꯑꯣꯏ: ꯃꯊꯧ ꯇꯥꯕꯥ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡ, ꯃꯤꯅꯤꯃꯝ ꯑꯣꯏꯕꯥ ꯅꯝꯕꯔꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯏꯅꯨꯝ ꯑꯃꯥ꯫ ꯀꯟꯗꯤꯁꯅꯦꯜ ꯔꯨꯂꯁꯤꯡ ꯑꯗꯨ ꯐꯣꯡꯗꯣꯛꯅꯕꯥ ꯍꯣꯠꯅꯕꯗꯥ ꯄꯨꯛꯅꯤꯡ ꯆꯤꯡꯁꯤꯟꯅꯤꯡꯉꯥꯏ ꯑꯣꯏꯕꯥ ꯁꯔꯨꯛ ꯑꯗꯨ ꯍꯧꯏ꯫

"ꯖꯣꯗ"ꯗꯒꯤ { z } ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ;

export const formSchema = z.object({ ꯑꯍꯥꯅꯕꯥ ꯃꯃꯤꯡ: z.string().min(1, "ꯃꯊꯧ ꯇꯥꯕꯥ"), ꯏꯃꯦꯜ: z.string().email("ꯑꯁꯣꯌꯕꯥ ꯏꯃꯦꯜ"), ꯃꯃꯜ: z.number().min(0), ꯃꯁꯤꯡ: z.number().min(1), taxRate: z.number(), hasAccount: z.enum(["ꯍꯣꯌ", "ꯅꯠꯇꯦ"]), ꯌꯨꯖꯔꯅꯦꯝ: z.string().ꯑꯣꯄꯁꯅꯦꯜ(), ꯄꯥꯁꯋꯥꯔꯗ: z.string().ꯑꯣꯄꯁꯅꯦꯜ(), ꯁꯦꯇꯤꯁꯐꯦꯛꯁꯟ: z.number().min(1).max(5), positiveFeedback: z.string().ꯑꯣꯄꯁꯅꯦꯜ(), ꯏꯝꯞꯔꯨꯚꯃꯦꯟꯇꯐꯤꯗꯕꯦꯛ: z.string().ꯑꯣꯄꯁꯅꯦꯜ(),}).superRefine((ꯗꯦꯇꯥ, ctx) => { ꯀꯔꯤꯒꯨꯝꯕꯥ (ꯗꯦꯇꯥ.ꯍꯥꯁꯑꯦꯀꯥꯎꯟꯇ === "ꯍꯣꯌ") { ꯀꯔꯤꯒꯨꯝꯕꯥ (!data.username) { ctx.addIssue({ ꯀꯣꯗ: "ꯀꯁ꯭ꯇꯝ", ꯄꯥꯊ: ["ꯌꯨꯖꯔꯅꯦꯝ"], ꯃꯦꯁꯦꯖ: "ꯃꯊꯧ ꯇꯥꯕꯥ" }); } if (!ꯗꯦꯇꯥ.ꯄꯥꯁꯋꯥꯔꯗ || ꯗꯦꯇꯥ.ꯄꯥꯁꯋꯥꯔꯗ.ꯂꯦꯡꯗꯕꯥ < 6) { ctx.addIssue({ ꯀꯣꯗ: "ꯀꯁ꯭ꯇꯝ", ꯄꯥꯊ: ["ꯄꯥꯁꯋꯥꯔꯗ"], ꯃꯦꯁꯦꯖ: "ꯑꯛꯁꯔ ꯶" });

if (data.satisfaction >= 4 && !data.positiveFeedback) { ctx.addIssue({ ꯀꯣꯗ: "ꯀꯁ꯭ꯇꯝ", ꯄꯥꯊ: ["ꯄꯣꯖꯤꯇꯤꯕ ꯐꯤꯗꯕꯦꯛ"], ꯄꯥꯎꯖꯦꯜ: "ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯄꯥꯝꯂꯤꯕꯗꯨ ꯁꯦꯌꯔ ꯇꯧꯕꯤꯌꯨ" }); }

ꯀꯔꯤꯒꯨꯝꯕꯥ (ꯗꯦꯇꯥ.ꯁꯦꯇꯤꯁꯐꯦꯛꯁꯟ <= 2 && !ꯗꯦꯇꯥ.ꯏꯝꯞꯔꯨꯚꯃꯦꯟꯇꯐꯤꯗꯕꯦꯛ) { ctx.addIssue({ ꯀꯣꯗ: "ꯀꯁ꯭ꯇꯝ", ꯄꯥꯊ:["improvementFeedback"], message: "ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯗꯥ ꯀꯔꯤ ꯑꯍꯣꯡꯕꯥ ꯄꯨꯔꯛꯀꯗꯒꯦ ꯍꯥꯌꯅꯥ ꯍꯥꯌꯕꯤꯌꯨ" }); }});

ꯑꯦꯛꯁꯄꯣꯔꯠ ꯃꯈꯜ FormData = z.infer<ꯐꯣꯔꯃꯒꯤ ꯃꯈꯜ>;

ꯌꯨꯖꯔꯅꯦꯝ ꯑꯃꯁꯨꯡ ꯄꯥꯁꯋꯥꯔꯗ ꯑꯁꯤ ꯀꯟꯗꯤꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯁꯨ ꯑꯣꯄꯁꯅꯦꯜ() ꯑꯣꯏꯅꯥ ꯇꯥꯏꯞ ꯇꯧꯏ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ ꯃꯔꯃꯗꯤ ꯖꯣꯗꯀꯤ ꯇꯥꯏꯞ-ꯂꯦꯚꯦꯜ ꯁ꯭ꯀꯤꯝ ꯑꯁꯤꯅꯥ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯗꯨꯒꯤ ꯃꯑꯣꯡ ꯑꯗꯨ ꯇꯥꯀꯏ, ꯐꯤꯜꯗꯁꯤꯡꯅꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯗꯥꯏꯗꯥ ꯆꯠꯅꯔꯤꯕꯥ ꯔꯨꯂꯁꯤꯡ ꯑꯗꯨ ꯇꯥꯀꯏ꯫ ꯀꯟꯗꯤꯁꯅꯦꯜ ꯔꯤꯀꯣꯔꯗ ꯑꯁꯤ ꯁꯨꯄꯔꯔꯤꯐꯥꯏꯅꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯒꯗꯕꯅꯤ, ꯃꯁꯤꯅꯥ ꯃꯑꯣꯡ ꯑꯗꯨ ꯚꯦꯂꯤꯗꯦꯠ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯆꯠꯊꯩ ꯑꯃꯁꯨꯡ ꯃꯄꯨꯡ ꯑꯣꯏꯕꯥ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯗꯨꯗꯥ ꯑꯦꯛꯁꯦꯁ ꯂꯩ꯫ ꯑꯗꯨꯒꯨꯝꯕꯥ ꯇꯣꯈꯥꯏꯕꯥ ꯑꯗꯨ ꯑꯁꯣꯏꯕꯥ ꯑꯃꯅꯤ; ꯃꯁꯤ ꯈꯨꯠꯂꯥꯌ ꯑꯁꯤ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯈꯤꯕꯥ ꯑꯗꯨ ꯈꯛꯇꯅꯤ: ꯁꯨꯄꯔꯔꯤꯐꯥꯏꯟ ꯍꯥꯌꯕꯁꯤ ꯁ꯭ꯀꯤꯝ ꯁ꯭ꯠꯔꯀꯆꯔ ꯃꯁꯥꯃꯛꯇꯗꯥ ꯐꯣꯡꯗꯣꯀꯄꯥ ꯉꯃꯗꯕꯥ ꯃꯇꯃꯗꯥ ꯀ꯭ꯔꯣꯁ-ꯐꯤꯜꯗ ꯂꯣꯖꯤꯛ ꯆꯠꯂꯤꯕꯥ ꯃꯐꯝ ꯑꯗꯨꯅꯤ꯫ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯊꯣꯏꯗꯣꯛ ꯍꯦꯟꯗꯣꯀꯄꯥ ꯋꯥꯐꯃꯗꯤ ꯁ꯭ꯀꯤꯝ ꯑꯁꯤꯅꯥ ꯐꯣꯡꯗꯣꯀꯄꯥ ꯉꯃꯗꯕꯥ ꯑꯗꯨꯅꯤ꯫ ꯃꯁꯤꯗꯥ ꯄꯦꯖꯁꯤꯡꯒꯤ ꯋꯥꯈꯜꯂꯣꯟ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ, ꯀꯔꯝꯕꯥ ꯐꯤꯜꯗꯁꯤꯡꯗꯥ ꯀꯔꯝꯕꯥ ꯄꯣꯏꯟꯇꯇꯥ ꯎꯕꯥ ꯐꯪꯕꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯋꯥꯈꯜꯂꯣꯟ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ ꯑꯃꯁꯨꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯒꯤ ꯋꯥꯈꯜꯂꯣꯟ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ ꯃꯗꯨ ꯄꯨꯝꯅꯃꯛ ꯑꯇꯣꯞꯄꯥ ꯃꯐꯝ ꯑꯃꯗꯥ ꯍꯤꯡꯒꯅꯤ꯫ ꯐꯣꯔꯝ ꯀꯝꯄꯣꯅꯦꯟꯇ꯫

import { useForm, useWatch } from "react-hook-form";import { zodResolver } from "@hookform/resolvers/zod";import { useMutation } from "@tanstack/react-query";import { useState, useMemo } from "react";import { formSchema, type FormData } from "./schema";

const STEPS = ["ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯁꯤꯡ", "ꯑꯣꯔꯗꯔ", "ꯑꯦꯀꯥꯎꯟꯇ", "ꯔꯤꯚꯤꯌꯨ"];

type OrderPayload = FormData & { ꯁꯕꯇꯣꯇꯦꯜ: ꯃꯁꯤꯡ; ꯇꯦꯛꯁ: ꯃꯁꯤꯡ; ꯑꯄꯨꯅꯕꯥ: ꯃꯁꯤꯡ };

ꯑꯦꯛꯁꯄꯣꯔꯠ ꯐꯉ꯭ꯀꯁꯟ RHFMultiStepForm() { const [ꯁ꯭ꯇꯦꯞ, ꯁꯦꯠꯁ꯭ꯇꯦꯞ] = useState(0);

const ꯃ꯭ꯌꯨꯇꯦꯁꯟ = ꯌꯨꯖꯃꯎꯇꯦꯁꯟ({ mutationFn: async (ꯄꯦꯂꯣꯗ: ꯑꯣꯔꯗꯔꯄꯦꯂꯣꯗ) => { const res = await fetch("/api/ꯑꯣꯔꯗꯔꯁꯤꯡ", { ꯃꯦꯊꯗ: "ꯄꯣꯁ꯭ꯠ", headers: { "ꯀꯟꯇꯦꯟꯇ-ꯇꯥꯏꯞ": "ꯑꯦꯞꯂꯤꯀꯦꯁꯟ/json" }, ꯍꯀꯆꯥꯡ: JSON.stringify(ꯄꯦꯂꯣꯗ), }); if (!res.ok) throw new Error("ꯁꯕꯃꯤꯠ ꯇꯧꯕꯥ ꯉꯃꯗꯦ"); ꯔꯤꯇꯔꯟ ꯇꯧꯕꯥ res.json(); }, ꯴. });

const { ꯔꯦꯖꯤꯁ꯭ꯇꯔ, ꯀꯟꯠꯔꯣꯜ, handleSubmit, formState: { errors }, } = useForm({ ꯔꯤꯖꯣꯂꯚꯔ: zodResolver(formSchema), defaultValues: { ꯃꯃꯜ: 0, ꯃꯁꯤꯡ: 1, ꯇꯦꯛꯁꯔꯦꯠ: 0.1, ꯅꯨꯡꯉꯥꯏꯕꯥ: 3, hasAccount: "ꯅꯠꯇꯦ", }, }); const price = useWatch({ ꯀꯟꯠꯔꯣꯜ, ꯃꯃꯤꯡ: "ꯃꯃꯜ" }); const quantity = useWatch({ ꯀꯟꯠꯔꯣꯜ, ꯃꯃꯤꯡ: "ꯀ꯭ꯕꯥꯟꯇꯤꯇꯤ" }); const taxRate = useWatch({ ꯀꯟꯠꯔꯣꯜ, ꯃꯃꯤꯡ: "ꯇꯦꯛꯁꯔꯦꯠ" }); const hasAccount = useWatch({ ꯀꯟꯠꯔꯣꯜ, ꯃꯃꯤꯡ: "ꯍꯥꯁꯑꯦꯀꯥꯎꯟꯇ" }); const satisfaction = useWatch({ ꯀꯟꯠꯔꯣꯜ, ꯃꯃꯤꯡ: "ꯁꯦꯇꯤꯁꯐꯦꯛꯁꯟ" }); const subtotal = useMemo(() => (ꯃꯃꯜ ?? ꯰) * (ꯃꯌꯥꯏ ?? ꯱), [ꯃꯃꯜ, ꯃꯁꯤꯡ]); const tax = useMemo(() => ꯁꯕꯇꯣꯇꯦꯜ * (ꯇꯦꯛꯁꯔꯦꯠ ?? ꯰), [ꯁꯕꯇꯣꯇꯦꯜ, ꯇꯦꯛꯁꯔꯦꯠ]); const total = useMemo(() => ꯁꯕꯇꯣꯇꯦꯜ + ꯇꯦꯛꯁ, [ꯁꯕꯇꯣꯇꯦꯜ, ꯇꯦꯛꯁ]); const onSubmit = (ꯗꯦꯇꯥ: FormData) => mutation.mutate({ ...ꯗꯦꯇꯥ, ꯁꯕꯇꯣꯇꯦꯜ, ꯇꯦꯛꯁ, ꯑꯄꯨꯅꯕꯥ }); const showSubmit = (ꯈꯣꯡꯊꯥꯡ === ꯲ && ꯑꯄꯨꯅꯕꯥ < ꯱꯰꯰) || (ꯈꯣꯡꯊꯥꯡ === ꯳ && ꯑꯄꯨꯅꯕꯥ >= ꯱꯰꯰)

return (

{step === 0 && ( <> )}

{step === 1 && ( <> <ꯏꯅꯄꯨꯠ ꯃꯈꯜ="ꯅꯝꯕꯔ" {...ꯔꯦꯖꯤꯁ꯭ꯇꯔ("ꯃꯃꯜ", { valueAsNumber: ꯑꯆꯨꯝꯕꯥ })} /> <ꯏꯅꯄꯨꯠ ꯃꯈꯜ="ꯅꯝꯕꯔ" {...register("ꯀ꯭ꯕꯥꯟꯇꯤꯇꯤ", { valueAsNumber: ꯑꯆꯨꯝꯕꯥ })} /> <{...register("taxRate", { valueAsNumber: ꯑꯆꯨꯝꯕꯥ })}> <ꯑꯣꯄꯁꯟ value="0.05">꯵%

ꯑꯄꯨꯅꯕꯥ: {ꯑꯄꯨꯅꯕꯥ}
ꯇꯦꯛꯁ: {tax}
ꯑꯄꯨꯅꯕꯥ: {ꯑꯄꯨꯅꯕꯥ}
)}

{step === 2 && ( <>

{hasAccount === "ꯍꯣꯌ" && ( <> )}

{ꯁꯦꯇꯤꯁꯐꯦꯛꯁꯟ >= 4 && ( <ꯇꯦꯛꯁꯑꯦꯔꯤꯌꯥ {...ꯔꯦꯖꯤꯁ꯭ꯇꯔ ꯇꯧꯕꯥ("ꯄꯣꯖꯤꯇꯤꯕ ꯐꯤꯗꯕꯦꯛ")} /> )}

{satisfaction <= 2 && (