[final] good bye css edit

Author: jominjimail

client/src/components/Portfolio/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import * as S from './style';
 import StyledLink from '../../basics/StyledLink';
@@ -20,7 +20,7 @@ const unfollow = (id:string) => {
   });
 };
 const Portfolio:React.FC<portfolioProp> = ({
-  introSimple, introDetail, activeFields, isMyPortfolio, PortfolioOwnerId, PortfolioOwnerName, isLogin, LoginedId, portfolioFollower,
+  thumbnailUrl, introSimple, introDetail, activeFields, isMyPortfolio, PortfolioOwnerId, PortfolioOwnerName, isLogin, LoginedId, portfolioFollower,
 }) => {
   const [showFollowers, setShowFollowers] = useState(false);
   const [showFollowings, setShowFollowings] = useState(false);
@@ -30,7 +30,6 @@ const Portfolio:React.FC<portfolioProp> = ({
   const showFollowersPopup = () => { setShowFollowers(true); };
   const closeFollowingsPopup = () => { setShowFollowings(false); };
   const showFollowingsPopup = () => { setShowFollowings(true); };
-  const thumbnailUrl = useRef('');
 
   const onClickFollow = () => {
     if (followable) {
@@ -67,7 +66,6 @@ const Portfolio:React.FC<portfolioProp> = ({
             } else {
               setFollowable(true);
             }
-            thumbnailUrl.current = data.thumbnailUrl;
           }
         });
       }
@@ -89,7 +87,7 @@ const Portfolio:React.FC<portfolioProp> = ({
           </S.FollowLine>
 
         </S.PortfolioDetail>
-         <S.PortfolioImage src={thumbnailUrl.current} />
+         <S.PortfolioImage src={thumbnailUrl} />
       </S.PortfolioBox>
       <S.IntroduceBox>
         {isLogin

client/src/components/Portfolio/style.tsx

@@ -33,6 +33,7 @@ export const PortfolioImage = styled(Img)`
   margin: 35px 38px 30px 0;
   background-size:cover;
   background-position: center center;
+  border-radius: 100%;
 `;
 export const FollowLine = styled.div`
   font-size: 13px;

client/src/components/Portfolio/types.ts

@@ -1,5 +1,6 @@
 
 export interface portfolioProp{
+    thumbnailUrl: string;
     introSimple: string;
     introDetail: string;
     activeFields: string[];

client/src/containers/CreatorContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Redirect } from 'react-router-dom';
 import { withRouter, RouteComponentProps } from 'react-router';
 import styled from 'styled-components';
@@ -39,6 +39,7 @@ interface matchParams {
 const CreatorContainer: React.SFC<RouteComponentProps<matchParams>> = ({ match }) => {
   const [portfolio, setPortfolio] = useState({ ...initialPortfolio });
   const { isLogin, id: LoginedId } = useSelector((root:RootState) => root.login);
+  const thumbnailUrl = useRef('');
 
   const isMyPortfolio = (!match.params.Id);
   const Id = match.params.Id || '';
@@ -57,6 +58,7 @@ const CreatorContainer: React.SFC<RouteComponentProps<matchParams>> = ({ match }
     };
     getData().then((data:any) => {
       if (data) {
+        thumbnailUrl.current = data.thumbnailUrl;
         const followerObject = {
           following: [...data.profile.following],
           follower: [...data.profile.follower],
@@ -77,6 +79,7 @@ const CreatorContainer: React.SFC<RouteComponentProps<matchParams>> = ({ match }
       <S.CreatorContainer>
         <S.PortfolioContainer>
           <Portfolio
+            thumbnailUrl={thumbnailUrl.current}
             isMyPortfolio={isMyPortfolio}
             introDetail={portfolio.introDetail}
             introSimple={portfolio.introSimple}