14-5. 유저 아이디 눌렀을 때 유저페이지로 이동시키기

기존에 포스트 / 덧글 에서 유저의 아이디를 보여줄 때, 이를 Link 로 보여주게 하여 클릭했을 때 유저페이지로 이동을 시켜주도록 하세요.

src/components/Shared/PostList/Post.js

(...)

import { Link } from 'react-router-dom';

(...)

// 유저네임을 띄워줍니다
const Username = styled(Link)`
    font-weight: 500;
    margin-left: 0.3rem;
    font-size: 0.9rem;
    color: inherit;
    text-decoration: none;    
`;

(...)

const Post = ({post, onToggleLike, onCommentClick}) =>{
    (...)

    return (
        <Wrapper>
            <PostHead>
                <UserThumbnail image={`/api/users/${username}/thumbnail`}/>
                <Username to={`/@${username}`}>{username}</Username>
                (...)

src/components/Shared/PostList/Comment.js

import React from 'react';
import styled from 'styled-components';
import oc from 'open-color';
import { Link } from 'react-router-dom';

const CommentWrapper = styled.div`
    font-size: 0.9rem;
    & + & {
        margin-top: 0.25rem;
    }
`;

const User = styled(Link)`
    font-weight: 500;
    margin-right: 0.25rem;
    color: ${oc.gray[9]};
    text-decoration: none;
`;

const Text = styled.span`
    color: ${oc.gray[6]};
`;

const Comment = ({username, text}) => (
    <CommentWrapper>
        <User to={`@${username}`}>{username}</User>
        <Text>{text}</Text>
    </CommentWrapper>
);

export default Comment;

이제, 유저 아이디를 누르게되면 유저페이지로 이동하게 됩니다.