Merge pull request #127 from serafuku/yozumina/develop

💄 UI 버그 & 레이아웃 변경
serafuku · Dec 21, 2024 · 14480ca · 14480ca
2 parents 7877d86 + 115441d
commit 14480ca
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/src/app/_components/notification.tsx b/src/app/_components/notification.tsx
@@ -38,8 +38,8 @@ export default function Notification() {
                 replace
               >
                 <div className={`flex flex-col ${isRead && 'text-slate-500 dark:text-slate-400'}`}>
-                  <span className="font-thin italic ">&quot;{noti.data?.question}&quot;</span>
-                  <p>{noti.data?.answer}</p>
+                  <span className="font-thin italic break-all">&quot;{noti.data?.question}&quot;</span>
+                  <p className="break-all">{noti.data?.answer}</p>
                 </div>
               </Link>
             </div>

diff --git a/src/app/_components/question.tsx b/src/app/_components/question.tsx
@@ -170,8 +170,8 @@ export default function Question({
           </span>
         </div>
       </div>
-      <div className="text-2xl chat chat-end">
-        <div className="chat-bubble bg-green-600 text-slate-300 dark:text-slate-200">
+      <div className="flex justify-end px-2 text-2xl chat chat-end">
+        <div className="chat-bubble px-2 desktop:px-4 bg-green-600 text-slate-300 dark:text-slate-200">
           <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-2 py-2">
             {errors.answer && errors.answer.type === 'answerOnlyWhiteSpace' && (
               <div className="tooltip tooltip-open tooltip-error transition-opacity" data-tip={errors.answer.message} />
@@ -187,15 +187,15 @@ export default function Question({
             />
 
             <div className="w-full flex flex-col gap-3 desktop:flex-row justify-between items-center">
-              <div className="flex gap-6 mb-2 desktop:mb-0">
+              <div className="flex gap-6">
                 <div className="flex gap-2 items-center text-xl">
                   <input
                     type="checkbox"
                     className="toggle toggle-accent"
                     onClick={() => setValue('nsfw', !nsfwedAnswer)}
                   />
                   <input type="hidden" {...register('nsfw')} />
-                  <span className="text-sm desktop:text-xl">NSFW로 체크</span>
+                  <span className="w-full text-sm desktop:text-xl">NSFW로 체크</span>
                 </div>
                 <select {...register('visibility')} className="select select-ghost select-sm dark:shadow">
                   <option className={'hidden'} value={undefined}>
@@ -207,10 +207,7 @@ export default function Question({
                 </select>
               </div>
               <div className="w-full desktop:w-fit flex justify-center">
-                <button
-                  type={'submit'}
-                  className="btn btn-outline dark:border-white dark:text-slate-200 btn-sm h-10 w-16 desktop:btn-md"
-                >
+                <button type={'submit'} className="btn btn-outline dark:border-white dark:text-slate-200 h-10 btn-md ">
                   답변
                 </button>
               </div>