Merge pull request #182 from sopt-makers/refactor/#181_next_image

sopt-makers · Sep 21, 2023 · ed75afe · ed75afe
2 parents b7805ea + fb744a9
commit ed75afe
Show file tree

Hide file tree

Showing 11 changed files with 24 additions and 10 deletions.
diff --git a/src/components/corporate/JobPostingCard/index.tsx b/src/components/corporate/JobPostingCard/index.tsx
@@ -19,7 +19,7 @@ const JobPostingCard = ({
 }: JobPostingCardProps) => {
   return (
     <St.Card>
-      <St.Image src={imgSrc} alt={corporation} />
+      <St.Logo src={imgSrc} alt={corporation} width={80} height={80} />
       <St.Contents>
         <St.Chip>{type}</St.Chip>
         <St.Title>{title}</St.Title>

diff --git a/src/components/corporate/JobPostingCard/style.ts b/src/components/corporate/JobPostingCard/style.ts
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import Image from 'next/image';
 import { textpluralLinesEllipsis } from '@src/styles/textEllipsis';
 
 const Card = styled.article`
@@ -28,7 +29,7 @@ const Card = styled.article`
   }
 `;
 
-const Image = styled.img`
+const Logo = styled(Image)`
   width: 80px;
   height: 80px;
   border-radius: 10px;
@@ -120,7 +121,7 @@ const RestInfo = styled.p`
 
 export const St = {
   Card,
-  Image,
+  Logo,
   Contents,
   Chip,
   Title,

diff --git a/src/views/MainPage/components/ActivityReview/ActivityReview.tsx b/src/views/MainPage/components/ActivityReview/ActivityReview.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import Link from 'next/link';
 import { ReactComponent as ArrowLeft } from '@src/assets/icons/arrow_left_28x28.svg';
 import { ReactComponent as ArrowRight } from '@src/assets/icons/arrow_right_28x28.svg';
@@ -41,7 +42,9 @@ export function ActivityReview() {
                       {parsePartToKorean(review.part)}파트 {review.semester}기{'\n'}
                       <strong className={styles.descName}>{review.reviewer}</strong>
                     </p>
-                    <img className={`${styles.arrow}`} src={ArrowRightGrey} alt="이동" />
+                    <div className={styles.arrow}>
+                      <Image src={ArrowRightGrey} alt="이동" fill sizes="100%" />
+                    </div>
                   </div>
                 </article>
               </Link>

diff --git a/src/views/MainPage/components/ActivityReview/activity-review.module.scss b/src/views/MainPage/components/ActivityReview/activity-review.module.scss
@@ -212,6 +212,7 @@
 }
 
 .arrow {
+  position: relative;
   @include mobile {
     width: 18px;
     height: 18px;

diff --git a/src/views/MainPage/components/DetailedInformation/DetailedInformation.tsx b/src/views/MainPage/components/DetailedInformation/DetailedInformation.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import ArrowRight from '@src/assets/icons/arrow_right_grey.svg';
 import { GTM_CLASS } from '@src/lib/constants/gtmClass';
@@ -50,7 +51,9 @@ export function DetailedInformation() {
             >
               <div className={`${styles.nameWrapper}  ${GTM_CLASS[`informationCard${name}`]}`}>
                 <h4 className={`${styles.name}  ${GTM_CLASS[`informationCard${name}`]}`}>{name}</h4>
-                <img className={`${styles.arrow}`} src={ArrowRight} alt="이동" />
+                <div className={`${styles.arrow}`}>
+                  <Image src={ArrowRight} alt="이동" fill sizes="100%" />
+                </div>
               </div>
               <p className={`${styles.desc}  ${GTM_CLASS[`informationCard${name}`]}`}>{desc}</p>
             </article>

diff --git a/src/views/MainPage/components/DetailedInformation/detailed-information.module.scss b/src/views/MainPage/components/DetailedInformation/detailed-information.module.scss
@@ -103,6 +103,7 @@
 }
 
 .arrow {
+  position: relative;
   width: 30px;
   height: 30px;
 

diff --git a/src/views/MainPage/components/RecruitFloatingBanner/RecruitFloatingBanner.tsx b/src/views/MainPage/components/RecruitFloatingBanner/RecruitFloatingBanner.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import SoptSymbol from '@src/assets/icons/dosopt_symbol.png';
@@ -16,7 +17,7 @@ export function RecruitFloatingBanner() {
     <Wrapper>
       <Banner isMobile={isMobile} onClick={() => isMobile && router.push('/recruit')}>
         <Countdown>
-          <Symbol src={SoptSymbol.src} alt="솝트 심볼" />
+          <Symbol src={SoptSymbol.src} alt="솝트 심볼" width={52} height={26} />
           {isMobile ? (
             '33기 YB 지원하기'
           ) : (
@@ -43,7 +44,7 @@ const Wrapper = styled.div`
   z-index: 9999;
 `;
 
-const Symbol = styled.img`
+const Symbol = styled(Image)`
   width: 52px;
   height: 26px;
 

diff --git a/src/views/ProjectPage/components/project/ProjectCard.tsx b/src/views/ProjectPage/components/project/ProjectCard.tsx
@@ -63,6 +63,8 @@ function ProjectCardMobileImage(logoImage: string, thumbnailImage?: string) {
           className={`${GTM_CLASS.projectCard}`}
           src={thumbnailImage}
           alt="thumbnail"
+          fill
+          sizes="100%"
         />
       )}
       {!isCardThumbnail && (
@@ -78,7 +80,7 @@ function ProjectCardMobileImage(logoImage: string, thumbnailImage?: string) {
   );
 }
 
-const StyledThumbnail = styled.img`
+const StyledThumbnail = styled(Image)`
   width: 100%;
   height: 100%;
   object-fit: cover;

diff --git a/src/views/ProjectPage/components/project/project-card.module.scss b/src/views/ProjectPage/components/project/project-card.module.scss
@@ -23,6 +23,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
 
     background-color: #141414;
     border-radius: 5px;

diff --git a/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx b/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx
@@ -52,7 +52,7 @@ export function ActivityReview() {
                     {parsePartToKorean(review.part)}파트 {review.semester}기{'\n'}
                     <DescName>{review.reviewer}</DescName>
                   </Desc>
-                  <Arrow src={arrowRightWhite} alt="" />
+                  <Arrow src={arrowRightWhite} alt="" width={30} height={30} />
                 </DescWrapper>
               </CardWrapper>
             </Link>

diff --git a/src/views/RecruitPage/components/ActivityReview/styles.ts b/src/views/RecruitPage/components/ActivityReview/styles.ts
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import Image from 'next/image';
 
 export const ContainerWrapper = styled.div`
   display: flex;
@@ -169,7 +170,7 @@ export const DescName = styled.div`
   }
 `;
 
-export const Arrow = styled.img`
+export const Arrow = styled(Image)`
   width: 30px;
   height: 30px;
   @media (max-width: 765.9px) {