feat: create setting page and add change name feature

src/front/components/index.tsx

@@ -109,6 +109,10 @@ export const ButtonContainingIcon = styled.button<{ $margin?: string }>`
   }
 `;
 
+export const DisabledButtonContainingIcon = styled(ButtonContainingIcon)`
+  ${GrayBackground};
+`;
+
 export const ReverseButtonContainingIcon = styled.button<{ $margin?: string }>`
   ${ButtonCss};
   ${ReverseMainColorBackground};
@@ -416,8 +420,6 @@ export const InputWithLabelContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 5px;
-  &>input {
-  }
 `;
 
 const PageLink = styled.div`

src/front/pages/Setting.tsx

@@ -1,9 +1,49 @@
-function Main() {
+import { LoginContainer, InputWithLabelContainer,Input, ButtonContainingIcon, DisabledButtonContainingIcon } from "@components";
+import ErrorConfigs from "@errors/config";
+import { Navigate } from "react-router-dom";
+import { useState,useEffect } from "react";
+import useFetchWithRendering from "@hooks/useFetchWithRendering";
+import useFetchUpdate from "@hooks/useFetchUpdate";
+import { getUserName,changeUserName } from "@apis/auth";
+
+
+function Setting() {
+  const [name, setName] = useState('');
+  const [data, error] = useFetchWithRendering(getUserName);
+  const [loading, update] = useFetchUpdate(changeUserName);
+
+  useEffect(() => {
+    if(data){
+      setName(data);
+    }
+  }, [data]);
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+  }
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if(!name) return;
+    update(name);
+  }
+
+  if(error) {
+    const errorConfig = ErrorConfigs[Error.name];
+    if(errorConfig)
+      return <Navigate to="/error" state={{message: errorConfig.toast(Error)}} />
+    return <Navigate to="/error" state={{message: "알 수 없는 오류가 발생했습니다."}} />
+  }
+
   return (
-    <div>
-      Setting
-    </div>
+    <LoginContainer onSubmit={onSubmit}>
+       <InputWithLabelContainer>
+        <label>닉네임</label>
+        <Input value={name} onChange={onChange} disabled={loading||!data}/>
+      </InputWithLabelContainer>
+      {!loading&&<ButtonContainingIcon type="submit">저장</ButtonContainingIcon>}
+      {loading&&<DisabledButtonContainingIcon disabled>저장중...</DisabledButtonContainingIcon>}
+    </LoginContainer>
   );
 }
 
-export default Main;
+export default Setting;

src/front/utils/apis/auth.ts

@@ -11,6 +11,14 @@ export const requestLogout = apiErrorCatchWrapper(async () => {
     await axios.post('/api/v1/user/logout');
 });
 
-export const changeUserName = apiErrorCatchWrapper(async (name: string) => {
-    await axios.put('/api/v1/user/name', { name });
+export const getUserName = apiErrorCatchWrapper(async (accessToken: string) => {
+    const response = await axios.get<User.getUserNameInterface['Reply']['200']>(
+        '/api/v1/user/name',
+        { headers: { Authorization: `Bearer ${accessToken}` } }
+    );
+    return response.data.name;
+});
+
+export const changeUserName = apiErrorCatchWrapper(async (accessToken: string,name: string) => {
+    await axios.patch('/api/v1/user/name', { name }, { headers: { Authorization: `Bearer ${accessToken}` } });
 });