[FE] Refactor : CDN 이미지 파일 사이즈 지정

Author: sang-gyeong

frontend/package-lock.json

@@ -27,6 +27,7 @@
   },
   "homepage": "https://github.com/boostcamp-2020/Project01-C-User-Event-Collector#readme",
   "dependencies": {
+    "@emotion/styled": "^11.0.0",
     "@types/next": "^9.0.0",
     "@types/react": "^17.0.0",
     "axios": "^0.21.0",

frontend/package.json

@@ -24,11 +24,18 @@ const enterTitle = title => {
 
 const MagCard = ({ magMetaData: mag }: IMagMetaProps) => {
   const target = 'MagCard';
+  const resetImgSize = url => {
+    if (url) {
+      const _url = url.replace(/type=r([0-9])+Fll/gi, 'type=r360Fll');
+      return _url;
+    }
+  };
+
   return (
     <Container>
       <BoxItem
         trackData={mag.tracks}
-        imgUrl={mag.imgUrl}
+        imgUrl={resetImgSize(mag.imgUrl)}
         next="magazines"
         id={mag.id}
         target={target}

frontend/src/components/Common/Card/MagCard/index.tsx

@@ -45,13 +45,21 @@ const All = styled.a`
   background: ${props => props.theme.color.highlight};
 `;
 
-const SpecialTag = styled(All)`
+const SpecialTag = styled.a`
+  padding: 5px 16px;
+  border-radius: 30px;
   background: linear-gradient(to right, red, #ff00a0, #7e00e4);
 `;
 
-const PickTag = styled(All)``;
+const PickTag = styled.a`
+  padding: 5px 16px;
+  border-radius: 30px;
+  background: ${props => props.theme.color.highlight};
+`;
 
-const GenreTag = styled(All)`
+const GenreTag = styled.a`
+  padding: 5px 16px;
+  border-radius: 30px;
   background: #7e00e4;
 `;
 

frontend/src/components/Common/MagTag/index.tsx

@@ -7,13 +7,21 @@ import BoxItem from '@components/Common/BoxItem';
 
 function MagTopItem({ magData: mag }) {
   const target = 'MagTopItem';
+
+  const resetImgSize = url => {
+    if (url) {
+      const _url = url.replace(/type=r([0-9])+Fll/gi, 'type=r360Fll');
+      return _url;
+    }
+  };
+
   return (
     <Wrapper>
       <ImgWrapper>
         <BoxItem
           trackData={mag.tracks}
           target={target}
-          imgUrl={mag.imgUrl}
+          imgUrl={resetImgSize(mag.imgUrl)}
           next="magazines"
           id={mag.id}
         />

frontend/src/components/Common/MagTopItem/index.tsx

@@ -31,11 +31,18 @@ function PlayTrackItem({ type, trackData: track }) {
     };
   };
 
+  const resetImgSize = url => {
+    if (url) {
+      const _url = url.replace(/type=r([0-9])+Fll/gi, 'type=r120Fll');
+      return _url;
+    }
+  };
+
   return (
     <TrackWrapper>
       <TrackImgWrapper>
         <A next="album" id={track?.album?.id} target={target}>
-          <TrackImg src={track?.album?.imgUrl} alt="playbar-track-img" />
+          <TrackImg src={resetImgSize(track?.album?.imgUrl)} alt="playbar-track-img" />
         </A>
       </TrackImgWrapper>
       <TrackContentWrapper>

frontend/src/components/Common/PlayTrackItem/index.tsx

@@ -25,6 +25,11 @@ type TrackMeta = {
   imgUrl: string;
 };
 
+const resetImgSize = url => {
+  const _url = url.replace(/type=r([0-9])+Fll/gi, 'type=r120Fll');
+  return _url;
+};
+
 const TrackItem = ({
   chart,
   type,
@@ -49,7 +54,11 @@ const TrackItem = ({
           <TrackImgWrapper>
             <TrackHoverImg src="/images/track-hover-img.png" className="track-hover-img" />
             <TrackImg
-              src={track.album?.imgUrl ? track.album.imgUrl : albumData.imgUrl}
+              src={
+                track.album?.imgUrl
+                  ? resetImgSize(track.album.imgUrl)
+                  : resetImgSize(albumData.imgUrl)
+              }
               alt="track-image"
             />
           </TrackImgWrapper>

frontend/src/components/Common/TrackItem/index.tsx

@@ -30,13 +30,13 @@ function NavBar() {
     <Container>
       {userState.isLoggedIn ? (
         <AuthWrapper>
-          <ProfileImg src={userState?.profileURL} alt="profile-img" />
+          <ProfileImg src={`${userState?.profileURL}?type=s33`} alt="profile-img" />
           {userState?.nickname}
           <AuthDropdown />
         </AuthWrapper>
       ) : (
         <AuthWrapper style={{ cursor: 'pointer' }} onClick={loginEvent}>
-          <ProfileImg src={userState?.profileURL} alt="profile-img" />
+          <ProfileImg src={`${userState?.profileURL}?type=s33`} alt="profile-img" />
           로그인
         </AuthWrapper>
       )}

frontend/src/components/Layout/SideBar/NavBar/index.tsx

@@ -18,16 +18,18 @@ function Layout({ mainTitle, type, children }: ILayout): ReactElement {
           <SubTitle>보관함</SubTitle>
           <MainTitle>{mainTitle}</MainTitle>
         </Title>
-        {type && (
-          <PlayButtonWrapper>
-            <ClickEventWrapper target="PlayAllBtn">
-              <LargeButton customType="play" />
-            </ClickEventWrapper>
-            <ClickEventWrapper target="shuffle">
-              <LargeButton customType="shuffle" />
-            </ClickEventWrapper>
-          </PlayButtonWrapper>
-        )}
+        <PlayButtonWrapper>
+          {type && (
+            <>
+              <ClickEventWrapper target="PlayAllBtn">
+                <LargeButton customType="play" />
+              </ClickEventWrapper>
+              <ClickEventWrapper target="shuffleBtn">
+                <LargeButton customType="shuffle" />
+              </ClickEventWrapper>
+            </>
+          )}
+        </PlayButtonWrapper>
       </Header>
       <LibraryContent>{children}</LibraryContent>
     </Wrapper>
@@ -45,9 +47,11 @@ const Wrapper = styled.div`
 `;
 
 const Header = styled.header`
-  position: relative;
   height: 80px;
   border-bottom: 1px solid #e4e4e4;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 `;
 
 const Title = styled.div`
@@ -67,9 +71,10 @@ const MainTitle = styled.span`
 
 const PlayButtonWrapper = styled.div`
   width: 296px;
-  position: absolute;
+  height: 60px;
   display: flex;
   justify-content: space-between;
+  align-items: flex-end;
   bottom: 18px;
   right: 0px;
 `;