[Feature] 설정API 연동

src/api/auth/account.ts

@@ -0,0 +1,33 @@
+import type { TChangeNicknamePayload, TChangeNicknameResponse, TChangePasswordPayload, TGetMemberGradeResponse, TMemberInfo } from '@/types/auth/account';
+import type { TCommonResponse } from '@/types/common/common';
+
+import { axiosInstance } from '@/api/axiosInstance';
+
+// 비밀번호 변경
+export async function changePassword(payload: TChangePasswordPayload): Promise<void> {
+    const body = { nowPassword: payload.currentPassword, newPassword: payload.newPassword };
+    await axiosInstance.patch('/api/v1/members/passwords', body);
+}
+
+// 닉네임 변경
+export async function changeNickname(payload: TChangeNicknamePayload): Promise<TChangeNicknameResponse> {
+    const { data } = await axiosInstance.patch<TChangeNicknameResponse>('/api/v1/members/infos', payload);
+    return data;
+}
+
+// 탈퇴
+export async function deleteMember(): Promise<void> {
+    await axiosInstance.delete('/api/v1/members');
+}
+
+// 사용자 정보 조회
+export async function getMemberInfo(): Promise<TCommonResponse<TMemberInfo>> {
+    const { data } = await axiosInstance.get<TCommonResponse<TMemberInfo>>('/api/v1/members/infos');
+    return data;
+}
+
+// 사용자 등급 조회
+export async function getMemberGrade(): Promise<TGetMemberGradeResponse> {
+    const { data } = await axiosInstance.get<TGetMemberGradeResponse>('/api/v1/members/grade');
+    return data;
+}

src/api/dates/preferences.ts

@@ -0,0 +1,9 @@
+import type { TResetPreferencesResponse } from '@/types/dates/preferences';
+
+import { axiosInstance } from '../axiosInstance';
+
+// 취향 데이터 초기화
+export async function resetPreferences(): Promise<TResetPreferencesResponse> {
+    const { data } = await axiosInstance.delete<TResetPreferencesResponse>('/api/v1/dates/preferences');
+    return data;
+}

src/api/faq/faq.keys.ts

@@ -0,0 +1,5 @@
+export const faqKeys = {
+    all: ['faqs'] as const,
+    list: (p: { category: string; page: number; size: number }) => [...faqKeys.all, 'list', p] as const,
+    search: (p: { keyword: string; category?: string; page: number; size: number }) => [...faqKeys.all, 'search', p] as const,
+};

src/api/faq/faq.ts

@@ -0,0 +1,28 @@
+import type { TFaqCategory, TFetchFaqsResponse } from '@/types/faq/faq';
+
+import { axiosInstance } from '@/api/axiosInstance';
+
+// FAQ 목록 조회
+export const getFaqs = async (params: { category: TFaqCategory; page: number; size: number }) => {
+    const { data } = await axiosInstance.get<TFetchFaqsResponse>('/api/v1/faqs', {
+        params: {
+            faqCategory: params.category,
+            page: params.page,
+            size: params.size,
+        },
+    });
+    return data;
+};
+
+// FAQ 검색
+export const searchFaqs = async (params: { keyword: string; category?: TFaqCategory; page: number; size: number }) => {
+    const { data } = await axiosInstance.get<TFetchFaqsResponse>('/api/v1/faqs/search', {
+        params: {
+            keyword: params.keyword,
+            faqCategory: params.category,
+            page: params.page,
+            size: params.size,
+        },
+    });
+    return data;
+};

src/api/notice/notice.keys.ts

@@ -0,0 +1,12 @@
+export const noticeKeys = {
+    root: ['notice'] as const, // 루트 키
+
+    // 목록 조회 키
+    list: (p: { category: 'SERVICE' | 'SYSTEM'; page: number; size: number }) => [...noticeKeys.root, 'list', p] as const,
+
+    // 상세 조회 키
+    detail: (id: number) => [...noticeKeys.root, 'detail', id] as const,
+
+    // 검색 조회 키
+    search: (p: { keyword: string; page: number; size: number; category?: 'SERVICE' | 'SYSTEM' }) => [...noticeKeys.root, 'search', p] as const,
+};

src/api/notice/notice.ts

@@ -1,17 +1,36 @@
-import type { TFetchNoticeDetailResponse, TFetchNoticesResponse, TRequestGetNoticeRequest } from '@/types/notice/notice';
+import type { TFetchNoticeDetailResponse, TFetchNoticesResponse } from '@/types/notice/notice';
 
 import { axiosInstance } from '@/api/axiosInstance';
 
