feat: test

.yarnrc.yml

@@ -3,6 +3,12 @@ plugins:
     spec: "@yarnpkg/plugin-typescript"
 
 packageExtensions:
+  follow-redirects@*:
+    dependencies:
+      debug: "*"
+  debug@*:
+    dependencies:
+      supports-color: "*"
   swiper@*:
     dependencies:
       "@types/react": "^17"

apps/jurumarble/src/app/search/components/DrinkItem.tsx

@@ -6,6 +6,7 @@ import useDrinkStampService from "services/useDrinkStampService";
 import SvgStamp from "src/assets/icons/components/IcStamp";
 import { DrinkInfo } from "src/types/drink";
 import styled, { css, useTheme } from "styled-components";
+import { RatioFrame } from "@monorepo/ui";
 
 interface Props {
   drinkInfo: DrinkInfo;
@@ -26,7 +27,16 @@ function DrinkItem({ drinkInfo, onClickDrinkItem, selectedDrinkList }: Props) {
   return (
     <Container onClick={onClickDrinkItem} name={name} selected={selectedDrinkList?.includes(name)}>
       <ImageWrapper>
-        <Image alt={name} src={image} fill style={{ borderRadius: "10px" }} />
+        <RatioFrame ratio="square">
+          <img
+            loading="lazy"
+            alt={name}
+            src={image}
+            width={1181}
+            height={1181}
+            style={{ borderRadius: "10px" }}
+          />
+        </RatioFrame>
       </ImageWrapper>
       <InfoContainer>
         <NameStampContainer>

packages/ui/components/index.ts

@@ -8,3 +8,4 @@ export { default as FloatComponentTemplate } from "./modal/FloatComponentTemplat
 export { default as DivideLine } from "./divide/DivideLine";
 export * from "./selectBox";
 export * from "./swiper";
+export * from "./ratioframe";

packages/ui/components/ratioframe/RatioFrame.tsx

@@ -0,0 +1,59 @@
+import styled, { css, type DefaultTheme } from "styled-components";
+
+const baseAspectRatioCss = `
+  position: relative;
+  &:before {
+    content: '';
+    display: block;
+  }
+  > :first-child {
+    position: absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const aspectRatios = {
+  auto: `
+    ${baseAspectRatioCss}
+  `,
+  square: `
+    ${baseAspectRatioCss}
+    :before {
+      padding-bottom: calc((100 / 100) * 100%);
+    } ;
+  `,
+} as const;
+
+export interface RatioFrameProps {
+  ratio: keyof typeof aspectRatios;
+  imgAuto?: boolean;
+  imgCover?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const RatioFrame = ({ children, ratio, className, ...rest }: RatioFrameProps) => (
+  <Container ratio={ratio} className={className} {...rest}>
+    {children}
+  </Container>
+);
+
+type RatioFrameStyleProps = Pick<RatioFrameProps, "ratio" | "imgAuto" | "imgCover">;
+
+const Container = styled.div<RatioFrameStyleProps>`
+  ${({ ratio, imgAuto, imgCover }) => css`
+    ${ratio && aspectRatios[ratio]}
+    img {
+      height: 100%;
+      ${{
+        ...(imgAuto ? { height: "auto" } : {}),
+        ...(imgCover ? { objectFit: "cover" } : {}),
+      }}
+    }
+  `}
+`;

packages/ui/components/ratioframe/index.ts

@@ -0,0 +1 @@
+export * from "./RatioFrame";

yarn.lock

@@ -3104,7 +3104,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.3":
+"debug@npm:*, debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.3":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
   dependencies:
@@ -5157,6 +5157,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"supports-color@npm:*":
+  version: 9.4.0
+  resolution: "supports-color@npm:9.4.0"
+  checksum: cb8ff8daeaf1db642156f69a9aa545b6c01dd9c4def4f90a49f46cbf24be0c245d392fcf37acd119cd1819b99dad2cc9b7e3260813f64bcfd7f5b18b5a1eefb8
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"