Beomlog - Categories and User Settings Update Page

먼저 카테고리를 만들어 각 포스트에 카테고리를 부여하도록 만들고 싶다. 티스토리와 비슷하게, 카테고리 관리 페이지를 만들어준 후, 이를 user의 userData로써 관리를 해 줄것이다. 만약 관련 카테고리가 없어졌다면, category는 카테고리 없음, 가리고 관련 카테고리가 존재한다면 관련 카테고리 별로 post 관련 데이터들을 불러올 수 있는 로직을 만들 것이다. 먼저 Category를 만드는 페이지를 만들어주자. 대체적으로 티스토리의 카테고리 관리 페이지를 참고하여 만들도록 하겠다. 근데 이럴 바엔 그냥 user settings page를 만들어 주는게 더 효율적일것 같아서 그걸 만들도록 하겠다. UserSettingsPage.tsx를 만들어주도록 하자.

 

UserSettingsContainer에는 현재 유저정보를 바꿀수 있는 기능과 카테고리 관리 기능을 넣을 것이다.

 

일단 UserSettingsContainer에 들어갈 UserSetting이라는 컴포넌트부터 작성해주자. 이 컴포넌트에는 닉네임만 바꿀수 있도록 할 것이다.

그리고 카테고리를 넣을 수 있도록 userData를 처음 create할 때 array로 관리할 수 있는 category 리스트를 하나 만들어주자. 각 array item으로는 Category라는 타입이 들어가는데, Category는 Category 이름과 Category의 게시물이 몇개가 있는지를 알려줄 것이다.

 

그리고 카테고리마다 작성된 것들은 데이터베이스에 userCategory라는 새로운 컬렉션을 만들어 그 안에 포스트 관련 내용들을 미리 볼 수 있는 (그래서 게시판에 추후에 쓸 수 있게) 어레이 또는 비슷한 것들을 만들 것이다. 먼저 Category부터 만들 수 있도록 하자. CategorySetting 컴포넌트를 다음과 같이 짜 주었다.

import React from 'react';
import { category } from '../../Container/Home/HeaderContainer';
import Button from '../Shared/Button';

type CategorySettingProps = {
    categories: category[];
    onClickXButton: () => void;
    onClickAddButton: () => void;
    inputValue: string;
    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    showAddItem: boolean;
}

function CategorySetting({
    categories,
    onClickXButton,
    onClickAddButton,
    inputValue,
    onInputChange,
    showAddItem
}: CategorySettingProps) {
    return (
        <div className="category-setting-wrapper">
            <ul>
                {
                    categories.map(category => (
                        <li>
                            <span>{category.category}</span>
                            <strong>({category.numOfPosts})</strong>
                        </li>
                    ))
                }
            </ul>
            {
                showAddItem
                ? 
                <>
                    <input type="name" value={inputValue} onChange={onInputChange}/>
                    <Button onClick={onClickXButton} type="button">X</Button>
                </>
                : null
            }
            <Button onClick={onClickAddButton} type="button">
                {
                    showAddItem
                    ? 'Add Category'
                    : 'New Category'
                }
            </Button>
        </div>
    );
}

export default CategorySetting;

그 후, UserSettingsContainer의 로직을 다음과 같이 짜주었다.

import React, { useState } from 'react';
import UserSetting from '../../Components/UserSettingsPage/UserSetting';
import CategorySetting from '../../Components/UserSettingsPage/CategorySetting';
import { useSelector } from 'react-redux';
import { RootState } from '../../Modules';
import Button from '../../Components/Shared/Button';

function UserSettingsContainer() {

    const user = useSelector((state: RootState) => state.user);

    const [nickname, setNickname] = useState(user.name ? user.name : 'no nickname');
    const [showAddItem, setShowAddItem] = useState(false);
    const [categoriesTemp, setCategoriesTemp] = useState(user.categories ? user.categories : []);
    const [categoryInputValue, setCategoryInputValue] = useState('');

    ////// onchange/onclick ////////////////////////
    const onChangeNickname = (event: React.ChangeEvent<HTMLInputElement>) => {
        setNickname(event.target.value);
    };
    const onClickAddButton = () => {
        if (!showAddItem) {
            setShowAddItem(true);
        } else if (categoryInputValue !== "") {
            setCategoriesTemp(
                categoriesTemp.concat({
                    category: categoryInputValue,
                    numOfPosts: 0
                })
            );
        } else {
            alert('Please put in any value inside the input!');
        }
    };
    const onClickXButton = () => {
        setShowAddItem(false);
    }
    const onClickSubmitButton = () => {
        console.log('button clicked');
    };
    const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setCategoryInputValue(event.target.value);
    }

    return (
        <div className="user-setting-container">
            <UserSetting
                userState={user}
                nicknameValue={nickname}
                onChange={onChangeNickname}
            />
            <CategorySetting
                categories={categoriesTemp}
                onClickAddButton={onClickAddButton}
                onClickXButton={onClickXButton}
                onInputChange={onInputChange}
                inputValue={categoryInputValue}
                showAddItem={showAddItem}
            />
            <Button type="submit" onClick={onClickSubmitButton}>
                Submit
            </Button>
        </div>
    );
}

export default UserSettingsContainer;

이제 작동을 시켜보면?

잘 작동하는 것을 볼 수 있다. 이제 Submit했을때 userdata를 바꾸게 하도록 하자.

관련된 user관련 정보들을 모두 업데이트 해준 후, submit을 눌렀을 때 UPDATE_USERDATA라는 액션을 하도록 만들것이다. user에 관련된 것들을 싸그리 바꿨다. 바꾼게 너무 많아서 정리할기회가 있다면 나중에 정리하도록 하겠다.

 

이제 바꾼것들을 적용하고 로그인 후 settings를 들어가보았더니,

방금 업데이트한 것이 잘 들어가는 것을 볼 수 있다.