Skip to content

feat: 마음 기록 앨범 상세 페이지 구현 #59

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

Merged
taekoong merged 25 commits into from
Jul 22, 2025
Merged

feat: 마음 기록 앨범 상세 페이지 구현 #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
5edbccb
feat: 온도그래프 화면으로 전환
taekoong Jul 20, 2025
90dbe65
feat: 온도그래프 화면으로 전환
taekoong Jul 21, 2025
a4b794c
feat: 온도그래프 화면으로 전환
taekoong Jul 21, 2025
97983e9
feat: 온도그래프 화면으로 전환
taekoong Jul 21, 2025
e927d5a
feat: 온도그래프 화면으로 전환
taekoong Jul 21, 2025
86e5b0f
feat: 온도그래프 화면 구현
taekoong Jul 21, 2025
371a714
feat: 온도그래프 화면 구현
taekoong Jul 21, 2025
a5a6024
feat: 온도그래프 화면 구현
taekoong Jul 21, 2025
de6ac3d
feat: 마이페이지 화면 구현 processing...
taekoong Jul 21, 2025
c58f171
feat: 마이페이지 화면 구현 processing...
taekoong Jul 21, 2025
236a798
feat: 마이페이지 화면 구현 processing...
taekoong Jul 22, 2025
a82edc4
feat: 마이페이지 화면 구현 processing...
taekoong Jul 22, 2025
5193530
feat: 마이페이지 화면 구현 processing...
taekoong Jul 22, 2025
fbb9b29
feat: 마이페이지 화면 구현 processing...
taekoong Jul 22, 2025
e437104
feat: 마이페이지 화면 구현
taekoong Jul 22, 2025
631b716
feat: 마이페이지 화면 구현
taekoong Jul 22, 2025
a6c38fc
feat: 마이페이지 화면 구현
taekoong Jul 22, 2025
d85e155
feat: 마이페이지 화면 구현
taekoong Jul 22, 2025
7291ffd
feat: 마이페이지 화면 구현
taekoong Jul 22, 2025
66d18ab
Merge remote-tracking branch 'origin/main' into fe/home-graph
taekoong Jul 22, 2025
b542a6c
feat: 마이페이지 화면 구현
taekoong Jul 22, 2025
5c94116
feat: 마음기록 앨범 상세 구현 processing
taekoong Jul 22, 2025
0662408
feat: 마음기록 앨범 상세 구현 processing
taekoong Jul 22, 2025
5afdf51
feat: 마음기록 앨범 상세 구현 processing
taekoong Jul 22, 2025
5f37730
Merge branch 'main' into fe/album-details
taekoong Jul 22, 2025
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
Binary file added frontend/ongi/assets/images/sample_family_photo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 14 additions & 8 deletions frontend/ongi/lib/screens/bottom_nav.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ import 'package:ongi/screens/add_record_screen.dart';
import 'package:ongi/screens/home/home_screen.dart';
import 'package:ongi/screens/health/health_home_screen.dart';
import 'package:ongi/screens/family_tempbar_screen.dart';
import 'package:ongi/screens/photo/photo_date_screen.dart';

import 'package:ongi/screens/mypage/mypage_screen.dart';
import 'package:ongi/core/app_colors.dart';
import 'dart:ui';

