{"id":80,"date":"2026-06-26T13:32:24","date_gmt":"2026-06-26T13:32:24","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=80"},"modified":"2026-06-26T13:32:24","modified_gmt":"2026-06-26T13:32:24","slug":"home-page","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=80","title":{"rendered":"Home.jsx \u2014 \uba54\uc778 \ud398\uc774\uc9c0 \uc644\uc131\ud558\uae30"},"content":{"rendered":"<blockquote>\n<p><strong>Tip<\/strong>: <strong>Gemini CLI\ub85c \uad6c\ud604\ud558\uae30 \u2014 Home \uba54\uc778 \ud398\uc774\uc9c0<\/strong><\/p>\n<ul>\n<li><strong>\ud504\ub86c\ud504\ud2b8:<\/strong> <code>gemini &quot;src\/components\/Home.jsx\ub97c \uc791\uc131\ud574\uc918. useOutletContext\ub85c now, popular, topRated, loading \ub370\uc774\ud130\ub97c \ubc1b\uc544\uc57c \ud574. \uc0c1\ub2e8\uc5d0\ub294 \ubc30\uacbd \uc601\uc0c1([\uc601\uc0c1 \ud30c\uc77c\uba85])\uacfc \uc778\uae30\uc601\ud654 \uccab \ubc88\uc9f8 \ud56d\ubaa9\uc744 \ud788\uc5b4\ub85c\ub85c \ud45c\uc2dc\ud558\uace0, \ud558\ub2e8\uc5d0\ub294 \ud604\uc7ac \uc0c1\uc601\uc791\/\uc778\uae30 \uc601\ud654\/\ucd5c\uace0 \ud3c9\uc810 3\uac1c\uc758 Section \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc918. \ub85c\ub529 \uc911\uc5d0\ub294 Spinner\ub97c \ud45c\uc2dc\ud574\uc918.&quot;<\/code>\n<ul>\n<li><strong>\uc0ac\uc6a9 \uac00\uc774\ub4dc:<\/strong> <code>[\uc601\uc0c1 \ud30c\uc77c\uba85]<\/code>\uc744 <code>public<\/code> \ud3f4\ub354\uc5d0 \ub123\uc740 \ub3d9\uc601\uc0c1 \ud30c\uc77c \uc774\ub984\uc73c\ub85c \ubc14\uafbc\ub2e4(\uc608: <code>video.mp4<\/code>).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/blockquote>\n<h2>1. Home \ud398\uc774\uc9c0\uc758 \uad6c\uc870<\/h2>\n<p>GOFLEX\uc758 \uba54\uc778 \ud398\uc774\uc9c0\ub294 \ub450 \uac00\uc9c0 \uc601\uc5ed\uc73c\ub85c \ub098\ub25c\ub2e4.<\/p>\n<ul>\n<li><strong>\ud788\uc5b4\ub85c(Hero) \uc601\uc5ed<\/strong> \u2014 \ubc30\uacbd \uc601\uc0c1 + \uc778\uae30 \uc601\ud654 \ud558\uc774\ub77c\uc774\ud2b8 + &quot;\uc790\uc138\ud788 \ubcf4\uae30&quot; \ubc84\ud2bc<\/li>\n<li><strong>\uc601\ud654 \ubaa9\ub85d \uc601\uc5ed<\/strong> \u2014 \ud604\uc7ac \uc0c1\uc601\uc791, \uc778\uae30 \uc601\ud654, \ucd5c\uace0 \ud3c9\uc810 3\uac1c \uc139\uc158<\/li>\n<\/ul>\n<table>\n<thead>\n<tr>\n<th align=\"left\">\uc21c\uc11c<\/th>\n<th align=\"left\">\ub9cc\ub4e4 \uae30\ub2a5<\/th>\n<th align=\"left\">\ud575\uc2ec \uac1c\ub150<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">1\ub2e8\uacc4<\/td>\n<td align=\"left\">import + \ub370\uc774\ud130 \ubc1b\uae30<\/td>\n<td align=\"left\"><code>useOutletContext<\/code><\/td>\n<\/tr>\n<tr>\n<td align=\"left\">2\ub2e8\uacc4<\/td>\n<td align=\"left\">\ud788\uc5b4\ub85c \uc601\uc5ed<\/td>\n<td align=\"left\">\ube44\ub514\uc624 \ubc30\uacbd, \uc870\uac74\ubd80 \ub80c\ub354\ub9c1<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">3\ub2e8\uacc4<\/td>\n<td align=\"left\">\uc601\ud654 \ubaa9\ub85d \uc601\uc5ed<\/td>\n<td align=\"left\"><code>Section<\/code> \uc7ac\uc0ac\uc6a9, <code>loading<\/code> \ucc98\ub9ac<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>2. 1\ub2e8\uacc4 \u2014 import + \ub370\uc774\ud130 \ubc1b\uae30<\/h2>\n<p><code>src\/components\/Home.jsx<\/code> \ud30c\uc77c\uc744 \uc5f4\uace0 \uc784\uc2dc \ucf54\ub4dc\ub97c <strong>\ubaa8\ub450 \uc9c0\uc6b4 \ub4a4<\/strong> \uc544\ub798\ub97c \uc791\uc131\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">import { useOutletContext, Link } from &quot;react-router&quot;;\nimport { Section } from &quot;.\/Section.jsx&quot;;\nimport { Spinner } from &quot;.\/UI.jsx&quot;;\n\nexport function Home() {\n  const { now, popular, topRated, loading } = useOutletContext();\n\n  \/\/ \uc778\uae30\uc601\ud654 \uccab \ubc88\uc9f8\ub97c \ud788\uc5b4\ub85c\uc5d0 \ud45c\uc2dc\n  const hero = popular.length &gt; 0 ? popular[0] : null;\n<\/code><\/pre>\n<table>\n<thead>\n<tr>\n<th align=\"left\">\uc904<\/th>\n<th align=\"left\">\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">1<\/td>\n<td align=\"left\"><code>useOutletContext<\/code>(\uc720\uc988\uc544\uc6b8\ub81b\ucee8\ud14d\uc2a4\ud2b8)\ub85c 5\ud3b8\uc5d0\uc11c <code>App.jsx<\/code>\uac00 <code>Outlet<\/code>\uc758 <code>context<\/code> prop\uc73c\ub85c \uc804\ub2ec\ud55c \ub370\uc774\ud130\ub97c \ubc1b\ub294\ub2e4. <code>Link<\/code>\ub294 \ud788\uc5b4\ub85c\uc758 &quot;\uc790\uc138\ud788 \ubcf4\uae30&quot; \ubc84\ud2bc\uc5d0 \uc0ac\uc6a9\ud55c\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">3<\/td>\n<td align=\"left\">4\ud3b8\uc5d0\uc11c \ub9cc\ub4e0 <code>Spinner<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \uac00\uc838\uc628\ub2e4. \ub370\uc774\ud130\uac00 \uc544\uc9c1 \ub3c4\ucc29\ud558\uc9c0 \uc54a\uc558\uc744 \ub54c &quot;\ubd88\ub7ec\uc624\ub294 \uc911&#8230;&quot; \uba54\uc2dc\uc9c0\ub97c \ud45c\uc2dc\ud55c\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">6<\/td>\n<td align=\"left\"><strong>\uac1d\uccb4 \uad6c\uc870 \ubd84\ud574<\/strong>(Destructuring, \ub514\uc2a4\ud2b8\ub7ed\ucc98\ub9c1) \u2014 \uac1d\uccb4\uc5d0\uc11c \ud544\uc694\ud55c \ud504\ub85c\ud37c\ud2f0\ub97c \uac1c\ubcc4 \ubcc0\uc218\ub85c \ucd94\ucd9c\ud558\ub294 \ubb38\ubc95\uc774\ub2e4. <code>useOutletContext()<\/code>\uac00 \ubc18\ud658\ud55c \uac1d\uccb4\uc5d0\uc11c <code>now<\/code>, <code>popular<\/code>, <code>topRated<\/code>, <code>loading<\/code>\uc744 \uac01\uac01 \ubcc0\uc218\ub85c \uaebc\ub0b8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">8<\/td>\n<td align=\"left\">\uc0bc\ud56d \uc5f0\uc0b0\uc790(<code>\uc870\uac74 ? \ucc38 : \uac70\uc9d3<\/code>)\uc774\ub2e4. <code>popular<\/code> \ubc30\uc5f4\uc5d0 \uc694\uc18c\uac00 \uc788\uc73c\uba74 \uccab \ubc88\uc9f8 \uc694\uc18c(<code>popular[0]<\/code>)\ub97c <code>hero<\/code>\uc5d0 \uc800\uc7a5\ud558\uace0, \uc5c6\uc73c\uba74 <code>null<\/code>\uc744 \uc800\uc7a5\ud55c\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>3. 2\ub2e8\uacc4 \u2014 \ud788\uc5b4\ub85c \uc601\uc5ed<\/h2>\n<p>\uac19\uc740 <code>Home.jsx<\/code> \ud30c\uc77c\uc5d0\uc11c, 1\ub2e8\uacc4\uc758 <code>hero<\/code> \ubcc0\uc218 \uc120\uc5b8 \ubc14\ub85c \uc544\ub798\uc5d0 <code>return<\/code>\uc744 \uc791\uc131\ud55c\ub2e4. \ud788\uc5b4\ub85c \uc601\uc5ed\uc740 \uc138 \uacb9\uc758 \ub808\uc774\uc5b4(\ubc30\uacbd \uc601\uc0c1 \u2192 \uc624\ubc84\ub808\uc774 \u2192 \ud14d\uc2a4\ud2b8)\ub85c \uad6c\uc131\ub41c\ub2e4. <code>position: absolute<\/code> \uc694\uc18c\ub97c \uacb9\uccd0\uc11c \ub808\uc774\uc5b4\ub97c \uad6c\uc131\ud558\ub294 CSS \ud3ec\uc9c0\uc154\ub2dd \uae30\ubc95\uc774\ub2e4.<\/p>\n<h4>\ube44\ub514\uc624<\/h4>\n<pre><code class=\"language-jsx\">  return (\n    &lt;&gt;\n      &lt;section className=&quot;relative h-screen overflow-hidden&quot;&gt;\n        &lt;video src=&quot;video.mp4&quot; className=&quot;absolute top-0 left-0 w-full h-full object-cover&quot; autoPlay muted loop playsInline \/&gt;\n        &lt;div className=&quot;absolute bg-black\/50 w-full h-full top-0 left-0&quot;&gt;&lt;\/div&gt;\n    {\/* \ub2e4\uc74c\ud0ed\uc73c\ub85c *\/}\n<\/code><\/pre>\n<table>\n<thead>\n<tr>\n<th align=\"left\">\uc904<\/th>\n<th align=\"left\">\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">3<\/td>\n<td align=\"left\"><code>relative<\/code> \u2014 CSS <code>position: relative<\/code>\uc774\ub2e4. \uc790\uc2dd \uc694\uc18c \uc911 <code>position: absolute<\/code>\uc778 \uc694\uc18c\uc758 \uae30\uc900 \ucee8\ud14c\uc774\ub108\uac00 \ub41c\ub2e4. <code>h-screen<\/code>\uc740 \ubdf0\ud3ec\ud2b8 \uc804\uccb4 \ub192\uc774\ub97c \ucc28\uc9c0\ud55c\ub2e4. <code>overflow-hidden<\/code>\uc740 \uc790\uc2dd \uc694\uc18c\uac00 \uc601\uc5ed\uc744 \ubc97\uc5b4\ub098\uba74 \uc798\ub77c\ub0b8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">4<\/td>\n<td align=\"left\"><code>absolute top-0 left-0<\/code> \u2014 CSS <code>position: absolute<\/code>\uc774\ub2e4. \uac00\uc7a5 \uac00\uae4c\uc6b4 <code>relative<\/code> \ubd80\ubaa8\ub97c \uae30\uc900\uc73c\ub85c \uc88c\uc0c1\ub2e8\uc5d0 \uc704\uce58\ud55c\ub2e4. <code>object-cover<\/code>\ub294 \uac00\ub85c\uc138\ub85c \ube44\uc728\uc744 \uc720\uc9c0\ud558\uba74\uc11c \ucee8\ud14c\uc774\ub108\ub97c \uaf49 \ucc44\uc6b4\ub2e4. <code>autoPlay muted loop playsInline<\/code>\uc740 \uc790\ub3d9 \uc7ac\uc0dd, \uc74c\uc18c\uac70, \ubc18\ubcf5, \ubaa8\ubc14\uc77c \uc778\ub77c\uc778 \uc7ac\uc0dd \uc18d\uc131\uc774\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">5<\/td>\n<td align=\"left\"><code>bg-black\/50<\/code> \u2014 50% \ud22c\uba85\ud55c \uac80\uc815 \ub9c9\uc744 \uc601\uc0c1 \uc704\uc5d0 \ub36e\ub294\ub2e4. \uae00\uc790\uac00 \uc798 \ubcf4\uc774\ub3c4\ub85d \ubc30\uacbd\uc744 \uc5b4\ub461\uac8c \ub9cc\ub4e0\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>\ud788\uc5b4\ub85c \ud14d\uc2a4\ud2b8 + \uc778\uae30\uc601\ud654<\/h4>\n<pre><code class=\"language-jsx\">        &lt;div className=&quot;relative container mx-auto flex flex-col justify-center items-center h-full text-center px-6&quot;&gt;\n          &lt;h2 className=&quot;text-5xl md:text-7xl lg:text-9xl font-bold text-yellow-400&quot;&gt;GOFLEX&lt;\/h2&gt;\n          &lt;p className=&quot;text-xl md:text-2xl text-white mt-4&quot;&gt;\ucd5c\uc2e0 \uc601\ud654\uc640 \uc778\uae30 \uc791\ud488\uc744 \ub9cc\ub098\ubcf4\uc138\uc694.&lt;\/p&gt;\n          {hero &amp;&amp; (\n            &lt;div className=&quot;mt-8 flex flex-col items-center gap-3&quot;&gt;\n              &lt;p className=&quot;text-gray-300 text-lg&quot;&gt;\uc9c0\uae08 \uc778\uae30 \uc788\ub294 \uc601\ud654&lt;\/p&gt;\n              &lt;h3 className=&quot;text-3xl md:text-4xl font-bold text-white&quot;&gt;{hero.title}&lt;\/h3&gt;\n              &lt;Link to={`\/movie\/${hero.id}`} className=&quot;mt-2 bg-yellow-400 text-black px-8 py-3 rounded-lg font-bold hover:bg-yellow-300 transition-colors&quot;&gt;\n                \uc790\uc138\ud788 \ubcf4\uae30\n              &lt;\/Link&gt;\n            &lt;\/div&gt;\n          )}\n        &lt;\/div&gt;\n      &lt;\/section&gt;\n<\/code><\/pre>\n<table>\n<thead>\n<tr>\n<th align=\"left\">\uc904<\/th>\n<th align=\"left\">\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">1<\/td>\n<td align=\"left\"><code>relative<\/code> \u2014 \ub0b4\ubd80 <code>absolute<\/code> \uc694\uc18c\uc758 \uae30\uc900 \ucee8\ud14c\uc774\ub108\uc774\ub2e4. <code>container mx-auto<\/code> \u2014 \ucd5c\ub300 \ub108\ube44 \uc81c\ud55c + \uac00\ub85c \uc911\uc559 \ubc30\uce58\uc774\ub2e4. <code>flex flex-col<\/code> \u2014 \uc790\uc2dd \uc694\uc18c\ub97c \uc138\ub85c \ubc29\ud5a5\uc73c\ub85c \ubc30\uce58\ud55c\ub2e4. <code>justify-center items-center<\/code> \u2014 \uc138\ub85c\u00b7\uac00\ub85c \ubaa8\ub450 \uac00\uc6b4\ub370 \uc815\ub82c\ud55c\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">2<\/td>\n<td align=\"left\"><code>text-5xl md:text-7xl lg:text-9xl<\/code> \u2014 \ubc18\uc751\ud615 \uae00\uaf34 \ud06c\uae30\uc774\ub2e4. <code>md:<\/code>\ub294 768px \uc774\uc0c1, <code>lg:<\/code>\ub294 1024px \uc774\uc0c1\uc5d0\uc11c \uc801\uc6a9\ub41c\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">4-12<\/td>\n<td align=\"left\"><code>hero &amp;&amp; (...)<\/code> \u2014 \ub17c\ub9ac AND \ub2e8\ucd95 \ud3c9\uac00(Short-circuit evaluation)\uc774\ub2e4. <code>&amp;&amp;<\/code> \uc5f0\uc0b0\uc790\ub294 \uc67c\ucabd\uc774 <code>null<\/code>, <code>undefined<\/code>, <code>false<\/code> \ub4f1 \uac70\uc9d3 \uac12\uc774\uba74 \uc624\ub978\ucabd\uc744 \ud3c9\uac00\ud558\uc9c0 \uc54a\uace0 \uac74\ub108\ub6f4\ub2e4. <code>hero<\/code>\uc5d0 \uac12\uc774 \uc788\uc744 \ub54c\ub9cc \uc778\uae30 \uc601\ud654 \uc815\ubcf4\uac00 \ub80c\ub354\ub9c1\ub41c\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">8<\/td>\n<td align=\"left\"><code>Link to={...}<\/code> \u2014 \ud074\ub9ad \uc2dc <code>\/movie\/{hero.id}<\/code> \uacbd\ub85c\ub85c \uc774\ub3d9\ud55c\ub2e4. <code>hover:bg-yellow-300<\/code> \u2014 \ub9c8\uc6b0\uc2a4 \uc624\ubc84 \uc2dc \ubc30\uacbd\uc0c9\uc774 \ubc1d\uc544\uc9c0\ub294 CSS \uac00\uc0c1 \ud074\ub798\uc2a4\uc774\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>4. 3\ub2e8\uacc4 \u2014 \uc601\ud654 \ubaa9\ub85d \uc601\uc5ed<\/h2>\n<p>\uac19\uc740 <code>Home.jsx<\/code> \ud30c\uc77c\uc5d0\uc11c, \ud788\uc5b4\ub85c <code>&lt;\/section&gt;<\/code> \ud0dc\uadf8 \ubc14\ub85c \uc544\ub798\uc5d0 \uc774\uc5b4\uc11c \uc791\uc131\ud55c\ub2e4. <code>loading<\/code> \uc0c1\ud0dc\uc5d0 \ub530\ub77c \uc2a4\ud53c\ub108 \ub610\ub294 \uc601\ud654 \ubaa9\ub85d\uc744 \uc870\uac74\ubd80 \ub80c\ub354\ub9c1\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">      {loading &amp;&amp; &lt;Spinner className=&quot;text-center py-20 bg-black&quot; \/&gt;}\n\n      {!loading &amp;&amp; (\n        &lt;&gt;\n          &lt;Section title=&quot;\ud604\uc7ac \uc0c1\uc601\uc791&quot; items={now} category=&quot;now_playing&quot; \/&gt;\n          &lt;Section title=&quot;\uc778\uae30 \uc601\ud654&quot; items={popular} category=&quot;popular&quot; \/&gt;\n          &lt;Section title=&quot;\ucd5c\uace0 \ud3c9\uc810&quot; items={topRated} category=&quot;top_rated&quot; \/&gt;\n        &lt;\/&gt;\n      )}\n    &lt;\/&gt;\n  );\n}\n<\/code><\/pre>\n<table>\n<thead>\n<tr>\n<th align=\"left\">\uc904<\/th>\n<th align=\"left\">\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">1<\/td>\n<td align=\"left\"><code>loading<\/code>\uc774 <code>true<\/code>\uc774\uba74 <code>Spinner<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub85c &quot;\ubd88\ub7ec\uc624\ub294 \uc911&#8230;&quot; \ud14d\uc2a4\ud2b8\ub97c \ud45c\uc2dc\ud55c\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">3-8<\/td>\n<td align=\"left\"><code>!<\/code>(NOT \uc5f0\uc0b0\uc790)\ub294 \ubd88\ub9b0 \uac12\uc744 \ubc18\uc804\uc2dc\ud0a8\ub2e4. <code>loading<\/code>\uc774 <code>true<\/code>\uc774\uba74 <code>!loading<\/code>\uc740 <code>false<\/code>, <code>loading<\/code>\uc774 <code>false<\/code>\uc774\uba74 <code>!loading<\/code>\uc740 <code>true<\/code>\uac00 \ub41c\ub2e4. \ub85c\ub529\uc774 \ub05d\ub0ac\uc744 \ub54c(<code>false<\/code>) 3\uac1c\uc758 <code>Section<\/code>\uc744 \ud45c\uc2dc\ud55c\ub2e4. <code>category<\/code> prop\uc740 &quot;\ub354\ubcf4\uae30&quot; \ub9c1\ud06c\uc5d0 \uc0ac\uc6a9\ub41c\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">5<\/td>\n<td align=\"left\"><code>category=&quot;now_playing&quot;<\/code>\uc740 <code>Section<\/code>\uc5d0\uc11c <code>\/category\/now_playing<\/code> \ub9c1\ud06c\ub97c \uc0dd\uc131\ud55c\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>5. \ub3d9\uc791 \ud655\uc778<\/h2>\n<table>\n<thead>\n<tr>\n<th align=\"left\">\ud655\uc778 \ud56d\ubaa9<\/th>\n<th align=\"left\">\uae30\ub300 \uacb0\uacfc<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">\ud788\uc5b4\ub85c \uc601\uc5ed<\/td>\n<td align=\"left\">\ubc30\uacbd \uc601\uc0c1 \uc704\uc5d0 &quot;GOFLEX&quot; + \uc778\uae30 \uc601\ud654 \uc81c\ubaa9 + &quot;\uc790\uc138\ud788 \ubcf4\uae30&quot; \ubc84\ud2bc<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">&quot;\uc790\uc138\ud788 \ubcf4\uae30&quot; \ud074\ub9ad<\/td>\n<td align=\"left\">\ud574\ub2f9 \uc601\ud654 \uc0c1\uc138 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">\uc2a4\ud06c\ub864 \uc544\ub798<\/td>\n<td align=\"left\">&quot;\ud604\uc7ac \uc0c1\uc601\uc791&quot;, &quot;\uc778\uae30 \uc601\ud654&quot;, &quot;\ucd5c\uace0 \ud3c9\uc810&quot; \uc139\uc158 \ud45c\uc2dc<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<blockquote>\n<p><strong>Warning<\/strong>: \uc544\uc9c1 <code>Section<\/code>\uacfc <code>Card<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc9c0 \uc54a\uc558\uc73c\ubbc0\ub85c \uc5d0\ub7ec\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub2e4. \ubc14\ub85c \ub2e4\uc74c \ud3b8\uc5d0\uc11c \ub9cc\ub4e0\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<h2>6. \uc804\uccb4 \ucf54\ub4dc<\/h2>\n<pre><code class=\"language-jsx\">import { useOutletContext, Link } from &quot;react-router&quot;;\nimport { Section } from &quot;.\/Section.jsx&quot;;\nimport { Spinner } from &quot;.\/UI.jsx&quot;;\n\nexport function Home() {\n  const { now, popular, topRated, loading } = useOutletContext();\n\n  \/\/ \uc778\uae30\uc601\ud654 \uccab \ubc88\uc9f8\ub97c \ud788\uc5b4\ub85c\uc5d0 \ud45c\uc2dc\n  const hero = popular.length &gt; 0 ? popular[0] : null;\n\n  return (\n    &lt;&gt;\n      {\/* \uc0c1\ub2e8 \ube44\ub514\uc624 \uc601\uc5ed *\/}\n      &lt;section className=&quot;relative h-screen overflow-hidden&quot;&gt;\n        &lt;video src=&quot;video.mp4&quot; className=&quot;absolute top-0 left-0 w-full h-full object-cover&quot; autoPlay muted loop playsInline \/&gt;\n        &lt;div className=&quot;absolute bg-black\/50 w-full h-full top-0 left-0&quot;&gt;&lt;\/div&gt;\n        &lt;div className=&quot;relative container mx-auto flex flex-col justify-center items-center h-full text-center px-6&quot;&gt;\n          &lt;h2 className=&quot;text-5xl md:text-7xl lg:text-9xl font-bold text-yellow-400&quot;&gt;GOFLEX&lt;\/h2&gt;\n          &lt;p className=&quot;text-xl md:text-2xl text-white mt-4&quot;&gt;\ucd5c\uc2e0 \uc601\ud654\uc640 \uc778\uae30 \uc791\ud488\uc744 \ub9cc\ub098\ubcf4\uc138\uc694.&lt;\/p&gt;\n          {hero &amp;&amp; (\n            &lt;div className=&quot;mt-8 flex flex-col items-center gap-3&quot;&gt;\n              &lt;p className=&quot;text-gray-300 text-lg&quot;&gt;\uc9c0\uae08 \uc778\uae30 \uc788\ub294 \uc601\ud654&lt;\/p&gt;\n              &lt;h3 className=&quot;text-3xl md:text-4xl font-bold text-white&quot;&gt;{hero.title}&lt;\/h3&gt;\n              &lt;Link to={`\/movie\/${hero.id}`} className=&quot;mt-2 bg-yellow-400 text-black px-8 py-3 rounded-lg font-bold hover:bg-yellow-300 transition-colors&quot;&gt;\n                \uc790\uc138\ud788 \ubcf4\uae30\n              &lt;\/Link&gt;\n            &lt;\/div&gt;\n          )}\n        &lt;\/div&gt;\n      &lt;\/section&gt;\n\n      {\/* \uc601\ud654 \ubaa9\ub85d *\/}\n      {loading &amp;&amp; &lt;Spinner className=&quot;text-center py-20 bg-black&quot; \/&gt;}\n\n      {!loading &amp;&amp; (\n        &lt;&gt;\n          &lt;Section title=&quot;\ud604\uc7ac \uc0c1\uc601\uc791&quot; items={now} category=&quot;now_playing&quot; \/&gt;\n          &lt;Section title=&quot;\uc778\uae30 TV&quot; items={popular} category=&quot;popular&quot; \/&gt;\n          &lt;Section title=&quot;\ucd5c\uace0 \ud3c9\uc810&quot; items={topRated} category=&quot;top_rated&quot; \/&gt;\n        &lt;\/&gt;\n      )}\n    &lt;\/&gt;\n  );\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Tip: Gemini CLI\ub85c \uad6c\ud604\ud558\uae30 \u2014 Home \uba54\uc778 \ud398\uc774\uc9c0 \ud504\ub86c\ud504\ud2b8: gemini &quot;src\/components\/Home.jsx\ub97c \uc791\uc131\ud574\uc918. useOutletContext\ub85c now, popular, topRated, loading \ub370\uc774\ud130\ub97c \ubc1b\uc544\uc57c \ud574. \uc0c1\ub2e8\uc5d0\ub294 \ubc30\uacbd \uc601\uc0c1([\uc601\uc0c1 \ud30c\uc77c\uba85])\uacfc \uc778\uae30\uc601\ud654 \uccab \ubc88\uc9f8 \ud56d\ubaa9\uc744 \ud788\uc5b4\ub85c\ub85c \ud45c\uc2dc\ud558\uace0, \ud558\ub2e8\uc5d0\ub294 \ud604\uc7ac \uc0c1\uc601\uc791\/\uc778\uae30 \uc601\ud654\/\ucd5c\uace0 \ud3c9\uc810 3\uac1c\uc758 Section \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc918. \ub85c\ub529 \uc911\uc5d0\ub294 Spinner\ub97c \ud45c\uc2dc\ud574\uc918.&quot; \uc0ac\uc6a9 \uac00\uc774\ub4dc: [\uc601\uc0c1 \ud30c\uc77c\uba85]\uc744 public \ud3f4\ub354\uc5d0 \ub123\uc740 \ub3d9\uc601\uc0c1 \ud30c\uc77c \uc774\ub984\uc73c\ub85c \ubc14\uafbc\ub2e4(\uc608: video.mp4). &#8230; <a title=\"Home.jsx \u2014 \uba54\uc778 \ud398\uc774\uc9c0 \uc644\uc131\ud558\uae30\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=80\" aria-label=\"Home.jsx \u2014 \uba54\uc778 \ud398\uc774\uc9c0 \uc644\uc131\ud558\uae30\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-80","post","type-post","status-publish","format-standard","hentry","category-react-movie-app"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=80"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/80\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}