Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fire 394 fe be에 방 생성 api 요청 보내기 #89

Merged
merged 2 commits into from
Aug 3, 2022
Merged

Fire 394 fe be에 방 생성 api 요청 보내기 #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a37298
FIRE-393 fix config.ts
haryung-lee Aug 3, 2022
48478bf
FIRE-394 add axios
haryung-lee Aug 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 53 additions & 17 deletions src/components/main/CreateRoomForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
import styled from 'styled-components';
import React, { useState, KeyboardEvent } from 'react';
import axios from 'axios';
import { ReactComponent as DeleteTag } from '../../assets/svg/deleteTag.svg';
import { ReactComponent as Up } from '../../assets/svg/up.svg';
import { ReactComponent as Down } from '../../assets/svg/down.svg';
import { API } from '../../config';

export default function CreateRoomForm() {
const [newTag, setNewTag] = useState('');
const [title, setTitle] = useState('');
const [detail, setDetail] = useState('');
// const [total, setTotal] = useState(1);
// const [theme, setTheme] = useState('fire');
const [details, setDetails] = useState('');
const [total, setTotal] = useState('');
const [theme, setTheme] = useState('');
const [tags, setTags] = useState([]);

const handleRoomNameChange = (e) => {
setTitle(e.target.value);
};

const handleRoomDescriptionChange = (e) => {
setDetail(e.target.value);
const handleDetailsChange = (e) => {
setDetails(e.target.value);
};

const handleTagChange = (e) => {
Expand All @@ -34,18 +36,41 @@ export default function CreateRoomForm() {
}
};

const handleTotalChange = (e) => {
setTotal(e.target.value);
};

const handleThemeChange = (e) => {
setTheme(e.target.value);
};

const onAddTag = () => {
setTags([...tags, newTag.trim()]);
setNewTag('');
};

const onDeleteTag = (e, index) => {
console.log(e, index);
setTags(tags.filter((_, i) => i !== index));
};

const onSubmit = (e) => {
console.log(e);
const onSubmit = () => {
axios
.post(API.ROOM, {
moderator: {
uid: localStorage.getItem('uid'),
},
title,
details,
tags,
total: Number(total),
theme,
})
.then((res) => {
console.log('[success]', res);
})
.catch((err) => {
console.log('[error] ', err);
});
};

return (
Expand All @@ -66,8 +91,8 @@ export default function CreateRoomForm() {
<Input
id="description"
type="text"
value={detail}
onChange={handleRoomDescriptionChange}
value={details}
onChange={handleDetailsChange}
placeholder="설명을 입력해주세요."
/>
</Section>
Expand Down Expand Up @@ -99,6 +124,8 @@ export default function CreateRoomForm() {
id="total"
placeholder="최대 인원 수를 선택해주세요."
required
value={total}
onChange={handleTotalChange}
>
<option value="" disabled selected>
최대 인원 수를 선택해주세요.
Expand All @@ -117,15 +144,21 @@ export default function CreateRoomForm() {
<Section>
<Label htmlFor="theme">테마 *</Label>
<div style={{ width: '100%', display: 'flex' }}>
<Select id="theme" placeholder="테마를 선택해주세요." required>
<Select
id="theme"
placeholder="테마를 선택해주세요."
required
value={theme}
onChange={handleThemeChange}
>
<option value="" disabled selected>
원하는 방 테마를 선택해주세요.
</option>
<option value="theme1">모닥불</option>
<option value="theme2">바다</option>
<option value="theme3">캠핑</option>
<option value="theme4">여행</option>
<option value="theme5">우주인</option>
<option value="fire">모닥불</option>
<option value="ocean">바다</option>
<option value="camping">캠핑</option>
<option value="travel">여행</option>
<option value="cosmos">우주인</option>
</Select>
<SelectIcon>
<Up />
Expand All @@ -138,7 +171,7 @@ export default function CreateRoomForm() {
);
}

const Form = styled.div`
const Form = styled.form`
display: flex;
flex-direction: column;
align-items: flex-start;
Expand Down Expand Up @@ -197,6 +230,9 @@ const TagComponent = styled.div`
const TagButton = styled.button`
cursor: pointer;
margin-left: 1rem;
display: flex;
flex-direction: column;
align-items: center;
`;

const Tag = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion src/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const BASE_URL = process.env.REACT_APP_BASE_URL;
const API_VER = '/api/v1';
const USER = '/users/';
const ROOM = '/rooms/';
const ROOM = '/rooms';
const SOCKET = '/socket/room';

export const API = {
Expand Down