[style] select박스 정렬

Author: mtm-git1018

src/app/recipe/Accordion.tsx

@@ -22,10 +22,10 @@ const selectOption = [
 
 function Accordion() {
   return (
-    <ul className="flex gap-6">
-      {selectOption.map(({ id, option, title }, i) => {
+    <ul className="flex w-full gap-3">
+      {selectOption.map(({ id, option, title }) => {
         return (
-          <li key={i}>
+          <li key={id}>
             <SelectBox option={option} title={title} id={id} groupKey="filter" />
           </li>
         );

src/app/recipe/page.tsx

@@ -24,7 +24,7 @@ function Page() {
         />
       </section>
       <div className="page-layout max-w-1224 mt-6">
-        <section className="flex flex-col-reverse items-center gap-6 md:flex-row md:justify-between md:items-center ">
+        <section className="flex flex-col-reverse items-start gap-6 md:flex-row md:justify-between md:items-center ">
           <Accordion />
           <Input
             placeholder="내용을 입력해 주세요."
@@ -36,7 +36,7 @@ function Page() {
         <section>
           <div className="h-10 flex justify-between items-center mt-3 border-b-1 border-gray-light">
             <p>n개</p>
-            <SelectBox option={['', '댓글순']} title="최신순" />
+            <SelectBox option={['', '댓글순', '인기순']} title="최신순" />
           </div>
           <section className="mt-5">
             <CocktailList />

src/shared/components/InputBox/SelectBox.tsx

@@ -68,7 +68,15 @@ function SelectBox({ id, groupKey, ref, option, title, onChange }: Props) {
 
       <ul
         className={`w-30 bg-white text-gray-dark p-2 rounded-xl z-99 duration-200  absolute transition-all 
-         ${localOpen ? 'opacity-100 top-8 right-0' : 'opacity-0 pointer-events-none top-4 right-0'}`}
+         ${
+           groupKey
+             ? localOpen
+               ? 'opacity-100 top-8 left-0'
+               : 'opacity-0 pointer-events-none top-4 left-0'
+             : localOpen
+               ? 'opacity-100 top-8 right-0'
+               : 'opacity-0 pointer-events-none top-4 right-0'
+         }`}
         role="listbox"
       >
         {option.map((v, i) => (