Skip to content

Commit b581a86

Browse files
jpark0506jpark0506
authored
fix : 마음일기 UI 수정 (#28)
* fix : 마음일기 UI 수정 * chore : width, height 사용 -> size로 수정
1 parent 5200650 commit b581a86

2 files changed

Lines changed: 96 additions & 94 deletions

File tree

‎app/(tabs-user)/diary.tsx‎

Lines changed: 95 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -293,118 +293,120 @@ export default function DiaryScreen() {
293293
>
294294
{/* 상단 질문 컴포넌트 */}
295295
<GradientBanner className="px-4 items-center">
296-
<Text className="text-xl font-bold text-center flex-wrap px-8 text-wrap w-3/4">
296+
<Text className="text-2xl font-bold text-center flex-wrap px-8 text-wrap w-3/4">
297297
{isFetchingRandomQuestion
298298
? "질문을 불러오는 중입니다"
299299
: (randomQuestion?.question?.content ?? "")}
300300
</Text>
301301
</GradientBanner>
302302

303-
<View className="w-full mt-8 px-5">
304-
{/* 녹음 타이머 - 비주얼라이저 위쪽 */}
305-
<View className="flex items-center justify-center mb-3">
306-
<RecordingTimer
307-
duration={recordingState.durationMillis / 1000}
308-
isRecording={recordingState.isRecording}
309-
isPaused={!recordingState.isRecording}
310-
/>
311-
</View>
312-
{/* 녹음 파형 컴포넌트 */}
313-
<View className="flex flex-row items-center justify-center h-[60px] bg-gray10 rounded-[20px] w-full">
314-
<WaveformVisualizer
315-
isRecording={recordingState.isRecording}
316-
isPaused={
317-
!recordingState.isRecording && recordingState.durationMillis > 0
318-
}
319-
durationMillis={recordingState.durationMillis}
320-
metering={recordingState.metering}
321-
heightAnimValue={waveHeightAnim}
322-
/>
323-
</View>
324-
</View>
325-
326-
<View className="flex-row items-center justify-center px-4 mt-10 relative w-full">
327-
{!recordingState.isRecording &&
328-
recordingState.durationMillis > 0 &&
329-
!isSaving && (
330-
<View className="absolute left-8">
331-
<Button size="lg" variant="filled" onPress={handleReset}>
332-
<Text className="text-white text-[15px] font-bold px-5">
333-
취소
334-
</Text>
335-
</Button>
336-
</View>
337-
)}
338-
{/* 녹음 조정 버튼 - 항상 가운데 */}
339-
<View className="items-center justify-center" style={{ width: BUTTON_SIZE * MAX_RING_SCALE, height: BUTTON_SIZE * MAX_RING_SCALE }}>
340-
{/* 뒤쪽 링 - 녹음 중일 때만 표시되고 비주얼라이저에 비례해 커짐 */}
341-
{recordingState.isRecording && (
342-
<Animated.View
343-
style={{
344-
position: 'absolute',
345-
width: BUTTON_SIZE,
346-
height: BUTTON_SIZE,
347-
borderRadius: BUTTON_SIZE / 2,
348-
backgroundColor: ringColor,
349-
opacity: 0.3,
350-
transform: [{ scale: ringScale }],
351-
}}
303+
<View className="h-full flex items-center justify-center">
304+
<View className="w-full mt-8 px-5">
305+
{/* 녹음 타이머 - 비주얼라이저 위쪽 */}
306+
<View className="flex items-center justify-center mb-3">
307+
<RecordingTimer
308+
duration={recordingState.durationMillis / 1000}
309+
isRecording={recordingState.isRecording}
310+
isPaused={!recordingState.isRecording}
352311
/>
353-
)}
354-
{/* 실제 버튼 - 크기 고정 */}
355-
<TouchableOpacity
356-
className="rounded-full flex items-center justify-center bg-main500"
357-
style={{ width: BUTTON_SIZE, height: BUTTON_SIZE }}
358-
onPress={handleMainButtonPress}
359-
>
360-
<Icon
361-
name={recordingState.isRecording ? "Stop" : "Mic"}
362-
width={40}
363-
height={40}
312+
</View>
313+
{/* 녹음 파형 컴포넌트 */}
314+
<View className="flex flex-row items-center justify-center h-[60px] bg-gray10 rounded-[20px] w-full">
315+
<WaveformVisualizer
316+
isRecording={recordingState.isRecording}
317+
isPaused={
318+
!recordingState.isRecording && recordingState.durationMillis > 0
319+
}
320+
durationMillis={recordingState.durationMillis}
321+
metering={recordingState.metering}
322+
heightAnimValue={waveHeightAnim}
364323
/>
365-
</TouchableOpacity>
324+
</View>
366325
</View>
367326

368-
{!recordingState.isRecording &&
369-
recordingState.durationMillis > 0 &&
370-
!isSaving && (
327+
<View className="flex-row items-center justify-center px-4 mt-10 relative w-full">
328+
{!recordingState.isRecording &&
329+
recordingState.durationMillis > 0 &&
330+
!isSaving && (
331+
<View className="absolute left-8">
332+
<Button size="lg" variant="filled" onPress={handleReset}>
333+
<Text className="text-white text-[15px] font-bold px-5">
334+
취소
335+
</Text>
336+
</Button>
337+
</View>
338+
)}
339+
{/* 녹음 조정 버튼 - 항상 가운데 */}
340+
<View className="items-center justify-center" style={{ width: BUTTON_SIZE * MAX_RING_SCALE, height: BUTTON_SIZE * MAX_RING_SCALE }}>
341+
{/* 뒤쪽 링 - 녹음 중일 때만 표시되고 비주얼라이저에 비례해 커짐 */}
342+
{recordingState.isRecording && (
343+
<Animated.View
344+
style={{
345+
position: 'absolute',
346+
width: BUTTON_SIZE,
347+
height: BUTTON_SIZE,
348+
borderRadius: BUTTON_SIZE / 2,
349+
backgroundColor: ringColor,
350+
opacity: 0.3,
351+
transform: [{ scale: ringScale }],
352+
}}
353+
/>
354+
)}
355+
{/* 실제 버튼 - 크기 고정 */}
356+
<TouchableOpacity
357+
className="rounded-full flex items-center justify-center bg-main500"
358+
style={{ width: BUTTON_SIZE, height: BUTTON_SIZE }}
359+
onPress={handleMainButtonPress}
360+
>
361+
<Icon
362+
name={recordingState.isRecording ? "Stop" : "Mic"}
363+
size={40}
364+
/>
365+
</TouchableOpacity>
366+
</View>
367+
368+
{!recordingState.isRecording &&
369+
recordingState.durationMillis > 0 &&
370+
!isSaving && (
371+
<View className="absolute right-8">
372+
<Button
373+
size="lg"
374+
variant="outlined"
375+
className="flex-row items-center justify-center"
376+
innerClassName="flex-row items-center justify-center pl-4"
377+
onPress={handleSaveServer}
378+
>
379+
<Icon name="CheckIcon" size={20} />
380+
<Text className="text-main500 text-[15px] font-bold pl-2 pr-4">
381+
완료
382+
</Text>
383+
</Button>
384+
</View>
385+
)}
386+
{isSaving && (
371387
<View className="absolute right-8">
372388
<Button
373-
size="lg"
374-
variant="outlined"
375389
className="flex-row items-center justify-center"
376390
innerClassName="flex-row items-center justify-center pl-4"
377-
onPress={handleSaveServer}
391+
size="lg"
392+
variant="filled"
393+
disabled
378394
>
379-
<Icon name="CheckIcon" width={20} height={20} />
380-
<Text className="text-main500 text-[15px] font-bold pl-2 pr-4">
381-
완료
395+
<ActivityIndicator size="small" color="white" />
396+
<Text className="text-white text-[15px] font-bold pl-2 pr-4">
397+
처리중
382398
</Text>
383399
</Button>
384400
</View>
385401
)}
386-
{isSaving && (
387-
<View className="absolute right-8">
388-
<Button
389-
className="flex-row items-center justify-center gap-x-2"
390-
size="lg"
391-
variant="filled"
392-
disabled
393-
>
394-
<ActivityIndicator size="small" color="white" />
395-
<Text className="text-white text-[15px] font-bold px-5">
396-
처리중
397-
</Text>
398-
</Button>
399-
</View>
400-
)}
401-
</View>
402-
<View className="flex items-center justify-center w-full h-fit">
403-
<SpeechBubble className="h-fit w-3/4 px-0 flex items-center justify-center">
404-
<Text className="text-gray90 text-base text-center">
405-
{currentBubbleText}
406-
</Text>
407-
</SpeechBubble>
402+
</View>
403+
<View className="flex items-center justify-center w-full h-fit">
404+
<SpeechBubble className="h-fit w-3/4 px-0 flex items-center justify-center">
405+
<Text className="text-gray90 text-base text-center">
406+
{currentBubbleText}
407+
</Text>
408+
</SpeechBubble>
409+
</View>
408410
</View>
409411
</ScrollView >
410412
</MainLayout >

‎shared/ui/audio/recording-timer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export function RecordingTimer({
3333
style={{ width: 18, height: 18 }}
3434
/>
3535
)}
36-
<Text className="text-black text-lg font-normal">
36+
<Text className="text-black text-[21px] font-normal">
3737
{formatTime(duration)}
3838
</Text>
3939
</View>

0 commit comments

Comments
 (0)