Create Week10 Mission 1 #120
Conversation
There was a problem hiding this comment.
10μ£Όμ°¨ μν¬λΆκΉμ§ μ λ§ κΈ΄ μ¬μ μ΄μμ΅λλ€.
κ·Έλμ λͺ¨λ κ³ μ λ§μΌμ ¨μ΅λλ€! ππ»ππ»ππ» μ§§μ§ μμ κΈ°κ°λμ μλ―Έ μλ μκ°μ΄ λμκΈ°λ₯Ό λ°λλλ€.
μ΄μ κΈ°λ³Έ μν¬λΆμ λͺ¨λ μμ£Όνμ ¨μ§λ§, 11-12μ£Όμ°¨ μν¬λΆλ λμ ν΄λ³΄μκΈΈ μΆμ²λ립λλ€! 11μ£Όμ°¨μμλ Vercelμ νμ©ν λ°°ν¬μ CI/CD ꡬμ±μ λ€λ£¨κ³ , 12μ£Όμ°¨μμλ WebSocketμ μ΄μ©ν μ€μκ° ν΅μ κ³Ό Cypressλ₯Ό νμ©ν E2E ν μ€νΈλ₯Ό λ€λ£Ήλλ€.
μμΌλ‘λ κΎΈμ€ν νμ΅νκ³ μ±μ₯νμκΈΈ μμνλ©°, λ°λͺ¨λ°μ΄κΉμ§ νμ΄ν μ λλ€! ππ»ππ»ππ»
| return createPortal( | ||
| <div className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4"> | ||
| <div className="bg-gray-900 text-white max-w-4xl w-full rounded-lg shadow-lg overflow-auto max-h-[90vh] relative"> | ||
| <button | ||
| onClick={() => navigate(-1)} | ||
| className="absolute top-3 right-3 text-white text-2xl" | ||
| > | ||
| × | ||
| </button> | ||
| {isLoading ? ( | ||
| <p className="text-center my-10">μν μ 보λ₯Ό λΆλ¬μ€λ μ€μ λλ€...</p> | ||
| ) : error ? ( | ||
| <p className="text-center my-10 text-red-500">μλ¬κ° λ°μνμ΅λλ€.</p> | ||
| ) : ( | ||
| <MovieDetailContent movie={movie} /> | ||
| )} | ||
| </div> | ||
| </div>, | ||
| document.body | ||
| ); | ||
| }; |
There was a problem hiding this comment.
λ―Έμ
1μμ μν κ²μ κ²°κ³Όλ‘ λμ¨ μνλ₯Ό ν΄λ¦νλ©΄ λͺ¨λ¬ ννλ‘ μνμ μμΈ μ 보λ₯Ό λΆλ¬μ€λλ‘ ν΄μΌν©λλ€.
νμ§λ§ νμ¬ detail.tsx μμ createPortalμ μ¬μ©ν΄ λͺ¨λ¬μ²λΌ λ λλ§νκ³ μμ§λ§, μ€μ λ‘λ useNavigateλ‘ μλ‘μ΄ λΌμ°νΈλ‘ μ΄λνλ λ°©μμΌλ‘ ꡬνλμ΄ μμ΅λλ€. μ΄λ μ§μ ν λͺ¨λ¬μ΄ μλλΌ λͺ¨λ¬ μ€νμΌμ νμ΄μ§ μ νμ΄κΈ° λλ¬Έμ, λ―Έμ
μ λ§κ² μμ μ΄ νμν΄ λ³΄μ
λλ€!
There was a problem hiding this comment.
πChallenge λ―Έμ μ λ°λΌ νλ‘μ νΈ μ 체μ μ±λ₯ μ΅μ νλ UX κ°μ μλ λμ ν΄λ³΄μΈμ! μ½λ νμ§ μΈ‘λ©΄μμλ μ€λ³΅ μ κ±°, μ± μ λΆλ¦¬, μμΈ μ²λ¦¬ κ°μ λ±μ ν΅ν΄ κ°λ μ±κ³Ό μ μ§λ³΄μμ±μ΄ μ’μ μ½λλ‘ λ¦¬ν©ν λ§ ν΄λ³΄λ©΄ μ΄λ¨κΉμ π
π λ―Έμ λ²νΈ
10μ£Όμ°¨ Misson 1
π ꡬν μ¬ν
π μ€ν¬λ¦°μ·
β 체ν¬λ¦¬μ€νΈ
π€ μ§λ¬Έ μ¬ν