[style] 재활용 할 수 있는 컴포넌트들

[eunznidang]

💥 완성되면 사용법 작성합시다!

[eunznidang]

infobox

• 우측 버튼 있는 경우: 다음과 같이 gridColumns4 사용

                <div className="mpdprofileBox gridColumns4">
                    <img src={profilePictureUrl}></img>
                    <div>
                        <p className="content">@{displayName}</p>
                        <p className="caption grayText">{bio}</p>
                    </div>
                    <div>
                        <p id='followNum' className="content">{followingNum}</p>
                        <p className="caption grayText">팔로잉</p>
                    </div>
                    <div>
                        <button
                            className="button mb05"
                            style={{ backgroundColor: "white", border: "1px solid gray", color: "gray" }}
                            onClick={() => window.location.href = '/AccountManage'}>
                            프로필 관리
                        </button>
                    </div>
                </div>

• 우측 버튼 없는 경우: 다음과 같이 gridColumns3 사용

                <div className="mpdprofileBox gridColumns3">
                    <img src={profilePictureUrl}></img>
                    <div>
                        <p className="content">@{displayName}</p>
                        <p className="caption grayText">{bio}</p>
                    </div>
                    <div>
                        <p id='followNum' className="content">{followingNum}</p>
                        <p className="caption grayText">팔로잉</p>
                    </div>
                </div>

[eunznidang]

button

form 제출

<input className="button" type="submit" value="로그인" style={{width:"100%"}}></input>

onClick 메소드

<button className="button" onClick={() => window.location.href = '/AccountManage'}>프로필 관리</button>

whiteButton

<div>
    <button className="whiteButton" onClick={() => handleUnfollow(user.profileName)}>삭제</button>
</div>

[jjjjjinseo]

feed

아직 셀럽 피드 팝업(?) 연결안했습니다.

import Feed from '../../Components/feed/Feed';

<Feed key={키번호 그냥 0 1 2 이런것도 됨}  thumbnail_url={사진 url } profile_url={프로필 url} username={이름} width='원하는 크기em' height='원하는 크기em' />

[jjjjjinseo]

Item

import Item from '../../Components/item/Item.js';
<Item key={아이템id} itemId={아이템id}  brand={"아이템 브랜드"} name={"아이템 이름"} price={얼마} itemImage={`이미지 링크`} shoppingLink={"쇼핑 링크"}  likeCount={좋아요개수} width={"원하는크기em"} height={"원하는크기em"} />

[jjjjjinseo]

공통 함수/ axios

utils/ axios

• axios 헤더에 토큰 담는 인터페이스 생성
• 토큰 검사 매번 할 필요없이 api.get(post,delete...)하면 됩니다.

import api from '../../utils/axios.jsx';

const response = await api.get(`/api/insta/home?page=${page}&size=${size}`);
setFeeds(response.data);