{"id":12871,"date":"2026-10-25T09:41:41","date_gmt":"2026-10-25T00:41:41","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=12871"},"modified":"2026-10-25T12:59:40","modified_gmt":"2026-10-25T03:59:40","slug":"webui-tailwind-nextjs-6","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/10\/25\/webui-tailwind-nextjs-6\/","title":{"rendered":"[WebUI]Tailwind + nextjs(Mega Menu) \u2013 6"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb \uba54\uac00\uba54\ub274\ub294 \uae30\ubcf8 \uba54\ub274\ub97c \ub9c8\uc6b0\uc2a4 \uc120\ud0dd\ud558\uba74 \uc544\ub798\uc5d0 \uba54\ub274\ud328\ub110\uc774 \ub098\ud0c0\ub0a9\ub2c8\ub2e4.
A mega menu is one where a menu panel appears below the main menu item when you select it with your mouse.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uba54\uac00\uba54\ub274\ub97c \uc0ac\uc6a9\ud558\uba74 \ub354 \ub9ce\uc740 \ub9c1\ud06c \ud56d\ubaa9\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
Using a mega menu allows for a greater number of link items.<\/p>\n\n\n\n

\ud83d\udcc1 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870 \/ Directory structure<\/p>\n\n\n\n

tailwindcss-nextjs\/\n\u2514\u2500\u2500 app\/\n    \u251c\u2500\u2500 layout.tsx\n    \u251c\u2500\u2500 page.tsx (root, \/)\n    \u251c\u2500\u2500 globals.css\n    \u251c\u2500\u2500 favicon.ico\n    \u2502\n    \u251c\u2500\u2500 ui\/                              \u2190 UI Components\n    \u2502   \u251c\u2500\u2500 page.tsx                     \u2190 \/ui\n    \u2502   \u2514\u2500\u2500 _components\/\n    \u2502       \u251c\u2500\u2500 button.tsx               \u2190 Button\n    \u2502       \u251c\u2500\u2500 dropdown.tsx             \u2190 Select\/Dropdown\n    \u2502       \u2514\u2500\u2500 navigation\/\n    \u2502           \u251c\u2500\u2500 HorizontalNavMenu.tsx  \u2190 Horizontal Nav Menu\n    \u2502           \u2514\u2500\u2500 MegaMenu.tsx           \u2190 Mega Menu<\/strong>\n    \u2502\n    \u251c\u2500\u2500 megamenu\/   <\/strong>                     \n    \u2502   \u251c\u2500\u2500 page.tsx                     \u2190 \/megamenu -> Main route\n    \u2502   \u2514\u2500\u2500 2b\/page.tsx -> page.tsx      \u2190 \/megamenu\/2b\n    \u2502\n    \u251c\u2500\u2500 button-css\/ , button-tailwind\/\n    \u251c\u2500\u2500 card-css\/ , card-tailwind\/\n    \u2514\u2500\u2500 form-css\/ , form-tailwind\/<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \uba54\ub274 \ucef4\ud3ec\ub10c\ud2b8 \/ Menu Component<\/p>\n\n\n\n
\u2714\ufe0f MegaMenu.tsx<\/p>\n\n\n\n
1)\uba54\ub274 \ub370\uc774\ud130(\ubc30\uc5f4) \/ Menu data (array)<\/p>\n\n\n\n
const MEGA_DATA = [\n  {\n    title: '\uce74\ud14c\ucf54\ub9ac\/Category',\n    id: 'category',\n    columns: [\n      {\n        heading: '\uac8c\uc784\/Game',\n        links: [\n          { label: '2B', desc: 'Nier:Automata', href: '\/megamenu\/2b' },\n          { label: '9S', desc: 'Nier:Automata', href: '\/megamenu\/branding' },\n          { label: '\uc544\uc11c\ubaa8\uac74\/Arthor Morgan', desc: 'Red Dead Redemption2', href: '\/megamenu\/branding' },\n        ],\n      },\n      {\n        heading: '\uc74c\uc545\/Music',\n        links: [\n          { label: 'Spotify', desc: 'Spotify', href: '\/megamenu\/web' },\n          { label: 'Apple Music', desc: 'Apple Music', href: '\/megamenu\/ui' },\n        ],\n      },\n      {\n        heading: '\uac1c\ubc1c\/Development',\n        links: [\n          { label: '\ucf54\ud2c0\ub9b0\/Kotlin', desc: 'Android', href: '\/megamenu\/sns' },\n          { label: '\uc2a4\uc704\ud504\ud2b8\/Swift', desc: 'IOS', href: '\/megamenu\/seo' },\n        ],\n      },\n    ],\n    banner: { title: 'Freelifemakers 1.2 ', desc: '\uc0c8\ub85c\uc6b4 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\/New UI Library', href: '\/megamenu\/new' },\n  },\n  { title: 'SNS', href: 'https:\/\/freelifemakers.org', id: 'sns' },\n  { title: '\uc6f9\uc0ac\uc774\ud2b8\/website', href: 'https:\/\/freelifemakers.org', id: 'website' },\n]\n<\/code><\/pre>\n\n\n\n
A.\ud654\uba74\uc5d0 \uc2e4\uc81c\ub85c \ud45c\uc2dc\ub418\ub294 \uba54\ub274\ubd80\ubd84\uc785\ub2c8\ub2e4.
This is the part of the menu that is actually displayed on the screen.<\/p>\n\n\n\n
2)PC\uc6a9 \uba54\ub274 \uc785\ub2c8\ub2e4. \/ This is the menu for PC.<\/p>\n\n\n\n
        {\/* PC - \uba54\uac00\uba54\ub274 \uba54\uc778 \/ Mega menu main *\/}\n        <nav className=\"hidden md:flex items-center h-16\">\n          {MEGA_DATA.map((item) => (\n            <div\n              key={item.id}\n              className=\"h-16 flex items-center\"\n              onMouseEnter={() => setOpenId(item.id)}\n              onMouseLeave={() => setOpenId(null)}\n            >\n              {item.columns ? (\n                <button className={`px-4 text-sm font-medium ${openId === item.id ? 'text-black font-bold' : 'text-gray-600'}`}>\n                  {item.title} {openId === item.id ? '\u25b2' : '\u25bc'}\n                <\/button>\n              ) : (\n                <Link href={item.href!} className=\"px-4 text-sm font-medium text-gray-600\">\n                  {item.title}\n                <\/Link>\n              )}\n            <\/div>\n          ))}\n        <\/nav><\/code><\/pre>\n\n\n\n
A.MEGA_DATA\uc758 \ub370\uc774\ud130\ub97c map\ud568\uc218\ub85c \uaebc\ub0b4\uc11c \ucd9c\ub825\ud569\ub2c8\ub2e4.(MEGA_DATA.map((item) =>)
Extract the data from MEGA_DATA using the map function and output it.<\/p>\n\n\n\n
B.\ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 \uc0bc\uac01\ud615 \ubaa8\uc591\uc774 \ubc14\ub01d\ub2c8\ub2e4.
Clicking the button changes the shape of the triangle.<\/p>\n\n\n\n
{item.title} {openId === item.id ? '\u25b2' : '\u25bc'}<\/code><\/pre>\n\n\n\n
C.item.colums\uc5d0 \uc544\ubb34 \uac12\uc774 \uc5c6\uc73c\uba74 \ub9c1\ud06c\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4.
If there are no values \u200b\u200bin item.columns, a link is displayed.<\/p>\n\n\n\n
 <Link href={item.href!} className=\"px-4 text-sm font-medium text-gray-600\">\n    {item.title}\n <\/Link><\/code><\/pre>\n\n\n\n
2)PC\uc6a9 \uba54\ub274\ud328\ub110 \/ Menu panel for PC<\/p>\n\n\n\n
            {MEGA_DATA.find(i => i.id === openId)!.columns!.map((col) => (\n              <div key={col.heading}>\n                <h4 className=\"font-bold text-sm mb-3\">{col.heading}<\/h4>\n                <div className=\"flex flex-col gap-3\">\n                  {col.links.map((link) => (\n                    <Link key={link.label} href={link.href} className=\"group\">\n                      <div className=\"text-sm font-medium group-hover:text-black\">{link.label}<\/div>\n                      <div className=\"text-xs text-gray-400\">{link.desc}<\/div>\n                    <\/Link>\n                  ))}\n                <\/div>\n              <\/div>\n            ))}<\/code><\/pre>\n\n\n\n
A.\uba54\ub274\ub97c \ud074\ub9ad\ud558\uba74 \ub098\ud0c0\ub098\ub294 \uba54\ub274 \ud328\ub110\uc785\ub2c8\ub2e4.
This is the menu panel that appears when you click the menu.<\/p>\n\n\n\n
B.MEGA_DATA\uc5d0 \uc788\ub294 \uc815\ubcf4\ub97c col.links.map((link) => (… …)\ub85c \uaebc\ub0b4\uc11c \ud654\uba74\uc5d0 \ucd9c\ub825\ud569\ub2c8\ub2e4.
Extract the information from MEGA_DATA using col.links.map((link) => (... ...))<\/code> and display it on the screen.<\/p>\n\n\n\n
3)\ubaa8\ubc14\uc77c \uba54\ub274 \ubc84\ud2bc \/ Mobile menu button<\/p>\n\n\n\n
<button onPointerUp={() => setMobileOpen(v => !v)} className=\"md:hidden w-11 h-11 bg-gray-100 rounded-full\">\n    {mobileOpen ? '\u2715' : '\u2630'}\n<\/button><\/code><\/pre>\n\n\n\n
A.md(768px)\ubcf4\ub2e4 \ud654\uba74\uc774 \uc791\uc544\uc9c0\uba74 \ubc84\ud2bc\uc774 \ub098\ud0c0\ub0a9\ub2c8\ub2e4.
The button appears when the screen size becomes smaller than md(768px).<\/p>\n\n\n\n
4)\ubaa8\ubc14\uc77c \uba54\ub274 \ud328\ub110 \/ Mobile Menu Panel<\/p>\n\n\n\n
      {mobileOpen && (\n        <div className=\"md:hidden absolute top-16 left-0 w-full bg-white border-t px-6 py-6 flex flex-col gap-6 shadow-xl\">\n          {MEGA_DATA.map(item => (\n            <div key={item.id}>\n              {item.columns ? (\n                <>\n                  <div className=\"font-bold mb-2\">{item.title}<\/div>\n                  <div className=\"ml-4 flex flex-col gap-2\">\n                    {item.columns.flatMap(c => c.links).map(l => (\n                      <Link key={l.label} href={l.href} onClick={() => setMobileOpen(false)} className=\"text-sm text-gray-600 py-1\">{l.label}<\/Link>\n                    ))}\n                  <\/div>\n                <\/>\n              ) : (\n                <Link href={item.href!} onClick={() => setMobileOpen(false)} className=\"font-bold\">{item.title}<\/Link>\n              )}\n            <\/div>\n          ))}\n        <\/div>\n      )}<\/code><\/pre>\n\n\n\n
A.\ud654\uba74\uc774 768px\ubcf4\ub2e4 \uc791\uc740 \uacbd\uc6b0\ub9cc \ubcf4\uc5ec\uc9c0\uace0 \ubaa8\ubc14\uc77c \uba54\ub274 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 \ud654\uba74\uc5d0 \ubcf4\uc5ec\uc9d1\ub2c8\ub2e4.
It is displayed only when the screen width is less than 768px, and it appears on the screen when the mobile menu button is clicked.<\/p>\n\n\n\n
\n\n\n\n
\ud83d\udcc1 \ub77c\uc6b0\ud2b8 \/ Route<\/p>\n\n\n\n
\u2714\ufe0f\/megamenu<\/p>\n\n\n\n
— http:\/\/localhost:3000\/megamenu<\/p>\n\n\n\n
import { MegaMenu } from '..\/ui\/_components\/navigation\/MegaMenu'\n\nexport default function MegaMenuPage() {\n  return (\n    <>\n      <MegaMenu \/>\n      <main className=\"mx-auto max-w-6xl px-6 py-20\">\n        <h1 className=\"text-4xl font-bold\">Mega Menu \/ \uba54\uac00\uba54\ub274<\/h1>\n        <p className=\"text-gray-500 mt-2\">\uba54\ub274\uc5d0 \ub9c8\uc6b0\uc2a4 \uc62c\ub9ac\uba74 \uba54\ub274 \ud328\ub110\uc774 \ud3bc\uccd0\uc9d0,PC\ubc84\uc804<\/p>\n        <p className=\"text-gray-500 mt-2\">Hover your mouse over the menu to expand the menu panel, PC version<\/p>\n        <p className=\"text-gray-500 mt-1\">\ubaa8\ubc14\uc77c\uc5d0\uc11c\ub294 \ud584\ubc84\uac70 \uba54\ub274 \uc548\uc5d0 \uce74\ud14c\uace0\ub9ac\ubcc4\ub85c \ud3bc\uccd0\uc9d0.<\/p>\n        <p className=\"text-gray-500 mt-1\">On mobile, categories are displayed in an expandable format within the hamburger menu.<\/p>\n      <\/main>\n    <\/>\n  )\n}<\/code><\/pre>\n\n\n\n
1) \uc704\uc758 \uc8fc\uc18c\ub97c \uc2e4\ud589\uc2dc \uba54\uac00\uba54\ub274\ub97c \uc2e4\ud589\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.
This is the code that triggers the mega menu when the address above is accessed.<\/p>\n\n\n\n
2)Layout.tsx\ub294 \ub9cc\ub4e4\uc9c0\uc54a\uace0 \ud398\uc774\uc9c0\ub9c8\ub2e4 <MegaMenu \/>\ucf54\ub4dc\ub97c \uc785\ub825\ud574\uc57c\ud569\ub2c8\ub2e4.
You should not create a Layout.tsx file; instead, you must include the code on every page.<\/p>\n\n\n\n
3)\/megamenu\/2b \ub77c\uc6b0\ud2b8\uac00 \uc788\ub294\ub370 \uc774 \ubd80\ubd84\uc5d0\ub3c4 \ub3d9\uc77c\ud558\uac8c  <MegaMenu \/>\ucf54\ub4dc\uac00 \uc788\uc2b5\ub2c8\ub2e4.
There is a route at \/megamenu\/2b, which also contains the code.<\/p>\n\n\n\n
1.\/megamenu\nexport default function MegaMenuPage() {\n  return (\n    <>\n      <MegaMenu \/><\/strong>\n      <main className=\"mx-auto max-w-6xl px-6 py-20\">\n        <h1 className=\"text-4xl font-bold\">Mega Menu \/ \uba54\uac00\uba54\ub274<\/h1>\n        <p className=\"text-gray-500 mt-2\">\uba54\ub274\uc5d0 \ub9c8\uc6b0\uc2a4 \uc62c\ub9ac\uba74 \uba54\ub274 \ud328\ub110\uc774 \ud3bc\uccd0\uc9d0,PC\ubc84\uc804<\/p>\n        <p className=\"text-gray-500 mt-2\">Hover your mouse over the menu to expand the menu panel, PC version<\/p>\n        <p className=\"text-gray-500 mt-1\">\ubaa8\ubc14\uc77c\uc5d0\uc11c\ub294 \ud584\ubc84\uac70 \uba54\ub274 \uc548\uc5d0 \uce74\ud14c\uace0\ub9ac\ubcc4\ub85c \ud3bc\uccd0\uc9d0.<\/p>\n        <p className=\"text-gray-500 mt-1\">On mobile, categories are displayed in an expandable format within the hamburger menu.<\/p>\n      <\/main>\n    <\/>\n  )\n}\n\n2.\/megamenu\/2b\nexport default function Page() {\n  return (\n    <>\n      <MegaMenu \/><\/strong>\n      <main className=\"mx-auto max-w-6xl px-6 py-20\">\n        <h1 className=\"text-3xl font-bold\">2B<\/h1>\n        <p className=\"text-gray-500 mt-2\">\uc5ec\uae30\ub294 \/megamenu\/2B \ud398\uc774\uc9c0.<\/p>\n        <p className=\"text-gray-500 mt-2\">This is the \/megamenu\/2B page.<\/p>\n      <\/main>\n    <\/>\n  )\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n
\ud83d\udcc1 \ud14c\uc2a4\ud2b8 \/ Test<\/p>\n\n\n\n
\u2714\ufe0f PC<\/p>\n\n\n\n
\"\"
PC ScreenShot<\/figcaption><\/figure>\n\n\n\n
\"\"
PC ScreenShot<\/figcaption><\/figure>\n\n\n\n
\u2714\ufe0f Mobile<\/p>\n\n\n\n
\n
\"\"
mobile<\/figcaption><\/figure>\n\n\n\n
\"\"
mobile<\/figcaption><\/figure>\n<\/figure>\n\n\n\n
<\/p>\n\n\n\n
\n
\ub9c8\ud0dc\ubcf5\uc74c 21\uc7a5 22\uc808 \/ Matthew 21: 22<\/p>\n\n\n\n
“\ub108\ud76c\uac00 \uae30\ub3c4\ud560 \ub54c\uc5d0 \ubb34\uc5c7\uc774\ub4e0\uc9c0 \ubbff\uace0 \uad6c\ud558\ub294 \uac83\uc740 \ub2e4 \ubc1b\uc73c\ub9ac\ub77c \ud558\uc2dc\ub2c8\ub77c”<\/p>\n\n\n\n
“And everything you ask in prayer, believing, you will receive.”<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb \uba54\uac00\uba54\ub274\ub294 \uae30\ubcf8 \uba54\ub274\ub97c \ub9c8\uc6b0\uc2a4 \uc120\ud0dd\ud558\uba74 \uc544\ub798\uc5d0 \uba54\ub274\ud328\ub110\uc774 \ub098\ud0c0\ub0a9\ub2c8\ub2e4.A mega menu is one where a menu panel appears below the main menu item when you select it with your mouse. \ud83d\udc49\ud83c\udffb \uba54\uac00\uba54\ub274\ub97c \uc0ac\uc6a9\ud558\uba74 \ub354 \ub9ce\uc740 \ub9c1\ud06c \ud56d\ubaa9\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.Using a mega menu allows for a greater number of link items. \ud83d\udcc1 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870 \/ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,1,7,29],"tags":[],"class_list":["post-12871","post","type-post","status-publish","format-standard","hentry","category-news","category-uncategorized","category-website","category-webui","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/12871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=12871"}],"version-history":[{"count":27,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/12871\/revisions"}],"predecessor-version":[{"id":12904,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/12871\/revisions\/12904"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=12871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=12871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=12871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}