Develop

client/package.json

@@ -68,6 +68,7 @@
     "@types/socket.io-client": "^1.4.32",
     "@types/styled-components": "^4.4.0",
     "@types/uuid": "^3.4.6",
+    "eslint": "^6.1.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",

client/src/commons/TextWithImg/index.tsx

@@ -16,6 +16,7 @@ const SmallImg = styled(Img)`
     return '1.5rem';
   }};
     height: auto;
+    border-radius: 100%;
 `;
 
 const SmallH4 = styled(H4)`

client/src/components/Alarm/Notifications/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import * as S from './styles';
 import { getShortId } from '../../../utils';
 import { INoti } from '../../../modules/notification';
@@ -26,7 +26,7 @@ const Notifications: React.FC<NotificationsProp> = ({
           refPost={noti.ref}
         />
       ))
-    }
+      }
   </S.Container>
 );
 export default Notifications;

client/src/components/Card/MusicCard/index.tsx

@@ -1,6 +1,5 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import * as S from './styles';
-import StyledLink from '../../../basics/StyledLink';
 import { TextWithImg } from '../CardFooter/styles';
 import CardFooter from '../CardFooter';
 import MusicCardProp from './types';
@@ -18,33 +17,51 @@ const MusicCard: React.FC<MusicCardProp> = ({
 
   return (
     <S.Container>
-      <StyledLink to={`/home/detail-music/${ownerId}`}>
-        <S.CardImgContainer>
+      <S.CardImgContainer>
+        <S.StyledLink to={`/home/detail-music/${ownerId}`}>
           <S.CardImg src={imageUrl} />
+          <S.CroppedCardImg src={imageUrl} />
+        </S.StyledLink>
 
-        </S.CardImgContainer>
+        <S.InnerPlayButton
+          type="button"
+          onClick={playToggle}
+        >
+          {
+            isPlaying
+              ? <S.Pause />
+              : <S.PlayArrow />
+          }
+        </S.InnerPlayButton>
+      </S.CardImgContainer>
+      <S.StyledLink to={`/home/detail-music/${ownerId}`}>
 
         <S.CardHeader>
           <S.Title>{title}</S.Title>
         </S.CardHeader>
+      </S.StyledLink>
 
+      <S.StyledLink to={`/creator/${creator._id}`}>
         <S.CardBody id={creator._id}>
           <TextWithImg
             src={creator.thumbnailUrl}
             text={creator.name}
           />
         </S.CardBody>
-
+      </S.StyledLink>
+      <S.StyledLink to={`/home/detail-music/${ownerId}`}>
         <CardFooter
           comments={numOfComments.toString()}
           views={views.toString()}
         />
-      </StyledLink>
-      <S.CroppedCardImg src={imageUrl} />
-      <S.PlayButton htmlFor={_id}>
-        <button type="button" id={_id} onClick={playToggle}><S.PlayIcon /></button>
-      </S.PlayButton>
-      <MusicFeedPlayerMini url={musicUrl} isPlaying={isPlaying} playToggle={playToggle} audioRef={audioRef} />
+      </S.StyledLink>
+
+      <MusicFeedPlayerMini
+        url={musicUrl}
+        isPlaying={isPlaying}
+        playToggle={playToggle}
+        audioRef={audioRef}
+      />
     </S.Container>
   );
 };

client/src/components/Card/MusicCard/styles.ts

@@ -1,8 +1,9 @@
 import styled from 'styled-components';
-import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+import { PlayArrow, Pause } from '@material-ui/icons';
 import Img from '../../../basics/Img';
 import { theme } from '../../../style/theme';
 import H3 from '../../../basics/H3';
+import Link from '../../../basics/StyledLink';
 
 export const Container = styled.div`
     display: flex;
@@ -15,9 +16,15 @@ export const Container = styled.div`
     box-shadow: ${theme.BOX_SHADOW};
     position: relative;
     overflow: hidden;
+    transition: all 0.3s ease-in-out;
+    &:hover {
+        transition: all 0.3s ease-in-out;
+        transform: scale(1.1);
+    }
 `;
 
 export const CardImgContainer = styled.div`
+    position: relative;
     display: flex;
     width: 100%;
     height: 13rem;
@@ -33,7 +40,7 @@ export const CardImg = styled(Img)`
     border-top-left-radius:10px;
     border-top-right-radius: 10px;
     background: no-repeat;
-    filter: blur(30px) grayscale(30%);
+    filter: blur(10px) grayscale(30%);
 
 `;
 
@@ -52,8 +59,6 @@ export const CardBody = styled.div`
     border-bottom: 1px ${theme.BORDER_GRAY} solid;
 `;
 
-export const PlayIcon = PlayArrowIcon;
-
 export const CroppedCardImg = styled(Img)`
     position: absolute;
     top: 55px;
@@ -66,20 +71,37 @@ export const CroppedCardImg = styled(Img)`
 `;
 
 export const PlayButton = styled.label`
-        position: absolute;
-        top: 80px;
-        right: 116px;
-        button{
-            width: 90px;
-            border: none;
-            background: none;
-            text-decoration: none;
-            color: white;
-            .MuiSvgIcon-root {
-                font-size: 3rem;
-            }
-        }
-        button:focus {
-            outline: none;        }
-
+    position: absolute;
+    top: 80px;
+    right: 116px;
+    cursor: pointer;
+`;
+
+export const InnerPlayButton = styled.button`
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: 90px;
+    border: none;
+    background: none;
+    text-decoration: none;
+    color: white;
+    cursor: pointer;
+    .MuiSvgIcon-root {
+        font-size: 3rem;
+    }
+    &:focus {
+        outline: none;
+    };
+`;
+
+export const StyledLink = styled(Link)`
+    width: 100%;
+    height: 100%;
 `;
