Skip to content

refactor: 전체 폰트 사이즈 수정 및 소소한 편의성 개선 #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kangdy25 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

refactor: 전체 폰트 사이즈 수정 및 소소한 편의성 개선 #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
96fbcdb
feat: 모임 생성 페이지 글자 크기 조정
kangdy25 Feb 12, 2026
8bd3fa3
feat: 링크 공유 페이지 글자 크기 조정
kangdy25 Feb 12, 2026
46401e4
fix: 스터디 카페 디폴트로 셀렉트 안되는 문제 해결
kangdy25 Feb 12, 2026
3b8b110
feat: 모임 현황 페이지 글자 조정 및 버튼 비활성화 조건 추가
kangdy25 Feb 14, 2026
aeeb94f
Merge branch 'main' into refactor/edit-fontsize
kangdy25 Feb 14, 2026
45246d5
feat: 중간위치, 장소 추천 페이지 폰트 크기 수정
kangdy25 Feb 14, 2026
98bb381
feat: 모달 폰트 사이즈 변경
kangdy25 Feb 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions app/create/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,8 +174,11 @@ export default function Page() {
<div className="flex flex-col">
<div className="flex flex-1 justify-center overflow-hidden">
<div className="mx-5 my-10 flex w-full flex-col items-center gap-11 sm:max-w-sm md:mx-12.5 md:my-20 lg:mx-42.5 lg:my-25 lg:gap-11">
<div className="flex w-full justify-start">
<h3 className="text-gray-10 text-2xl leading-[1.33] font-bold">모임 만들기</h3>
</div>
<div className="flex w-full flex-col gap-2">
<label className="text-gray-9 text-[14px] leading-[1.571] font-semibold tracking-[0.203px]">
<label className="text-gray-9 text-[16px] leading-[1.571] font-semibold tracking-[0.203px]">
약속의 이름을 알려주세요.
</label>
<input
Expand All @@ -188,10 +191,14 @@ export default function Page() {
</div>

<div className="flex w-full flex-col gap-2">
<label className="text-gray-9 text-[14px] leading-[1.571] font-semibold tracking-[0.203px]">
<label className="text-gray-9 text-[16px] leading-[1.571] font-semibold tracking-[0.203px]">
어떤 약속인가요?
</label>

<label className="text-gray-6 text-[11px] leading-[1.273]">
추후 맞춤 장소 추천을 위해 선택해주세요.
</label>

<div className="flex gap-2">
<button
type="button"
Expand Down Expand Up @@ -305,7 +312,7 @@ export default function Page() {
</div>

<div className="flex w-full flex-col gap-2">
<label className="text-gray-9 text-[14px] leading-[1.571] font-semibold tracking-[0.203px] sm:text-[15px] md:text-[14px]">
<label className="text-gray-9 text-[16px] leading-[1.571] font-semibold tracking-[0.203px]">
참여 인원을 알려주세요.
</label>
<div className="border-gray-2 relative flex h-11 items-center rounded border bg-white">
Expand Down Expand Up @@ -351,7 +358,7 @@ export default function Page() {
</div>

<div className="flex w-full flex-col gap-2">
<label className="text-gray-9 text-[14px] leading-[1.571] font-semibold tracking-[0.203px] sm:text-[15px] md:text-[14px]">
<label className="text-gray-9 text-[16px] leading-[1.571] font-semibold tracking-[0.203px]">
참여 기한을 정해주세요.
</label>
<div className="border-gray-2 relative flex h-15 items-center rounded border bg-white">
Expand Down
74 changes: 36 additions & 38 deletions app/meeting/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function Page() {

const hasHandledErrorRef = useRef(false);
const isDeletingRef = useRef(false);
const hasInitializedRef = useRef(false); // ⭐ 초기화 플래그 추가
const hasInitializedRef = useRef(false);

const params = useParams();
const id = params?.id as string;
Expand All @@ -46,6 +46,10 @@ export default function Page() {
const { mutate: setDeparture } = useSetDeparture(id);
const { mutate: deleteDeparture } = useDeleteDeparture(id);

const currentCount = meetingData?.data?.currentParticipantCount || 0;
const totalCount = meetingData?.data?.totalParticipantCount || 0;
const isResultEnabled = totalCount > 0 && currentCount === totalCount;

useEffect(() => {
setTimeout(() => {
setIsMounted(true);
Expand All @@ -56,7 +60,6 @@ export default function Page() {

useEffect(() => {
if (isMounted && !myName && id) {
console.log('❌ 로그인 정보 없음 - /join으로 리다이렉트');
router.replace(`/join/${id}`);
}
}, [isMounted, myName, id, router]);
Expand All @@ -80,14 +83,12 @@ export default function Page() {
setSelectedStation(null);

deleteDeparture(undefined, {
onSuccess: (data) => {
console.log('✅ 출발지 삭제 성공:', data);
onSuccess: () => {
refetch().then(() => {
isDeletingRef.current = false;
});
},
onError: (error) => {
console.error('❌ 출발지 삭제 실패:', error);
onError: () => {
setErrorMessage('출발지 삭제에 실패했습니다.');
show();
isDeletingRef.current = false;
Expand All @@ -98,8 +99,7 @@ export default function Page() {

setSelectedStation(stationName);

const searchName = stationName.endsWith('역') ? stationName : `${stationName}역`;
const stationInfo = STATION_DATA.find((s) => s.name === searchName);
const stationInfo = STATION_DATA.find((s) => s.name === stationName);

if (stationInfo) {
setDeparture(
Expand All @@ -108,11 +108,9 @@ export default function Page() {
},
{
onSuccess: () => {
console.log('✅ 출발지 등록 성공');
refetch();
},
onError: (error) => {
console.error('❌ 출발지 등록 실패:', error);
onError: () => {
setErrorMessage('출발지 등록에 실패했습니다.');
show();
},
Expand Down Expand Up @@ -156,10 +154,7 @@ export default function Page() {
const myParticipant = useMemo(() => {
if (!selectedStation || !myName) return null;

const correctStationName = selectedStation.endsWith('역')
? selectedStation
: `${selectedStation}역`;
const info = STATION_DATA.find((s) => s.name === correctStationName);
const info = STATION_DATA.find((s) => s.name === selectedStation);
if (!info) return null;

return {
Expand All @@ -182,18 +177,12 @@ export default function Page() {
const others = serverParticipants
.filter((p) => p.userName !== myName)
.map((p, index) => {
const displayStationName = p.stationName
? p.stationName.endsWith('역')
? p.stationName
: `${p.stationName}역`
: '';

const stationInfo = STATION_DATA.find((s) => s.name === displayStationName);
const stationInfo = STATION_DATA.find((s) => s.name === p.stationName);

return {
id: `other-${index}`,
name: p.userName,
station: displayStationName,
station: p.stationName,
line: stationInfo?.line ?? '미확인',
latitude: p.latitude,
longitude: p.longitude,
Expand All @@ -208,7 +197,7 @@ export default function Page() {
if (!isMounted || !myName) {
return (
<div className="flex h-screen items-center justify-center bg-white">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" />
<div className="border-t-blue-5 h-8 w-8 animate-spin rounded-full border-4 border-gray-200" />
</div>
);
}
Expand All @@ -219,7 +208,7 @@ export default function Page() {
<section className="border-gray-1 flex w-full flex-col gap-5 bg-white md:w-77.5 md:gap-10">
{isLoading && (
<div className="flex h-20 items-center justify-center">
<div className="h-6 w-6 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" />
<div className="border-t-blue-5 border-gray-2 h-6 w-6 animate-spin rounded-full border-4" />
</div>
)}

Expand All @@ -234,7 +223,7 @@ export default function Page() {
/>
) : (
!isLoading && (
<div className="text-center text-gray-500">모임 정보를 불러올 수 없습니다.</div>
<div className="text-gray-6 text-center">모임 정보를 불러올 수 없습니다.</div>
)
)}

Expand All @@ -253,12 +242,10 @@ export default function Page() {

<div className="relative flex flex-1 flex-col gap-3 overflow-hidden px-5 md:gap-3.5 md:p-0">
<div className="flex items-center justify-between bg-white">
<h3 className="text-gray-9 text-xl font-semibold">참여현황</h3>
<h3 className="text-gray-9 text-[22px] font-semibold">참여현황</h3>
<span className="text-gray-6 text-normal text-xs">
<span className="text-blue-5">
{meetingData?.data.currentParticipantCount || 0}명
</span>
이 참여 중
<span className="text-blue-5">{currentCount}</span>
<span> / {totalCount}</span>
</span>
</div>

Expand All @@ -283,7 +270,7 @@ export default function Page() {
</button>

<div className="flex-1">
<div className="[&::-webkit-scrollbar-thumb]:bg-gray-6 flex h-80 flex-col gap-3.5 overflow-y-scroll pr-2 pb-5 md:pb-18 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full">
<div className="[&::-webkit-scrollbar-thumb]:bg-gray-6 flex h-80 flex-col gap-3.5 overflow-y-scroll pb-5 md:pb-18 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full">
{allParticipants.length > 0 ? (
allParticipants.map((user) => (
<div
Expand Down Expand Up @@ -312,12 +299,23 @@ export default function Page() {
</div>
</div>

<button
onClick={handleSubmit}
className="bg-gray-8 right-5 left-5 mb-10 h-12 cursor-pointer rounded text-lg text-white md:absolute md:right-0 md:bottom-0 md:left-0 md:mb-0"
>
결과보기
</button>
<div className="group relative right-5 left-5 mb-10 md:absolute md:right-0 md:bottom-0 md:left-0 md:mb-0">
{!isResultEnabled && (
<div className="bg-gray-9 absolute bottom-full left-1/2 mb-2 hidden w-max -translate-x-1/2 rounded px-3 py-1.5 text-xs text-white opacity-0 transition-opacity group-hover:block group-hover:opacity-100">
모든 팀원이 참여해야 결과를 확인할 수 있어요
<div className="border-t-gray-9 absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent"></div>
</div>
Comment on lines +302 to +307
Copy link

@coderabbitai coderabbitai bot Feb 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

cat -n app/meeting/[id]/page.tsx | sed -n '295,320p'

Repository: SWYP-mingling/Frontend

Length of output: 1539

🏁 Script executed:

# Check recent git history for this file
git log --oneline -n 10 -- "app/meeting/[id]/page.tsx"

Repository: SWYP-mingling/Frontend

Length of output: 92

🏁 Script executed:

# Check the diff from previous commit to see what changed
git diff HEAD~1..HEAD -- "app/meeting/[id]/page.tsx" 2>/dev/null | head -150

Repository: SWYP-mingling/Frontend

Length of output: 48

🏁 Script executed:

# Get more context around the parent container structure
cat -n app/meeting/[id]/page.tsx | sed -n '240,320p'

Repository: SWYP-mingling/Frontend

Length of output: 4568

🏁 Script executed:

# Check if there's any CSS or styling context that might explain the positioning
git log --all -p -- "app/meeting/[id]/page.tsx" | grep -A 5 -B 5 "relative right-5 left-5" | head -40

Repository: SWYP-mingling/Frontend

Length of output: 733

🏁 Script executed:

# Let's also check for any similar patterns in other files to understand the intent
rg "relative right-\d left-\d" --type tsx

Repository: SWYP-mingling/Frontend

Length of output: 93

🏁 Script executed:

# Check what previous versions of this button container looked like
git log --all -p --reverse -- "app/meeting/[id]/page.tsx" | grep -A 15 -B 5 "결과보기" | head -100

Repository: SWYP-mingling/Frontend

Length of output: 1411

🏁 Script executed:

# Check if there are any tailwind config files that might affect spacing
fd -e "tailwind.config" -e "tailwind.config.js" -e "tailwind.config.ts"

Repository: SWYP-mingling/Frontend

Length of output: 48

🏁 Script executed:

# Let me check the entire git history to see when this wrapper was added
git log --all --oneline -- "app/meeting/[id]/page.tsx"

Repository: SWYP-mingling/Frontend

Length of output: 162

🏁 Script executed:

# Check the specific commit that added the wrapper div
git show 98bb381:app/meeting/[id]/page.tsx | sed -n '295,320p'

Repository: SWYP-mingling/Frontend

Length of output: 1357

🏁 Script executed:

# Let's check the commit that introduced the wrapper to understand the intent
git show 98bb381 --stat

Repository: SWYP-mingling/Frontend

Length of output: 7503

🏁 Script executed:

# Check if there are other similar positioning patterns in the codebase
rg "relative.*left-\d.*right-\d|relative.*right-\d.*left-\d" --type tsx -A 2 -B 2

Repository: SWYP-mingling/Frontend

Length of output: 93

🏁 Script executed:

# Let me check how positioning utilities behave in Tailwind by looking at the actual CSS output or config
cat tailwind.config.ts 2>/dev/null || cat tailwind.config.js 2>/dev/null

Repository: SWYP-mingling/Frontend

Length of output: 48

🏁 Script executed:

# Let's also look at the parent container and understand the flex layout better
cat -n app/meeting/[id]/page.tsx | sed -n '200,250p'

Repository: SWYP-mingling/Frontend

Length of output: 2528

🏁 Script executed:

# Let me trace through how flex layout works with the positioning
# Check if there's any visible layout issue by seeing how the button is supposed to align
cat -n app/meeting/[id]/page.tsx | sed -n '309,318p'

Repository: SWYP-mingling/Frontend

Length of output: 538

🏁 Script executed:

# Check if there are any other buttons or elements that use similar negative margin patterns
rg "\-mx-\d|\-ml-\d|\-mr-\d" app/meeting/

Repository: SWYP-mingling/Frontend

Length of output: 48

🏁 Script executed:

# Let me check the actual CSS behavior by examining how the button would be rendered
# Check if there's a previous version without the wrapper to see the original intent
git log --all --oneline -20 -- "app/meeting/[id]/page.tsx" | head -5

Repository: SWYP-mingling/Frontend

Length of output: 162

🏁 Script executed:

# Get the diff between the previous button implementation and current
git show f0cc36b:app/meeting/[id]/page.tsx 2>/dev/null | grep -A 10 "결과보기" | head -20

Repository: SWYP-mingling/Frontend

Length of output: 403

🏁 Script executed:

# Let me understand the flex layout better and check if there are any design specifications
# Check the parent's flex properties to see how children are laid out
cat -n app/meeting/[id]/page.tsx | sed -n '206,210p'

Repository: SWYP-mingling/Frontend

Length of output: 514

🏁 Script executed:

# Look at the button's w-full property and understand how it interacts with the wrapper
cat -n app/meeting/[id]/page.tsx | sed -n '302,318p'

Repository: SWYP-mingling/Frontend

Length of output: 1176

🏁 Script executed:

# Let me trace the actual CSS behavior: on a relative element with both left and right set
# Check if there's any CSS custom property or Tailwind config that might explain this
fd "globals.css|tailwind.css" app/

Repository: SWYP-mingling/Frontend

Length of output: 81

🏁 Script executed:

# Check the globals.css to understand any custom styling
cat app/globals.css

Repository: SWYP-mingling/Frontend

Length of output: 2130

🏁 Script executed:

# Let me also verify the previous version more thoroughly to compare
git diff f0cc36b..98bb381 -- "app/meeting/[id]/page.tsx" | grep -A 20 -B 5 "relative right-5 left-5"

Repository: SWYP-mingling/Frontend

Length of output: 1434

모바일에서 relative right-5 left-5의 위치 지정이 의도와 다릅니다

Line 302의 wrapper에서 relative right-5 left-5를 사용합니다. position: relative 요소에 left와 right가 동시에 설정되면, LTR 환경에서 left만 적용되어 요소가 1.25rem 오른쪽으로 밀립니다.

부모의 px-5 패딩을 상쇄하려는 의도라면 음수 마진(-mx-5)을 사용하세요:

- <div className="group relative right-5 left-5 mb-10 md:absolute md:right-0 md:bottom-0 md:left-0 md:mb-0">
+ <div className="group relative -mx-5 mb-10 md:absolute md:right-0 md:bottom-0 md:left-0 md:mb-0">
🤖 Prompt for AI Agents 
In `@app/meeting/`[id]/page.tsx around lines 302 - 307, The wrapper div using
class "group relative right-5 left-5 mb-10 md:absolute md:right-0 md:bottom-0
md:left-0 md:mb-0" applies both left and right offsets in a relative context
(causing an unintended 1.25rem shift on mobile); remove the positional offsets
and replace them with a negative horizontal margin to counter parent padding
(use "-mx-5" instead of "right-5 left-5") while keeping "relative" and the
md:absolute/md:* classes intact so desktop absolute positioning still works.

)}
<button
onClick={handleSubmit}
disabled={!isResultEnabled}
className={`h-12 w-full rounded text-lg font-semibold text-white transition-colors ${
isResultEnabled ? 'bg-gray-8 cursor-pointer' : 'bg-gray-4 cursor-not-allowed'
}`}
>
결과보기
</button>
</div>
<Toast message={errorMessage} isVisible={isVisible} />
</div>
</section>
Expand Down
4 changes: 2 additions & 2 deletions app/recommend/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ function RecommendContent() {
<button onClick={handleBack} className="flex h-6 w-6 items-center justify-center">
<Image src="/icon/left_chevron.svg" alt="왼쪽 꺾쇠 기호" width={24} height={24} />
</button>
<h2 className="text-gray-9 text-xl font-semibold">{midPlace}역 주변 장소 추천</h2>
<h2 className="text-gray-9 text-[22px] font-semibold">{midPlace}역 주변 장소 추천</h2>
</div>

{/* 모바일 전용 지도 (작게 표시) */}
Expand Down Expand Up @@ -248,7 +248,7 @@ function RecommendContent() {
{selectedPlaceId === place.id ? (
<button
onClick={(e) => handleOpenKakaoMap(e, place.placeUrl)}
className="bg-gray-8 w-full rounded py-1 text-[15px] text-white"
className="bg-gray-8 w-full rounded py-2 text-[15px] text-white"
>
카카오맵에서 보기
</button>
Expand Down
Loading