refactor: 이미지 컴포넌트 마저 적용

g-magazine-hackaton · Dec 5, 2023 · 037aa1d · 037aa1d
1 parent 28e4122
commit 037aa1d
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 11 deletions.
diff --git a/src/components/ui/image/index.tsx b/src/components/ui/image/index.tsx
@@ -52,7 +52,7 @@ const Image = ({
     className={classNames('image', className)}
   >
     <img
-      src={src.includes('//') ? src : IMAGE_URL + src}
+      src={src?.includes('//') ? src : IMAGE_URL + src}
       alt={alt}
       {...(isLazy && {
         loading: 'lazy',

diff --git a/src/components/ui/my-page/magazine-slide.tsx b/src/components/ui/my-page/magazine-slide.tsx
@@ -31,6 +31,7 @@ const sliderStyle = css`
     .image {
       width: 100%;
       height: 90px;
+      border-radius: 0;
     }
 
     > span {

diff --git a/src/components/ui/my-page/profile.tsx b/src/components/ui/my-page/profile.tsx
@@ -6,12 +6,13 @@ import { VscActivateBreakpoints } from 'react-icons/vsc';
 import { FaUserPlus } from 'react-icons/fa';
 
 import { Link } from 'react-router-dom';
+import { css } from '@emotion/react';
 import Button from '../button';
 import ScrapSheet from '@/components/ui/my-page/scrap-sheet';
 import { MyProfileAtom } from '@/store/my-profile';
 import { ROOT_PATH } from '@/temp/global-variables';
 import { formatNumber } from '@/lib/utils';
-import { IMAGE_URL } from '@/apis/urls';
+import Image from '../image';
 
 const HeaderWrapper = styled.div`
   display: flex;
@@ -46,8 +47,10 @@ const ProfileImageBox = styled.div`
   }
 `;
 
-const ProfileImage = styled.img`
+const imageStyle = css`
   border-radius: 6px;
+  width: 100%;
+  height: 100%;
 `;
 
 const UserInfoArea = styled.div`
@@ -173,9 +176,10 @@ const MyPageProfile = () => {
   return (
     <HeaderWrapper>
       <ProfileImageBox>
-        <ProfileImage
-          src={IMAGE_URL + myProfile.profileUrl}
+        <Image
+          src={myProfile.profileUrl}
           alt="Profile Image"
+          css={imageStyle}
         />
         <Link to="../profile">
           <Button className="edit-button">수정</Button>

diff --git a/src/components/ui/my-page/subscriber-update-slider.tsx b/src/components/ui/my-page/subscriber-update-slider.tsx
@@ -27,8 +27,8 @@ const sliderStyle = css`
     border-radius: 4px;
     position: relative;
     overflow: hidden;
-
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+
     > img {
       width: 100%;
       height: 90px;
@@ -82,6 +82,7 @@ const sliderStyle = css`
 
 const imageStyle = css`
   width: 100%;
+  border-radius: 0;
 `;
 
 interface SlideProps {

diff --git a/src/components/ui/your-page/profile.tsx b/src/components/ui/your-page/profile.tsx
@@ -3,14 +3,15 @@ import { Link } from 'react-router-dom';
 import { useState, useEffect, useLayoutEffect } from 'react';
 import { FaUserPlus } from 'react-icons/fa';
 import { useSetAtom, useAtom, useAtomValue } from 'jotai';
+import { css } from '@emotion/react';
 import { YourProfileAtom } from '@/store/your-profile';
 import { titleAtom } from '@/store/page-info';
 import { ROOT_PATH } from '@/temp/global-variables';
 import { fetch } from '@/apis/api';
 import { formatNumber } from '@/lib/utils';
 import { postFollow } from '@/apis/consumer';
 import { MyProfileAtom } from '@/store/my-profile';
-import { IMAGE_URL } from '@/apis/urls';
+import Image from '../image';
 
 const HeaderWrapper = styled.div`
   display: flex;
@@ -44,9 +45,10 @@ const ProfileImageBox = styled.div`
   }
 `;
 
-const ProfileImage = styled.img`
+const imageStyle = css`
   border-radius: 6px;
-  min-height: 100px;
+  width: 100%;
+  height: 100%;
 `;
 
 const UserInfoArea = styled.div`
@@ -188,9 +190,10 @@ const YourPageProfile = () => {
   return (
     <HeaderWrapper>
       <ProfileImageBox>
-        <ProfileImage
-          src={IMAGE_URL + yourProfile.profileUrl}
+        <Image
+          src={yourProfile.profileUrl}
           alt="Profile Image"
+          css={imageStyle}
         />
       </ProfileImageBox>
       <UserInfoArea>