feat: [6] 디자인 수정

src/components/header.tsx

@@ -2,8 +2,8 @@ import Image from 'next/image';
 
 export function Header() {
   return (
-    <div className="flex w-full items-center p-5">
-      <Image src="/logo.svg" width={30} height={30} alt="logo" />
+    <div className="flex w-full items-center justify-center p-5">
+      <Image src="/logo-text.svg" width={116} height={51} alt="logo" />
     </div>
   );
 }

src/components/intro.tsx

@@ -1,6 +1,6 @@
+import Image from 'next/image';
 import { Box } from './ui/box';
 import { Card } from './ui/card';
-import { CheckBox } from './ui/check-box';
 import { Paragraph } from './ui/paragraph';
 
 export function Intro() {
@@ -15,26 +15,27 @@ export function Intro() {
         recusandae beatae vero eos nihil, harum illo distinctio rem quae
         voluptatum voluptates.
       </Paragraph>
-      <div className="flex flex-col gap-4 md:flex-row md:items-center">
+      <Box className="flex flex-col gap-4 md:flex-row md:items-center">
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100">
+          <Image src="/calendar.svg" width={14} height={14} alt="calendar" />
+        </div>
         <div className="flex flex-col gap-1.5 md:flex-1">
           <h2 className="body2 text-[#677089]">이벤트 진행 기간</h2>
-          <Box className="flex items-center gap-3">
-            <CheckBox initialChecked={true} isEditable={false} />
+          <div className="flex items-center gap-3">
             <span className="body3 line-clamp-1 text-[#3B404E]">
               2024. 6. 20 13:00 ~ 2024. 7. 01 17:00
             </span>
-          </Box>
+          </div>
         </div>
         <div className="flex flex-col gap-1.5 md:flex-1">
           <h2 className="body2 text-[#677089]">당첨자 발표일</h2>
-          <Box className="flex items-center gap-3">
-            <CheckBox initialChecked={true} isEditable={false} />
+          <div className="flex items-center gap-3">
             <span className="body3 line-clamp-1 text-[#3B404E]">
               2024. 7. 4 17:00
             </span>
-          </Box>
+          </div>
         </div>
-      </div>
+      </Box>
     </Card>
   );
 }

src/components/policy.tsx

@@ -1,7 +1,6 @@
+import { SelectBox } from './select-box';
 import { Badge } from './ui/badge';
-import { Box } from './ui/box';
 import { Card } from './ui/card';
-import { CheckBox } from './ui/check-box';
 import { Paragraph } from './ui/paragraph';
 
 export function Policy() {
@@ -14,10 +13,7 @@ export function Policy() {
         praesentium debitis, fugiat cupiditate aut tempora eligendi quasi
         aperiam, hic nihil veniam!
       </Paragraph>
-      <Box className="flex w-full items-center gap-3 md:w-[8.25rem]">
-        <CheckBox initialChecked={false} />
-        <span className="body3 text-[#3B404E]">동의합니다.</span>
-      </Box>
+      <SelectBox />
     </Card>
   );
 }

src/components/select-box.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useState } from 'react';
+import { Box } from './ui/box';
+import { CheckBox } from './ui/check-box';
+
+export function SelectBox() {
+  const [select, setSelect] = useState<string>('');
+
+  return (
+    <div className="flex flex-col gap-2.5">
+      <Box
+        className="flex w-full items-center gap-3 md:w-[8.25rem]"
+        onClick={() => setSelect('agree')}
+        isActive={select === 'agree'}
+      >
+        <CheckBox isChecked={select === 'agree'} />
+        <span className="body3 text-[#3B404E]">네, 동의합니다.</span>
+      </Box>
+      <Box
+        className="flex w-full items-center gap-3 md:w-[8.25rem]"
+        onClick={() => setSelect('disagree')}
+        isActive={select === 'disagree'}
+      >
+        <CheckBox isChecked={select === 'disagree'} />
+        <span className="body3 text-[#3B404E]">아니요, 동의하지 않습니다.</span>
+      </Box>
+    </div>
+  );
+}

src/components/ui/box.tsx

@@ -1,15 +1,19 @@
 import { cn } from '@/lib/utils';
 import { ComponentProps } from 'react';
 
-type BoxProps = ComponentProps<'div'>;
+type BoxProps = ComponentProps<'div'> & {
+  isActive?: boolean;
+};
 
-export function Box({ className, children }: BoxProps) {
+export function Box({ className, children, isActive, onClick }: BoxProps) {
   return (
     <div
       className={cn(
-        'rounded-[10px] border border-solid border-[#E9EAEE] bg-gray-50 px-3.5 py-3',
+        'rounded-[10px] border border-solid px-3.5 py-3',
+        isActive ? 'border-primary bg-sub-2' : 'border-gray-75 bg-gray-50',
         className
       )}
+      onClick={onClick}
     >
       {children}
     </div>

src/components/ui/check-box.tsx

@@ -1,48 +1,28 @@
-'use client';
-
 import { cn } from '@/lib/utils';
-import { ComponentProps, useEffect, useState } from 'react';
+import Image from 'next/image';
+import { ComponentProps } from 'react';
 import { Button } from './button';
 
 type CheckBoxProps = Omit<ComponentProps<'button'>, 'onClick'> & {
-  initialChecked?: boolean;
-  onValueChange?: (isChecked: boolean) => void;
-  isEditable?: boolean;
+  isChecked: boolean;
 };
 
-export function CheckBox({
-  initialChecked = false,
-  onValueChange,
-  isEditable = true,
-  ...props
-}: CheckBoxProps) {
-  const [isChecked, setIsChecked] = useState<boolean>(initialChecked);
-
-  useEffect(() => {
-    if (onValueChange) {
-      onValueChange(isChecked);
-    }
-  }, [isChecked, onValueChange]);
-
-  const handleClick = () => {
-    if (!isEditable) {
-      return;
-    }
-    setIsChecked(prev => !prev);
-  };
-
+export function CheckBox({ isChecked, ...props }: CheckBoxProps) {
   return (
     <Button
       variant="outline"
       size="icon"
       className={cn(
         'h-5 w-5 rounded-full transition-colors',
         isChecked
-          ? 'border-none bg-gray-100 hover:bg-gray-100'
+          ? 'border-none bg-primary hover:bg-primary'
           : 'border-[#898F9F] bg-transparent hover:bg-transparent'
       )}
-      onClick={handleClick}
       {...props}
-    />
+    >
+      {isChecked ? (
+        <Image src="/check.svg" alt="check" width={10} height={10} />
+      ) : null}
+    </Button>
   );
 }

src/components/ui/paragraph.tsx

@@ -4,5 +4,5 @@ import { ComponentProps } from 'react';
 type ParagraphProps = ComponentProps<'p'>;
 
 export function Paragraph({ className, children }: ParagraphProps) {
-  return <p className={cn('body1 text-gray-500', className)}>{children}</p>;
+  return <p className={cn('body1 text-gray-600', className)}>{children}</p>;
 }