νμ¬ λ¦¬μ‘νΈ νκ²½μμ μΈμ€νκ·Έλ¨ ν΄λ‘ μ½λ© μ€μ΄λ€. μΈμ€νκ·Έλ¨ λ©μΈ κ²μκΈμ βλ보기β λ²νΌμ λλ₯΄λ©΄ νμ μ΄ λμ€λλ°, κ±°κΈ°μ βκ²μκΈλ‘ μ΄λβ μ λλ₯Ό μ μμΈνμ΄μ§λ‘ μ΄λνλλ°, μ΄ λΆλΆμ ꡬννλ €νλ€.νμ§λ§ κ²μκΈ μμΈλ λ κ°μ§μ ννλ₯Ό λλ€. ν΄λΌμ΄μΈνΈ νκ²½μμ
κ°μΈνλ‘μ νΈ μ€, μμλ‘ ν¬μ»€μ±μ μ£Όλ μμ μ΄ νμνλ€. β λκΈ μμ΄μ½μ ν΄λ¦νλ©΄ μλ λκΈ νΌμ΄ ν¬μ»€μ± λλλ‘μμ μ κ°λ¨νλλ°, useForm μ setFocus λ₯Ό μ¬μ©νλ©΄ λ μΌμ΄μλ€. νμ§λ§ μ΄μ§ΈμμΈμ§ ν¬μ»€μ±μ΄ λμ§ μμκ³ , useRef κΉμ§ μ¬μ©νλλ°λ ν¬μ»€
μΈμ€νκ·Έλ¨ ν΄λ‘ μ½λ© νλ‘μ νΈ μμ μ€, λ보기 λ²νΌμ ν κΈ ν΄λ¦μ λ©λ΄μ°½μ΄ λ¨κ³ λ«νλλ‘ λ§λ€μ΄λμ μνμ΄λ€. μ¬κΈ°μ λλ λ©λ΄μ°½ μΈμ μμμλ ν΄λ¦ν μ λ©λ΄μ°½μ΄ λ«νλλ‘ νκ³ μΆμ΄νλ€. μ°Ύλ λ΄μ©μ€, λ¨μνκ² μ 체μμμ νκ·Έλ‘ κ°μΌ ν ν΄λΉ μ μ νκ·Έμ onClick
next νλ‘μ νΈλ₯Ό μμνλ € μ΄κΈ° μΈν μ€, λ€μκ³Ό κ°μ eslint μλ¬ λ¬Έκ΅¬κ° λ΄λ€.μ΄κΈ° eslintrc.json λ λ€μκ³Ό κ°μ΄ μλμΌλ‘ μ€μ λμ΄μλ μν©μ΄λ€.next.js μ΄κΈ° μΈν (eslint, prettier) κ΄λ ¨ κΈμ μμΉνμλλ°, μμ λΆλΆλ§μΌλ‘ μλ²½νκ²
μ€ν¬λ‘€ κΈ°λ₯μ λ§μμΌνλ μν©μμ λλΆλΆμ body μ overflow-y: hidden μ μ£Όλ λ°©λ²μ΄ μ μλμ§λ§, κ·Έλ μ§ μμ κ²½μ° μλ°μ€ν¬λ¦½νΈλ‘ μ΄λ₯Ό μ²λ¦¬ν΄μΌνλ€.μ²μμ μλμ κ°μ΄ μ΄λ²€νΈλ₯Ό μ£Όμμ§λ§ μλνμ§ μμλ€ γ λλ²μ§Έ μλλ‘ μλμ κ°μ΄ λ€λ₯Έ μ΄λ²€νΈμλ μ
μ¬μ©μ μ λ ₯νΌμ μ¬λ¬ λ¨κ³λ‘ μμ±ν μ μλ λΆλΆμ λ μ΄μ΄ νμ μμΌλ‘ λμ΄μ§λκ²μ΄ μλ, λΈλΌμ°μ μμμλ λ€λ‘κ°κΈ°, μμΌλ‘ κ°κΈ°κ° κ°λ₯ν λλ©νμ΄μ§ νμμΌλ‘ λ§λ€κ³ μΆμλ€. μλμ κ°μ μ¬νλλ¬Έμ΄μλ€.4κ°μ νμ΄μ§λ‘ λΆλ¦¬νλ©΄ νμ΄μ§ μ΄λ μ μ΄μ μ μ λ ₯ν μ¬μ©μμ μ
μ΄λ―Έ ννμ΄μ§ μ€ν¬λ‘€μ΄ ꡬνλμ΄μλ μννΉμ νμ΄μ§λ΄μμ μ¬λΌμ΄λκ° μΈλ‘λ‘ μ€ν¬λ‘€λλ κ΅¬μ‘°λ‘ λ§λ€μ΄μΌ νλλ°, ννμ΄μ§ μ€ν¬λ‘€ κΈ°λ₯κ³Ό κ²Ήμ³ μ€ν¬λ‘€ μ΄λ²€νΈλ₯Ό ꡬννλλ° μ½μ§ μμλ€..ν΄λΉ νμ΄μ§μ λλ¬νλ©΄ body μ μ€ν¬λ‘€μ λ§μ ν μ¬λΌμ΄λλ₯Ό μ€ννκ² νκ³ , μ¬λΌμ΄λ
select λ°μ€μμ νλͺ©μ μ’ λ₯ κ°μλ₯Ό μ λ ₯νλ©΄, κ°μμ λ°λΌ input μΉΈμ΄ μΆκ°λλ κΈ°λ₯μ ꡬνν΄λ³΄μλ€. (νλͺ©μ 4κ°κΉμ§ μ λ ₯ κ°λ₯)κ°μλ₯Ό λ³κ²½μ, κ°μκ° μ μ΄μ§λ©΄ μ μ΄μ§ κ°μλ§νΌ λ€μμλΆν° input μμ , μ λ ₯κ°μ΄ κ°μ΄ μ μΆλ μ μμΌλ―λ‘ κ·Έμ λ°λ₯Έ valu
pagination μ bullets μμλ₯Ό css 컀μ€ν νλκ²μ΄ μλ, νΉμ΄ν λͺ¨μμ μμ λ€λ₯Έ λ²νΌμ pagination μΌλ‘ λ§λ€κ³ μΆμ΄ svg λ₯Ό μ¬μ©νλ€. νμ§λ§ λ§μ λκ΄μ΄ μμλλ°, κΈ°μ‘΄ λ΄μ₯λ pagination μ μ΄λ€λ©΄ μ€νμΌλ§ λ°κΎΈλ©΄ λμ§λ§ μμ
μμ룩 μ΄λ©μΌ μλΉμ€μ μλͺ μ λ±λ‘ν λ, μ΄λ―Έ λ§λ€μ΄μ§ html μ κ·Έλλ‘ μλͺ μ λ³΅μ¬ λΆμ¬λ£κΈ° ν μ μλ κΈ°λ₯μ λ§λ€κ³ μ νκ³ μ΄λ₯Ό μλ°μ€ν¬λ¦½νΈλ‘ ꡬννλ €νλ€.μΌμͺ½ form μ μ΄λ¦, λ²νΈ λ±μ μ λ ₯νλ©΄ μ€λ₯Έμͺ½ νλ©΄μ κ·Έλλ‘ μ λ³΄κ° μ€νμΌμ΄ μ νμ§ μ± λ°μλ¨μμ±λ
νμκ°μ νμμ λΉλ°λ²νΈλ₯Ό μ λ ₯ ν ν΄λΉ λΉλ°λ²νΈκ° λ§λμ§ ν λ² λ νμΈνλ βλΉλ°λ²νΈ νμΈβ μΈνμ μμ±νλ€. react-hook-form νκ²½μμ useController λ₯Ό ν΅ν΄ Input μ»΄ν¬λνΈλ‘ λ§λ μν©μ΄λ€.λΉλ°λ²νΈκ° λ§μ§ μμ μ 'λΉλ°λ²νΈκ° μΌμΉνμ§
μ½κ΄λμ νμ΄μ§λ₯Ό λ§λ€λ, μμ½λμΈ ννλ‘ μ½κ΄λ΄μ©μ ν΄λ¦νλ©΄ νμΈν μ μλλ‘ νκ³ μ²΄ν¬λ°μ€μ μ λͺ©μ 보μ΄λ ꡬ쑰λ₯Ό λ§λ€κ³ μΆμλ€.β μ΄μ©μ½κ΄μμ λλ₯Ό μ μλ μ λͺ©λ²νΌκ³Ό 체ν¬λ°μ€λ κ·Έλλ‘ λ μνλ‘, 컨ν μΈ λ§ μ΄λ¦¬κ³ λ«νλ ꡬ쑰νλμ κΈ°λ₯μ νλ μ»΄ν¬λνΈ λ΄ μ‘΄μ¬ν
ν μ€νΈλ₯Ό 볡μ¬νλ λ²νΌ κΈ°λ₯μ΄ μμ΄ λ¦¬μ‘νΈ νκ²½ 볡μ¬κΈ°λ₯μ μ§μν΄μ£Όλ λΌμ΄λΈλ¬λ¦¬λ₯Ό νμ©ν΄ μλμ κ°μ΄ μμ νμλ€.νμ§λ§ ν΄λΉ λ²νΌμ΄ λ€λ₯Ένμ΄μ§μμλ μ€λ³΅ μ¬μ©λμ΄ μ»΄ν¬λνΈλ‘ λ€μ μ¬κ΅¬μ±νμ¬ μμ ν΄λ³΄μλ€.볡μ¬κ° λμλ€λ μλ¦Όμ λμ΄ ν 2μ΄ λ€μ
next νλ‘μ νΈμμ μΈλΆμμ κ°μ Έμ€λ μ΄λ―Έμ§λ₯Ό μ λ‘λνλ μμ μ€ μ΄λ―Έμ§κ° μλ¨λ νμμ΄ λ°μνλ€.μ΄λ―Έμ§ url μ μ κ°μ Έμμ Έ μλ²μͺ½ λ¬Έμ λ μλκ² κ°μκ³ , srcκ²½λ‘κ° β/\_next/img~ μ κ°μ΄ μ μμ μ΄μ§ μκ² λ λλ§λμ΄μμλ€.ꡬκΈλ§ κ²°κ³Ό κ·Έ μμΈμ, N
TailwindCSS λ₯Ό μ¬μ©νλλ° μκΎΈ className={} κ°μ²΄ ννλ‘ μλμμ±λλ μ μ΄ λ무 λΆνΈν΄μ μ€μ μ λ°κΎΈκ³ μ νλ€. λ¨Όμ νμ₯νλ‘κ·Έλ¨μ΄ μμΈμΈκ° μΆμ΄ λͺ¨λ λΉνμ±ν μμΌλ΄€μ§λ§, μ¬μ ν μλμμ± κΈ°λ₯μ κ·Έλλ‘μκ³ μ΄λ λ΄μ₯λ κΈ°λ₯μ΄λ κ²μ μ μΆν μ μμ
λ¬Έμ μν©: κ΄λ¦¬μκ° μ 무μΌμ§μ λκΈμ λ±λ‘νλ κΈ°λ₯μ λ§λλ μ€ λκΈμ΄ λ±λ‘λμ΄ ν΄λΉ λκΈμ΄ μν 리μ€νΈ λ°μ΄ν°κ° λ³κ²½ λμλλ°, λ³κ²½λ λ°μ΄ν°κ° ν΄λΌμ΄μΈνΈ μΈ‘μΌλ‘ λ°λ‘ κ°±μ λμ§ μλ λ¬Έμ κ° λ°μνλ€. μ΄ λλ¬Έμ μ¬μ©μκ° λκΈμ μ΄ λ°λ‘ μ§ν νλ©΄μ΄ μ λ°μ΄νΈ λμ§ μ
μ΄μ μ vscode νκ²½μμ git μ μ¬μ©ν λλ μΌμΌν ν°λ―Έλμ git add, commit, reset λ± λͺ λ Ήμ΄λ₯Ό μ λ ₯νμ¬ κ΄λ¦¬νμλ€. νμ§λ§ webstorm νΈμ§κΈ°λ₯Ό μ¬μ©ν μ΄ν, νμ¬ μ λ° λͺ λ Ήμ΄λ€μ μΉ νμμμ΄ κ°νΈνκ² git μ λ€λ£° μ μλ€. μ΄λ° νΈλ¦¬
νΉμ νμ΄μ§μ SNS λ± μΈλΆ 곡μ λ₯Ό μν΄ URL λ§ν¬λ₯Ό μμ±νκ³ μΆμλ€. λ§ν¬λ₯Ό ν΄λ¦νλ©΄ νΉμ νμ μ΄ μ΄λ¦° μνλ‘ νμ΄μ§κ° λμ΄μ§λ ꡬ쑰μ¬μΌ νλλ°, ν΄λ³΄μ§ μμ μμ μ΄λΌ μ λ₯Ό μ’ λ¨Ήμλ€.
νμ΄μ§ μμ μ νλ μ€ νμ μ°½ κΈ°λ₯μ ꡬννκ³ μμλ€. κ·Έλ¦¬κ³ λ«κΈ° λ²νΌμ λλ₯΄λ κΈ°λ₯μμ ν΄λ¦λ λ²νΌ(event.target)μ λΆλͺ¨λ₯Ό μ°Ύμ ν΄λΉ λ²νΌμ μμμΌλ‘ κ°μ§ νμ μ λ«λ κΈ°λ₯μ μμ λ μ€ μμ λ¬Έμ κ° λ°μνλ€.
λͺ¬μ€ν° κ²μμ RPG κ²μμΌλ‘, κ²μμλ ν¬κ² λ κ°μ§ λͺ¨λκ° μλ€. λͺ¨ν, ν΄μ, μ’ λ£ μ€μμ μ ννλ μΌλ° λͺ¨λμ λͺ¨νμ λ λμ μ μ λ§λκ² λ λ λμ νλ μ ν¬ λͺ¨λμ΄λ€. μ ν¬ λͺ¨λμμλ μ μ 곡격νκ±°λ 체λ ₯μ ν볡νκ±°λ λλ§κ°λ€.μΉκ²μ λ§ν¬html, css μ½λ