{"id":12026,"date":"2026-10-11T12:07:50","date_gmt":"2026-10-11T03:07:50","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=12026"},"modified":"2026-10-11T13:57:35","modified_gmt":"2026-10-11T04:57:35","slug":"webui-tailwind-nextjs-dropdown-4","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/10\/11\/webui-tailwind-nextjs-dropdown-4\/","title":{"rendered":"[WebUI]Tailwind + nextjs(Drop down menu) \u2013 4"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 Dropdown Menu \ubd80\ubd84\uc785\ub2c8\ub2e4.
The section below is the dropdown menu.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ub808\uc774\uc544\uc6c3, \ud3f0\ud2b8\uc0ac\uc774\uc988\ub098 \ub300\ubd80\ubd84\uc758 css,tailwindcss \ub0b4\uc6a9\uc740 \uc774\uc804 \ud3ec\uc2a4\ud2b8\uc758 \ub0b4\uc6a9\uacfc \uac70\uc758 \uc720\uc0ac\ud569\ub2c8\ub2e4.
The layout, font size, and most of the CSS and Tailwind CSS details are nearly identical to those in the previous post.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ucef4\ud3ec\ub10c\ud2b8 \ud615\uc2dd\uc73c\ub85c \uc0ac\uc6a9\ud560\uc218 \uc788\ub3c4\ub85d ui\ub514\ub809\ud1a0\ub9ac\uac00 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.
A ui<\/code> directory has been added to enable usage in component form.<\/p>\n\n\n\n

\ud83d\udcc1 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 \/ Project Structure<\/p>\n\n\n\n

tailwindcss-nextjs\/\n\u2514\u2500\u2500 app\/\n    \u251c\u2500\u2500 button-css\/\n    \u251c\u2500\u2500 button-tailwind\/\n    \u251c\u2500\u2500 card-css\/\n    \u251c\u2500\u2500 card-tailwind\/\n    \u251c\u2500\u2500 form-css\/\n    \u251c\u2500\u2500 form-tailwind\/\n    \u251c\u2500\u2500 dropdown-css\/<\/strong>\n    \u251c\u2500\u2500 dropdown-tailwind\/<\/strong>\n    \u2514\u2500\u2500 ui\/<\/strong>\n        \u251c\u2500\u2500 page.tsx\n        \u2514\u2500\u2500 _components\/\n            \u251c\u2500\u2500 button.tsx     \n            \u2514\u2500\u2500 dropdown.tsx   <\/code><\/pre>\n\n\n\n
\ud83d\udcc1 Dropdown Menu – Tailwind & CSS<\/p>\n\n\n\n
\u2714\ufe0f Tailwind<\/p>\n\n\n\n
— \uc2a4\ud06c\ub9b0 \uc0f7 \/ Screen Shoot<\/p>\n\n\n\n
\"\"
tailwindcss<\/figcaption><\/figure>\n\n\n\n
— http:\/\/localhost:3000\/dropdown-tailwind<\/p>\n\n\n\n
'use client'\nimport { useState } from 'react'\n\nconst OPTIONS = [\n  { value: '9s', label: '9S' },\n  { value: '2b', label: '2B' },\n  { value: '4b', label: '4B' },\n]\n\nexport default function Page() {\n  const [open, setOpen] = useState(false)\n  const [value, setValue] = useState(OPTIONS[0])\n\n  return (\n    <main className=\"min-h-screen flex items-center justify-center bg-gray-50 p-4\">\n      <div className=\"w-full max-w-sm bg-white rounded-2xl shadow-lg p-6\">\n        <h2 className=\"text-base font-bold\">\ub4dc\ub86d\ub2e4\uc6b4\/Drop down(Tailwindcss)<\/h2>\n        <p className=\"text-sm text-gray-400 mt-1\">freelifemakers<\/p>\n\n        <div className=\"mt-6 flex flex-col gap-1.5\">\n          <label className=\"text-sm font-bold text-gray-700\">\uc9c1\uc5c5 \/ Role<\/label>\n\n          {\/* Select *\/}\n          <div className=\"relative\">\n            {\/* 1. \ubc84\ud2bc - \ud56d\uc0c1 \ubcf4\uc774\ub294 \ubd80\ubd84 \/ Button - Always visible part *\/}\n            <button\n              onClick={() => setOpen(!open)}\n              className=\"w-full flex items-center justify-between px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-left focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all\"\n            >\n              <span>{value.label}<\/span>\n              <span className={`transition-transform ${open? 'rotate-180' : ''}`}>\u25bc<\/span>\n            <\/button>\n\n            {\/* 2. \ub9ac\uc2a4\ud2b8 - open\uc77c \ub54c\ub9cc \ubcf4\uc774\ub294 \ubd80\ubd84 \/ List \u2013 section visible only when open *\/}\n            {open && (\n              <div className=\"absolute z-10 mt-2 w-full bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden\">\n                {OPTIONS.map((opt) => (\n                  <button\n                    key={opt.value}\n                    onClick={() => {\n                      setValue(opt)\n                      setOpen(false)\n                    }}\n                    className={`w-full text-left px-4 py-3 text-sm hover:bg-gray-50 transition-colors ${\n                      value.value === opt.value? 'bg-blue-50 text-blue-600 font-bold' : 'text-gray-700'\n                    }`}\n                  >\n                    {opt.label}\n                  <\/button>\n                ))}\n              <\/div>\n            )}\n          <\/div>\n\n          <p className=\"text-xs text-gray-400 mt-2\">\uc120\ud0dd\ub41c \uac12\/Selected Value : {value.value}<\/p>\n        <\/div>\n      <\/div>\n    <\/main>\n  )\n}<\/code><\/pre>\n\n\n\n
\u2714\ufe0f CSS<\/p>\n\n\n\n
— \uc2a4\ud06c\ub9b0 \uc0f7 \/ ScreenShot<\/p>\n\n\n\n
\"\"
css<\/figcaption><\/figure>\n\n\n\n
— http:\/\/localhost:3000\/dropdown-css<\/p>\n\n\n\n
'use client'\nimport { useState } from 'react'\n\nconst OPTIONS = [\n  { value: '9s', label: '9S' },\n  { value: '2b', label: '2B' },\n  { value: '4b', label: '4B' },\n]\n\nexport default function Page() {\n  const [open, setOpen] = useState(false)\n  const [value, setValue] = useState(OPTIONS[0])\n\n  return (\n    <>\n      <main className=\"page\">\n        <div className=\"card\">\n          <h2 className=\"title\">\ub4dc\ub86d\ub2e4\uc6b4\/Drop down(CSS)<\/h2>\n          <p className=\"subtitle\">freelifemakers<\/p>\n\n          <div className=\"field-group\">\n            <label className=\"label\">\uc9c1\uc5c5 \/ Role<\/label>\n\n            {\/* Select \ubcf8\uccb4 - relative \uae30\uc900\uc810 *\/}\n            <div className=\"select-wrap\">\n              {\/* 1. \ubc84\ud2bc *\/}\n              <button\n                onClick={() => setOpen(!open)}\n                className=\"select-btn\"\n              >\n                <span>{value.label}<\/span>\n                <span className={`arrow ${open? 'arrow-open' : ''}`}>\u25bc<\/span>\n              <\/button>\n\n              {\/* 2. \ub9ac\uc2a4\ud2b8 *\/}\n              {open && (\n                <div className=\"select-list\">\n                  {OPTIONS.map((opt) => (\n                    <button\n                      key={opt.value}\n                      onClick={() => {\n                        setValue(opt)\n                        setOpen(false)\n                      }}\n                      className={`select-option ${value.value === opt.value? 'selected' : ''}`}\n                    >\n                      {opt.label}\n                    <\/button>\n                  ))}\n                <\/div>\n              )}\n            <\/div>\n\n            <p className=\"hint\">\uc120\ud0dd\ub41c \uac12\/Selected Value : {value.value}<\/p>\n          <\/div>\n        <\/div>\n      <\/main>\n\n      <style>{`\n       .page {\n          min-height: 100vh;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          background: #f9fafb;\n          padding: 16px;\n        }\n       .card {\n          width: 100%;\n          max-width: 384px;\n          background: white;\n          border-radius: 16px;\n          box-shadow: 0 10px 15px rgba(0,0,0,0.1);\n          padding: 24px;\n        }\n       .title { font-size: 16px; font-weight: 700; }\n       .subtitle { font-size: 14px; color: #9ca3af; margin-top: 4px; }\n\n       .field-group {\n          margin-top: 24px;\n          display: flex;\n          flex-direction: column;\n          gap: 6px;\n        }\n       .label {\n          font-size: 14px;\n          font-weight: 700;\n          color: #374151;\n        }\n       .hint {\n          font-size: 12px;\n          color: #9ca3af;\n          margin-top: 8px;\n        }\n\n        \/* Dropdown \uae30\uc900\uc810 \/ benchmark - relative *\/\n       .select-wrap {\n          position: relative;\n        }\n\n        \/* 1. \ubc84\ud2bc \/ button- w-full flex justify-between *\/\n       .select-btn {\n          width: 100%;\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          padding: 12px 16px;\n          background: #f9fafb;\n          border: 1px solid #e5e7eb;\n          border-radius: 12px;\n          font-size: 14px;\n          text-align: left;\n          cursor: pointer;\n          transition: all 0.15s;\n        }\n       .select-btn:focus {\n          outline: none;\n          background: white;\n          border-color: #3b82f6;\n          box-shadow: 0 0 0 2px rgba(59,130,246,0.3);\n        }\n\n        \/* \ud654\uc0b4\ud45c \ud68c\uc804 \/ Rotate arrow *\/\n       .arrow {\n          transition: transform 0.2s;\n          font-size: 12px;\n        }\n       .arrow-open {\n          transform: rotate(180deg);\n        }\n\n        \/* 2. \ub9ac\uc2a4\ud2b8 \/ List - absolute z-10 mt-2 *\/\n       .select-list {\n          position: absolute;\n          z-index: 10;\n          margin-top: 8px;\n          width: 100%;\n          background: white;\n          border: 1px solid #e5e7eb;\n          border-radius: 12px;\n          box-shadow: 0 10px 15px rgba(0,0,0,0.1);\n          overflow: hidden;\n        }\n\n        \/* \uc635\uc158 \ud558\ub098 \/ One option *\/\n       .select-option {\n          width: 100%;\n          text-align: left;\n          padding: 12px 16px;\n          font-size: 14px;\n          border: none;\n          background: white;\n          color: #374151;\n          cursor: pointer;\n          transition: background 0.15s;\n        }\n       .select-option:hover {\n          background: #f9fafb;\n        }\n       .select-option.selected {\n          background: #eff6ff;\n          color: #2563eb;\n          font-weight: 700;\n        }\n      `}<\/style>\n    <\/>\n  )\n}<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \ucef4\ud3ec\ub10c\ud2b8 \ud615\uc2dd\uc73c\ub85c \uc0ac\uc6a9\ud558\uae30 \/ Using as a component<\/p>\n\n\n\n
— \uc2a4\ud06c\ub9b0 \uc0f7 \/ ScreenShot<\/p>\n\n\n\n
\"\"
UI Library<\/figcaption><\/figure>\n\n\n\n
— http:\/\/localhost:3000\/ui<\/p>\n\n\n\n
\u2714\ufe0f \ud604\uc7ac \ubc84\ud2bc\uacfc \ub4dc\ub86d\ub2e4\uc6b4 \uba54\ub274\uac00 _compoents\uc5d0 \uc788\uc2b5\ub2c8\ub2e4.(button.tsx dropdown.tsx)
Currently, the button and dropdown menu are located in _components<\/code> (button.tsx<\/code>, dropdown.tsx<\/code>).<\/p>\n\n\n\n
\u2714\ufe0f app\/ui\/page.tsx\uc5d0\uc11c \uc0ac\uc6a9\uc2dc \uc544\ub798\ucc98\ub7fc \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
When using it in app\/ui\/page.tsx<\/code>, use it as shown below.<\/p>\n\n\n\n
\/\/ compoents\nimport { Button }  from '.\/_components\/button'\nimport { Dropdown } from '.\/_components\/dropdown';<\/strong>\n\nexport default function UIPage() {\n  return (\n    <main className=\"min-h-screen flex items-center justify-center bg-gray-50 p-4\">\n      <div className=\"w-full max-w-sm bg-white rounded-2xl shadow-lg p-6 flex flex-col gap-6\">\n        <h1 className=\"text-xl font-bold\">\ub0b4 UI \ub77c\uc774\ube0c\ub7ec\ub9ac \/ <\/h1>\n\n        <Dropdown \/><\/strong>\n        <Button>\uc800\uc7a5\ud558\uae30\/Save<\/Button><\/strong>\n      <\/div>\n    <\/main>\n  )\n}<\/code><\/pre>\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 \uc544\ub798\ub294 Dropdown Menu \ubd80\ubd84\uc785\ub2c8\ub2e4.The section below is the dropdown menu. \ud83d\udc49\ud83c\udffb \ub808\uc774\uc544\uc6c3, \ud3f0\ud2b8\uc0ac\uc774\uc988\ub098 \ub300\ubd80\ubd84\uc758 css,tailwindcss \ub0b4\uc6a9\uc740 \uc774\uc804 \ud3ec\uc2a4\ud2b8\uc758 \ub0b4\uc6a9\uacfc \uac70\uc758 \uc720\uc0ac\ud569\ub2c8\ub2e4.The layout, font size, and most of the CSS and Tailwind CSS details are nearly identical to those in the previous post. \ud83d\udc49\ud83c\udffb \ucef4\ud3ec\ub10c\ud2b8 \ud615\uc2dd\uc73c\ub85c \uc0ac\uc6a9\ud560\uc218 \uc788\ub3c4\ub85d ui\ub514\ub809\ud1a0\ub9ac\uac00 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.A ui directory has been added […]<\/p>\n","protected":false},"author":1,"featured_media":12053,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,7,29],"tags":[],"class_list":["post-12026","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","category-website","category-webui","has-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/12026","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=12026"}],"version-history":[{"count":25,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/12026\/revisions"}],"predecessor-version":[{"id":12056,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/12026\/revisions\/12056"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media\/12053"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=12026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=12026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=12026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}