develp branch 작업내용 머지 : develop -> main

index.html

@@ -6,7 +6,7 @@
         overscroll-behavior: none;
         touch-action: pan-y pinch-zoom;
       }
-      
+
       * {
         overscroll-behavior-x: none;
       }
@@ -15,50 +15,78 @@
       // 좌우 스와이프 네비게이션 완전 차단
       let startX = null;
       let startY = null;
-
-      document.addEventListener('touchstart', function(e) {
-        startX = e.touches[0].clientX;
-        startY = e.touches[0].clientY;
-      }, { passive: false });
-
-      document.addEventListener('touchmove', function(e) {
-        if (startX === null || startY === null) return;
-
-        let currentX = e.touches[0].clientX;
-        let currentY = e.touches[0].clientY;
-        let diffX = Math.abs(currentX - startX);
-        let diffY = Math.abs(currentY - startY);
-
-        // 수평 스와이프 감지시 무조건 차단
-        if (diffX > 5 && diffX > diffY) {
-          e.preventDefault();
-          e.stopPropagation();
-          return false;
-        }
-      }, { passive: false, capture: true });
-
-      document.addEventListener('touchend', function(e) {
-        startX = null;
-        startY = null;
-      }, { passive: false });
-
-      document.addEventListener('touchcancel', function(e) {
-        startX = null;
-        startY = null;
-      }, { passive: false });
-
+
+      document.addEventListener(
+        'touchstart',
+        function (e) {
+          startX = e.touches[0].clientX;
+          startY = e.touches[0].clientY;
+        },
+        { passive: false },
+      );
+
+      document.addEventListener(
+        'touchmove',
+        function (e) {
+          if (startX === null || startY === null) return;
+
+          let currentX = e.touches[0].clientX;
+          let currentY = e.touches[0].clientY;
+          let diffX = Math.abs(currentX - startX);
+          let diffY = Math.abs(currentY - startY);
+
+          // 수평 스와이프 감지시 무조건 차단
+          if (diffX > 5 && diffX > diffY) {
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+          }
+        },
+        { passive: false, capture: true },
+      );
+
+      document.addEventListener(
+        'touchend',
+        function (e) {
+          startX = null;
+          startY = null;
+        },
+        { passive: false },
+      );
+
+      document.addEventListener(
+        'touchcancel',
+        function (e) {
+          startX = null;
+          startY = null;
+        },
+        { passive: false },
+      );
+
       // 추가적인 제스처 차단
