Merge pull request #28 from Nexters/feature/poll-ui-more-improve

feat: 투표 UI 추가 수정

src/app/poll/PollClient.tsx

@@ -7,7 +7,6 @@ import Tabs from './components/Tabs';
 import { useVoteList } from './hooks/useVoteList';
 import { useVoteListByUser } from './hooks/useVoteListByUser';
 import { useMemo, useState } from 'react';
-import Nickname from './components/Nickname';
 import TooltipContainer from './components/Poll/TooltipContainer';
 
 export default function PollClient() {
@@ -52,7 +51,6 @@ export default function PollClient() {
       <p className="mt-[0.8rem] text-body-2-regular text-gray-700">
         투표를 하면 블록체인에 저장된 컨트렉트를 확인할 수 있어요.
       </p>
-      <Nickname />
       <Tabs currentTab={currentTab} handleChangeTab={handleChangeTab}>
         {polls?.map(
           ({

src/app/poll/components/Container/Container.tsx

@@ -1,3 +1,5 @@
 export default function Container({ children }: { children: React.ReactNode }) {
-  return <div className="mx-auto max-w-[68.4rem] py-[6.4rem]">{children}</div>;
+  return (
+    <div className="max-w-[68.4rem] py-[6.4rem] mobile:mx-[2rem] tablet:mx-[4rem] desktop:mx-auto">{children}</div>
+  );
 }

src/app/poll/components/Poll/Poll.tsx

@@ -7,6 +7,7 @@ import { postParticipateToVote } from '../../api/postParticipateToVote';
 import { useMutation } from '@tanstack/react-query';
 import SubmitButton from './SubmitButton';
 import { useToast } from '@/contexts/ToastContext';
+import { useDebounce } from '@/hooks/useDebounce';
 
 interface PollProps {
   endTime: string;
@@ -65,6 +66,15 @@ export default function Poll({
     window.open(receipt_link, '_blank');
   };
 
+  const debouncedVote = useDebounce({
+    callback: handleVote,
+    delay: 500,
+  });
+  const debouncedOpenReceiptLink = useDebounce({
+    callback: handleOpenReceiptLink,
+    delay: 500,
+  });
+
   const isExpired = new Date(endTime) < new Date();
   const isDisabled = voted || isExpired;
 
@@ -109,8 +119,8 @@ export default function Poll({
           <SubmitButton
             isDisabled={!selected}
             isVoted={voted}
-            onReceiptClick={handleOpenReceiptLink}
-            onVoteClick={handleVote}
+            onReceiptClick={debouncedOpenReceiptLink}
+            onVoteClick={debouncedVote}
           />
         </div>
       )}

src/app/poll/components/Poll/RadioOption.tsx

@@ -52,7 +52,7 @@ export default function RadioOption({
             style={{ width: `${voted || isExpired ? percentage : 0}%` }}
           />
           <div className="relative flex flex-1 flex-col gap-[1.2rem]">
-            <div className="flex items-center justify-between">
+            <div className="flex items-center justify-between gap-[1.4rem]">
               <div>
                 {isExpired && isVotedByUser && (
                   <span className="mb-[0.6rem] inline-flex items-center gap-[0.2rem] rounded-full bg-gray-800 p-[0.2rem_0.6rem_0.2rem_0.4rem] text-caption-1-semibold text-blue-200">
@@ -62,7 +62,7 @@ export default function RadioOption({
                 )}
                 <p
                   className={clsx(
-                    'text-body-1-medium',
+                    'line-clamp-2 text-body-1-medium',
                     checked || isVotedByUser || (isExpired && isWinner) ? 'text-blue-600' : 'text-gray-800'
                   )}
                 >

src/app/poll/components/Poll/TooltipContainer.tsx

@@ -17,7 +17,7 @@ export default function TooltipContainer() {
     >
       <Tooltip />
       {isOpen && (
-        <div className="z-1000 absolute left-0 top-0 w-[23rem] origin-top-left translate-y-[3.6rem] rounded-[0.8rem] bg-background px-[2rem] py-[1.8rem] shadow-normal">
+        <div className="absolute top-0 w-[23rem] translate-y-[3.6rem] rounded-[0.8rem] bg-background px-[2rem] py-[1.8rem] shadow-normal mobile:right-0 mobile:origin-top-right tablet:left-0 tablet:origin-top-left desktop:left-0 desktop:origin-top-left">
           <p className="text-left text-body-2-semibold text-gray-800">블록체인 투표, 왜 특별할까요?</p>
           <p className="mt-[1rem] text-left text-body-3-medium text-gray-700">
             여러분의 선택은 블록체인에 영구적으로 보관되며, 수정하거나 삭제할 수 없어요. <br /> 블록체인은 투표로

src/hooks/useDebounce.tsx

@@ -0,0 +1,24 @@
+import { useCallback, useRef } from 'react';
+
+export function useDebounce<T extends (...args: unknown[]) => void>({
+  callback,
+  delay,
+}: {
+  callback: T;
+  delay: number;
+}) {
+  const timeoutRef = useRef<NodeJS.Timeout>(null);
+
+  return useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay]
+  );
+}