Skip to content

Commit b915917

Browse files
qlqlrhqlqlrh
authored
fix: 최적의 메인 폰트 찾기 및 UI 수정 (#16)
* feat: 일력 화면 UI 개선 및 폰트 변경 - 연도 표시 제거 - 폰트를 WantedSans-SemiBold로 변경 - 여백 및 간격 조정 * fix: 상세 운세 섹션 UI 수정 - 폰트 wanted-regular로 변경 - 줄간격 조정 - 각 운세 항목에 색상별 아이콘 및 배경 추가 - '오늘의 운세' 헤더 제거 * fix: 운세보러가기 폰트 수정
1 parent 086db45 commit b915917

File tree

10 files changed

+79
-28
lines changed

10 files changed

+79
-28
lines changed

‎app/_layout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ export default function RootLayout() {
1717
NotoSerifKR_600SemiBold,
1818
NotoSerifKR_700Bold,
1919
NotoSerifKR_800ExtraBold,
20+
// eslint-disable-next-line @typescript-eslint/no-require-imports, no-undef
21+
'WantedSans-SemiBold': require('../assets/fonts/WantedSans-SemiBold.ttf'),
2022
});
2123

2224
if (!fontsLoaded) {

‎assets/fonts/WantedSans-Black.ttf‎

2.24 MB
Binary file not shown.

‎assets/fonts/WantedSans-Bold.ttf‎

2.24 MB
Binary file not shown.

‎assets/fonts/WantedSans-ExtraBlack.ttf‎

2.26 MB
Binary file not shown.

‎assets/fonts/WantedSans-ExtraBold.ttf‎

2.24 MB
Binary file not shown.

‎assets/fonts/WantedSans-Medium.ttf‎

2.27 MB
Binary file not shown.

‎assets/fonts/WantedSans-Regular.ttf‎

2.29 MB
Binary file not shown.

‎assets/fonts/WantedSans-SemiBold.ttf‎

2.24 MB
Binary file not shown.

‎src/components/CalendarPage.tsx‎

Lines changed: 75 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,6 @@ const CalendarPage: React.FC<Props> = ({
125125
});
126126
};
127127

