[레딧 클론] 커뮤니티 생성 페이지 구현

⚒️ 구현 기능

커뮤니티 생성 기능

이름, 제목, 설명 input 값을 서버에 post 요청

해당 커뮤니티 생성되도록 기능 구현

기능을 설명하는데 크게 state, submit 함수, 레이아웃 정도

---

state

const [name, setName] = useState('');
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [errors, setErrors] = useState<any>({});

- input

name, title, description state

- error

에러마다 서버에서 다른 값이 넘어와서 any로 타입 지정했음

---

Submit 함수

const handleSubmit = async (event: FormEvent) => {
	event.preventDefault();
	try {
		const res = await axios.post('/subs', {
			name,
			title,
			description
		});
		router.push(`/r/${res.data.name}`);
	} catch (error: any) {
		setErrors(error.response.data);
	}
};

- POST 요청

form 제출 시 input state값인 name, title, description을 post 요청하도록 구현

- error

 커뮤니티 생성 실패시 error state 변경되도록 구현

- router

사용자의 편의성을 위해서 생성된 페이지로 바로 이동되도록 구현하는게 

맞는 것 같아서 next.js의 useRouter를 이용해 구현함

---

레이아웃

// input 컴포넌트 name 예시
<InputGroup
    placeholder="이름"
    value={name}
	setValue={setName}
	error={errors.name}
/>

이전에 구현해놨던 InputGroups 컴포넌트를 재사용해서 반복되는

레이아웃을 쉽게 구현할 수 있었다.

---

🤔 느낀점

서버에 POST 요청하는 건 투두 리스트 만들 때랑

별로 다를게 없어서 어렵지 않았아서 

레딧의 기본적인 틀이 완성되면

기능을 덧붙여야겠다는 생각이 들었다

 

우선 생각난 기능은 커뮤니티 생성 페이지 같은 경우에는

 

그리고 직접 타이핑해서 input 값을 넣는 것 보다는

select box로 카테고리를 몇 개 정할 수 있도록하고

카테고리마다 입력할 수 있는 양식이 달라지도록

구현을 해보는 식으로 기능을 추가해야겠다.

 

---

🎯 TODO

1. 인증된 사용자만 접근할 수 있는 페이지로 바꾸기

2. select POST 구현

3. select 값에 따라 입력 양식 바뀌도록 구현