[인스타그램 클론코딩] 05. 기본 화면 구성(Front-End)

프론트 UI 기본화면을 구성한다.

화면 구성은 왼쪽에 SideBar와 오른쪽에 컨텐츠를 나타내는 식으로 진행할 예정이다.

기본 화면 구성 결과

 

- 왼쪽의 메뉴는 다음과 같이 구성하였다.

1. 홈 : 등록된 게시물을 보여줄 화면

2. 팔로우 : 팔로우/언팔로우 할 유저 목록들을 보여주는 화면

3. 탐색 : 게시물 중 특정 키워드를 검색할 수 있게하는 화면

4. 메세지 : 유저들과의 채팅을 할 수 있게하는 화면

5. 만들기 : 게시물을 포스팅하는 화면

6. 프로필 : 프로필을 수정하는 화면

 

1. Redux 설정

- React에서 스테이트는 해당 컴포넌트에서만 사용가능하나, props를 통해 넘겨줄 수 있다. 하지만 단위가 깊어질수록 props로 넘기는 것은 매우 귀찮기 때문에 redux라는 라이브러리를 사용할 예정이다.

- 다른건 그 컴포넌트에서 쓰지만, User에 대한 정보는 광범위하게 사용될 예정이므로 User정보에 대한 Redux 모듈을 만든다.

import {combineReducers} from "redux";
import userDetail from './UserDetailModule';

const rootReducer = combineReducers({
    userDetail,
});

export default rootReducer;

import {createAction, handleActions} from "redux-actions";
import produce from "immer";

export const userDetailItem = {
    email: '',
    profileUrl: '',
    nickname: '',
    gender: '',
    introduce: '',
    phone: ''
}

const INIT = 'userDetail/INIT';
const REMOVE = 'userDetail/DELETE';

export const init = createAction(INIT)
export const remove = createAction(REMOVE);

const userDetail = handleActions(
    {
        [INIT]: (state, action) => {
            const data = action.payload;
            return produce(state, draft => {
                draft.email = data.email;
                draft.nickname = data.nickname;
                draft.phone = data.phone;
                draft.profileUrl = data.profileUrl;
                draft.introduce = data.introduce;
                draft.gender = data.gender;
            })
        },
        [REMOVE]: (state, action) => {

        },
    },
    userDetailItem
)

export default userDetail;

 

- User 정보인 email, nickname, phone, profileUrl, introduce, gender에 대한 내용을 백엔드에서 받아와 저장했다.

- 앞으로 유저 정보는 UserDetail에 저장된 내용을 사용한다.

 

2.  MainContainer.js 작성

const MainContainer = () => {
    const userDetail = useSelector(state => state.userDetail);
    const dispatch = useDispatch();

    useEffect(() => {
        withJwtAxios.get("/profile")
            .then((res) => {
                dispatch(init(res.data));
            })
    }, []);

    return (
        <div className='outstagram-container'>
            <div className='sidebar-container'>
                <SideBar />
            </div>
            <div className='main-container'>
                <Outlet />
            </div>
        </div>
    );
}

export default MainContainer;

 

- MainContainer는 SideBar와 메인 컨텐츠를 랜더링하는 가장 큰 단위의 컴포넌트이다.

- Redux를 사용하여 User 정보인 email, nickname, phone, profileUrl, introduce, gender에 대한 내용을 백엔드에서 받아와 저장했다.

 

3. SideBar.js 작성

import React from 'react';
import style from './SideBar.module.css';
import {Link} from "react-router-dom";
import {useSelector} from "react-redux";
import {Static_Base_Url} from "../../index";

const SideBar = () => {

    const userDetail = useSelector(state => state.userDetail);

    const sideBar = [
        {link: '/outstagram/home', name: '홈', iclass: 'bi bi-instagram fs-3'},
        {link: '/outstagram/follow', name: '팔로우', iclass: 'bi bi-people fs-3'},
        {link: '/outstagram/search', name: '탐색', iclass: 'bi bi-compass fs-3'},
        {link: '/outstagram/message', name: '메세지', iclass: 'bi bi-chat fs-3'},
        {link: '/outstagram/post', name: '만들기', iclass: 'bi bi-plus-square fs-3'},
        {link: '/outstagram/profile', name: '프로필'}
    ]

    return (
        <>
            <Link to='/outstagram/home' className={style.logo_container}>
                <div className={style.logo}>
                    OutStagram
                </div>
            </Link>


            <div className={style.side_menu_container}>
                {sideBar.map((side, idx) => {
                    if(idx === sideBar.length-1) {
                        return (
                            <Link key={idx} to={side.link} className={style.side_menu}>
                                <img className={style.profile_img} src={Static_Base_Url + userDetail.profileUrl}/>
                                <div className={style.side_menu_text}>{side.name}</div>
                            </Link>
                        );
                    }
                    else {
                        return (
                            <Link key={idx} to={side.link} className={style.side_menu}>
                                <i className={side.iclass}/>
                                <div className={style.side_menu_text}>{side.name}</div>
                            </Link>
                        );
                    }
                })}
            </div>

            <div>

            </div>
        </>
    );
};

export default SideBar;

 

- Reacter 라우터의 Link를 통하여 해당 url 호출 시 해당 컴포넌트를 랜더링하게 해주었다.

- Profile의 이미지는 UserDetail에서 받아온 profileImage를 통해 서버에서 받아온다.