Create Week10 Mission1 #119
Conversation
hyesngy
left a comment
hyesngy
left a comment
There was a problem hiding this comment.
10μ£Όμ°¨ μν¬λΆκΉμ§ μ λ§ κΈ΄ μ¬μ μ΄μμ΅λλ€.
κ·Έλμ λͺ¨λ κ³ μ λ§μΌμ ¨μ΅λλ€! ππ»ππ»ππ» μ§§μ§ μμ κΈ°κ°λμ μλ―Έ μλ μκ°μ΄ λμκΈ°λ₯Ό λ°λλλ€.
μ΄μ κΈ°λ³Έ μν¬λΆμ λͺ¨λ μμ£Όνμ ¨μ§λ§, 11-12μ£Όμ°¨ μν¬λΆλ λμ ν΄λ³΄μκΈΈ μΆμ²λ립λλ€! 11μ£Όμ°¨μμλ Vercelμ νμ©ν λ°°ν¬μ CI/CD ꡬμ±μ λ€λ£¨κ³ , 12μ£Όμ°¨μμλ WebSocketμ μ΄μ©ν μ€μκ° ν΅μ κ³Ό Cypressλ₯Ό νμ©ν E2E ν μ€νΈλ₯Ό λ€λ£Ήλλ€.
μμΌλ‘λ κΎΈμ€ν νμ΅νκ³ μ±μ₯νμκΈΈ μμνλ©°, λ°λͺ¨λ°μ΄κΉμ§ νμ΄ν μ λλ€! ππ»ππ»ππ»
| return ( | ||
| <> | ||
| <li key={movie.id} onClick={handleClick} className="relative w-32 group aspect-[2/3] rounded-md overflow-hidden"> | ||
| {/* <h3>{movie.title}</h3> */} | ||
| <img | ||
| src={`${imgURL}${movie.poster_path}`} | ||
| alt="ν¬μ€ν°" | ||
| className="w-full h-full object-cover block group-hover:blur-md" | ||
| /> | ||
|
|
||
|
|
||
| <div | ||
| className="absolute top-0 left-0 w-full h-full opacity-0 group-hover:opacity-100 | ||
| text-sm/7 text-white flex flex-col items-center justify-center p-4" | ||
| > | ||
| <h3 className="text-sm">{movie.title}</h3> | ||
| <div className="text-xs overflow-hidden text-ellipsis" | ||
| style={{ | ||
| display: "-webkit-box", | ||
| WebkitLineClamp: 3, | ||
| WebkitBoxOrient: "vertical" | ||
| }}>{movie.overview}</div> | ||
| </div> | ||
| </li> | ||
|
|
||
| <DetailModal/> | ||
| </> | ||
|
|
||
| ) |
There was a problem hiding this comment.
νμ¬ κ° MovieItemλ§λ€ DetailModalμ λ λλ§νκ³ μλλ°, μ΄λ μν λͺ©λ‘λ§νΌ λΆνμν λͺ¨λ¬μ΄ μμ±λμ΄ μ±λ₯μ μ
μν₯μ μ€λλ€. DetailModalμ MovieListλ μμ μ»΄ν¬λνΈλ‘ μ΄λμμΌ νλλ§ λ λλ§νλλ‘ μμ νλ©΄ λ©λͺ¨λ¦¬ μ¬μ©λκ³Ό λ λλ§ μ±λ₯μ΄ ν¬κ² κ°μ λ κ²μ
λλ€.
| <div className="flex-1"> | ||
| <label className="flex items-center gap-2 text-sm font-semibold mb-1"> | ||
| <GrSettingsOption /> | ||
| μ΅μ | ||
| </label> | ||
| <div className="flex items-center gap-2"> | ||
| <input | ||
| type="checkbox" | ||
| id="adult" | ||
| checked={includeAdult} | ||
| onChange={(e) => setIncludeAdult(e.target.checked)} | ||
| /> | ||
| <label htmlFor="adult" className="text-sm"> | ||
| μ±μΈ μ½ν μΈ νμ | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <div> | ||
| <label className="flex items-center gap-2 text-sm font-semibold mb-1"> | ||
| <FaGlobe /> | ||
| μΈμ΄ | ||
| </label> | ||
| <select | ||
| className="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none" | ||
| value={language} | ||
| onChange={(e) => setLanguage(e.target.value)} | ||
| > | ||
|
|
||
| <option value="ko">νκ΅μ΄</option> | ||
| <option value="en">μμ΄</option> | ||
| <option value="ja">μΌλ³Έμ΄</option> | ||
| </select> | ||
| </div> |
There was a problem hiding this comment.
νμ¬ SearchCompμμ languageμ includeAdult μνκ° λ³κ²½λ λλ§λ€ μ 체 μ»΄ν¬λνΈκ° 리λ λλ§λ©λλ€. μ΄ λΆλΆμ useCallbackμΌλ‘ μ΅μ ννκ³ , μν λ³κ²½μ μ΅μννλ©΄ κ²μ μ±λ₯μ΄ ν₯μλ κ² κ°μ΅λλ€. λν form μ μΆ μμλ§ μ€μ κ²μμ΄ μ΄λ£¨μ΄μ§λλ‘ λ‘μ§μ λΆλ¦¬ν΄λ³΄λ©΄ μ΄λ¨κΉμ?
| <select | ||
| className="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none" | ||
| value={language} | ||
| onChange={(e) => setLanguage(e.target.value)} | ||
| > | ||
|
|
||
| <option value="ko">νκ΅μ΄</option> | ||
| <option value="en">μμ΄</option> | ||
| <option value="ja">μΌλ³Έμ΄</option> | ||
| </select> |
There was a problem hiding this comment.
νμ¬ selectμμ "ko", "en", "ja" κ°μ μ¬μ©νμ§λ§ μ€μ API νΈμΆμμλ "ko-KR" ννλ₯Ό μ¬μ©νμ¬ λΆμΌμΉκ° λ°μν©λλ€. μΈμ΄ μ½λ 맀νμ μΌκ΄μ± μκ² μ²λ¦¬νλ©΄ κ²μ κ²°κ³Όμ μ νμ±μ΄ ν₯μλ κ² κ°μ΅λλ€!
There was a problem hiding this comment.
πChallenge λ―Έμ μ λ°λΌ νλ‘μ νΈ μ 체μ μ±λ₯ μ΅μ νλ UX κ°μ μλ λμ ν΄λ³΄μΈμ! μ½λ νμ§ μΈ‘λ©΄μμλ μ€λ³΅ μ κ±°, μ± μ λΆλ¦¬, μμΈ μ²λ¦¬ κ°μ λ±μ ν΅ν΄ κ°λ μ±κ³Ό μ μ§λ³΄μμ±μ΄ μ’μ μ½λλ‘ λ¦¬ν©ν λ§ ν΄λ³΄λ©΄ μ΄λ¨κΉμ π
π λ―Έμ λ²νΈ
10μ£Όμ°¨ Misson 1
π ꡬν μ¬ν
10μ£Όμ°¨ λ―Έμ 1
π μ€ν¬λ¦°μ·
2025-06-01.012735.mp4
β 체ν¬λ¦¬μ€νΈ
π€ μ§λ¬Έ μ¬ν