diff --git a/src/api/departmentApi.ts b/src/api/departmentApi.ts new file mode 100644 index 0000000..f0edbf3 --- /dev/null +++ b/src/api/departmentApi.ts @@ -0,0 +1,10 @@ +import {Department} from '../types/Department' +import {Base} from '../types/Result' +import api from './config' + +export const fetchDepartments = async ( + params?: Record +): Promise> => { + const res = await api.get('/api/v1/departments', {params}) + return res.data +} diff --git a/src/api/memberApi.ts b/src/api/memberApi.ts index 7fa1bb8..8734154 100644 --- a/src/api/memberApi.ts +++ b/src/api/memberApi.ts @@ -8,6 +8,10 @@ export type TPasswordParam = { password: string } +export type TDepartmentParam = { + departmentId: number +} + export const fetchMember = async (): Promise => { const res = await jwtAxios.get('/api/v1/members/me') return res.data @@ -19,6 +23,9 @@ export const updateMember = async (loginParam: TLoginParam): Promise await jwtAxios.patch('/api/v1/members/me/password', passwordParam) +export const changeDepartment = async (departmentParam: TDepartmentParam) => + await jwtAxios.patch('/api/v1/members/me/department', departmentParam) + export const deleteMember = async (): Promise => await jwtAxios.delete('/api/v1/members/me') diff --git a/src/api/questionApi.ts b/src/api/questionApi.ts index 829ad1c..bd371fe 100644 --- a/src/api/questionApi.ts +++ b/src/api/questionApi.ts @@ -2,6 +2,7 @@ import {AxiosResponse} from 'axios' import {Page} from '../types/Page' import {Question, QuestionRequest} from '../types/Question' import jwtAxios from '../util/jwtUtil' +import api from './config' export const fetchQuestions = async ( params: Record @@ -9,12 +10,12 @@ export const fetchQuestions = async ( if (params.page) { params.page = (parseInt(params.page) - 1).toString() } - const res = await jwtAxios.get('/api/v1/questions', {params}) + const res = await api.get('/api/v1/questions', {params}) return res.data } export const fetchQuestion = async (id: string): Promise => - await jwtAxios.get(`/api/v1/questions/${id}`) + await api.get(`/api/v1/questions/${id}`) export const createQuestion = async (request: QuestionRequest): Promise => await jwtAxios.post('/api/v1/questions', request) diff --git a/src/components/mypage/ChangeDepartment.tsx b/src/components/mypage/ChangeDepartment.tsx new file mode 100644 index 0000000..3073f9c --- /dev/null +++ b/src/components/mypage/ChangeDepartment.tsx @@ -0,0 +1,51 @@ +import {useEffect, useState} from 'react' +import {fetchDepartments} from '../../api/departmentApi' +import {Base} from '../../types/Result' +import {Department} from '../../types/Department' +import useCustomMypage, {TCustomMypage} from '../../hooks/useCustomMypage' +import useCustomMove, {TCustomMove} from '../../hooks/useCustomMove' + +interface ChangeDepartmentProps { + department: string +} + +const ChangeDepartment: React.FC = ({department}) => { + const {departmentChange}: TCustomMypage = useCustomMypage() + const {reload}: TCustomMove = useCustomMove() + const [departments, setDepartments] = useState>() + const [selectedDepartmentId, setSelectedDepartmentId] = useState() + + useEffect(() => { + fetchDepartments({isEditable: 'true'}).then((data: Base) => { + setDepartments(data) + const initialDepartment = data.content.find(dept => dept.name === department) + if (initialDepartment) { + setSelectedDepartmentId(initialDepartment.id) + } + }) + }, [department]) + + const handleSelectChange = (event: React.ChangeEvent) => { + const departmentId: number = parseInt(event.target.value, 10) + departmentChange({departmentId: departmentId}).then(success => { + if (success) { + alert('학과가 업데이트 되었습니다.') + reload() + } + }) + } + + return ( + + + + ) +} + +export default ChangeDepartment diff --git a/src/components/mypage/InfoTable.tsx b/src/components/mypage/InfoTable.tsx index 67df494..c36e98d 100644 --- a/src/components/mypage/InfoTable.tsx +++ b/src/components/mypage/InfoTable.tsx @@ -1,4 +1,5 @@ import {MemberInfo} from '../../types/MemberInfo' +import ChangeDepartment from './ChangeDepartment' interface InfoTableProps { member?: MemberInfo @@ -17,11 +18,19 @@ const InfoTable: React.FC = ({member}) => { 학과 - - - {member?.department} - - + {member?.deptEditable ? ( + + ) : ( + + + {member?.department} + + + )} ) diff --git a/src/hooks/useCustomMypage.ts b/src/hooks/useCustomMypage.ts index 18063e5..2733805 100644 --- a/src/hooks/useCustomMypage.ts +++ b/src/hooks/useCustomMypage.ts @@ -1,8 +1,10 @@ import {TLoginParam} from '../api/accountApi' import {courseUpload} from '../api/courseApi' import { + changeDepartment, changePassword, deleteMember, + TDepartmentParam, TPasswordParam, updateMember } from '../api/memberApi' @@ -11,6 +13,7 @@ export interface TCustomMypage { uploadCourse: (loginParam: TLoginParam) => Promise memberUpdate: (loginParam: TLoginParam) => Promise passwordChange: (passwordParam: TPasswordParam) => Promise + departmentChange: (departmentParam: TDepartmentParam) => Promise memberDelete: () => Promise } @@ -36,6 +39,13 @@ const useCustomMypage = (): TCustomMypage => { return success } + const departmentChange = async (departmentParam: TDepartmentParam) => { + const response = await changeDepartment(departmentParam) + const success = response.status < 400 + !success && alert(response.data.message) + return success + } + const memberDelete = async () => { const response = await deleteMember() const success = response.status < 400 @@ -43,7 +53,7 @@ const useCustomMypage = (): TCustomMypage => { return success } - return {uploadCourse, memberUpdate, passwordChange, memberDelete} + return {uploadCourse, memberUpdate, passwordChange, departmentChange, memberDelete} } export default useCustomMypage diff --git a/src/styles/index.css b/src/styles/index.css index 9d3712e..fa5d61f 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -1366,7 +1366,7 @@ input[type='checkbox'] { background: none; border: 0.01px solid rgb(216, 216, 216); padding: 0px 10px 0px 10px; - margin-top: 0.5rem; + margin: 0.5rem 0 0 0; outline: 0; height: 2.8rem; } diff --git a/src/types/Department.ts b/src/types/Department.ts new file mode 100644 index 0000000..6eb4e42 --- /dev/null +++ b/src/types/Department.ts @@ -0,0 +1,8 @@ +export interface Department { + id: number + college: string + name: string + subDomain: string + isEditable: boolean + code: string +} diff --git a/src/types/MemberInfo.ts b/src/types/MemberInfo.ts index 630d8b8..1045134 100644 --- a/src/types/MemberInfo.ts +++ b/src/types/MemberInfo.ts @@ -1,7 +1,7 @@ export interface MemberInfo { - id: number username: string name: string department: string - email: string + deptCode: string + deptEditable: boolean }