Skip to content

Feat group info#20

Open
jee-woo wants to merge 9 commits intodevelopfrom
feat-group-info
Open

Feat group info#20
jee-woo wants to merge 9 commits intodevelopfrom
feat-group-info

Conversation

@jee-woo
Copy link
Copy Markdown
Owner

@jee-woo jee-woo commented Mar 10, 2026

No description provided.

jee-woo and others added 9 commits March 10, 2026 18:11
- 라이트 팔레트 채도 조정으로 따뜻한 톤 유지
- cardBackground 커스텀 토큰 추가 (light: white, dark: rgba)
- 헤더 border 제거 및 배경색 상속 처리
- ScreenLayout에 $background 적용
- React Navigation contentStyle로 배경색 오버라이드 해결

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 카드 컴포넌트 shadow 제거, cardBackground + subtle border 적용
- 버튼 disabled 스타일 통일 ($color3 배경 + opacity)
- Input/TextArea 배경색 $cardBackground로 통일, border 제거
- 폰트 weight/color 계층 정리 (700→600→400, color11→color9→color7)
- accent 컬러 일관성 있게 적용 (버튼, 승인 대기 상태)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Group 타입에 memberCount, lastDiaryAt 필드 추가
- 그룹 카드 Footer에 아이콘+멤버 수, 최근 일기 시간 표시
- 헤더의 일기 작성 버튼을 우측 하단 FAB로 분리
- 헤더에서 초대 코드 버튼만 유지

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- deleteDiary API 함수 추가 (DELETE /api/groups/{groupId}/diaries/{diaryId})
- useDeleteDiaryMutation 훅 생성
- 일기 상세 헤더에 삭제 버튼 추가 (확인 Alert → 삭제 → toast 알림)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- react-native-quick-crypto 빌드 에러 해결을 위해 nitro-modules 0.33.2로 업데이트

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
카드용 상대시간과 섹션 헤더용 날짜 라벨을 별도 함수로 분리하고,
7일 초과 시 정확한 날짜를 표시하도록 개선

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
모든 바텀시트에 일관된 3단 구조 적용:
- 제목 헤더 추가 (GroupRequestSheet, GroupActionSheet)
- 닫기 버튼을 chromeless 스타일로 통일
- GroupActionSheet를 카드형 메뉴로 재디자인

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@jee-woo jee-woo self-assigned this Mar 10, 2026
@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on a significant overhaul of the application's user interface and experience, particularly within the group and diary management features. It introduces more informative group displays, empowers users with diary deletion capabilities, and refines the overall visual theme for a more polished and intuitive interaction. These changes aim to enhance clarity and functionality across key user flows.

