[feat/MAT-203] [Breakpoint] 화면 W값에 따른 Padding값 재정의 (개발) by sterdsterd · Pull Request #265 · team-ppointer/Pointer

sterdsterd · 2026-04-07T18:13:53Z

Summary

Container 공통 컴포넌트를 ContentInset으로 대체하면서, 화면별 responsive padding 처리 방식을 개선했습니다.
기존 ContainerProps 네이밍도 ContentInsetProps로 정리했고, native 주요 화면들에서 새 inset 기준을 사용하도록 일괄 반영했습니다.

Linear

MAT-203: [Breakpoint] 화면 W값에 따른 Padding값 재정의 (개발)

Changes

기존 Container 컴포넌트를 제거하고 ContentInset 컴포넌트 추가
ContainerProps를 ContentInsetProps로 리네이밍
로그인, 홈, 알림, 메뉴, 온보딩, 문제풀이, 스크랩 등 native 주요 화면에서 ContentInset 기준으로 padding 적용 방식 정리

Testing

변경 범위가 넓어 주요 화면 진입 시 레이아웃/패딩 깨짐 여부 중심으로 확인이 필요합니다

Risk / Impact

영향 범위: native 공통 레이아웃 및 화면 전반의 horizontal/vertical inset 처리
확인이 필요한 부분: 작은 화면/큰 화면에서 padding이 의도대로 반응형으로 적용되는지, pt/pb 조합 사용 화면에서 spacing regression이 없는지
배포 시 유의사항: 공통 컴포넌트 교체 성격이라 홈, 메뉴, 문제풀이, 스크랩 주요 플로우 스모크 테스트가 필요합니다

Screenshots / Video

Replaced the static Container component with a new ContentInset component that calculates responsive horizontal padding based on screen width.

Replaced all instances of the Container component with the new ContentInset component across the native app. Updated imports and usage to reflect the change.

Refactored padding calculation to use interpolation and clamping for better readability. Added layout-based width handling to account for dynamic container sizes.

linear · 2026-04-07T18:13:56Z

MAT-203 [Breakpoint] 화면 W값에 따른 Padding값 재정의 (개발)

vercel · 2026-04-07T18:14:03Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
pointer-admin	Ready	Preview, Comment	Apr 8, 2026 2:59am

Reordered Tailwind class names in DeletedScrapScreen for better readability and adherence to project style conventions.

Copilot

Pull request overview

Container 공통 컴포넌트를 제거하고 화면 너비 기반의 반응형 horizontal padding을 제공하는 ContentInset으로 대체하여, native 주요 화면들의 inset/padding 적용 방식을 일괄 정리한 PR입니다.

Changes:

Container 제거 + ContentInset 신규 추가(너비 기반 padding 계산)
@components/common barrel export를 Container → ContentInset으로 변경
로그인/홈/알림/메뉴/온보딩/문제풀이/스크랩 등 다수 화면에서 Container 사용처를 ContentInset으로 교체

Reviewed changes

Copilot reviewed 34 out of 34 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
apps/native/src/navigation/student/components/HomeHeader.tsx	헤더 우측 액션 영역 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/scrap/screens/SearchScrapScreen.tsx	`ContentInset` import로 변경(현재 미사용 상태)
apps/native/src/features/student/scrap/screens/ScrapScreen.tsx	스크랩 화면 섹션 wrapper들을 `ContentInset`으로 교체
apps/native/src/features/student/scrap/screens/FolderScrapScreen.tsx	폴더 스크랩 화면 wrapper들을 `ContentInset`으로 교체
apps/native/src/features/student/scrap/screens/DeletedScrapScreen.tsx	삭제 스크랩 화면 wrapper들을 `ContentInset`으로 교체
apps/native/src/features/student/scrap/components/Modal/LoadQnaImageModal.tsx	모달 내 정렬/리스트 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/scrap/components/Header/ScrapHeader.tsx	헤더 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/scrap/components/Header/DeletedScrapHeader.tsx	헤더 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/problem/screens/ProblemScreen.tsx	문제 화면 본문 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/problem/screens/PointingScreen.tsx	포인팅 화면 레이아웃 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/problem/screens/AnalysisScreen.tsx	분석/해설 화면 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/problem/screens/AllPointingsScreen.tsx	전체 포인팅 목록/탭 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/problem/components/ResultSheet.tsx	결과 시트 버튼 영역 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/problem/components/Header.tsx	문제 헤더 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/problem/components/BottomActionBar.tsx	하단 액션바 내부 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/problem/components/AnswerKeyboardSheet.tsx	답안 키보드 시트 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/onboarding/components/OnboardingLayout.tsx	온보딩 레이아웃 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/menu/screens/WithdrawalScreen.tsx	회원탈퇴 화면 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/menu/screens/TermsScreen.tsx	약관 리스트 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/menu/screens/NotificationSettingsScreen.tsx	알림 설정 리스트 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/menu/screens/NoticeScreen.tsx	공지 목록 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/menu/screens/MenuScreen.tsx	메뉴 헤더/본문 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/menu/screens/info/MyInfoScreen.tsx	내 정보 화면 섹션 wrapper들을 `ContentInset`으로 교체
apps/native/src/features/student/menu/screens/info/edit/EditPhoneNumberScreen.tsx	전화번호 수정 화면 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/menu/screens/FeedbackScreen.tsx	피드백 화면 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/menu/components/EditScreenLayout.tsx	편집 레이아웃 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/home/screens/notifications/NotificationsScreen.tsx	공지/알림 섹션 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/home/screens/notifications/NotificationDetailScreen.tsx	상세 화면 본문 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/home/screens/HomeScreen.tsx	홈 주요 섹션 wrapper를 `ContentInset`으로 교체
apps/native/src/features/student/home/components/LearningStatus.tsx	학습 상태 섹션 wrapper를 `ContentInset`으로 교체
apps/native/src/features/auth/login/screens/LoginScreen.tsx	로그인 화면 wrapper를 `ContentInset`으로 교체
apps/native/src/components/common/index.ts	common barrel export를 `ContentInset` 중심으로 갱신
apps/native/src/components/common/ContentInset.tsx	신규 `ContentInset` 컴포넌트 추가(반응형 padding 로직)
apps/native/src/components/common/Container.tsx	기존 `Container` 컴포넌트 제거

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-07T18:17:25Z