-// 공지사항 전체 조회 API
-export const fetchNotices = async ({ noticeCategory = 'SERVICE', page, size }: TRequestGetNoticeRequest): Promise<TFetchNoticesResponse> => {
-    const { data } = await axiosInstance.get('/api/v1/notices', {
-        params: { noticeCategory: noticeCategory, page, size },
+// 공지사항 전체 조회
+export const getNotices = async (params: { category: 'SERVICE' | 'SYSTEM'; page: number; size: number }) => {
+    const { data } = await axiosInstance.get<TFetchNoticesResponse>('/api/v1/notices', {
+        params: {
+            noticeCategory: params.category,
+            page: params.page,
+            size: params.size,
+        },
     });
     return data;
 };
 
-// 공지사항 상세 조회 API
-export const fetchNoticeDetail = async (noticeId: number): Promise<TFetchNoticeDetailResponse> => {
-    const { data } = await axiosInstance.get(`/api/v1/notices/${noticeId}`);
+// 상세 조회
+export const getNoticeDetail = async (noticeId: number) => {
+    const { data } = await axiosInstance.get<TFetchNoticeDetailResponse>(`/api/v1/notices/${noticeId}`);
+    return data;
+};
+
+// 공지 검색
+export const searchNotices = async (params: { keyword: string; page: number; size: number; category?: 'SERVICE' | 'SYSTEM' }) => {
+    const { keyword, page, size, category } = params;
+
+    const { data } = await axiosInstance.get<TFetchNoticesResponse>('/api/v1/notices/search', {
+        params: {
+            keyword,
+            page,
+            size,
+            ...(category && { noticeCategory: category }),
+        },
+    });
     return data;
 };

src/api/settingAlarm/alarm.ts

@@ -0,0 +1,15 @@
+import type { TAlarmSettings, TGetAlarmSettingsResp, TPatchAlarmSettingsResp } from '@/types/settingAlarm/alarm';
+
+import { axiosInstance } from '@/api/axiosInstance';
+
+// 조회
+export async function getAlarmSettings(): Promise<TGetAlarmSettingsResp> {
+    const { data } = await axiosInstance.get<TGetAlarmSettingsResp>('/api/v1/alarms/settings');
+    return data;
+}
+
+// 업데이트
+export async function patchAlarmSettings(payload: TAlarmSettings): Promise<TPatchAlarmSettingsResp> {
+    const { data } = await axiosInstance.patch<TPatchAlarmSettingsResp>('/api/v1/alarms/settings', payload);
+    return data;
+}

src/components/common/EditableInputBox.tsx

@@ -1,5 +1,4 @@
-//setting - common input box
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import SearchIcon from '@/assets/icons/Search_Blank.svg?react';
 
@@ -15,10 +14,14 @@ interface IEditableInputBoxProps {
     onSearchClick?: () => void;
     className?: string;
     placeholder?: string;
+    readOnly?: boolean;
+    onEditStart?: () => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 }
 
 export default function EditableInputBox({
     mode = 'default',
+    type,
     label = '',
     value,
     onChange,
@@ -28,12 +31,29 @@ export default function EditableInputBox({
     onSearchClick,
     className = '',
     placeholder = '',
+    readOnly = false,
+    onEditStart,
+    onFocus,
 }: IEditableInputBoxProps) {
     const [isEditing, setIsEditing] = useState(false);
 
     const isNickname = mode === 'nickname';
     const isSearch = mode === 'search';
 
+    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
+
+    // 편집 모드 - 자동 포커스 + 전체 선택
+    useEffect(() => {
+        const el = inputRef.current;
+        if (isNickname && isEditing && el) {
+            const frameId = requestAnimationFrame(() => {
+                el.focus();
+                (el as HTMLInputElement | HTMLTextAreaElement).select();
+            });
+            return () => cancelAnimationFrame(frameId);
+        }
+    }, [isNickname, isEditing]);
+
     const handleCancel = () => {
         setIsEditing(false);
         onCancel?.();
@@ -69,48 +89,62 @@ export default function EditableInputBox({
             {label && <p className="font-body1 text-default-gray-700 mb-1">{label}</p>}
 
             <div className="relative w-full">
-                {/* 닉네임 - 수정 중일 때 textarea */}
+                {/* 닉네임 */}
                 {isNickname && isEditing ? (
-                    <textarea value={value} onChange={onChange} placeholder={placeholder} maxLength={maxLength} className={`${sharedClassName} resize-none`} />
+                    <textarea
+                        ref={inputRef as React.RefObject<HTMLTextAreaElement>}
+                        value={value}
+                        onChange={onChange}
+                        placeholder={placeholder}
+                        maxLength={maxLength}
+                        className={`${sharedClassName} resize-none`}
+                        onFocus={onFocus}
+                    />
                 ) : (
                     <input
-                        type="text"
+                        ref={inputRef as React.RefObject<HTMLInputElement>}
+                        type={type ?? 'text'}
                         value={value}
                         onChange={onChange}
-                        readOnly={isNickname ? !isEditing : false}
+                        readOnly={readOnly || (isNickname ? !isEditing : false)}
                         placeholder={placeholder}
                         maxLength={maxLength}
                         onKeyDown={handleKeyDown}
                         className={sharedClassName}
+                        onFocus={onFocus}
                     />
                 )}
 
-                {/* 수정 버튼 */}
+                {/* 수정 */}
                 {isNickname && !isEditing && (
                     <button
-                        onClick={() => setIsEditing(true)}
+                        type="button"
+                        onClick={() => {
+                            setIsEditing(true);
+                            onEditStart?.();
+                        }}
                         className="absolute right-3 top-1/2 -translate-y-1/2 font-body1 px-3 py-1 rounded-full bg-default-gray-400 text-default-gray-700"
                     >
                         수정
                     </button>
                 )}
 
-                {/* 글자 수 표시 */}
+                {/* 글자 수 */}
                 {isNickname && isEditing && (
                     <span className="absolute bottom-2 right-4 font-body1 text-default-gray-500">
                         {value.length} / {maxLength}
                     </span>
                 )}
 
-                {/* 검색 버튼 */}
+                {/* 검색 */}
                 {isSearch && (
                     <button type="button" onClick={onSearchClick} className="absolute right-3 top-1/2 -translate-y-1/2 p-1">
                         <SearchIcon className="w-5 h-5 text-primary-500" stroke="currentColor" />
                     </button>
                 )}
             </div>
 
-            {/* 취소, 완료 버튼 */}
+            {/* 취소, 완료 */}
             {isNickname && isEditing && (
                 <div className="flex justify-end gap-2 mt-3">
                     <button onClick={handleCancel} className="font-body1 px-4 py-1.5 rounded-full bg-default-gray-400 text-default-gray-700">