From 266cc82192c23c1874b86aa38ba2654b2db95ad0 Mon Sep 17 00:00:00 2001 From: ksmfou98 Date: Mon, 16 Oct 2023 20:13:17 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20next/image=20=EB=B9=84=EC=9C=A8=20?= =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94=20=EB=B0=8F=20=EB=8B=A4=EC=9A=B4?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .pnp.cjs | 17 ++++-- .yarnrc.yml | 6 ++ apps/jurumarble/next.config.js | 1 + .../src/app/search/components/DrinkItem.tsx | 5 +- packages/ui/components/index.ts | 1 + .../ui/components/ratioframe/RatioFrame.tsx | 59 +++++++++++++++++++ packages/ui/components/ratioframe/index.ts | 1 + yarn.lock | 9 ++- 8 files changed, 91 insertions(+), 8 deletions(-) create mode 100644 packages/ui/components/ratioframe/RatioFrame.tsx create mode 100644 packages/ui/components/ratioframe/index.ts diff --git a/.pnp.cjs b/.pnp.cjs index 81c52445..c802238a 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -6418,11 +6418,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["debug", "virtual:5daecec5378cca9d2b655781dda98457b520644332776e02f43c02749432d960b0fe724013f680814901d9397550da22c63b2a93b9f47877762783265d253473#npm:4.3.4"],\ ["@types/supports-color", null],\ ["ms", "npm:2.1.2"],\ - ["supports-color", null]\ + ["supports-color", "npm:9.4.0"]\ ],\ "packagePeers": [\ - "@types/supports-color",\ - "supports-color"\ + "@types/supports-color"\ ],\ "linkType": "HARD"\ }]\ @@ -6749,11 +6748,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "packageDependencies": [\ ["follow-redirects", "virtual:35a845e191d5a8a7376e256c81e9e855732385142c5dc9e26f0b8393c2fb4673b81fed201d5f2c5ab96fb727142683ac03329eab760f2c4870779d4bda6abe8f#npm:1.15.2"],\ ["@types/debug", null],\ - ["debug", null]\ + ["debug", "virtual:5daecec5378cca9d2b655781dda98457b520644332776e02f43c02749432d960b0fe724013f680814901d9397550da22c63b2a93b9f47877762783265d253473#npm:4.3.4"]\ ],\ "packagePeers": [\ - "@types/debug",\ - "debug"\ + "@types/debug"\ ],\ "linkType": "HARD"\ }]\ @@ -9002,6 +9000,13 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["has-flag", "npm:4.0.0"]\ ],\ "linkType": "HARD"\ + }],\ + ["npm:9.4.0", {\ + "packageLocation": "./.yarn/cache/supports-color-npm-9.4.0-a415f39758-cb8ff8daea.zip/node_modules/supports-color/",\ + "packageDependencies": [\ + ["supports-color", "npm:9.4.0"]\ + ],\ + "linkType": "HARD"\ }]\ ]],\ ["supports-preserve-symlinks-flag", [\ diff --git a/.yarnrc.yml b/.yarnrc.yml index c09535e6..8146152d 100644 --- a/.yarnrc.yml +++ b/.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" diff --git a/apps/jurumarble/next.config.js b/apps/jurumarble/next.config.js index ec553bac..41880bb3 100644 --- a/apps/jurumarble/next.config.js +++ b/apps/jurumarble/next.config.js @@ -6,6 +6,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", diff --git a/apps/jurumarble/src/app/search/components/DrinkItem.tsx b/apps/jurumarble/src/app/search/components/DrinkItem.tsx index 90c78051..3efcb829 100644 --- a/apps/jurumarble/src/app/search/components/DrinkItem.tsx +++ b/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 ( - {name} + + {name} + diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts index f6ee5998..f07b7ce6 100644 --- a/packages/ui/components/index.ts +++ b/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"; diff --git a/packages/ui/components/ratioframe/RatioFrame.tsx b/packages/ui/components/ratioframe/RatioFrame.tsx new file mode 100644 index 00000000..9d22706f --- /dev/null +++ b/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) => ( + + {children} + +); + +type RatioFrameStyleProps = Pick; + +const Container = styled.div` + ${({ ratio, imgAuto, imgCover }) => css` + ${ratio && aspectRatios[ratio]} + img { + height: 100%; + ${{ + ...(imgAuto ? { height: "auto" } : {}), + ...(imgCover ? { objectFit: "cover" } : {}), + }} + } + `} +`; diff --git a/packages/ui/components/ratioframe/index.ts b/packages/ui/components/ratioframe/index.ts new file mode 100644 index 00000000..f10d148d --- /dev/null +++ b/packages/ui/components/ratioframe/index.ts @@ -0,0 +1 @@ +export * from "./RatioFrame"; diff --git a/yarn.lock b/yarn.lock index a7f4b3a6..67042186 100644 --- a/yarn.lock +++ b/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"