-      document.addEventListener('gesturestart', function(e) {
-        e.preventDefault();
-      }, { passive: false });
-
-      document.addEventListener('gesturechange', function(e) {
-        e.preventDefault();
-      }, { passive: false });
-
-      document.addEventListener('gestureend', function(e) {
-        e.preventDefault();
-      }, { passive: false });
+      document.addEventListener(
+        'gesturestart',
+        function (e) {
+          e.preventDefault();
+        },
+        { passive: false },
+      );
+
+      document.addEventListener(
+        'gesturechange',
+        function (e) {
+          e.preventDefault();
+        },
+        { passive: false },
+      );
+
+      document.addEventListener(
+        'gestureend',
+        function (e) {
+          e.preventDefault();
+        },
+        { passive: false },
+      );
     </script>
     <script>
       (function (m, a, z, e) {
@@ -86,6 +114,15 @@
         '77efe927-4d36-4c1a-9e5f-b47c9b90fff9',
       );
     </script>
+    <script>
+      function applyVv() {
+        const vv = window.visualViewport;
+        const h = vv ? vv.height : window.innerHeight;
+        document.documentElement.style.setProperty('--vvh', `${h}px`);
+      }
+      applyVv();
+      (window.visualViewport || window).addEventListener('resize', applyVv);
+    </script>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/assets/custom_favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -94,6 +131,7 @@
     <meta property="og:description" content="커뮤니티형 독서 기록 플랫폼. 띱. THIP." />
     <meta property="og:image" content="https://thip.co.kr/assets/thumbnail.jpeg" />
     <meta property="og:url" content="https://thip.co.kr" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -9,7 +9,8 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "format": "prettier . --write",
-    "format:check": "prettier . --check"
+    "format:check": "prettier . --check",
+    "dev:lan": "vite --host 0.0.0.0 --port 5173"
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",

src/api/feeds/createFeed.ts

@@ -6,6 +6,7 @@ export interface CreateFeedBody {
   contentBody: string;
   isPublic: boolean;
   tagList?: string[];
+  imageUrls?: string[];
 }
 
 /** 성공 응답 */
@@ -29,27 +30,12 @@ export type CreateFeedResponse = CreateFeedSuccess | CreateFeedFail;
 
 /**
  * 피드 작성 API
- * - multipart/form-data
- *   - request: application/json (Blob로 감싸 전송)
- *   - images: File[] (선택값, 없으면 미첨부)
+ * - application/json (presigned URL 방식)
+ * - imageUrls: 미리 S3에 업로드한 이미지의 CloudFront URL 목록
  */
 export const createFeed = async (
   body: CreateFeedBody,
-  images?: File[],
 ): Promise<CreateFeedResponse> => {
-  const form = new FormData();
-
-  // request 파트(JSON) - 필수
-  form.append('request', new Blob([JSON.stringify(body)], { type: 'application/json' }));
-
-  // images 파트들 - 선택
-  if (images && images.length > 0) {
-    images.forEach(file => form.append('images', file));
-  }
-
-  const { data } = await apiClient.post<CreateFeedResponse>('/feeds', form, {
-    headers: { 'Content-Type': 'multipart/form-data' },
-  });
-
+  const { data } = await apiClient.post<CreateFeedResponse>('/feeds', body);
   return data;
 };

src/api/feeds/getPresignedUrl.ts

@@ -0,0 +1,29 @@
+import { apiClient } from '../index';
+
+export interface PresignedUrlRequest {
+  extension: string;
+  size: number;
+}
+
+export interface PresignedUrlResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data?: {
+    presignedUrls: Array<{
+      presignedUrl: string;
+      fileUrl: string;
+    }>;
+  };
+}
+
+export const getPresignedUrl = async (
+  requests: PresignedUrlRequest[]
+): Promise<PresignedUrlResponse> => {
+  const { data } = await apiClient.post<PresignedUrlResponse>(
+    '/feeds/images/presigned-url',
+    requests
+  );
+
+  return data;
+};

src/api/feeds/uploadToS3.ts

@@ -0,0 +1,19 @@
+export const uploadFileToS3 = async (
+  presignedUrl: string,
+  file: File
+): Promise<boolean> => {
+  try {
+    const response = await fetch(presignedUrl, {
+      method: 'PUT',
+      body: file,
+      headers: {
+        'Content-Type': file.type,
+      },
+    });
+
+    return response.ok;
+  } catch (error) {
+    console.error('S3 업로드 실패:', error);
+    return false;
+  }
+};

src/api/index.ts

