Merge pull request #41 from Na-o-man/feat/#40

feat: Enter Page 약관 동의 체크박스 색상 변경 구현 완료

src/pages/EnterMain/EnterClause/EnterClause.tsx

@@ -11,8 +11,15 @@ import { useNavigate } from 'react-router-dom';
 const EnterClause = () => {
   const [cookies, setCookies] = useState([]);
   const setLoginState = useSetRecoilState(clauseState);
+  const [alertMessage, setAlertMessage] = useState('약관 동의가 필요해요.');
   const navigate = useNavigate();
-  const hadleClauseClick = () => {
+
+  const handleClauseClick = () => {
+    if (!checkIcons[1] || !checkIcons[2]) {
+      setAlertMessage('필수항목을 체크해주세요!');
+      return;
+    }
+
     console.log('Clause accepted');
     setLoginState({ isClauseIn: true });
     navigate('profile');
@@ -30,6 +37,28 @@ const EnterClause = () => {
     console.log(cookies);
   }, []);
 
+  const [checkIcons, setCheckIcons] = useState<Record<number, boolean>>({
+    1: false,
+    2: false,
+    3: false,
+  });
+
+  const handleClick = (iconId: number) => {
+    setCheckIcons((prev) => ({
+      ...prev,
+      [iconId]: !prev[iconId],
+    }));
+  };
+  //약관 전체 동의
+  const handleCheckAllClick = () => {
+    const allChecked = Object.values(checkIcons).every((value) => value);
+    setCheckIcons({
+      1: !allChecked,
+      2: !allChecked,
+      3: !allChecked,
+    });
+  };
+
   return (
     <>
       <S.Layout>
@@ -40,26 +69,47 @@ const EnterClause = () => {
           <S.Symbol src={symbol}></S.Symbol>
           <S.TitleBox>
             <S.TitleTextUp>
-              <div>약관 동의가 필요해요.</div>
+              <div>{alertMessage}</div>
             </S.TitleTextUp>
             <S.Text>
               <S.IconNeed />
               <div>이용 약관 동의</div>
-              <S.IconCheck1 />
+              <S.IconCheck1
+                fill={
+                  checkIcons[1]
+                    ? 'url(#clickedGradient)'
+                    : 'url(#paint0_linear_4844_7622)'
+                }
+                onClick={() => handleClick(1)}
+              />
 
               <S.IconNeed />
               <div>개인정보 이용 동의</div>
-              <S.IconCheck1 />
+              <S.IconCheck1
+                fill={
+                  checkIcons[2]
+                    ? 'url(#clickedGradient)'
+                    : 'url(#paint0_linear_4844_7622)'
+                }
+                onClick={() => handleClick(2)}
+              />
 
               <S.IconChoice />
               <div>마켓팅 동의</div>
-              <S.IconCheck1 />
+              <S.IconCheck1
+                fill={
+                  checkIcons[3]
+                    ? 'url(#clickedGradient)'
+                    : 'url(#paint0_linear_4844_7622)'
+                }
+                onClick={() => handleClick(3)}
+              />
             </S.Text>
             <S.TitleTextDown>
               <div>약관 전체 동의</div>
-              <S.IconCheck3 />
+              <S.IconCheck3 onClick={handleCheckAllClick} />
             </S.TitleTextDown>
-            <S.ClauseAccept onClick={hadleClauseClick} />
+            <S.ClauseAccept onClick={handleClauseClick} />
           </S.TitleBox>
         </S.TitleContainer>
         <Outlet />

src/pages/EnterMain/EnterClause/IconCheck.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+interface IconCheck1Props {
+  fill?: string; // Optional fill color
+  onClick?: () => void; // Optional onClick handler
+}
+
+const IconCheck: React.FC<IconCheck1Props> = ({ fill, onClick }) => (
+  <svg
+    width="23"
+    height="17"
+    viewBox="0 0 23 17"
+    xmlns="http://www.w3.org/2000/svg"
+    onClick={onClick}
+    style={{ cursor: 'pointer' }}
+  >
+    <path
+      d="M8.17791 14.2809L4.80047 10.9059L1.42304 7.53094C1.21281 7.32104 0.8729 7.32126 0.663096 7.53159L0.157543 8.03841C-0.0531228 8.2496 -0.0524766 8.59231 0.159266 8.80264L8.25093 16.8437C8.46935 17.0608 8.82455 17.0504 9.02983 16.8209L22.8624 1.36552C23.0585 1.14655 23.0432 0.810757 22.8282 0.610361L22.3278 0.144138C22.1075 -0.0610093 21.7622 -0.0452453 21.5614 0.179121L8.95788 14.2591C8.75217 14.4891 8.39611 14.499 8.17791 14.2809Z"
+      fill={fill}
+      fillOpacity="0.8"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_4844_7622"
+        x1="0"
+        y1="12"
+        x2="21"
+        y2="2"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#525252" />
+        <stop offset="1" stopColor="#BBBBBB" />
+      </linearGradient>
+      <linearGradient id="clickedGradient" x1="0" y1="0" x2="100%" y2="100%">
+        <stop offset="0%" stopColor="#4879AF" />
+        <stop offset="100%" stopColor="#7C93CD" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export default IconCheck;

src/pages/EnterMain/EnterClause/Styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import * as I from 'assets/icon';
-
+import IconCheck from './IconCheck';
 export const Layout = styled.div`
   width: 100%;
   height: 100%;
@@ -101,10 +101,7 @@ export const IconChoice = styled(I.Icon_choice)`
   color: black;
 `;
 
-export const IconCheck1 = styled(I.Icon_check1)`
-  z-index: 35;
-  justify-content: center;
-  color: black;
+export const IconCheck1 = styled(IconCheck)`
   cursor: pointer;
 `;