apps/native/src/components/common/ContentInset.tsx

+import { useState } from 'react';
+import { View, type LayoutChangeEvent, type ViewProps, useWindowDimensions } from 'react-native';
+
+interface ContentInsetProps extends ViewProps {
+  className?: string;
+  children: React.ReactNode;


ContentInsetProps references React.ReactNode, but this file doesn't import React (or ReactNode). In TypeScript this will error with “Cannot find namespace 'React'”. Import type ReactNode from react (or import React) and use that type for children (and any other React namespace types).

Suggested change

import { useState } from 'react';

import { View, type LayoutChangeEvent, type ViewProps, useWindowDimensions } from 'react-native';

interface ContentInsetProps extends ViewProps {

className?: string;

children: React.ReactNode;

import { useState, type ReactNode } from 'react';

import { View, type LayoutChangeEvent, type ViewProps, useWindowDimensions } from 'react-native';

interface ContentInsetProps extends ViewProps {

className?: string;

children: ReactNode;

Copilot · 2026-04-07T18:17:26Z

apps/native/src/features/student/scrap/screens/SearchScrapScreen.tsx

 import { colors } from '@/theme/tokens';
 import { type StudentRootStackParamList } from '@/navigation/student/types';
-import Container from '@/components/common/Container';
+import ContentInset from '@/components/common/ContentInset';
 import { useSearchHistoryStore } from '@/features/student/scrap/stores/searchHistoryStore';
 import { useSearchScraps } from '@/apis';


ContentInset is imported here but never used in this file. This will fail linting / may fail TypeScript build depending on the repo settings. Remove the import, or update the layout to actually use ContentInset (and then remove the manual px-[20px] paddings if appropriate).

Simplified ReactNode import in ContentInsetProps for consistency.

apps/native/src/features/student/scrap/screens/SearchScrapScreen.tsx

 import { colors } from '@/theme/tokens';
 import { type StudentRootStackParamList } from '@/navigation/student/types';
-import Container from '@/components/common/Container';
+import ContentInset from '@/components/common/ContentInset';


sterdsterd added 4 commits April 8, 2026 03:06

refactor(native): replace Container with responsive ContentInset

74c985e

Replaced the static Container component with a new ContentInset component that calculates responsive horizontal padding based on screen width.

refactor(native): replace Container with ContentInset component

489d85d

Replaced all instances of the Container component with the new ContentInset component across the native app. Updated imports and usage to reflect the change.

refactor(native): rename ContainerProps to ContentInsetProps

0f1e046

feat(native): improve responsive padding in ContentInset

7c5961c

Refactored padding calculation to use interpolation and clamping for better readability. Added layout-based width handling to account for dynamic container sizes.

sterdsterd requested a review from Copilot April 7, 2026 18:13

sterdsterd self-assigned this Apr 7, 2026

sterdsterd added the ✨ Feature 기능 개발 label Apr 7, 2026

Copilot started reviewing on behalf of sterdsterd April 7, 2026 18:14 View session

style(native): reorder class names for consistency

3d871f1

Reordered Tailwind class names in DeletedScrapScreen for better readability and adherence to project style conventions.

Copilot AI reviewed Apr 7, 2026

View reviewed changes

fix(native): update ReactNode import in ContentInsetProps

d599df4

Simplified ReactNode import in ContentInsetProps for consistency.

vercel bot deployed to Preview April 8, 2026 02:59 View deployment

github-code-quality bot found potential problems Apr 8, 2026

View reviewed changes

sterdsterd changed the base branch from main to develop April 8, 2026 03:31

sterdsterd merged commit b9da906 into develop Apr 8, 2026
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feat/MAT-203] [Breakpoint] 화면 W값에 따른 Padding값 재정의 (개발)#265

[feat/MAT-203] [Breakpoint] 화면 W값에 따른 Padding값 재정의 (개발)#265
sterdsterd merged 6 commits intodevelopfrom
feat/mat-203-container-responsive-padding

sterdsterd commented Apr 7, 2026

Uh oh!

linear bot commented Apr 7, 2026

Uh oh!

vercel bot commented Apr 7, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

sterdsterd commented Apr 7, 2026

Summary

Linear

Changes

Testing

Risk / Impact

Screenshots / Video

Uh oh!

linear bot commented Apr 7, 2026

Uh oh!

vercel bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Apr 7, 2026 •

edited

Loading