Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

public 이미지를 assets 으로 옮기기 #239

Merged
merged 12 commits into from
Jul 14, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Refactor image handling in MatchingSequenceSwiper
- Replace static image URLs with imported image modules in the MatchingSequenceSwiper component. This shift allows for stronger type checking and potential optimizations by the module bundler.
- Simplify the props passed to the `MainDescriptionCard` by using a single `image` object instead of separate URL, width, and height properties, streamlining component interfaces and reducing redundancy.

These changes enhance maintainability and prepare the component for more flexible image management, such as easier transitions to different image formats or dynamic loading techniques.
seheon99 committed Jul 14, 2024
commit 2ed757ec3a3f776ee5886d281ff58353cb8bfb94
21 changes: 9 additions & 12 deletions src/components/organisms/MatchingInfo/MatchingSequenceSwiper.tsx
Original file line number Diff line number Diff line change
@@ -5,6 +5,11 @@ import styled from '@emotion/styled';
import { Autoplay } from 'swiper/modules';
import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react';

import {
mainSection3Matching1,
mainSection3Matching2,
mainSection3Matching3,
} from '#/assets/images';
import { Icons } from '#/components/atoms/Icons';
import { MainDescriptionCard } from '#/components/molecules/MainDescriptionCard';

@@ -66,25 +71,19 @@ const CardInfo = [
width: 707,
title: '랜덤 팀 매칭 시작',
description: `내 프로필을 작성한 후 원하는 포지션의 사람들과 프로젝트 시작할\n준비를 해보세요! 그러면 최적의 랜덤 팀 매칭을 받을 수 있어요!`,
imgUrl: '/images/main_matching_img1.svg',
imgWidth: 345,
imgHeight: 345,
image: mainSection3Matching1,
},
{
width: 707,
title: '대기방 생성',
description: `프로젝트 최소 인원이 모이면 생성되는 대기방에서\n예비 팀원들과 대화를 나눠보세요!`,
imgUrl: '/images/main_matching_img2.svg',
imgWidth: 649,
imgHeight: 328,
image: mainSection3Matching2,
},
{
width: 707,
title: '프로젝트 시작',
description: `매칭 팀원들과 프로젝트를 시작해 보세요!\n만들어진 팀은 "내 프로젝트" 페이지에서 확인할 수 있어요.`,
imgUrl: '/images/main_matching_img3.svg',
imgWidth: 605,
imgHeight: 328,
image: mainSection3Matching3,
},
];
export const MatchingSequenceSwiper = () => {
@@ -128,9 +127,7 @@ export const MatchingSequenceSwiper = () => {
index={index + 1}
title={card.title}
description={card.description}
imgUrl={card.imgUrl}
imgWidth={card.imgWidth}
imgHeight={card.imgHeight}
image={card.image}
/>
</SwiperSlide>
);