Add public visibility option to character and homework forms

This commit is contained in:
nightbug-xx 2025-06-11 10:09:36 +09:00
parent dbfc2faaa9
commit 1d40784572
6 changed files with 71 additions and 20 deletions

View File

@ -9,7 +9,9 @@ import {
DialogActions, DialogActions,
DialogContent, DialogContent,
DialogContentText, DialogContentText,
DialogTitle DialogTitle,
FormControlLabel,
Checkbox
} from '@mui/material' } from '@mui/material'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom' import { useNavigate, useParams } from 'react-router-dom'
@ -22,6 +24,7 @@ export default function CharacterEditPage() {
const [name, setName] = useState('') const [name, setName] = useState('')
const [server, setServer] = useState('') const [server, setServer] = useState('')
const [combatPower, setCombatPower] = useState('') const [combatPower, setCombatPower] = useState('')
const [isPublic, setIsPublic] = useState(false)
const [error, setError] = useState('') const [error, setError] = useState('')
const [openConfirm, setOpenConfirm] = useState(false) const [openConfirm, setOpenConfirm] = useState(false)
@ -31,6 +34,7 @@ export default function CharacterEditPage() {
setName(res.data.name) setName(res.data.name)
setServer(res.data.server || '') setServer(res.data.server || '')
setCombatPower(String(res.data.combat_power || '')) setCombatPower(String(res.data.combat_power || ''))
setIsPublic(Boolean(res.data.is_public))
}) })
.catch(() => setError('캐릭터 정보를 불러오는 데 실패했습니다.')) .catch(() => setError('캐릭터 정보를 불러오는 데 실패했습니다.'))
}, [id]) }, [id])
@ -40,7 +44,8 @@ export default function CharacterEditPage() {
await api.put(`/characters/${id}`, { await api.put(`/characters/${id}`, {
name, name,
server, server,
combat_power: Number(combatPower) combat_power: Number(combatPower),
is_public: isPublic
}) })
navigate('/characters') navigate('/characters')
} catch { } catch {
@ -82,6 +87,10 @@ export default function CharacterEditPage() {
fullWidth fullWidth
type="number" type="number"
/> />
<FormControlLabel
control={<Checkbox checked={isPublic} onChange={e => setIsPublic(e.target.checked)} />}
label="친구에게 노출"
/>
{error && <Typography color="error">{error}</Typography>} {error && <Typography color="error">{error}</Typography>}

View File

@ -9,7 +9,6 @@ interface Friend {
} }
export default function FriendListPage() { export default function FriendListPage() {
const [friendIds, setFriendIds] = useState<number[]>([])
const [friends, setFriends] = useState<Friend[]>([]) const [friends, setFriends] = useState<Friend[]>([])
const [showDialog, setShowDialog] = useState(false) const [showDialog, setShowDialog] = useState(false)
const navigate = useNavigate() const navigate = useNavigate()
@ -17,13 +16,8 @@ export default function FriendListPage() {
useEffect(() => { useEffect(() => {
const fetchFriends = async () => { const fetchFriends = async () => {
try { try {
const ids: number[] = await api.get('/friends/list').then(res => res.data) const res = await api.get('/friends/list')
setFriendIds(ids) setFriends(res.data)
const friendInfos = await Promise.all(
ids.map(id => api.get(`/users/${id}`).then(res => res.data))
)
setFriends(friendInfos)
} catch (e) { } catch (e) {
console.error('친구 목록 불러오기 실패', e) console.error('친구 목록 불러오기 실패', e)
} }

View File

@ -5,6 +5,8 @@ interface FriendRequest {
id: number id: number
from_user_id: number from_user_id: number
to_user_id: number to_user_id: number
from_user_email?: string
to_user_email?: string
status: 'pending' | 'accepted' | 'rejected' | 'cancelled' status: 'pending' | 'accepted' | 'rejected' | 'cancelled'
created_at: string created_at: string
} }
@ -21,11 +23,17 @@ export default function FriendRequestsPage() {
const res = await api.get(url) const res = await api.get(url)
setRequests(res.data) setRequests(res.data)
const userIds = res.data.map((r: FriendRequest) =>
tab === 'received' ? r.from_user_id : r.to_user_id
)
const emails = await Promise.all( const emails = await Promise.all(
userIds.map(id => api.get(`/users/${id}`).then(res => [id, res.data.email])) res.data.map(async (r: FriendRequest) => {
const targetId = tab === 'received' ? r.from_user_id : r.to_user_id
const emailFromResponse =
tab === 'received' ? r.from_user_email : r.to_user_email
if (emailFromResponse) {
return [targetId, emailFromResponse] as [number, string]
}
const user = await api.get(`/users/${targetId}`)
return [targetId, user.data.email] as [number, string]
})
) )
setEmailMap(Object.fromEntries(emails)) setEmailMap(Object.fromEntries(emails))
} }
@ -35,13 +43,31 @@ export default function FriendRequestsPage() {
const handleRespond = async (id: number, accept: boolean) => { const handleRespond = async (id: number, accept: boolean) => {
await api.post(`/friends/requests/${id}/respond`, null, { params: { accept } }) await api.post(`/friends/requests/${id}/respond`, null, { params: { accept } })
alert(accept ? '친구 요청을 수락했습니다.' : '친구 요청을 거절했습니다.') alert(accept ? '친구 요청을 수락했습니다.' : '친구 요청을 거절했습니다.')
setRequests(requests.filter(r => r.id !== id)) const req = requests.find(r => r.id === id)
const targetId = req ? (tab === 'received' ? req.from_user_id : req.to_user_id) : null
setRequests(prev => prev.filter(r => r.id !== id))
if (targetId !== null) {
setEmailMap(prev => {
const newMap = { ...prev }
delete newMap[targetId]
return newMap
})
}
} }
const handleCancel = async (id: number) => { const handleCancel = async (id: number) => {
await api.post(`/friends/requests/${id}/cancel`) await api.post(`/friends/requests/${id}/cancel`)
alert('요청을 취소했습니다.') alert('요청을 취소했습니다.')
setRequests(requests.filter(r => r.id !== id)) const req = requests.find(r => r.id === id)
const targetId = req ? (tab === 'received' ? req.from_user_id : req.to_user_id) : null
setRequests(prev => prev.filter(r => r.id !== id))
if (targetId !== null) {
setEmailMap(prev => {
const newMap = { ...prev }
delete newMap[targetId]
return newMap
})
}
} }
return ( return (

View File

@ -1,6 +1,7 @@
import { import {
Box, Button, Container, Paper, TextField, Typography, MenuItem, Box, Button, Container, Paper, TextField, Typography, MenuItem,
Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions,
FormControlLabel, Checkbox
} from '@mui/material' } from '@mui/material'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom' import { useParams, useNavigate } from 'react-router-dom'
@ -14,6 +15,7 @@ export default function HomeworkEditPage() {
const [description, setDescription] = useState('') const [description, setDescription] = useState('')
const [resetType, setResetType] = useState('') const [resetType, setResetType] = useState('')
const [clearCount, setClearCount] = useState('') const [clearCount, setClearCount] = useState('')
const [isPublic, setIsPublic] = useState(false)
const [error, setError] = useState('') const [error, setError] = useState('')
const [openConfirm, setOpenConfirm] = useState(false) const [openConfirm, setOpenConfirm] = useState(false)
@ -25,6 +27,7 @@ export default function HomeworkEditPage() {
setDescription(hw.description || '') setDescription(hw.description || '')
setResetType(hw.reset_type) setResetType(hw.reset_type)
setClearCount(String(hw.clear_count || '')) setClearCount(String(hw.clear_count || ''))
setIsPublic(Boolean(hw.is_public))
}) })
.catch(() => setError('숙제 정보를 불러오는 데 실패했습니다.')) .catch(() => setError('숙제 정보를 불러오는 데 실패했습니다.'))
}, [id]) }, [id])
@ -35,7 +38,8 @@ export default function HomeworkEditPage() {
name: title, // ✅ title → name name: title, // ✅ title → name
description, description,
repeat_type: resetType, // ✅ reset_type → repeat_type repeat_type: resetType, // ✅ reset_type → repeat_type
repeat_count: Number(clearCount) // ✅ clear_count → repeat_count repeat_count: Number(clearCount), // ✅ clear_count → repeat_count
is_public: isPublic
}) })
navigate('/homeworks') navigate('/homeworks')
} catch { } catch {
@ -89,6 +93,10 @@ export default function HomeworkEditPage() {
type="number" type="number"
fullWidth fullWidth
/> />
<FormControlLabel
control={<Checkbox checked={isPublic} onChange={e => setIsPublic(e.target.checked)} />}
label="친구에게 노출"
/>
{error && <Typography color="error">{error}</Typography>} {error && <Typography color="error">{error}</Typography>}

View File

@ -1,4 +1,4 @@
import { Box, Button, Container, Paper, TextField, Typography } from '@mui/material' import { Box, Button, Container, Paper, TextField, Typography, FormControlLabel, Checkbox } from '@mui/material'
import { useState } from 'react' import { useState } from 'react'
import api from '../lib/api' import api from '../lib/api'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
@ -8,6 +8,7 @@ export default function RegisterCharacter() {
const [server, setServer] = useState('') const [server, setServer] = useState('')
const [job, setJob] = useState('') const [job, setJob] = useState('')
const [power, setPower] = useState('') const [power, setPower] = useState('')
const [isPublic, setIsPublic] = useState(false)
const navigate = useNavigate() const navigate = useNavigate()
const handleSubmit = async () => { const handleSubmit = async () => {
@ -22,6 +23,7 @@ export default function RegisterCharacter() {
server: server || undefined, server: server || undefined,
job: job || undefined, job: job || undefined,
combat_power: power ? parseInt(power, 10) : undefined, combat_power: power ? parseInt(power, 10) : undefined,
is_public: isPublic,
}) })
alert('캐릭터가 성공적으로 등록되었습니다.') alert('캐릭터가 성공적으로 등록되었습니다.')
navigate('/characters') navigate('/characters')
@ -64,6 +66,10 @@ export default function RegisterCharacter() {
onChange={(e) => setPower(e.target.value)} onChange={(e) => setPower(e.target.value)}
fullWidth fullWidth
/> />
<FormControlLabel
control={<Checkbox checked={isPublic} onChange={e => setIsPublic(e.target.checked)} />}
label="친구에게 노출"
/>
<Button variant="contained" onClick={handleSubmit}> <Button variant="contained" onClick={handleSubmit}>
</Button> </Button>

View File

@ -4,7 +4,9 @@ import {
Button, Button,
Typography, Typography,
MenuItem, MenuItem,
Container Container,
FormControlLabel,
Checkbox
} from '@mui/material' } from '@mui/material'
import { useState } from 'react' import { useState } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
@ -15,6 +17,7 @@ export default function RegisterHomework() {
const [description, setDescription] = useState('') const [description, setDescription] = useState('')
const [resetType, setResetType] = useState('') const [resetType, setResetType] = useState('')
const [clearCount, setClearCount] = useState(0) const [clearCount, setClearCount] = useState(0)
const [isPublic, setIsPublic] = useState(false)
const [error, setError] = useState('') const [error, setError] = useState('')
const navigate = useNavigate() const navigate = useNavigate()
@ -26,6 +29,7 @@ export default function RegisterHomework() {
description, description,
reset_type: resetType, reset_type: resetType,
clear_count: clearCount, clear_count: clearCount,
is_public: isPublic,
}) })
navigate('/homeworks') navigate('/homeworks')
} catch (err) { } catch (err) {
@ -74,6 +78,10 @@ export default function RegisterHomework() {
value={clearCount} value={clearCount}
onChange={(e) => setClearCount(parseInt(e.target.value) || 0)} onChange={(e) => setClearCount(parseInt(e.target.value) || 0)}
/> />
<FormControlLabel
control={<Checkbox checked={isPublic} onChange={e => setIsPublic(e.target.checked)} />}
label="친구에게 노출"
/>
{error && <Typography color="error">{error}</Typography>} {error && <Typography color="error">{error}</Typography>}
<Button fullWidth variant="contained" sx={{ mt: 2 }} onClick={handleSubmit}> <Button fullWidth variant="contained" sx={{ mt: 2 }} onClick={handleSubmit}>