⚡ 페이지 컨테이너, 모달 컴포넌트, 신고하기 모달 컴포넌트의 폴더 위치 조정

app/globals.css

@@ -61,3 +61,57 @@ body {
     text-wrap: balance;
   }
 }
+
+@media (max-height: 480px) {
+  html {
+    zoom: 0.95; /* iPhone 3, 4S */
+  }
+}
+
+@media (min-height: 481px) and (max-height: 568px) {
+  html {
+    zoom: 1; /* iPhone 5, SE */
+  }
+}
+
+@media (min-height: 569px) and (max-height: 667px) {
+  html {
+    zoom: 1.17; /* iPhone 6, 6s, 7, 8 */
+  }
+}
+
+@media (min-height: 668px) and (max-height: 736px) {
+  html {
+    zoom: 1.22; /* iPhone 6+, 7+, 8+ */
+  }
+}
+
+@media (min-height: 737px) and (max-height: 812px) {
+  html {
+    zoom: 1.25; /* iPhone X, XS */
+  }
+}
+
+@media (min-height: 813px) and (max-height: 852px) {
+  html {
+    zoom: 1.27; /* iPhone 12, 13, Pro */
+  }
+}
+
+@media (min-height: 853px) and (max-height: 926px) {
+  html {
+    zoom: 1.32; /* iPhone XR, 11 */
+  }
+}
+
+@media (min-height: 927px) and (max-height: 932px) {
+  html {
+    zoom: 1.35; /* iPhone 14 Pro Max */
+  }
+}
+
+@media (min-height: 933px) {
+  html {
+    zoom: 1; /* 기본 배율 */
+  }
+}

app/page.tsx

@@ -1,6 +1,6 @@
-import IconArrowFront from '/public/assets/icon/arrow-front.svg';
+import { PageContainer } from '@/shared/ui/page-container/ui/PageContainer';
 
-import { PageContainer } from '@/widgets/pageContainer/ui/PageContainer';
+import IconArrowFront from '/public/assets/icon/arrow-front.svg';
 
 export default function Home() {
   return (

src/app/mocks/data/feed.ts

@@ -1,27 +1,7 @@
-import { IUser, userMockData } from './user';
+import { IFeed } from '@/entities/feed';
+import { IImage } from '@/shared/types';
 
-interface IImage {
-  id: number;
-  imageUrl: string;
-}
-
-interface IFeed {
-  id: number;
-  user: IUser;
-
-  content: string;
-  images: IImage[];
-
-  likeCount: number;
-  commentCount: number;
-
-  isLiked: boolean;
-  isBookmarked: boolean;
-  isBlinded: boolean;
-
-  createdAt: string;
-  updatedAt: string;
-}
+import { userMockData } from './user';
 
 function generateRandomContent(length: number) {
   const words = 'Lorem ipsum dolor sit amet consectetur adipiscing elit'.split(' ');
@@ -72,13 +52,4 @@ function generateFeedMockData(count: number) {
   return mockFeeds;
 }
 
-export function blindFeedMockData(feeds: IFeed[], feedId: number) {
-  return feeds.map((feed) => {
-    if (feedId === feed.id) {
-      feed.isBlinded = true;
-    }
-    return feed;
-  });
-}
-
 export const feedMockData = generateFeedMockData(100);

src/app/mocks/data/user.ts

@@ -1,8 +1,4 @@
-export interface IUser {
-  id: number;
-  profileImage: string;
-  username: string;
-}
+import { IUser } from '@/entities/user';
 
 function generateRandomUsername(id: number) {
   const prefixes = ['user', 'player', 'guest', 'member', 'star'];

src/app/mocks/handlers/feed.ts

@@ -1,7 +1,7 @@
 import { http } from 'msw';
 
+import { feedMockData } from '../data';
 import { createHttpErrorResponse, createHttpSuccessResponse } from '../lib';
-
 interface IReportFeedReqDto {
   category: string;
   content: string;
@@ -17,6 +17,12 @@ export const feedHandlers = [
       return createHttpErrorResponse('피드 ID, 신고 카테고리, 컨텐츠가 다 입력되어야 합니다.');
     }
 
+    feedMockData.forEach((cur) => {
+      if (cur.id === +feedId) {
+        cur.isBlinded = true;
+      }
+    });
+
     return createHttpSuccessResponse({
       isReported: true,
     });

src/entities/feed/index.ts

@@ -0,0 +1 @@
+export * from './model';

src/entities/feed/model/index.ts

@@ -0,0 +1 @@
+export * from './type';

src/entities/feed/model/type.ts

@@ -0,0 +1,20 @@
+import { IUser } from '@/entities/user/model/type';
+import { IImage } from '@/shared/types/image';
+
+export interface IFeed {
+  id: number;
+  user: IUser;
+
+  content: string;
+  images: IImage[];
+
+  likeCount: number;
+  commentCount: number;
+
+  isLiked: boolean;
+  isBookmarked: boolean;
+  isBlinded: boolean;
+
+  createdAt: string;
+  updatedAt: string;
+}

src/entities/user/index.ts

@@ -0,0 +1 @@
+export * from './model';

src/entities/user/model/index.ts

@@ -0,0 +1 @@
+export * from './type';

src/entities/user/model/type.ts

@@ -0,0 +1,5 @@
+export interface IUser {
+  id: number;
+  profileImage: string;
+  username: string;
+}

src/shared/types/image.ts

@@ -0,0 +1,4 @@
+export interface IImage {
+  id: number;
+  imageUrl: string;
+}

src/shared/types/index.ts

@@ -0,0 +1 @@
+export * from './image';

src/shared/ui/index.ts

@@ -4,3 +4,5 @@ export * from './button';
 export * from './modal-wrapper';
 export * from './checkbox';
 export * from './radio';
+export * from './modal';
+export * from './page-container';

src/widgets/reportModal/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/features/feed/reportModal/ui/ReportModal.tsx → src/widgets/reportModal/ui/ReportModal.tsx

@@ -42,7 +42,7 @@ export const ReportModal = ({ isVisible, feedId, onCancel, onReport }: IReportMo
 
   return (
     <ModalWrapper position="center">
-      <div className="bg-white rounded-lg z-20 w-full mx-5">
+      <div className="bg-white rounded-lg z-20 w-[280px]">
         <div className="p-[18px] w-full flex flex-col items-start justify-center">
           <h3 className="text-h3s text-gray07">신고하기</h3>
           <div className="w-full flex flex-wrap -mb-[10px] mt-4">