Highlights

  • UI/UX Enhancements: Numerous UI components across various screens, including Login, Diary Create, Diary Detail, Group List, Group Create, and Notification, received updates to improve visual consistency and user experience. This involved adjusting font sizes, weights, colors, borders, and backgrounds.
  • Enhanced Group Information: The GroupCard component was updated to display more comprehensive information, including the memberCount and lastDiaryAt, providing users with better context for each group at a glance.
  • Diary Deletion Feature: A new feature was implemented allowing users to delete diaries directly from the DiaryDetailScreen, complete with a confirmation alert and integration with the backend API.
  • Theming Refinement: The application's theming was refined by updating the themes.ts file, introducing a more consistent color palette for both light and dark modes, and adding a dedicated cardBackground property for improved visual hierarchy.
  • Dependency Update: The react-native-nitro-modules dependency was updated to version 0.33.2.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • .gitignore
    • Added PORTFOLIO_*.md to the ignore list.
  • package.json
    • Updated react-native-nitro-modules dependency to version 0.33.2.
  • public/mockServiceWorker.js
    • Changed string literals from double quotes to single quotes for consistency.
  • src/components/CommonHeader.tsx
    • Removed bottom border styling from the header component.
  • src/components/EmptyPlaceholder.tsx
    • Adjusted font sizes, weights, and colors for the title and message text.
  • src/components/layouts/ScreenLayout.tsx
    • Wrapped children in a YStack with flex={1} and backgroundColor for consistent screen backgrounds.
  • src/features/auth/screens/LoginScreen/index.tsx
    • Updated disabledStyle for the Kakao login button.
    • Modified styling for the Dev Login button, removing variant="outlined" and adding specific backgroundColor and color.
  • src/features/diary/screens/DiaryCreateScreen/components/DiaryForm.tsx
    • Removed border and set background color for the diary content text input.
    • Updated disabledStyle for the diary submission button.
  • src/features/diary/screens/DiaryCreateScreen/components/DiaryImagePicker.tsx
    • Changed the image picker button styling from variant="outlined" to specific backgroundColor and color.
  • src/features/diary/screens/DiaryDetailScreen/components/CommentForm.tsx
    • Adjusted font size, weight, and color for the reply message.
    • Adjusted font size and color for the parent comment content.
    • Removed border and set background color for the comment input field.
    • Updated disabledStyle for the comment submission button.
  • src/features/diary/screens/DiaryDetailScreen/components/CommentItem.tsx
    • Adjusted font sizes, weights, and colors for the author username and timestamp.
    • Adjusted font size, line height, and color for the comment content and parent author.
    • Updated icon color and text color for the reply button.
  • src/features/diary/screens/DiaryDetailScreen/components/CommentList.tsx
    • Adjusted font weight and color for the comment count header.
  • src/features/diary/screens/DiaryDetailScreen/components/DiaryContent.tsx
    • Adjusted gap, font sizes, weights, and colors for the author username and timestamp.
    • Increased marginTop for the diary image.
    • Adjusted font size, line height, marginTop, and color for the decrypted diary content.
  • src/features/diary/screens/DiaryDetailScreen/hooks/mutations/useDeleteDiaryMutation.ts
    • Added a new React Query mutation hook for deleting diaries, invalidating relevant group and groups queries on success.
  • src/features/diary/screens/DiaryDetailScreen/index.tsx
    • Imported necessary navigation, toast, theme, Trash2 icon, Alert, and Button components.
    • Integrated the useDeleteDiaryMutation hook to enable diary deletion functionality.
    • Added a delete button with a Trash2 icon to the CommonHeader for diary authors, including a confirmation alert and toast notifications.
    • Replaced the Separator component with a YStack to create a thicker visual separator.
    • Removed border and background styling from the comment form container.
  • src/features/diary/screens/DiaryDetailScreen/services/api.ts
    • Added a new deleteDiary API function for deleting diaries.
  • src/features/diary/types/diary.types.ts
    • Added a mine: boolean property to the DiaryDetail type.
  • src/features/group/screens/GroupCreateScreen/index.tsx
    • Removed border and set background color for the group name input field.
    • Updated disabledStyle for the create group button.
  • src/features/group/screens/GroupListScreen/components/GroupActionSheet.tsx
    • Replaced ListItem components with custom XStack layouts for "그룹 생성" and "그룹 참여" actions, including icons, titles, descriptions, and a ChevronRight icon.
    • Updated the "닫기" button styling to chromeless.
  • src/features/group/screens/GroupListScreen/components/GroupCard.tsx
    • Added memberCount and lastDiaryAt to the GroupCardProps interface.
    • Removed bordered and elevate props from the Card component.
    • Added backgroundColor, borderWidth, and borderColor to the Card component.
    • Changed H2 to Text for the group name and adjusted its font size, weight, and color.
    • Updated the Card.Footer to display lastDiaryAt and memberCount with corresponding icons, and adjusted text styles.
    • Changed the text color for pending group status.
  • src/features/group/screens/GroupListScreen/components/GroupList.tsx
    • Removed isLoading, isError, and refetch from the useSuspenseQuery destructuring.
  • src/features/group/screens/GroupListScreen/components/JoinGroupSheet.tsx
    • Removed border and set background color for the join code input field.
    • Updated the disabled condition for the join button to include checking if the code is empty.
    • Updated the join button styling with specific background, color, and disabled styles.
    • Updated the close button styling to chromeless.
  • src/features/group/screens/GroupScreen/components/DiarySpringItem.tsx
    • Changed the background color of the ConnectorLine component.
    • Removed elevate and bordered props from the Card component.
    • Added backgroundColor, borderWidth, and borderColor to the Card component, and removed shadow-related props.
    • Adjusted font sizes, weights, and colors for the author username and timestamp.
    • Adjusted font size, line height, and color for the diary content.
  • src/features/group/screens/GroupScreen/components/GroupDetailHeader.tsx
    • Removed the onActionPress prop from the component.
    • Removed the "Plus" icon button, previously used for creating diaries, from the header.
  • src/features/group/screens/GroupScreen/components/InviteCodeSheet.tsx
    • Removed border and set background color for the invite code input field.
    • Updated the close button styling to chromeless.
  • src/features/group/screens/GroupScreen/index.tsx
    • Imported the Plus icon and Button component.
    • Removed the onActionPress prop from GroupDetailHeader.
    • Added a floating action button (FAB) with a Plus icon for creating diaries.
  • src/features/group/screens/GroupScreen/utils/groupByDate.ts
    • Changed the date formatting utility from formatRelativeTime to formatDateLabel for grouping diaries by date.
  • src/features/group/types/group.types.ts
    • Added code, memberCount, and lastDiaryAt properties to the Group type interface.
  • src/features/notification/screens/NotificationScreen/components/GroupRequestSheet.tsx
    • Replaced the ListItem component with a Button for the "수락" (Accept) action and updated its styling.
    • Updated the "닫기" (Close) button styling to chromeless.
  • src/navigation/components/NavigationContent.tsx
    • Imported the useTheme hook.
    • Added contentStyle to screenOptions in Stack.Navigator to set the background color based on the current theme.
  • src/utils/formatDate.ts
    • Refactored formatRelativeTime to handle various time ranges (less than 7 days, current year, previous years) and removed the options parameter.
    • Added a new formatDateLabel function for date grouping, providing specific formats like "오늘" (Today), "어제" (Yesterday), "n일 전" (n days ago), "M월 d일" (Month Day), and "yyyy. M. d" (Year. Month. Day).
  • themes.ts
    • Refined lightPalette and darkPalette with more descriptive comments and adjusted HSLA values to improve visual hierarchy and consistency for text and background colors.
    • Adjusted lightShadows for a softer visual appearance.
    • Added a cardBackground property to the base theme for both light and dark modes.
    • Updated the accent palette with new HSLA values, aiming for a rose-toned accent color.
    • Removed commented-out grandChildrenThemes.
  • yarn.lock
    • Updated the entry for react-native-nitro-modules.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request introduces a significant UI refresh across the application, aligning components with a new, more consistent design system and color palette. It also adds group information to the group list, such as member count and last activity, and implements a feature to delete diaries. The code is generally well-structured, but there are a few areas for improvement. I've identified a critical issue in DiaryDetailScreen that could lead to a crash due to unsafe access of data that might be undefined during loading. I've also suggested a refactoring for better readability and pointed out a potential maintenance issue with a modified dependency file.

