feat: 내 경로 만들기 체크박스 출발 변경

gamgyul-code · Oct 5, 2024 · 1eab566 · 1eab566
1 parent e099d5f
commit 1eab566
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 7 deletions.
diff --git a/gamgyul-front/public/images/Icon/check_off.svg b/gamgyul-front/public/images/Icon/check_off.svg
diff --git a/gamgyul-front/public/images/Icon/check_on_KR.svg b/gamgyul-front/public/images/Icon/check_on_KR.svg
diff --git a/gamgyul-front/src/components/common/AttractionItem/index.jsx b/gamgyul-front/src/components/common/AttractionItem/index.jsx
@@ -5,7 +5,7 @@ import { applyFontStyles } from "../../../utils/fontStyles";
 import { StyledIconBtn } from "../Button/StyledIconBtn.style";
 
 /** 관광지 아이템 컴포넌트 (분리 필요) */
-const AttractionItem = ({ onDelete, isChecked, onCheckChange, type }) => {
+const AttractionItem = ({ onDelete, isChecked, onCheckChange, type, checkRoutes, id, language }) => {
   const [bookmark, setBookmark] = useState("off");
 
   useEffect(() => {}, []);
@@ -31,7 +31,7 @@ const AttractionItem = ({ onDelete, isChecked, onCheckChange, type }) => {
           {type === "CHECK" && (
             <StyledCheckBtn>
               <img
-                src={`/images/Icon/check_${isChecked ? "on" : "off"}.svg`}
+                src={`/images/Icon/check_${isChecked ? (checkRoutes[0] === id ? `on_${language}` : "on") : "off"}.svg`}
                 alt="체크버튼"
                 onClick={() => handleCheckClick()}
               />

diff --git a/gamgyul-front/src/pages/MyTripPage/index.jsx b/gamgyul-front/src/pages/MyTripPage/index.jsx
@@ -100,32 +100,48 @@ const MyTripPage = () => {
           </nav>
         </StyledMyTripHeader>
 
+        {/* API 연결 후 넘겨주는 id 변경 */}
         {activeTab === "places" && (
           <StyledPlacesSection>
             <AttractionItem
               type="CHECK"
               isChecked={checkRoutes.includes(1)}
               onCheckChange={() => handleCheckChange(1)}
+              checkRoutes={checkRoutes}
+              id={1}
+              language={language}
             />
             <AttractionItem
               type="CHECK"
               isChecked={checkRoutes.includes(2)}
               onCheckChange={() => handleCheckChange(2)}
+              checkRoutes={checkRoutes}
+              id={2}
+              language={language}
             />
             <AttractionItem
               type="CHECK"
               isChecked={checkRoutes.includes(3)}
               onCheckChange={() => handleCheckChange(3)}
+              checkRoutes={checkRoutes}
+              id={3}
+              language={language}
             />
             <AttractionItem
               type="CHECK"
               isChecked={checkRoutes.includes(4)}
               onCheckChange={() => handleCheckChange(4)}
+              checkRoutes={checkRoutes}
+              id={4}
+              language={language}
             />
             <AttractionItem
               type="CHECK"
               isChecked={checkRoutes.includes(5)}
               onCheckChange={() => handleCheckChange(5)}
+              checkRoutes={checkRoutes}
+              id={5}
+              language={language}
             />
 
             {isToastVisible && <Toast>{text.ALERT_TOAST}</Toast>}