+
+export {
+  PlayArrow,
+  Pause,
+};

client/src/components/Card/WorksCard/index.tsx

@@ -1,35 +1,38 @@
 import React from 'react';
-
 import TextWithImg from '../../../commons/TextWithImg';
 import * as S from './styles';
-
-import StyledLink from '../../../basics/StyledLink';
 import CardFooter from '../CardFooter';
 import WorksCardProp from './types';
 
 const WorksCard: React.FC<WorksCardProp> = ({
   _id, ownerId, imgUrl, creator, title, numOfComments, views,
 }) => (
   <S.Container>
-    <StyledLink to={`/home/detail-image/${ownerId}`}>
+    <S.StyledLink to={`/home/detail-image/${ownerId}`}>
       <S.CardImgContainer>
         <S.CardImg src={imgUrl} />
       </S.CardImgContainer>
+
       <S.CardHeader>
         <S.Title>{title}</S.Title>
       </S.CardHeader>
+    </S.StyledLink>
 
+    <S.StyledLink to={`/creator/${creator._id}`}>
       <S.CardBody id={creator._id}>
         <TextWithImg
-          src="https://kr.object.ncloudstorage.com/crafolio/user/thumbnail/user-profile-thumbnail.png"
+          src={creator.thumbnailUrl}
           text={creator.name}
         />
       </S.CardBody>
+    </S.StyledLink>
+
+    <S.StyledLink to={`/home/detail-image/${ownerId}`}>
       <CardFooter
         comments={numOfComments}
         views={views}
       />
-    </StyledLink>
+    </S.StyledLink>
   </S.Container>
 );
 

client/src/components/Card/WorksCard/styles.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import Img from '../../../basics/Img';
 import { theme } from '../../../style/theme';
 import H3 from '../../../basics/H3';
+import StyledLink from '../../../basics/StyledLink';
 
 export const Container = styled.div`
     display: flex;
@@ -12,6 +13,11 @@ export const Container = styled.div`
     border-radius: 10px;
     border: 0px solid black;
     box-shadow: ${theme.BOX_SHADOW};
+    transition: all 0.3s ease-in-out;
+    &:hover {
+        transition: all 0.3s ease-in-out;
+        transform: scale(1.1);
+    }
 `;
 
 export const CardImgContainer = styled.div`
@@ -43,3 +49,7 @@ export const CardBody = styled.div`
     padding: 0 1rem;
     border-bottom: 1px ${theme.BORDER_GRAY} solid;
 `;
+
+export {
+  StyledLink,
+};

client/src/components/Card/WorksCard/types.ts

@@ -9,6 +9,7 @@ export default interface WorksCardProp{
     _id: string,
     email: string,
     name: string,
+    thumbnailUrl: string,
   };
   createdAt: number;
   updatedAt: number;

client/src/components/Comment/index.tsx

@@ -41,8 +41,6 @@ const Comment: React.FC<CommentProp> = ({
       }
 
       <S.CommentFooter>
-        <S.Mention>멘션</S.Mention>
-        <S.Mention>비밀 댓글</S.Mention>
         {
           commentsAllow
             ? <S.SubmitButton onClick={addNewComment}>등록</S.SubmitButton>

client/src/components/FeedMusics/index.tsx

@@ -42,4 +42,5 @@ const FeedMusics: React.FC<FeedMusicsProps> = ({
   </S.Container>
 );
 
+
 export default FeedMusics;

client/src/components/FeedWorks/type.ts

@@ -5,6 +5,7 @@ export interface IImage{
       _id: string,
       name: string,
       email: string,
+      thumbnailUrl: string,
     };
     url: string;
     title:string;

client/src/components/FeedWorks/types.ts

@@ -5,6 +5,7 @@ export default interface IImage{
     _id: string,
     name: string,
     email: string,
+    thumbnailUrl: string,
   };
   url: string;
   title:string;

client/src/components/Header/HeaderRight/HeaderGreeting/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import Img from '../../../../basics/Img';
+import { RootState } from '../../../../modules';
 
 const ProfileLink = styled(Link)`
     text-decoration : none;
@@ -11,19 +13,22 @@ const ProfileLink = styled(Link)`
 const ProfileImg = styled(Img)`
     height: 2.5rem;
     width: 2.5rem;
+    border-radius: 100%;
 `;
 const HeaderGreetingContainer = styled.div`
     display:flex;
     height: 100%;
 `;
 
-const LOGIN_PROFILE_THUMBNAIL = 'https://kr.object.ncloudstorage.com/crafolio/user/origin/iu-profile-origin.png';
-const HeaderGreeting: React.FC = () => (
-  <HeaderGreetingContainer>
-    <ProfileLink to="/creator">
-      <ProfileImg src={LOGIN_PROFILE_THUMBNAIL} />
-    </ProfileLink>
-  </HeaderGreetingContainer>
-);
+const HeaderGreeting: React.FC = () => {
+  const thumbnailUrl = useSelector((state: RootState) => state.login.thumbnailUrl);
+  return (
+    <HeaderGreetingContainer>
+      <ProfileLink to="/creator">
+        <ProfileImg src={thumbnailUrl} />
+      </ProfileLink>
+    </HeaderGreetingContainer>
+  );
+};
 
 export default HeaderGreeting;