Fix: Add @types for styled-components

components/BottomNav.tsx

@@ -12,7 +12,7 @@ import {
   faUsersRectangle,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Link from "next/link";
+import Link, { LinkProps } from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
 import { useSession } from "next-auth/react";
 import { useSetRecoilState } from "recoil";
@@ -90,7 +90,7 @@ function NavButton({ text, url, activeIcon, defaultIcon, active, idx }: INavButt
     <NavLink
       onClick={() => handleMove()}
       href={url}
-      active={active.toString()}
+      active={active.toString() as "true" | "false"}
       replace={!text}
       className={`bottom_nav${idx}`}
     >
@@ -146,16 +146,15 @@ const Nav = styled.nav`
   margin: 0 auto;
 `;
 
-const NavLink = styled<{ active: "true" | "false" }>(Link)`
+const NavLink = styled(Link)<{ active: "true" | "false" } & LinkProps>`
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 16px;
   margin-top: 4px;
-  color: ${({ active }: { active: "true" | "false" }) =>
-    active === "true" ? "var(--gray-2)" : "var(--gray-3)"};
+  color: ${({ active }) => (active === "true" ? "var(--gray-2)" : "var(--gray-3)")};
 `;
 
 const NavText = styled.div`

components/atoms/CircleLogImage.tsx

@@ -1,12 +1,14 @@
 import Image from "next/image";
 import styled from "styled-components";
+
 interface ICircleLogImage {
   logoName: string;
   imageUrl: string;
 }
+
 export default function CircleLogoImage({ logoName, imageUrl }: ICircleLogImage) {
   return (
-    <CircleLogoWrapper logoName={logoName}>
+    <CircleLogoWrapper>
       <Image src={imageUrl} width={72} height={72} alt={logoName} />
     </CircleLogoWrapper>
   );

components/atoms/IconLinkTile.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import styled from "styled-components";
 
 import { Size } from "../../types/components/assetTypes";
+
 export interface IIconLinkTile {
   text: string;
   icon: React.ReactNode;
@@ -47,9 +48,9 @@ const IconContainer = styled.div`
   margin-bottom: 8px; /* mb-3에 해당하는 마진 값 */
 `;
 
-const Text = styled.span`
+const Text = styled.span<{ size: Size }>`
   white-space: nowrap;
-  font-size: ${(props) =>
-    props.size === "lg" ? "14px" : "10px"}; /* text-xs와 text-sm에 해당하는 폰트 크기 */
+  font-size: ${({ size }) =>
+    size === "lg" ? "14px" : "10px"}; /* text-xs와 text-sm에 해당하는 폰트 크기 */
   font-weight: normal;
 `;

components/atoms/RulletPicker.tsx

@@ -113,7 +113,7 @@ const ItemsContainer = styled(motion.div)`
   z-index: 10;
 `;
 
-const Item = styled.div`
+const Item = styled.div<{ isActive: boolean }>`
   position: relative;
   z-index: 10;
   display: flex;

components/atoms/buttons/ShadowCircleButton.tsx

@@ -19,7 +19,7 @@ export default function ShadowCircleButton({ buttonProps, onClick }: IShadowCirc
   );
 }
 
-const OuterCircle = styled.div`
+const OuterCircle = styled.div<{ shadow: string }>`
   position: relative;
   z-index: 10;
   padding: 8px;

components/molecules/badge/AttendanceBadge.tsx

@@ -19,11 +19,11 @@ export default function AttendanceBadge({ type, time }: IAttendanceBadge) {
   );
 }
 
-const BadgeContainer = styled.div`
+const BadgeContainer = styled.div<{ time?: string }>`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: ${(props) => (props.time ? "8px" : "0")};
+  padding-top: ${({ time }) => (time ? "8px" : "0")};
 `;
 
 const TimeText = styled.span`

components/molecules/boards/userTimeBoard/UserTimeBoard.tsx

@@ -36,7 +36,7 @@ const UserTimeBoardContainer = styled.div`
   width: 344px;
 `;
 
-const BoardContainer = styled.div`
+const BoardContainer = styled.div<{ participants: ITimeBoardParticipant[] }>`
   min-height: 160px;
   display: flex;
   flex-direction: column;

package.json

@@ -61,6 +61,7 @@
     "@tanstack/eslint-plugin-query": "^5.28.11",
     "@types/node": "20.11.17",
     "@types/react": "18.2.55",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
     "chromatic": "^11.3.0",