refactor: [TA-178] API 함수 네이밍 컨벤션 통일 (CRUD 동사 기준)

src/api/photographer.ts

@@ -31,17 +31,17 @@ export const getPhotographerInfo = async (photographerId: number) =>
     true
   );
 
-export const photographerRegistration = async (
+export const createPhotographer = async (
   body: PhotographerRegistrationBody
 ) => await POST<RegistrationResponse>(`/photographers/me/registration`, body, true);
 
-export const savePhotographer = async (photographerId: number) =>
+export const createSavedPhotographer = async (photographerId: number) =>
   await POST(`/photographers/${photographerId}/save`, {}, true);
 
-export const putPhotographerPage = async (body: PhotographerPageBody) =>
+export const updatePhotographerPage = async (body: PhotographerPageBody) =>
   await PUT(`/photographers/me/page`, body, true);
 
-export const modifyPhotographerProfile = async (
+export const updatePhotographerProfile = async (
   body: ModifyPhotographerProfileBody
 ) => await PUT(`/photographers/me/profile`, body, true);
 

src/api/promotion.ts

@@ -20,13 +20,13 @@ export const getPromotionDetail = async (promotionId: number) =>
 export const getPromotion = async (promotionId: number) =>
   await GET<PromotionDetail>(`/promotions/${promotionId}`);
 
-export const postPromotion = async (body: PromotionBody) =>
+export const createPromotion = async (body: PromotionBody) =>
   await POST(`/promotions`, body, true);
 
-export const savePromotion = async (promotionId: number) =>
+export const createSavedPromotion = async (promotionId: number) =>
   await POST(`/promotions/${promotionId}/save`, {}, true);
 
-export const putPromotion = async (promotionId: number, body: PromotionBody) =>
+export const updatePromotion = async (promotionId: number, body: PromotionBody) =>
   await PUT(`/promotions/${promotionId}`, body, true);
 
 export const deleteSavedPromotion = async (promotionId: number) =>

src/api/user.ts

@@ -11,8 +11,8 @@ export const getUserInfo = async () => await GET<UserInfo>(`/users/me`, true);
 
 export const deleteUser = async () => await DELETE(`/users/me`, true);
 
-export const userRegistration = async (body: UserRegistrationBody) =>
+export const createUser = async (body: UserRegistrationBody) =>
   await POST<RegistrationResponse>(`/users/me/registration`, body, true);
 
-export const modifyProfile = async (body: ModifyProfileBody) =>
+export const updateProfile = async (body: ModifyProfileBody) =>
   await PUT<UserInfo>(`/users/me/profile`, body, true);

src/components/PhotographerBox/index.tsx

@@ -1,12 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
-  savePhotographer,
+  createSavedPhotographer,
   deleteSavedPhotographer,
 } from "../../api/photographer";
 import { getPhotoType } from "../../hooks/getKorean";
 import { useLoginGuard } from "../../hooks/useLoginGuard";
 import icn_clipOff from "../../assets/svgs/icn_clip.svg";
 import icn_clipOn from "../../assets/svgs/icn_clipOn.svg";
+import icn_noPhotographer from "../../assets/svgs/icn_no_photogrpher.svg";
 import ModalCheck from "../ModalCheck";
 
 interface postData {
@@ -48,7 +49,7 @@ export default function PhotographerBox({ data }: Props) {
         setIsClipped(!clipped);
         clipped
           ? await deleteSavedPhotographer(data.id)
-          : await savePhotographer(data.id);
+          : await createSavedPhotographer(data.id);
       } catch (e) {
         setIsClipped(clipped);
         setShowLoginModal(true);
@@ -75,6 +76,11 @@ export default function PhotographerBox({ data }: Props) {
               src={data.profileImage.url}
               alt={data.profileImage.name}
               className="block object-cover min-w-full min-h-full"
+              loading="lazy"
+              onError={(e) => {
+                e.currentTarget.onerror = null;
+                e.currentTarget.src = icn_noPhotographer;
+              }}
             />
             <div className="absolute bottom-0 left-0 w-full h-[40%] bg-card-overlay pointer-events-none" />
           </div>

src/components/PhotographerInfo/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   deleteSavedPhotographer,
-  savePhotographer,
+  createSavedPhotographer,
 } from "../../api/photographer";
 import { getPhotoType } from "../../hooks/getKorean";
 import { useLoginGuard } from "../../hooks/useLoginGuard";
@@ -43,7 +43,7 @@ export default function PhotographerInfo({ isMypage, userInfo }: Props) {
     try {
       isSavedPhotographer
         ? await deleteSavedPhotographer(userInfo.id)
-        : await savePhotographer(userInfo.id);
+        : await createSavedPhotographer(userInfo.id);
     } catch (e) {
       setCount(prevCount);
       setIsSavedPhotographer(prevIsSaved);

src/components/PromotionBox/index.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { savePromotion, deleteSavedPromotion } from "../../api/promotion";
+import { createSavedPromotion, deleteSavedPromotion } from "../../api/promotion";
 import { useLoginGuard } from "../../hooks/useLoginGuard";
 import { getDDayText } from "../../utils/date";
 import { Region } from "../../types/common";
@@ -9,6 +9,7 @@ import icn_clipOff from "../../assets/svgs/icn_clip.svg";
 import icn_clipOn from "../../assets/svgs/icn_clipOn.svg";
 import icn_time from "../../assets/svgs/icn_event_home_clock.svg";
 import icn_location from "../../assets/svgs/icn_event_home_location.svg";
+import icn_camera from "../../assets/svgs/icn_camera.svg";
 import ModalCheck from "../ModalCheck";
 
 interface postData {
@@ -48,7 +49,7 @@ export default function PromotionBox({ data }: Props) {
         setSaveCount((prev) => (clipped ? prev - 1 : prev + 1));
         clipped
           ? await deleteSavedPromotion(data.id)
-          : await savePromotion(data.id);
+          : await createSavedPromotion(data.id);
       } catch (e) {
         setIsClipped(clipped);
         setSaveCount((prev) => (clipped ? prev + 1 : prev - 1));
@@ -108,6 +109,11 @@ export default function PromotionBox({ data }: Props) {
                 className="object-cover min-w-full min-h-full"
                 src={image.url}
                 alt="이벤트 이미지"
+                loading="lazy"
+                onError={(e) => {
+                  e.currentTarget.onerror = null;
+                  e.currentTarget.src = icn_camera;
+                }}
               />
             </div>
           </div>

src/pages/EditPhotographerPage/index.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { VALIDATION } from "../../constants/validation";
-import { putPhotographerPage } from "../../api/photographer";
+import { updatePhotographerPage } from "../../api/photographer";
 import SubHeader from "../../components/SubHeader";
 import InputBox from "../../components/InputBox";
 import InputIDBox from "../../components/InputIDBox";
@@ -81,7 +81,7 @@ export default function EditPhotographerPage() {
 
   const submitPhotographerPage = async () => {
     try {
-      await putPhotographerPage({
+      await updatePhotographerPage({
         portfolio,
         address,
         instagramId,

src/pages/EditPhotographerProfile/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { VALIDATION } from "../../constants/validation";
 import { checkPhotographerExistence } from "../../api/photographer";
-import { modifyPhotographerProfile } from "../../api/photographer";
+import { updatePhotographerProfile } from "../../api/photographer";
 import SubHeader from "../../components/SubHeader";
 import ProfileImage from "../../components/ProfileImage";
 import Types from "../../components/Types";
@@ -77,7 +77,7 @@ export default function EditPhotographerProfile() {
   const onClickSave = async () => {
     const { nickname, profileImage } = userInfo;
     try {
-      await modifyPhotographerProfile({
+      await updatePhotographerProfile({
         nickname,
         profileImage,
         mainPhotographyTypes,

src/pages/EditUserProfile/index.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { VALIDATION } from "../../constants/validation";
-import { checkUserExistence, modifyProfile } from "../../api/user";
+import { checkUserExistence, updateProfile } from "../../api/user";
 import { onImageHandler } from "../../hooks/onImageHandler";
 import icn_camera from "../../assets/svgs/icn_profile_camera_white.svg";
 import icn_profile from "../../assets/svgs/icn_profile.svg";
@@ -109,7 +109,7 @@ export default function EditUserProfile() {
   const onClickSave = async () => {
     const { nickname, instagramId, profileImage } = userInfo;
     try {
-      await modifyProfile({ nickname, instagramId, profileImage });
+      await updateProfile({ nickname, instagramId, profileImage });
     } catch (e) {
       console.log(e);
     } finally {

src/pages/EventDetail/BottomBar/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { savePromotion, deleteSavedPromotion } from "../../../api/promotion";
+import { createSavedPromotion, deleteSavedPromotion } from "../../../api/promotion";
 import { useLoginGuard } from "../../../hooks/useLoginGuard";
 import icn_clip_off from "../../../assets/svgs/icn_clip.svg";
 import icn_clip_on from "../../../assets/svgs/icn_clipOn.svg";
@@ -28,7 +28,7 @@ export default function BottomBar({ id, url, saveCount, isSaved }: Props) {
     try {
       isSavedPromotion
         ? await deleteSavedPromotion(id)
-        : await savePromotion(id);
+        : await createSavedPromotion(id);
     } catch (e) {
       setShowLoginModal(true);
       console.log(e);

src/pages/NewEvent/useEventForm.ts

@@ -4,7 +4,7 @@ import { VALIDATION } from "../../constants/validation";
 import { useRecoilValue } from "recoil";
 import { userState } from "../../atom/atom";
 import { getUserInfo } from "../../api/user";
-import { postPromotion, putPromotion } from "../../api/promotion";
+import { createPromotion, updatePromotion } from "../../api/promotion";
 import { ImageFile } from "../../types/common";
 
 export function useEventForm() {
@@ -111,9 +111,9 @@ export function useEventForm() {
     };
     try {
       if (location.state) {
-        await putPromotion(location.state.id, body);
+        await updatePromotion(location.state.id, body);
       } else {
-        await postPromotion(body);
+        await createPromotion(body);
       }
       navigate(`/events`, { replace: true });
     } catch (e) {

src/pages/SignUp/index.tsx

@@ -2,8 +2,8 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSetRecoilState } from "recoil";
 import { userState } from "../../atom/atom";
-import { userRegistration } from "../../api/user";
-import { photographerRegistration } from "../../api/photographer";
+import { createUser } from "../../api/user";
+import { createPhotographer } from "../../api/photographer";
 import SelectRole from "./SelectRole";
 import SetProfile from "./SetProfile";
 import Route from "./Route";
@@ -41,7 +41,7 @@ export default function SignUp() {
   const submitUserSignUp = async () => {
     if (userInfo.role === "PHOTOGRAPHER") return;
     try {
-      const res = await userRegistration({
+      const res = await createUser({
         nickname: userInfo.nickname,
         gender: userInfo.gender as "MALE" | "FEMALE",
         instagramId: userInfo.instagramId,
@@ -59,7 +59,7 @@ export default function SignUp() {
   const submitPhotographerSignUp = async () => {
     if (userInfo.role === "USER") return;
     try {
-      const res = await photographerRegistration({
+      const res = await createPhotographer({
         nickname: userInfo.nickname,
         gender: userInfo.gender as "MALE" | "FEMALE",
         instagramId: userInfo.instagramId,