Merge pull request #89 from Team-Remini/feat/#88

feat/#88/체크박스
Team-Remini · Dec 19, 2023 · c44d1ac · c44d1ac
2 parents fa53db2 + e83a041
commit c44d1ac
Show file tree

Hide file tree

Showing 18 changed files with 194 additions and 65 deletions.
diff --git a/src/components/Recommend/Page1.tsx b/src/components/Recommend/Page1.tsx
@@ -8,30 +8,54 @@ interface Page1Props {
 }
 
 export const Page1: React.FC<Page1Props> = ({ pd }) => {
-  const [isChecked] = useAtom(isCheckedAtoms);
+  const [isChecked, setIsChecked] = useAtom(isCheckedAtoms);
+
+  const handleParagraphClick = (index: number) => {
+    const newCheckedState = [...isChecked];
+    setIsChecked(newCheckedState);
+    pd(index + 1);
+  };
 
   return (
     <SelectWrap>
       <h3 className="select_title">
         어떠한 상황에 대해 회고를 하고 싶은지 알려주세요
       </h3>
       <div className={`select_box ${isChecked[0] ? "checked" : ""}`}>
-        <div>
-          <input
-            type="checkbox"
-            checked={isChecked[0]}
-            onChange={() => pd(1)}
-          />
-        </div>
-        <p>일상을 돌아보기 위한 회고를 하고 싶어요</p>
+        <input
+          type="checkbox"
+          checked={isChecked[0]}
+          onChange={() => pd(1)}
+          id="checkbox1"
+        />
+        <label htmlFor="checkbox1"></label>
+        <p onClick={() => handleParagraphClick(0)}>
+          일상을 돌아보기 위한 회고를 하고 싶어요
+        </p>
       </div>
       <div className={`select_box ${isChecked[1] ? "checked" : ""}`}>
-        <input type="checkbox" checked={isChecked[1]} onChange={() => pd(2)} />
-        <p>목표를 평가하는 회고를 하고 싶어요</p>
+        <input
+          type="checkbox"
+          checked={isChecked[1]}
+          onChange={() => pd(2)}
+          id="checkbox2"
+        />
+        <label htmlFor="checkbox2"></label>
+        <p onClick={() => handleParagraphClick(1)}>
+          목표를 평가하는 회고를 하고 싶어요
+        </p>
       </div>
       <div className={`select_box ${isChecked[2] ? "checked" : ""}`}>
-        <input type="checkbox" checked={isChecked[2]} onChange={() => pd(3)} />
-        <p>프로젝트 관련 회고를 하고 싶어요</p>
+        <input
+          type="checkbox"
+          checked={isChecked[2]}
+          onChange={() => pd(3)}
+          id="checkbox3"
+        />
+        <label htmlFor="checkbox3"></label>
+        <p onClick={() => handleParagraphClick(2)}>
+          프로젝트 관련 회고를 하고 싶어요
+        </p>
       </div>
     </SelectWrap>
   );

diff --git a/src/components/Recommend/Page2a.tsx b/src/components/Recommend/Page2a.tsx
@@ -8,28 +8,46 @@ interface Page2aProps {
 }
 
 export const Page2a: React.FC<Page2aProps> = ({ pd }) => {
-  const [isChecked] = useAtom(isCheckedAtoms);
+  const [isChecked, setIsChecked] = useAtom(isCheckedAtoms);
+
+  const handleParagraphClick = (index: number) => {
+    const newCheckedState = [...isChecked];
+    setIsChecked(newCheckedState);
+    pd(index + 1);
+  };
 
   return (
     <SelectWrap>
       <h3 className="select_title">얼마 동안의 기간을 회고하고자 하나요? </h3>
       <div className={`select_box ${isChecked[0] ? "checked" : ""}`}>
-        <div>
-          <input
-            type="checkbox"
-            checked={isChecked[0]}
-            onChange={() => pd(1)}
-          />
-        </div>
-        <p>하루</p>
+        <input
+          type="checkbox"
+          checked={isChecked[0]}
+          onChange={() => pd(1)}
+          id="checkbox1"
+        />
+        <label htmlFor="checkbox1"></label>
+        <p onClick={() => handleParagraphClick(0)}>하루</p>
       </div>
       <div className={`select_box ${isChecked[1] ? "checked" : ""}`}>
-        <input type="checkbox" checked={isChecked[1]} onChange={() => pd(2)} />
-        <p>일주일</p>
+        <input
+          type="checkbox"
+          checked={isChecked[1]}
+          onChange={() => pd(2)}
+          id="checkbox2"
+        />
+        <label htmlFor="checkbox2"></label>
+        <p onClick={() => handleParagraphClick(1)}>일주일</p>
       </div>
       <div className={`select_box ${isChecked[2] ? "checked" : ""}`}>
-        <input type="checkbox" checked={isChecked[2]} onChange={() => pd(3)} />
-        <p>한 달</p>
+        <input
+          type="checkbox"
+          checked={isChecked[2]}
+          onChange={() => pd(3)}
+          id="checkbox3"
+        />
+        <label htmlFor="checkbox3"></label>
+        <p onClick={() => handleParagraphClick(2)}>한 달</p>
       </div>
     </SelectWrap>
   );

diff --git a/src/components/Recommend/Page2b.tsx b/src/components/Recommend/Page2b.tsx
@@ -8,24 +8,36 @@ interface Page2bProps {
 }
 
 export const Page2b: React.FC<Page2bProps> = ({ pd }) => {
-  const [isChecked] = useAtom(isCheckedAtoms);
+  const [isChecked, setIsChecked] = useAtom(isCheckedAtoms);
+
+  const handleParagraphClick = (index: number) => {
+    const newCheckedState = [...isChecked];
+    setIsChecked(newCheckedState);
+    pd(index + 1);
+  };
 
   return (
     <SelectWrap>
       <h3 className="select_title">얼마 동안의 기간을 회고하고자 하나요? </h3>
       <div className={`select_box ${isChecked[0] ? "checked" : ""}`}>
-        <div>
-          <input
-            type="checkbox"
-            checked={isChecked[0]}
-            onChange={() => pd(1)}
-          />
-        </div>
-        <p>분기 (3개월)</p>
+        <input
+          type="checkbox"
+          checked={isChecked[0]}
+          onChange={() => pd(1)}
+          id="checkbox1"
+        />
+        <label htmlFor="checkbox1"></label>
+        <p onClick={() => handleParagraphClick(0)}>분기 (3개월)</p>
       </div>
       <div className={`select_box ${isChecked[1] ? "checked" : ""}`}>
-        <input type="checkbox" checked={isChecked[1]} onChange={() => pd(2)} />
-        <p> 일 년</p>
+        <input
+          type="checkbox"
+          checked={isChecked[1]}
+          onChange={() => pd(2)}
+          id="checkbox2"
+        />
+        <label htmlFor="checkbox2"></label>
+        <p onClick={() => handleParagraphClick(1)}>일 년</p>
       </div>
     </SelectWrap>
   );

diff --git a/src/components/Recommend/Page2c.tsx b/src/components/Recommend/Page2c.tsx
@@ -8,7 +8,13 @@ interface Page2cProps {
 }
 
 export const Page2c: React.FC<Page2cProps> = ({ pd }) => {
-  const [isChecked] = useAtom(isCheckedAtoms);
+  const [isChecked, setIsChecked] = useAtom(isCheckedAtoms);
+
+  const handleParagraphClick = (index: number) => {
+    const newCheckedState = [...isChecked];
+    setIsChecked(newCheckedState);
+    pd(index + 1);
+  };
 
   return (
     <SelectWrap>
@@ -19,13 +25,21 @@ export const Page2c: React.FC<Page2cProps> = ({ pd }) => {
             type="checkbox"
             checked={isChecked[0]}
             onChange={() => pd(1)}
+            id="checkbox1"
           />
+          <label htmlFor="checkbox1"></label>
         </div>
-        <p>프로젝트를 진행 중이에요</p>
+        <p onClick={() => handleParagraphClick(0)}>프로젝트를 진행 중이에요</p>
       </div>
       <div className={`select_box ${isChecked[1] ? "checked" : ""}`}>
-        <input type="checkbox" checked={isChecked[1]} onChange={() => pd(2)} />
-        <p>프로젝트를 마무리했어요</p>
+        <input
+          type="checkbox"
+          checked={isChecked[1]}
+          onChange={() => pd(2)}
+          id="checkbox2"
+        />
+        <label htmlFor="checkbox2"></label>
+        <p onClick={() => handleParagraphClick(1)}>프로젝트를 마무리했어요</p>
       </div>
     </SelectWrap>
   );

diff --git a/src/components/Recommend/Page3a.tsx b/src/components/Recommend/Page3a.tsx
@@ -8,7 +8,13 @@ interface Page3aProps {
 }
 
 export const Page3a: React.FC<Page3aProps> = ({ pd }) => {
-  const [isChecked] = useAtom(isCheckedAtoms);
+  const [isChecked, setIsChecked] = useAtom(isCheckedAtoms);
+
+  const handleParagraphClick = (index: number) => {
+    const newCheckedState = [...isChecked];
+    setIsChecked(newCheckedState);
+    pd(index + 1);
+  };
 
   return (
     <SelectWrap>
@@ -19,13 +25,21 @@ export const Page3a: React.FC<Page3aProps> = ({ pd }) => {
             type="checkbox"
             checked={isChecked[0]}
             onChange={() => pd(1)}
+            id="checkbox1"
           />
+          <label htmlFor="checkbox1"></label>
         </div>
-        <p>한 달</p>
+        <p onClick={() => handleParagraphClick(0)}>한 달</p>
       </div>
       <div className={`select_box ${isChecked[1] ? "checked" : ""}`}>
-        <input type="checkbox" checked={isChecked[1]} onChange={() => pd(2)} />
-        <p>분기 (3개월)</p>
+        <input
+          type="checkbox"
+          checked={isChecked[1]}
+          onChange={() => pd(2)}
+          id="checkbox2"
+        />
+        <label htmlFor="checkbox2"></label>
+        <p onClick={() => handleParagraphClick(1)}>분기 (3개월)</p>
       </div>
     </SelectWrap>
   );

diff --git a/src/components/Recommend/Page3b.tsx b/src/components/Recommend/Page3b.tsx
@@ -8,7 +8,13 @@ interface Page3bProps {
 }
 
 export const Page3b: React.FC<Page3bProps> = ({ pd }) => {
-  const [isChecked] = useAtom(isCheckedAtoms);
+  const [isChecked, setIsChecked] = useAtom(isCheckedAtoms);
+
+  const handleParagraphClick = (index: number) => {
+    const newCheckedState = [...isChecked];
+    setIsChecked(newCheckedState);
+    pd(index + 1);
+  };
 
   return (
     <SelectWrap>
@@ -19,13 +25,21 @@ export const Page3b: React.FC<Page3bProps> = ({ pd }) => {
             type="checkbox"
             checked={isChecked[0]}
             onChange={() => pd(1)}
+            id="checkbox1"
           />
+          <label htmlFor="checkbox1"></label>
         </div>
-        <p>한 달 이하</p>
+        <p onClick={() => handleParagraphClick(0)}>한 달 이하</p>
       </div>
       <div className={`select_box ${isChecked[1] ? "checked" : ""}`}>
-        <input type="checkbox" checked={isChecked[1]} onChange={() => pd(2)} />
-        <p>분기 (3개월) 이상</p>
+        <input
+          type="checkbox"
+          checked={isChecked[1]}
+          onChange={() => pd(2)}
+          id="checkbox2"
+        />
+        <label htmlFor="checkbox2"></label>
+        <p onClick={() => handleParagraphClick(1)}>분기 (3개월) 이상</p>
       </div>
     </SelectWrap>
   );

diff --git a/src/components/Recommend/SelectWrap.tsx b/src/components/Recommend/SelectWrap.tsx
@@ -24,14 +24,45 @@ const SelectWrap = styled.div`
     gap: 24px;
   }
 
-  // 체크박스 디자인 생략
-  .select_box input {
+  /* 기본적인 체크박스 스타일 */
+  input[type="checkbox"] {
+    display: none;
+  }
+
+  /* 체크박스 레이블 스타일 */
+  input[type="checkbox"] + label {
     display: inline-block;
-    width: 20px;
-    height: 20px;
-    background-color: black;
-    border: 2px solid white;
+    width: 16.5px;
+    height: 16.5px;
+    border: 1.5px solid white; /* 클릭하기 전 테두리 */
     cursor: pointer;
+    position: relative;
+    vertical-align: middle;
+    border-radius: 3px;
+    margin-bottom: 1px;
+  }
+
+  /* 체크박스가 체크된 경우 레이블 스타일 */
+  input[type="checkbox"]:checked + label {
+    background-color: rgba(121, 205, 150, 1);
+    border: 1.5px solid transparent;
+    margin-bottom: 1px;
+  }
+
+  /* 체크박스가 체크된 경우 표시하는 체크 표시 스타일 */
+  input[type="checkbox"]:checked + label::after {
+    content: "✔";
+    font-size: 13px;
+    width: 16.5px;
+    height: 16.5px;
+
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+    line-height: 20px;
+    border-radius: 3px;
+    vertical-align: middle;
   }
 
   .select_box p {
@@ -41,6 +72,8 @@ const SelectWrap = styled.div`
     font-style: normal;
     font-weight: 400;
     line-height: normal;
+
+    cursor: pointer;
   }
 
   .select_box.checked p {

diff --git a/src/components/RecommendSort/AAR.tsx b/src/components/RecommendSort/AAR.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
-import stepNum from "../../img/UI/stepNum.svg";
+import stepNum from "../../img/UI/contract_edit.svg";
 
 export const AAR: React.FC = () => {
   return (

diff --git a/src/components/RecommendSort/Continue.tsx b/src/components/RecommendSort/Continue.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
-import stepNum from "../../img/UI/stepNum.svg";
+import stepNum from "../../img/UI/contract_edit.svg";
 
 export const Continue: React.FC = () => {
   return (

diff --git a/src/components/RecommendSort/FiveF.tsx b/src/components/RecommendSort/FiveF.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
-import stepNum from "../../img/UI/stepNum.svg";
+import stepNum from "../../img/UI/contract_edit.svg";
 
 export const FiveF: React.FC = () => {
   return (

diff --git a/src/components/RecommendSort/FourL.tsx b/src/components/RecommendSort/FourL.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
-import stepNum from "../../img/UI/stepNum.svg";
+import stepNum from "../../img/UI/contract_edit.svg";
 
 export const FourL: React.FC = () => {
   return (

diff --git a/src/components/RecommendSort/KPT.tsx b/src/components/RecommendSort/KPT.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import RecommendSortWrap from "./RecommendSortWrap";
-import stepNum from "../../img/UI/stepNum.svg";
+import stepNum from "../../img/UI/contract_edit.svg";
 
 export const KPT: React.FC = () => {
   return (