Chore: dev와의 충돌 해결

package.json

@@ -33,6 +33,7 @@
     "@vanilla-extract/next-plugin": "^2.3.2",
     "@yaireo/tagify": "^4.19.0",
     "axios": "^1.6.5",
+    "browser-image-compression": "^2.0.2",
     "cheerio": "^1.0.0-rc.12",
     "copy-to-clipboard": "^3.3.3",
     "html-to-image": "^1.11.11",

src/app/_api/follow/createFollowUser.ts

@@ -0,0 +1,7 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+const createFollowUser = async (userId: number) => {
+  return await axiosInstance.post(`/follow/${userId}`);
+};
+
+export default createFollowUser;

src/app/_api/follow/deleteFollowUser.ts

@@ -0,0 +1,7 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+const deleteFollowUser = async (userId: number) => {
+  return await axiosInstance.delete(`/follow/${userId}`);
+};
+
+export default deleteFollowUser;

src/app/_api/list/getAllList.ts

@@ -1,7 +1,7 @@
 import axiosInstance from '@/lib/axios/axiosInstance';
 import { AllListType } from '@/lib/types/listType';
 
-export async function getAllList(userId: number, type: string, category: string, cursorId?: number) {
+const getAllList = async (userId: number, type: string, category: string, cursorId?: number) => {
   const params = new URLSearchParams({
     type,
     category,
@@ -13,6 +13,7 @@ export async function getAllList(userId: number, type: string, category: string,
   }
 
   const response = await axiosInstance.get<AllListType>(`/users/${userId}/lists?${params.toString()}`);
-
   return response.data;
-}
+};
+
+export default getAllList;

src/app/_api/list/uploadItemImages.ts

@@ -2,13 +2,13 @@ import axiosInstance from '@/lib/axios/axiosInstance';
 import { ItemImagesType, PresignedUrlListType } from '@/lib/types/listType';
 import axios from 'axios';
 
-interface uploadItemImagesProps {
+interface UploadItemImagesProps {
   listId: number;
   imageData: ItemImagesType;
   imageFileList: File[];
 }
 
-export const uploadItemImages = async ({ listId, imageData, imageFileList }: uploadItemImagesProps) => {
+const uploadItemImages = async ({ listId, imageData, imageFileList }: UploadItemImagesProps) => {
   imageData.listId = listId;
 
   //PresignedUrl 생성 요청
@@ -29,3 +29,5 @@ export const uploadItemImages = async ({ listId, imageData, imageFileList }: upl
     await axiosInstance.post('/lists/upload-complete', imageData);
   }
 };
+
+export default uploadItemImages;

src/app/_api/user/checkNicknameDuplication.ts

@@ -0,0 +1,9 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+const checkNicknameDuplication = async (nickname: string) => {
+  const result = await axiosInstance.get<boolean>(`/users/exists?nickname=${nickname}`);
+
+  return result.data; //true:중복 false:미중복
+};
+
+export default checkNicknameDuplication;

src/app/_api/user/getUserOne.ts

@@ -1,8 +1,10 @@
 import axiosInstance from '@/lib/axios/axiosInstance';
 import { UserType } from '@/lib/types/userProfileType';
 
-export const getUserOne = async (userId: number) => {
+const getUserOne = async (userId: number) => {
   const response = await axiosInstance.get<UserType>(`/users/${userId}`);
 
   return response.data;
 };
+
+export default getUserOne;

src/app/_api/user/updateProfile.ts

@@ -0,0 +1,58 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+import axios from 'axios';
+import { UserProfileEditType } from '@/lib/types/userProfileType';
+import compressFile from '@/lib/utils/compressFile';
+
+//프로필수정 이미지업로드 타입
+interface UserPresignedUrlsType {
+  ownerId: number;
+  backgroundPresignedUrl: string;
+  profilePresignedUrl: string;
+}
+
+interface UpdateProfileParams {
+  userId: number;
+  data: UserProfileEditType;
+}
+
+const updateProfile = async ({ userId, data }: UpdateProfileParams) => {
+  const { nickname, description, backgroundImageUrl, profileImageUrl, newBackgroundFileList, newProfileFileList } =
+    data;
+
+  //프로필 수정
+  const result = await axiosInstance.patch(`/users/${userId}`, {
+    nickname,
+    description,
+    backgroundImageUrl,
+    profileImageUrl,
+  });
+
+  //이미지 수정 없는 경우 return
+  if (result.status !== 204 || (newBackgroundFileList === null && newProfileFileList === null)) return;
+
+  //1. presignedUrl 생성요청
+  const imageData = {
+    ownerId: userId,
+    backgroundExtension: newBackgroundFileList?.[0].type.split('/')[1],
+    profileExtension: newProfileFileList?.[0].type.split('/')[1],
+  };
+  const response = await axiosInstance.post<UserPresignedUrlsType>('/users/upload-url', imageData);
+
+  //2. presignedUrl에 사진 업로드
+  const { backgroundPresignedUrl, profilePresignedUrl } = response?.data;
+
+  if (newBackgroundFileList !== null) {
+    const resultFile = await compressFile(newBackgroundFileList[0]);
+    await axios.put(backgroundPresignedUrl, resultFile);
+  }
+
+  if (newProfileFileList !== null) {
+    const resultFile = await compressFile(newProfileFileList[0]);
+    await axios.put(profilePresignedUrl, resultFile);
+  }
+
+  //3.서버에 성공 알림
+  await axiosInstance.post('/users/upload-complete', imageData);
+};
+
+export default updateProfile;

src/app/account/page.tsx

@@ -1,3 +1,13 @@
+'use client';
+
+import useMoveToPage from '@/hooks/useMoveToPage';
+
 export default function AccountPage() {
-  return <div>마이페이지</div>;
+  const { onClickMoveToPage } = useMoveToPage();
+  return (
+    <>
+      <div>마이페이지</div>
+      <button onClick={onClickMoveToPage('account/profile')}>프로필설정</button>
+    </>
+  );
 }

src/app/account/profile/_components/ImagePreview.css.ts

@@ -0,0 +1,48 @@
+import { style } from '@vanilla-extract/css';
+
+export const backgroundImageContainer = style({
+  maxWidth: 400,
+  width: '100%',
+  height: 230,
+
+  display: 'flex',
+  alignItems: 'center',
+
+  position: 'relative',
+
+  borderRadius: '30px',
+
+  overflow: 'hidden',
+});
+
+export const transparentBox = style({
+  maxWidth: 400,
+  width: '100%',
+  height: 230,
+  padding: '0 23px',
+
+  display: 'flex',
+  alignItems: 'center',
+
+  position: 'absolute',
+
+  borderRadius: '30px',
+});
+
+export const profileImageContainer = style({
+  width: 90,
+  height: 90,
+
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  position: 'relative',
+
+  backgroundColor: 'white',
+
+  borderRadius: '50%',
+  border: '3px solid white',
+
+  overflow: 'hidden',
+});

src/app/account/profile/_components/ImagePreview.tsx

@@ -0,0 +1,28 @@
+import Image from 'next/image';
+import * as styles from './ImagePreview.css';
+
+interface ImagePreviewProps {
+  backgroundImageUrl: string;
+  profileImageUrl: string;
+}
+
+/** TODO: 이미지 에러, 로딩 처리
+ * - [ ] placeholder=blur처리
+ * - [ ] ONERROR 처리
+ */
+export default function ImagePreview({ backgroundImageUrl, profileImageUrl }: ImagePreviewProps) {
+  return (
+    <div className={styles.backgroundImageContainer}>
+      {backgroundImageUrl && (
+        <>
+          <Image src={backgroundImageUrl} alt="배경이미지" fill style={{ objectFit: 'cover' }} priority />
+          <div className={styles.transparentBox}>
+            <div className={styles.profileImageContainer}>
+              <Image src={profileImageUrl} alt="프로필이미지" fill style={{ objectFit: 'cover' }} priority />
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}