<CommonHeader />
<CommonHeader
right={
diary.mine ? (
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

critical

The diary object can be undefined while data is loading, as useDiaryDetailQuery doesn't appear to be a suspense query. Accessing diary.mine here will cause a crash. The entire component body that relies on diary should be conditionally rendered only after diary is available. This also applies to DiaryContent on line 92.

Comment on lines +10 to +17
const PACKAGE_VERSION = '2.12.4'
const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
const activeClientIds = new Set()

addEventListener("install", function () {
self.skipWaiting();
});
addEventListener('install', function () {
self.skipWaiting()
})
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

The comment at the top of this file states Please do NOT modify this file.. The changes in this file appear to be stylistic formatting (e.g., changing double quotes to single quotes, removing semicolons), likely applied by a code formatter. Modifying this auto-generated file from the msw dependency can lead to maintenance issues and merge conflicts when updating the package. It's recommended to exclude this file from your formatting and linting tools.

Comment on lines +60 to +85
onPress={() =>
Alert.alert("일기 삭제", "정말 이 일기를 삭제하시겠습니까?", [
{ text: "취소", style: "cancel" },
{
text: "삭제",
style: "destructive",
onPress: () =>
deleteMutation.mutate(
{ groupId, diaryId },
{
onSuccess: () => {
toast.show("일기가 삭제되었습니다.", {
native: true,
});
navigation.goBack();
},
onError: () => {
toast.show("일기 삭제에 실패했습니다.", {
native: true,
});
},
},
),
},
])
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

This inline onPress handler is quite complex. To improve readability and maintainability, consider extracting this logic into a separate named function within the component.

For example, you could define a handleDeleteDiary function and call it from onPress:

const handleDeleteDiary = () => {
  Alert.alert("일기 삭제", "정말 이 일기를 삭제하시겠습니까?", [
    { text: "취소", style: "cancel" },
    {
      text: "삭제",
      style: "destructive",
      onPress: () => {
        deleteMutation.mutate(
          { groupId, diaryId },
          {
            onSuccess: () => {
              toast.show("일기가 삭제되었습니다.", { native: true });
              navigation.goBack();
            },
            onError: () => {
              toast.show("일기 삭제에 실패했습니다.", { native: true });
            },
          }
        );
      },
    },
  ]);
};

Then use onPress={handleDeleteDiary} in your Button.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant