Skip to content

Commit

Permalink
feat: 전통주 이미지를 fallback drink image 컴포넌트 변경
Browse files Browse the repository at this point in the history
  • Loading branch information
Leejha committed Mar 22, 2024
1 parent c9bfd73 commit 5fc805b
Show file tree
Hide file tree
Showing 8 changed files with 33 additions and 64 deletions.
15 changes: 6 additions & 9 deletions apps/jurumarble/src/app/main/components/Carousel.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { useRef } from 'react';

import { ContentSwiper } from '@monorepo/ui';
import DrinkImageWrapper from 'components/DrinkImageWrapper';
import Path from 'lib/Path';
import { GetHotDrinkResponse } from 'lib/apis/drink';
import { classifyImageUrl } from 'lib/utils/classifyImageUrl';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { SvgIcPrevious, SvgNext } from 'src/assets/icons/components';
import styled, { css } from 'styled-components';
Expand Down Expand Up @@ -46,7 +45,6 @@ function Carousel({ hotDrinkList }: Props) {
modules: [Autoplay],
}}
renderItem={({ drinkId, image, name, manufactureAddress }, index) => {
const imageUrl = classifyImageUrl(image);
return (
<Slide
key={drinkId}
Expand All @@ -55,15 +53,14 @@ function Carousel({ hotDrinkList }: Props) {
}
>
<Box>
<DrinkImageWrapper>
<DrinkImageContainer>
<RankginMark>{index + 1}</RankginMark>
<Image
alt="전통주"
src={imageUrl}
<DrinkImageWrapper
src={image}
fill
style={{ borderRadius: '10px' }}
/>
</DrinkImageWrapper>
</DrinkImageContainer>
<DrinkText>
{name}
<AreaName>{manufactureAddress}</AreaName>
Expand Down Expand Up @@ -113,7 +110,7 @@ const Box = styled.div`
`}
`;

const DrinkImageWrapper = styled.div`
const DrinkImageContainer = styled.div`
width: 100px;
height: 100px;
position: relative;
Expand Down
26 changes: 10 additions & 16 deletions apps/jurumarble/src/app/main/components/HotDrinkVoteContainer.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
'use client';

import DrinkImageWrapper from 'components/DrinkImageWrapper';
import Path from 'lib/Path';
import { classifyImageUrl } from 'lib/utils/classifyImageUrl';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import styled, { css } from 'styled-components';

Expand All @@ -19,9 +18,6 @@ function HotDrinkVoteContainer() {

const nowTime = new Date().getHours();

const imageAUrl = classifyImageUrl(drinkAImage);
const imageBUrl = classifyImageUrl(drinkBImage);

return (
<>
<H2>
Expand All @@ -34,24 +30,22 @@ function HotDrinkVoteContainer() {
>
<VoteImages>
<DrinkImageBox color="orange">
<DrinkImageWrapper>
<Image
alt="A 이미지"
src={imageAUrl}
<ImageWrapper>
<DrinkImageWrapper
src={drinkAImage}
fill
style={{ borderRadius: '80px' }}
/>
</DrinkImageWrapper>
</ImageWrapper>
</DrinkImageBox>
<DrinkImageBox color="mint">
<DrinkImageWrapper>
<Image
alt="B 이미지"
src={imageBUrl}
<ImageWrapper>
<DrinkImageWrapper
src={drinkBImage}
fill
style={{ borderRadius: '80px' }}
/>
</DrinkImageWrapper>
</ImageWrapper>
</DrinkImageBox>
</VoteImages>
<VoteTitleWrapper>
Expand Down Expand Up @@ -120,7 +114,7 @@ const DrinkImageBox = styled.div<{ color: string }>`
`}
`;

const DrinkImageWrapper = styled.div`
const ImageWrapper = styled.div`
width: 80px;
height: 80px;
position: relative;
Expand Down
7 changes: 4 additions & 3 deletions apps/jurumarble/src/app/my/components/VoteDescription.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import AorBMark from 'components/AorBMark';
import Image, { StaticImageData } from 'next/image';
import DrinkImageWrapper from 'components/DrinkImageWrapper';
import { StaticImageData } from 'next/image';
import styled, { css } from 'styled-components';

interface Props {
Expand All @@ -13,7 +14,7 @@ function VoteDescription({ imageA, imageB }: Props) {
<ImageContainer>
<ImageWrapper>
{imageA ? (
<Image
<DrinkImageWrapper
src={imageA}
alt="A이미지"
fill
Expand All @@ -29,7 +30,7 @@ function VoteDescription({ imageA, imageB }: Props) {
</ImageWrapper>
<ImageWrapper>
{imageB ? (
<Image
<DrinkImageWrapper
src={imageB}
alt="B이미지"
fill
Expand Down
9 changes: 3 additions & 6 deletions apps/jurumarble/src/app/search/components/DrinkItem.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { RatioFrame } from '@monorepo/ui';
import Chip from 'components/Chip';
import DrinkImageWrapper from 'components/DrinkImageWrapper';
import { transitions } from 'lib/styles';
import { isLogin } from 'lib/utils/auth';
import { classifyImageUrl } from 'lib/utils/classifyImageUrl';
import Image from 'next/image';
import useDrinkStampService from 'services/useDrinkStampService';
import SvgStamp from 'src/assets/icons/components/IcStamp';
import { DrinkInfo } from 'src/types/drink';
Expand All @@ -30,8 +29,6 @@ function DrinkItem({

const stampColor = isStampedDrink?.enjoyed ? colors.main_01 : colors.black_05;

const imageUrl = classifyImageUrl(image);

return (
<Container
onClick={onClickDrinkItem}
Expand All @@ -40,10 +37,10 @@ function DrinkItem({
>
<ImageWrapper>
<RatioFrame ratio="square">
<Image
<DrinkImageWrapper
loading="lazy"
alt={name}
src={imageUrl}
src={image}
fill
style={{ borderRadius: '10px' }}
/>
Expand Down
6 changes: 1 addition & 5 deletions apps/jurumarble/src/app/search/components/DrinkVoteItem.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import Path from 'lib/Path';
import { isLogin } from 'lib/utils/auth';
import { classifyImageUrl } from 'lib/utils/classifyImageUrl';
import { useRouter } from 'next/navigation';
import useBookmarkService from 'services/useBookmarkService';
import { Content } from 'src/types/vote';
Expand All @@ -20,9 +19,6 @@ interface Props {
function DrinkVoteItem({ voteDrink, onToggleReplaceLoginPageModal }: Props) {
const { voteId, region, title, imageA, imageB, votedCount } = voteDrink;

const imageAUrl = classifyImageUrl(imageA);
const imageBUrl = classifyImageUrl(imageB);

const { isBookmark, mutateBookMark } = useBookmarkService(voteId);

const router = useRouter();
Expand All @@ -42,7 +38,7 @@ function DrinkVoteItem({ voteDrink, onToggleReplaceLoginPageModal }: Props) {
isBookmark={isBookmark}
votedCount={votedCount}
/>
<VoteDescription imageA={imageAUrl} imageB={imageBUrl} />
<VoteDescription imageA={imageA} imageB={imageB} />
</Container>
);
}
Expand Down
11 changes: 6 additions & 5 deletions apps/jurumarble/src/app/search/components/VoteDescription.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import Image, { StaticImageData } from 'next/image';
import DrinkImageWrapper from 'components/DrinkImageWrapper';
import { StaticImageData } from 'next/image';
import styled from 'styled-components';

interface Props {
imageA: string | StaticImageData;
imageB: string | StaticImageData;
imageA: string;
imageB: string;
}

function VoteDescription({ imageA, imageB }: Props) {
return (
<Container>
<ImageWrapper>
<LeftVote>
<Image src={imageA} alt="A 이미지" fill />
<DrinkImageWrapper src={imageA} alt="A 이미지" fill />
</LeftVote>
<RightVote>
<Image src={imageB} alt="B 이미지" fill />
<DrinkImageWrapper src={imageB} alt="B 이미지" fill />
</RightVote>
</ImageWrapper>
</Container>
Expand Down
9 changes: 3 additions & 6 deletions apps/jurumarble/src/app/stamp/components/DrinkItem.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import DrinkImageWrapper from 'components/DrinkImageWrapper';
import { transitions } from 'lib/styles';
import { isLogin } from 'lib/utils/auth';
import { classifyImageUrl } from 'lib/utils/classifyImageUrl';
import Image from 'next/image';
import useDrinkStampService from 'services/useDrinkStampService';
import SvgStamp from 'src/assets/icons/components/IcStamp';
import { DrinkInfo } from 'src/types/drink';
Expand Down Expand Up @@ -29,8 +28,6 @@ function DrinkItem({
}: Props) {
const { id, name, manufacturer, image } = drinkInfo;

const imageUrl = classifyImageUrl(image);

const { colors } = useTheme();

const { isStampedDrink, postDrinkEnjoy } = useDrinkStampService(id);
Expand All @@ -44,9 +41,9 @@ function DrinkItem({
selected={selectedDrinkList?.includes(name)}
>
<ImageWrapper>
<Image
<DrinkImageWrapper
alt={name}
src={imageUrl}
src={image}
width={88}
height={88}
style={{ borderRadius: '10px' }}
Expand Down
14 changes: 0 additions & 14 deletions apps/jurumarble/src/lib/utils/classifyImageUrl.ts

This file was deleted.

0 comments on commit 5fc805b

Please sign in to comment.