class BottomNavScreen extends StatefulWidget {
const BottomNavScreen({super.key});
Expand All @@ -22,6 +23,7 @@ class _BottomNavScreenState extends State<BottomNavScreen> {
const HomeScreen(),
const HealthHomeScreen(),
const FamilyTempbarScreen(),
const PhotoDateScreen(),
const ProfileScreen(),
];

Expand Down Expand Up @@ -91,9 +93,16 @@ class _BottomNavScreenState extends State<BottomNavScreen> {
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [ AppColors.ongiBlue, AppColors.ongiOrange],
colors: [ AppColors.ongiBlue, AppColors.ongiOrange ],
),
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8,
offset: Offset(0, 4),
),
],
),
child: const Icon(Icons.add, color: Colors.white, size: 36),
),
Expand Down Expand Up @@ -138,17 +147,14 @@ class _BottomNavScreenState extends State<BottomNavScreen> {
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
isSelected
? Container(
child: iconWidget,
)
: iconWidget,
iconWidget,
const SizedBox(height: 4),
Text(
text,
style: TextStyle(
fontSize: 12,
color: isSelected ? AppColors.ongiOrange : Colors.grey[300],
color:isSelected? AppColors.ongiOrange
: Colors.grey[300],
fontFamily: 'Pretendard',
fontWeight: FontWeight.w600,
),
Expand Down
283 changes: 282 additions & 1 deletion frontend/ongi/lib/screens/photo/photo_date_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:ongi/core/app_light_background.dart';
import 'package:ongi/core/app_colors.dart';
import 'dart:ui'; // Added for ImageFilter

class PhotoDateScreen extends StatefulWidget {
const PhotoDateScreen({super.key});
Expand All @@ -10,12 +11,292 @@ class PhotoDateScreen extends StatefulWidget {
}

class _PhotoDateScreenState extends State<PhotoDateScreen> {
int _currentPage = 1;
final List<Map<String, String>> _photos = [
{
'main': 'assets/images/sample_family_photo.png',
'sub': 'assets/images/sample_family_photo.png',
'profile': 'assets/images/users/elderly_woman.png',
'text': '엄마는 금정산 등산 덕에 활기가 너무 좋다~',
'location': '부산광역시, 장전동',
},
{
'main': 'assets/images/sample_family_photo.png',
'sub': 'assets/images/sample_family_photo.png',
'profile': 'assets/images/users/elderly_woman.png',
'text': '오늘은 가족과 함께 산책 헤헤',
'location': '서울특별시, 강남구',
},
{
'main': 'assets/images/sample_family_photo.png',
'sub': 'assets/images/sample_family_photo.png',
'profile': 'assets/images/users/elderly_woman.png',
'text': '즐거운 여행의 추억 :)',
'location': '경기도, 수원시',
},
];

@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
final cardWidth = screenWidth;
final cardHeight = screenHeight * 0.4;
// 카드 크기 되돌림
return Scaffold(
backgroundColor: Colors.transparent,
body: AppLightBackground(
child: Padding(padding: const EdgeInsets.all(24)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 125),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 타이틀
const Text(
'우리가족의',
style: TextStyle(
fontSize: 60,
fontWeight: FontWeight.w200,
height: 1.2,
color: AppColors.ongiOrange,
),
),
const Text(
'마음 기록',
style: TextStyle(
fontSize: 60,
fontWeight: FontWeight.w800,
height: 1.2,
color: AppColors.ongiOrange,
),
),
const SizedBox(height: 32),
// 사진 카드 PageView
Center(
child: SizedBox(
width: cardWidth,
height: cardHeight,
child: PageView.builder(
itemCount: _photos.length,
controller: PageController(viewportFraction: 0.78, initialPage: _currentPage),
onPageChanged: (idx) => setState(() => _currentPage = idx),
itemBuilder: (context, idx) {
final photo = _photos[idx];
final isActive = idx == _currentPage;
return AnimatedContainer(
duration: const Duration(milliseconds: 200),
margin: EdgeInsets.symmetric(
horizontal: isActive ? 0 : 8,
vertical: isActive ? 0 : 16,
),
width: cardWidth,
height: cardHeight,
child: Stack(
clipBehavior: Clip.none,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(32),
child: isActive
? Image.asset(
photo['main']!,
width: cardWidth,
height: cardHeight,
fit: BoxFit.cover,
)
: ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
child: Opacity(
opacity: 0.7,
child: Image.asset(
photo['main']!,
width: cardWidth,
height: cardHeight,
fit: BoxFit.cover,
),
),
),
),
// 좌상단 서브(프로필) 사진
Positioned(
left: 16,
top: 16,
child: Container(
width: 88,
height: 100,
decoration: BoxDecoration(
border: Border.all(color: AppColors.ongiOrange, width: 3),
borderRadius: BorderRadius.circular(15),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image.asset(
photo['sub'] ?? photo['main']!,
fit: BoxFit.cover,
),
),
),
),
// 하단 오버레이
Positioned(
left: 0,
right: 0,
bottom: 0,
child: Container(
padding: const EdgeInsets.fromLTRB(20, 16, 20, 24),
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(32),
bottomRight: Radius.circular(32),
),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.black.withOpacity(0.0),
Colors.black.withOpacity(0.4),
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
// 원형 프로필
CircleAvatar(
radius: 16,
backgroundImage: AssetImage(photo['profile']!),
),
const SizedBox(width: 8),
Expanded(
child: Text(
photo['text']!,
style: const TextStyle(
color: Colors.white,
fontSize: 10,
fontFamily: 'Pretendard',
fontWeight: FontWeight.w500,
shadows: [
Shadow(
color: Colors.black38,
blurRadius: 4,
offset: Offset(0, 2),
),
],
),
),
),
],
),
const SizedBox(height: 8),
// 위치 버튼 스타일
Align(
alignment: Alignment.center,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.place, color: AppColors.ongiOrange, size: 16),
const SizedBox(width: 4),
Text(
photo['location']!,
style: TextStyle(
color: AppColors.ongiOrange,
fontSize: 11,
fontWeight: FontWeight.w500,
fontFamily: 'Pretendard',
),
),
],
),
),
),
],
),
),
),
],
),
);
},
),
),
),
// 감정 태그 버튼
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildTagButton('뿌듯함', AppColors.ongiOrange),
const SizedBox(width: 6),
_buildTagButton('기운이 남', AppColors.ongiOrange),
const SizedBox(width: 6),
_buildTagButton('들뜸', AppColors.ongiOrange),
],
),
const SizedBox(height: 16),
// 페이지인디케이터
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
for (int i = 0; i < _photos.length; i++) ...[
_buildIndicator(i == _currentPage),
if (i != _photos.length - 1) const SizedBox(width: 6),
]
],
),
],
),
),
),
],
),
),
);
}

Widget _buildTagButton(String text, Color color) {
return OutlinedButton(
onPressed: () {},
style: OutlinedButton.styleFrom(
side: BorderSide(color: color, width: 1.5),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
backgroundColor: AppColors.ongiOrange,
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 15),
minimumSize: Size.zero,
visualDensity: VisualDensity.compact,
),
child: Text(
text,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 12,
fontFamily: 'Pretendard',
),
),
);
}

Widget _buildIndicator(bool isActive) {
return Container(
width: isActive ? 15 : 10,
height: isActive ? 15 : 10,
decoration: BoxDecoration(
color: isActive ? AppColors.ongiOrange : Colors.grey[300],
borderRadius: BorderRadius.circular(8),
),
);
}
Expand Down
1 change: 1 addition & 0 deletions frontend/ongi/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ flutter:
- assets/images/step_tracker_crown.svg
- assets/images/step_tracker_light_background.svg
- assets/images/step_tracker_rectangle.svg
- assets/images/sample_family_photo.png

fonts:
- family: Pretendard
Expand Down
Loading