@@ -10,7 +10,6 @@ export const apiClient = axios.create({
   headers: {
     'Content-Type': 'application/json',
   },
-  withCredentials: true, // 쿠키 자동 전송 설정
 });
 // Request 인터셉터: localStorage의 토큰을 헤더에 자동 추가
 apiClient.interceptors.request.use(
@@ -19,13 +18,9 @@ apiClient.interceptors.request.use(
     const authToken = localStorage.getItem('authToken');
 
     if (authToken) {
-      // 토큰이 있으면 Authorization 헤더에 추가
-      console.log('🔑 Authorization 헤더에 토큰 추가');
       config.headers.Authorization = `Bearer ${authToken}`;
     } else {
       console.log('❌ localStorage에 토큰이 없습니다.');
-      // config.headers.Authorization =
-      //   'Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjEsImlhdCI6MTc1NDM4MjY1MiwiZXhwIjoxNzU2OTc0NjUyfQ.BSGuoMWlrzc0oKgSJXHEycxdzzY9-e7gD4xh-wSDemc';
     }
 
     return config;

src/api/record/updateRecord.ts

@@ -0,0 +1,44 @@
+import { apiClient } from '../index';
+import type { UpdateRecordRequest, UpdateRecordData, ApiResponse } from '@/types/record';
+
+// API 응답 타입
+export type UpdateRecordResponse = ApiResponse<UpdateRecordData>;
+
+// 기록 수정 API 함수
+export const updateRecord = async (
+  roomId: number,
+  recordId: number,
+  recordData: UpdateRecordRequest,
+): Promise<UpdateRecordResponse> => {
+  try {
+    const response = await apiClient.patch<UpdateRecordResponse>(
+      `/rooms/${roomId}/records/${recordId}`,
+      recordData,
+    );
+    return response.data;
+  } catch (error) {
+    console.error('기록 수정 API 오류:', error);
+    throw error;
+  }
+};
+
+/*
+사용 예시:
+const recordData: UpdateRecordRequest = {
+  content: "수정된 기록 내용입니다~~"
+};
+
+try {
+  const result = await updateRecord(1, 123, recordData);
+  if (result.isSuccess) {
+    console.log("수정된 방 ID:", result.data.roomId);
+    // 성공 처리 로직
+  } else {
+    console.error("기록 수정 실패:", result.message);
+    // 실패 처리 로직
+  }
+} catch (error) {
+  console.error("API 호출 오류:", error);
+  // 에러 처리 로직
+}
+*/

src/api/record/updateVote.ts

@@ -0,0 +1,44 @@
+import { apiClient } from '../index';
+import type { UpdateVoteRequest, UpdateVoteData, ApiResponse } from '@/types/record';
+
+// API 응답 타입
+export type UpdateVoteResponse = ApiResponse<UpdateVoteData>;
+
+// 투표 수정 API 함수
+export const updateVote = async (
+  roomId: number,
+  voteId: number,
+  voteData: UpdateVoteRequest,
+): Promise<UpdateVoteResponse> => {
+  try {
+    const response = await apiClient.patch<UpdateVoteResponse>(
+      `/rooms/${roomId}/votes/${voteId}`,
+      voteData,
+    );
+    return response.data;
+  } catch (error) {
+    console.error('투표 수정 API 오류:', error);
+    throw error;
+  }
+};
+
+/*
+사용 예시:
+const voteData: UpdateVoteRequest = {
+  content: "수정된 투표 내용입니다~"
+};
+
+try {
+  const result = await updateVote(1, 123, voteData);
+  if (result.isSuccess) {
+    console.log("수정된 방 ID:", result.data.roomId);
+    // 성공 처리 로직
+  } else {
+    console.error("투표 수정 실패:", result.message);
+    // 실패 처리 로직
+  }
+} catch (error) {
+  console.error("API 호출 오류:", error);
+  // 에러 처리 로직
+}
+*/

src/api/rooms/deleteDailyGreeting.ts

@@ -0,0 +1,28 @@
+import { apiClient } from '../index';
+
+// 오늘의 한마디 삭제 응답 타입
+export interface DeleteDailyGreetingResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: {
+    roomId: number;
+  };
+}
+
+// 오늘의 한마디 삭제 API 함수
+export const deleteDailyGreeting = async (
+  roomId: number,
+  attendanceCheckId: number,
+): Promise<DeleteDailyGreetingResponse> => {
+  try {
+    const response = await apiClient.delete<DeleteDailyGreetingResponse>(
+      `/rooms/${roomId}/daily-greeting/${attendanceCheckId}`,
+    );
+
+    return response.data;
+  } catch (error) {
+    console.error('오늘의 한마디 삭제 API 오류:', error);
+    throw error;
+  }
+};