Feat[THKV-126]: Radio 컴포넌트 리디자인

src/app/(root)/layout.tsx

@@ -6,7 +6,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
     <div className='flex min-h-screen'>
       <Header />
       <Navbar />
-      <main className='flex-grow bg-white-200 p-6 pt-12'>{children}</main>
+      <main className='flex-grow bg-white-200 pl-8 pt-[104px]'>{children}</main>
     </div>
   );
 };

src/app/globals.css

@@ -26,7 +26,3 @@
     border-color: #f5f5f5; /* navbar 제외한 배경색 white-200  */
   }
 }
-
-[type='radio'] {
-  accent-color: #619952;
-}

src/components/common/Radio/index.tsx

@@ -1,19 +1,31 @@
-import { VariantProps } from 'class-variance-authority';
-import { cn } from '@/utils/core';
-import { radioVariant } from './Radio.variant';
+import { Question } from '@/type/survey/surveyResponse';
 
-type Props = React.InputHTMLAttributes<HTMLInputElement> &
-  VariantProps<typeof radioVariant>;
+interface Props {
+  option: number;
+  question: Question;
+  answers: { [key: number]: number | string };
+  handleChange: (questionId: number, value: number | string) => void;
+}
 
-const Radio = ({ checked, color, className, disabled, ...props }: Props) => {
+const Radio = ({ option, question, answers, handleChange }: Props) => {
   return (
-    <input
-      type='radio'
-      checked={checked}
-      disabled={disabled}
-      className={cn(radioVariant({ color }), className)}
-      {...props}
-    />
+    <div className='flex items-center gap-2'>
+      <label className='relative flex h-5 w-5 cursor-pointer items-center justify-center'>
+        <input
+          type='radio'
+          name={`question${question.questionId}`}
+          id={`${question.questionId}_${option}`}
+          value={option}
+          checked={answers[question.questionId] === option}
+          onChange={() => handleChange(question.questionId, option)}
+          className='peer sr-only'
+        />
+        <span className='absolute h-5 w-5 rounded-full border border-grey-300 bg-white-100 peer-hover:border-2 peer-hover:border-grey-500'></span>
+        <span className='absolute h-5 w-5 rounded-full border-[6px] border-transparent peer-checked:border-green-500'></span>
+        <span className='absolute h-5 w-5 rounded-full peer-checked:ring-green-500 peer-focus:ring-4 peer-focus:ring-green-100'></span>
+      </label>
+      <label htmlFor={`${question.questionId}_${option}`}>{option}</label>
+    </div>
   );
 };
 

src/components/common/Typography/index.tsx

@@ -23,6 +23,11 @@ const customTypography = (
   return Typography;
 };
 
+export const H2Black = customTypography('span', {
+  type: 'H2',
+  color: 'black',
+});
+
 export const Body3Grey500 = customTypography('span', {
   type: 'Body3',
   color: 'grey500',

src/components/feature/Survey/Take/index.tsx

@@ -6,7 +6,8 @@ import { getYearAndMonth, transformResponseToCalendar } from '@/utils/calendar';
 import Button from '@/components/common/Button/Button';
 import Calendar from '@/components/common/Calendar';
 import { Input } from '@/components/common/Input';
-import { CardTitle, HeadPrimary } from '@/components/common/Typography';
+import Radio from '@/components/common/Radio';
+import { CardTitle, H2Black } from '@/components/common/Typography';
 import { BASE_ROUTES } from '@/constants/_navbar';
 import { useGetMonthMenuDetails } from '@/hooks/menu/useGetMonthMenuDetail';
 import { surveyKeys } from '@/hooks/survey/queryKey';
@@ -22,14 +23,14 @@ interface Props {
 const RADIO_OPTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
 const SurveyTake = ({ id }: Props) => {
-  const queryClient = useQueryClient();
   const { navigate } = useNavigate();
+  const queryClient = useQueryClient();
   const showToast = useToastStore((state) => state.showToast);
-  const { data: surveyData } = useGetSurveyDetail(id);
   const [answers, setAnswers] = useState<{ [key: number]: number | string }>(
     {},
   );
 
+  const { data: surveyData } = useGetSurveyDetail(id);
   const { data: monthMenuData, isLoading } = useGetMonthMenuDetails(
     { monthMenuId: surveyData?.mmId as string },
     {
@@ -94,10 +95,8 @@ const SurveyTake = ({ id }: Props) => {
   );
 
   return (
-    <div className='flex w-full flex-col items-start gap-5 px-44'>
-      <div className='mb-9 flex w-[calc(100%-20px)] justify-center'>
-        <HeadPrimary>{surveyData?.surveyName}</HeadPrimary>
-      </div>
+    <div className='flex w-full flex-col items-start gap-5'>
+      <H2Black>{surveyData?.surveyName}</H2Black>
       <Calendar
         data={calendarData}
         year={createdYear}
@@ -132,18 +131,13 @@ const SurveyTake = ({ id }: Props) => {
             {question.answerType === 'radio' && (
               <div className='flex justify-around'>
                 {RADIO_OPTIONS.map((option) => (
-                  <div key={option} className='flex gap-2'>
-                    <input
-                      type='radio'
-                      name={`question${question.questionId}`}
-                      id={`${question.questionId}_${option}`}
-                      value={option}
-                      checked={answers[question.questionId] === option}
-                      onChange={() => handleChange(question.questionId, option)}
+                  <div key={option}>
+                    <Radio
+                      option={option}
+                      answers={answers}
+                      handleChange={handleChange}
+                      question={question}
                     />
-                    <label htmlFor={`${question.questionId}_${option}`}>
-                      {option}
-                    </label>
                   </div>
                 ))}
               </div>
@@ -171,18 +165,13 @@ const SurveyTake = ({ id }: Props) => {
             {question.answerType === 'radio' && (
               <div className='flex justify-around'>
                 {RADIO_OPTIONS.map((option) => (
-                  <div key={option} className='flex gap-2'>
-                    <input
-                      type='radio'
-                      name={`question${question.questionId}`}
-                      id={`${question.questionId}_${option}`}
-                      value={option}
-                      checked={answers[question.questionId] === option}
-                      onChange={() => handleChange(question.questionId, option)}
+                  <div key={option}>
+                    <Radio
+                      option={option}
+                      answers={answers}
+                      handleChange={handleChange}
+                      question={question}
                     />
-                    <label htmlFor={`${question.questionId}_${option}`}>
-                      {option}
-                    </label>
                   </div>
                 ))}
               </div>