Merge branch 'develop' into feature/feat-optimize-code

.github/labeler.yml

@@ -0,0 +1,17 @@
+dependencies:
+  - '**/yarn.lock'
+
+🙏리뷰해주세요:
+  - '**'
+
+JURUMARBLE:
+  - apps/jurumarble/*
+  - apps/jurumarble/**/*
+
+CHOOZ:
+  - apps/chooz/*
+  - apps/chooz/**/*
+
+PACKAGES:
+  - packages/*
+  - packages/**/*

.github/workflows/pr-labeler.yml

@@ -0,0 +1,14 @@
+name: Labeler
+on:
+  pull_request:
+    types: [opened]
+  pull_request_target:
+
+jobs:
+  label:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/labeler@v2
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN || github.token }}'

.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/next.config.js

@@ -2,6 +2,7 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
 
+console.log("START");
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   swcMinify: true,
@@ -10,6 +11,7 @@ const nextConfig = {
   },
   transpilePackages: ["@monorepo/ui, @monorepo/hooks"],
   images: {
+    unoptimized: true,
     domains: [
       "shopping-phinf.pstatic.net",
       "elasticbeanstalk-ap-northeast-2-319210348301.s3.ap-northeast-2.amazonaws.com",

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,9 @@ 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">
+          <Image loading="lazy" alt={name} src={image} fill style={{ borderRadius: "10px" }} />
+        </RatioFrame>
       </ImageWrapper>
       <InfoContainer>
         <NameStampContainer>

apps/jurumarble/src/components/BottomBar.tsx

@@ -90,7 +90,6 @@ const BarItem = styled.div<{ isActive: boolean }>`
 
 const Padding = styled.div`
   width: 100%;
-  height: 63px;
   background-color: ${({ theme }) => theme.colors.bg_01};
 `;
 

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";