128-
const year = date.getFullYear();
129128
const month = date.getMonth() + 1;
130129
const day = date.getDate();
131130
const weekday = date.getDay();
@@ -368,39 +367,47 @@ const CalendarPage: React.FC<Props> = ({
368367
<View style={{ height: pageHeight }} className="relative bg-white px-8 pb-28 pt-6">
369368
<View className="flex-row items-start justify-between">
370369
<View>
371-
<Text className=" text-xs tracking-[0.25em] text-gray-400 font-noto">{year}</Text>
372-
<View className="mt-1.5 flex-row items-end">
370+
<View className="flex-row items-end">
373371
<Text
374372
className="font-serif text-4xl font-bold leading-10"
375373
style={{ color: accentColor }}
376374
>
377375
{month}
378376
</Text>
379-
<Text className="mb-1.5 ml-1.5 text-base text-gray-500 font-noto">월</Text>
377+
<Text className="mb-1.5 ml-1.5 text-base text-gray-500 font-wanted-semibold">월</Text>
380378
</View>
381379
</View>
382380

383381
<View className="items-end space-y-2">
384382
<View className="items-end">
385-
<Text className=" text-3xl font-bold font-noto" style={{ color: accentColor }}>
383+
<Text className=" text-3xl font-wanted-semibold" style={{ color: accentColor }}>
386384
{WEEKDAY_HANJA[weekday]}
387385
</Text>
388-
<Text className=" mt-1 text-xs text-gray-400 font-noto">
389-
{fortune?.lunarDate || '음력 --'}
386+
<Text className=" mt-1 text-xs text-gray-400 font-wanted-semibold">
387+
{/* 음력 정보 포맷팅 */}
388+
{fortune?.lunarDate
389+
? (() => {
390+
const parts = fortune.lunarDate.split('-');
391+
if (parts.length === 3) {
392+
return `음력 ${parts[1]}/${parts[2]}`;
393+
}
394+
return `음력 ${fortune.lunarDate}`;
395+
})()
396+
: '음력 --'}
390397
</Text>
391398
</View>
392399
</View>
393400
</View>
394401

395-
<View className="flex-1 items-center" style={{ marginTop: '20%' }}>
402+
<View className="flex-1 items-center" style={{ marginTop: '15%' }}>
396403
<Text
397404
className="font-serif text-[148px] font-extrabold leading-[148px] tracking-[-0.04em]"
398405
style={{ color: accentColor }}
399406
>
400407
{day}
401408
</Text>
402409

403-
<View className="mt-6 w-full max-w-xl px-2">
410+
<View className="mt-12 w-full max-w-xl px-4">
404411
{loading ? (
405412
<View className="items-center">
406413
<ActivityIndicator size="small" color="#d1d5db" />
@@ -409,9 +416,24 @@ const CalendarPage: React.FC<Props> = ({
409416
</Text>
410417
</View>
411418
) : fortune ? (
412-
<Text className="text-center text-lg font-semibold leading-7 text-gray-600 font-noto">
413-
&quot; {fortune.overview} &quot;
414-
</Text>
419+
<View className="relative items-center" style={{ minHeight: 7 * 36 }}>
420+
{/* 노트 줄 배경 */}
421+
<View className="absolute inset-0">
422+
{Array.from({ length: 7 }).map((_, i) => (
423+
<View
424+
key={i}
425+
className="absolute w-full border-t border-gray-200"
426+
style={{ top: i * 36 }}
427+
/>
428+
))}
429+
</View>
430+
<Text
431+
className="relative text-center text-lg font-medium text-gray-700 font-wanted-semibold"
432+
style={{ lineHeight: 36 }}
433+
>
434+
{fortune.overview}
435+
</Text>
436+
</View>
415437
) : (
416438
<Text className="text-center font-serif text-sm text-gray-300">
417439
운세 정보가 없습니다.
@@ -425,7 +447,7 @@ const CalendarPage: React.FC<Props> = ({
425447
className="absolute inset-x-0 bottom-20 items-center"
426448
>
427449
<Feather name="chevron-down" size={28} color="#d1d5db" />
428-
<Text className=" font-serif text-gray-500">운세보러가기</Text>
450+
<Text className=" font-wanted-semibold text-gray-500">운세 보러가기</Text>
429451
</Animated.View>
430452
</View>
431453

@@ -434,19 +456,37 @@ const CalendarPage: React.FC<Props> = ({
434456
className="border-t border-dashed border-gray-200 bg-gray-50 p-8"
435457
>
436458
<View className="mx-auto flex-1 w-full max-w-xl ">
437-
<View className="mb-3 flex-row items-center opacity-60">
438-
<Text className=" text-[11px] font-bold tracking-[0.2em] text-gray-500 font-noto">
439-
오늘의 운세
440-
</Text>
441-
<View className="ml-2 h-px flex-1 bg-gray-300" />
442-
</View>
443-
444459
{fortune ? (
445460
<>
446-
<FortuneItem icon="dollar-sign" label="재물운" value={fortune.wealth} />
447-
<FortuneItem icon="heart" label="애정운" value={fortune.love} />
448-
<FortuneItem icon="award" label="성공운" value={fortune.success} />
449-
<FortuneItem icon="zap" label="추천 행동" value={fortune.action} isLast />
461+
<FortuneItem
462+
icon="dollar-sign"
463+
label="재물운"
464+
value={fortune.wealth}
465+
iconColor="#d97706"
466+
bgColor="#fef3c7"
467+
/>
468+
<FortuneItem
469+
icon="heart"
470+
label="애정운"
471+
value={fortune.love}
472+
iconColor="#dc2626"
473+
bgColor="#fee2e2"
474+
/>
475+
<FortuneItem
476+
icon="award"
477+
label="성공운"
478+
value={fortune.success}
479+
iconColor="#7c3aed"
480+
bgColor="#ede9fe"
481+
/>
482+
<FortuneItem
483+
icon="zap"
484+
label="추천 행동"
485+
value={fortune.action}
486+
iconColor="#059669"
487+
bgColor="#d1fae5"
488+
isLast
489+
/>
450490
</>
451491
) : (
452492
<View className="py-5">
@@ -467,16 +507,23 @@ interface FortuneItemProps {
467507
icon: React.ComponentProps<typeof Feather>['name'];
468508
label: string;
469509
value: string;
510+
iconColor: string;
511+
bgColor: string;
470512
isLast?: boolean;
471513
}
472514

473-
const FortuneItem: React.FC<FortuneItemProps> = ({ icon, label, value, isLast }) => (
515+
const FortuneItem: React.FC<FortuneItemProps> = ({ icon, label, value, iconColor, bgColor, isLast }) => (
474516
<View className={`py-4 ${isLast ? '' : 'border-b border-gray-200'}`}>
475517
<View className="mb-2 flex-row items-center">
476-
<Feather name={icon} size={20} color="#9ca3af" style={{ marginRight: 10 }} />
477-
<Text className=" text-lg font-bold text-gray-900 font-noto-semibold">{label}</Text>
518+
<View
519+
className="mr-3 h-9 w-9 items-center justify-center rounded-full"
520+
style={{ backgroundColor: bgColor }}
521+
>
522+
<Feather name={icon} size={18} color={iconColor} />
523+
</View>
524+
<Text className=" text-lg font-bold text-gray-900 font-wanted-regular">{label}</Text>
478525
</View>
479-
<Text className=" text-[15px] leading-6 text-gray-600 font-noto">{value}</Text>
526+
<Text className=" text-[15px] leading-7 text-gray-600 font-wanted-regular">{value}</Text>
480527
</View>
481528
);
482529

‎tailwind.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ module.exports = {
99
'noto-semibold': ['NotoSerifKR_600SemiBold'],
1010
'noto-bold': ['NotoSerifKR_700Bold'],
1111
'noto-extrabold': ['NotoSerifKR_800ExtraBold'],
12+
'wanted-regular': ['WantedSans-Regular'],
13+
'wanted-semibold': ['WantedSans-SemiBold'],
1214
},
1315
},
1416
},

0 commit comments

Comments
 (0)