Refactor: more(...) 이미지 DefaultChip 사용해서 나타내기 / 매직넘버 변수로 교체 (#104)

* Refactor: Position과 Stack에서 more(...) 이미지인 경우 DefaultChip 사용하기

* Refactor: 반응형 칩 개수 구하는 로직에서 매직넘버 대신 변수 사용 / 로직 구조화

co-kkiri/src/components/commons/Card/index.tsx

@@ -76,7 +76,7 @@ export default function Card({ page = "home", cardData }: CardProps) {
         </S.UpperBox>
         <S.BreakLine />
         <S.FooterBox>
-          <UserInfo user={{ nickname: memberNickname, profileImage: memberProfileImg }} />
+          <UserInfo user={{ nickname: memberNickname, profileImageUrl: memberProfileImg }} />
           <S.CountWrapper>
             <Count icon={ICONS.eye} count={postViews} />
             <Count icon={ICONS.comment} count={postCommentsNum} />

co-kkiri/src/components/commons/Chips/DefaultChip.tsx

@@ -9,7 +9,7 @@ interface Icon {
 }
 
 interface DefaultChipProps {
-  label: string;
+  label?: string;
   imgUrl?: string;
   icon?: Icon;
 
@@ -38,8 +38,8 @@ export default function DefaultChip({
       $isSelected={isSelected}
       $isClickable={onClick || onIconClick ? true : false}
       onClick={!icon ? onClick : undefined}>
-      {imgUrl && <Image stack={{ name: label, img: imgUrl }} />}
-      <span className="label">{label}</span>
+      {imgUrl && <Image stack={{ name: label || "", img: imgUrl }} />}
+      {label && <span className="label">{label}</span>}
       {icon && <img className="icon" src={icon.src} alt={icon.alt} onClick={onIconClick} />}
     </Container>
   );
@@ -79,8 +79,8 @@ const Container = styled.div<DefaultChipContainerStyleProps>`
   }
 
   & .icon {
-    width: 1.4rem;
-    height: 1.4rem;
+    max-width: 1.4rem;
+    max-height: 1.4rem;
     ${({ $isClickable }) => $isClickable && `cursor: pointer;`}
   }
 

co-kkiri/src/components/commons/Positions.tsx

@@ -1,32 +1,41 @@
 import { useEffect, useState } from "react";
+
 import { useWindowSize } from "usehooks-ts";
 import styled from "styled-components";
+
 import PositionChip from "./Chips/PositionChip";
+import DefaultChip from "./Chips/DefaultChip";
 import useResponsiveSidebar from "@/hooks/useResponsiveSideBar";
 import { breakpoints } from "@/styles/tokens";
+import { ICONS } from "@/constants/icons";
+import { POSITION_CHIP_LIMIT } from "@/constants/cardChipLimits";
 
 interface PositionsProps {
   positions: string[];
   variant?: "card" | "profile";
   page?: "home" | "studyList";
 }
 
-export default function Positions({ positions, variant = "profile", page }: PositionsProps) {
+export default function Positions({ positions, variant = "profile", page = "home" }: PositionsProps) {
   const [displayPositions, setDisplayPositions] = useState<string[]>(positions);
   const { width: windowWidth } = useWindowSize();
   const isSidebarOpenNarrow = useResponsiveSidebar();
 
   useEffect(() => {
     if (variant === "card") {
       const { tablet, desktop } = breakpoints;
-      let limit = 2;
+      const pageLimits = POSITION_CHIP_LIMIT[page];
+
+      let limit = pageLimits.mobile;
 
       if (windowWidth >= tablet) {
-        limit = 3;
-        if (windowWidth >= desktop) {
-          limit = isSidebarOpenNarrow ? (page === "home" ? 4 : 3) : 2;
-        }
+        limit = pageLimits.tablet;
+      }
+
+      if (windowWidth >= desktop) {
+        limit = isSidebarOpenNarrow ? pageLimits.desktopNarrow : pageLimits.desktopWide;
       }
+
       setDisplayPositions(positions.slice(0, limit));
     }
   }, [windowWidth, positions, isSidebarOpenNarrow, variant, page]);
@@ -38,7 +47,7 @@ export default function Positions({ positions, variant = "profile", page }: Posi
       ) : (
         displayPositions.map((position) => <PositionChip key={position} label={position} />)
       )}
-      {variant === "card" && positions.length > displayPositions.length && <PositionChip label="..." />}
+      {variant === "card" && positions.length > displayPositions.length && <MoreChip icon={ICONS.more} />}
     </Wrapper>
   );
 }
@@ -47,3 +56,7 @@ const Wrapper = styled.div`
   display: flex;
   gap: 0.6rem;
 `;
+
+const MoreChip = styled(DefaultChip)`
+  height: 2.2rem;
+`;

co-kkiri/src/components/commons/Stack.tsx

@@ -17,9 +17,7 @@ export default function Stack({ stack, className }: StackProps) {
           src: stack.img,
           alt: stack.name,
         }
-      : className === "more"
-        ? ICONS.more
-        : ICONS.questionMark;
+      : ICONS.questionMark;
 
   return (
     <Background className={className}>
@@ -41,12 +39,6 @@ const Background = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-
-  //임시
-  &.more img {
-    width: auto;
-    height: auto;
-  }
 `;
 
 const Icon = styled.img`

co-kkiri/src/components/commons/Stacks.tsx

@@ -1,10 +1,15 @@
 import { useEffect, useState } from "react";
+
 import { useWindowSize } from "usehooks-ts";
 import styled from "styled-components";
+
 import StackComponent from "./Stack";
+import DefaultChip from "./Chips/DefaultChip";
 import useResponsiveSidebar from "@/hooks/useResponsiveSideBar";
 import { STACKS } from "@/constants/stacks";
+import { ICONS } from "@/constants/icons";
 import { breakpoints } from "@/styles/tokens";
+import { STACK_CHIP_LIMIT } from "@/constants/cardChipLimits";
 
 interface StacksProps {
   stacks: string[];
@@ -19,14 +24,16 @@ export default function Stacks({ stacks, variant = "profile" }: StacksProps) {
   useEffect(() => {
     if (variant === "card") {
       const { desktop } = breakpoints;
-      let limit = 5;
+      const { mobile, desktopNarrow, desktopWide } = STACK_CHIP_LIMIT;
+
+      let limit = mobile;
 
       if (windowWidth >= desktop) {
-        limit = isSidebarOpenNarrow ? 5 : 4;
+        limit = isSidebarOpenNarrow ? desktopNarrow : desktopWide;
       }
       setDisplayPositions(stacks.slice(0, limit));
     }
-  }, [windowWidth, stacks, isSidebarOpenNarrow, variant]);
+  }, [variant, stacks, windowWidth, isSidebarOpenNarrow]);
 
   return (
     <Wrapper>
@@ -35,7 +42,7 @@ export default function Stacks({ stacks, variant = "profile" }: StacksProps) {
       ) : (
         displayPositions.map((stack) => <StackComponent key={stack} stack={STACKS[stack]} />)
       )}
-      {variant === "card" && stacks.length > displayPositions.length && <StackComponent className="more" />}
+      {variant === "card" && stacks.length > displayPositions.length && <MoreChip imgUrl={ICONS.more.src} />}
     </Wrapper>
   );
 }
@@ -44,3 +51,16 @@ const Wrapper = styled.div`
   display: flex;
   gap: 0.6rem;
 `;
+
+const MoreChip = styled(DefaultChip)`
+  padding: 0;
+
+  & div {
+    display: flex; // DefaultChip의 mobile에서 Image가 none 되는 것을 막기 위해
+  }
+
+  & img {
+    width: auto;
+    height: auto;
+  }
+`;

co-kkiri/src/constants/cardChipLimits.ts

@@ -0,0 +1,6 @@
+export const POSITION_CHIP_LIMIT = {
+  home: { mobile: 2, tablet: 3, desktopNarrow: 4, desktopWide: 2 },
+  studyList: { mobile: 2, tablet: 3, desktopNarrow: 3, desktopWide: 2 },
+};
+
+export const STACK_CHIP_LIMIT = { mobile: 5, tablet: 5, desktopNarrow: 5, desktopWide: 4 };