style: Icon rotate browser issue 수정 (#43)

DDD-Community · Mar 2, 2024 · 291ed24 · 291ed24
1 parent 521687e
commit 291ed24
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 8 deletions.
diff --git a/src/components/atoms/GreenArrowButton.tsx b/src/components/atoms/GreenArrowButton.tsx
@@ -14,7 +14,13 @@ const GreenArrowButton: React.FC<GreenArrowButtonProps> = ({ text, className, on
       className={`flex items-center justify-center w-full bg-primary2 text-white p-18 gap-12 rounded-12 heading4-semibold ${className}`}
     >
       {text}
-      <AngleIcon fill="#ffffff" width={16} height={16} transform="rotate(180)" />
+      <AngleIcon
+        fill="#ffffff"
+        width={16}
+        height={16}
+        transform="rotate(180)"
+        style={{ transform: 'rotate(180deg)' }}
+      />
     </button>
   );
 };

diff --git a/src/components/atoms/SortButton.tsx b/src/components/atoms/SortButton.tsx
@@ -5,7 +5,13 @@ const SortButton: React.FC<{ label: string; onClick: () => void }> = ({ label, o
   return (
     <button onClick={onClick} className="flex justify-center items-center">
       <span className="mr-[4px] text-gray5">{label}</span>
-      <AngleIcon width={14} height={14} fill="#9299AA" transform="rotate(270)" />
+      <AngleIcon
+        width={14}
+        height={14}
+        fill="#9299AA"
+        transform="rotate(270deg)"
+        style={{ transform: 'rotate(270deg)' }}
+      />
     </button>
   );
 };

diff --git a/src/components/molecules/FriendsFridgeItem.tsx b/src/components/molecules/FriendsFridgeItem.tsx
@@ -23,7 +23,7 @@ const FriendsFridgeItem: React.FC<FriendsFridgeItemProps> = ({ name, ingredientC
         </div>
       </div>
       <Link href={`${linkTo}`}>
-        <AngleIcon width={16} height={16} transform="rotate(180)" />
+        <AngleIcon width={16} height={16} transform="rotate(180)" style={{ transform: 'rotate(180deg)' }} />
       </Link>
     </Link>
   );

diff --git a/src/components/molecules/NavWhiteBoxItem.tsx b/src/components/molecules/NavWhiteBoxItem.tsx
@@ -18,7 +18,13 @@ const NavWhiteBoxItem: React.FC<NavWhiteBoxItemProps> = ({ name, linkTo, text, s
       {text ? (
         <div className="text-gray4">{text}</div>
       ) : (
-        <AngleIcon fill={'gray'} width={16} height={16} transform="rotate(180)" />
+        <AngleIcon
+          fill={'gray'}
+          width={16}
+          height={16}
+          transform="rotate(180)"
+          style={{ transform: 'rotate(180deg)' }}
+        />
       )}
     </Link>
   );

diff --git a/src/components/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx
@@ -10,7 +10,7 @@ const FridgeInfoBox: React.FC<{
   userName: string;
   toggleIsOpenFridgeListModal: () => void;
   isOkIngredientAdd?: boolean;
-}> = ({ currentFridgeInfo, fridgeName, userName = '', toggleIsOpenFridgeListModal, isOkIngredientAdd }) => {
+}> = ({ currentFridgeInfo, userName = '', toggleIsOpenFridgeListModal, isOkIngredientAdd }) => {
   const router = useRouter();
 
   console.log(currentFridgeInfo);
@@ -20,7 +20,13 @@ const FridgeInfoBox: React.FC<{
         <div className="body1-medium text-gray7">{userName ?? '사용자정보없음'} 님의</div>
         <div className="flex items-center gap-[8px]" onClick={toggleIsOpenFridgeListModal}>
           <div className="heading1-bold">{currentFridgeInfo.fridgeName ?? '냉장고정보없음'}</div>
-          <AngleIcon width={16} height={16} fill="#000000" transform="rotate(-90)" />
+          <AngleIcon
+            width={16}
+            height={16}
+            fill="#000000"
+            transform="rotate(-90)"
+            style={{ transform: 'rotate(-90deg)' }}
+          />
         </div>
       </div>
       {isOkIngredientAdd && (

diff --git a/src/components/organisms/FriendListItem.tsx b/src/components/organisms/FriendListItem.tsx
@@ -32,7 +32,14 @@ const FriendListItem: React.FC<{
       {possibleDelete ? (
         <CheckBox onClick={onClick} active={active} />
       ) : (
-        <AngleIcon width={16} height={16} fill="#CCCFD7" transform="rotate(180)" className="z-0" />
+        <AngleIcon
+          width={16}
+          height={16}
+          fill="#CCCFD7"
+          transform="rotate(180)"
+          style={{ transform: 'rotate(180deg)' }}
+          className="z-0"
+        />
       )}
     </div>
   );

diff --git a/src/components/templates/SelectIngredientTemplate.tsx b/src/components/templates/SelectIngredientTemplate.tsx
@@ -83,7 +83,13 @@ const SelectIngredientTemplate: React.FC<{
               <div className="body1-medium text-gray7">{nickname} 님의</div>
               <div className="flex items-center gap-[8px]" onClick={onOpenFridgeListModal}>
                 <div className="heading1-bold">{selectedFridge?.name}</div>
-                <AngleIcon width={16} height={16} fill="#000000" transform="rotate(-90)" />
+                <AngleIcon
+                  width={16}
+                  height={16}
+                  fill="#000000"
+                  transform="rotate(-90)"
+                  style={{ transform: 'rotate(-90deg)' }}
+                />
               </div>
             </div>
           </div>
-Original file line number
+Diff line change
@@ Expand Up @@
             </div>
           </div>
           <Link href={`${linkTo}`}>
-            <AngleIcon width={16} height={16} transform="rotate(180)" />
+            <AngleIcon width={16} height={16} transform="rotate(180)" style={{ transform: 'rotate(180deg)' }} />
           </Link>
         </Link>
       );
@@ Expand Down @@