[Feature] 개인별 그룹 색상 할당 기능 구현

src/StudyDataHydrator.tsx

@@ -36,13 +36,8 @@ const StudyDataHydrator = ({ children }: PropsWithChildren) => {
         const todayRecord = todayStudyRecords.find(
           record => record.categoryId === studyStateData.categoryId,
         );
-        if (todayRecord == null) {
-        // eslint-disable-next-line no-console
-          console.error('Today study record must be defined when starting study session');
-          return;
-        }
 
-        const recordedStudyTime = todayRecord.time;
+        const recordedStudyTime = todayRecord?.time ?? Time.fromMilliseconds(0);
         const progressiveStudyTime = Time.fromMilliseconds(
           new Date().getTime() - studyStateData.startTime.getTime(),
         );

src/components/Icon/IconSet.tsx

@@ -32,6 +32,7 @@ import NotiOffOutline from '@icons/icon-noti-off-outline.svg'
 import SendRight from '@icons/icon-send-right.svg'
 import TrashBin from '@icons/icon-trash-bin.svg'
 import Camera from '@icons/icon-camera.svg'
+import Palette from '@icons/icon-palette.svg'
 
 import type { Icon, MultiIcon } from '@/types/icon'
 import { SvgProps } from 'react-native-svg'
@@ -86,6 +87,7 @@ type IconSetComponent = {
   SendRight: Icon;
   TrashBin: Icon;
   Camera: Icon;
+  Palette: Icon;
 }
 
 const IconSet: IconSetComponent = {
@@ -106,23 +108,24 @@ const IconSet: IconSetComponent = {
   DogFootprint: withDefaultProps(DogFootprint, { color: theme.color.red[100] }),
   ArrowLeft: withDefaultProps(ArrowLeft, { color: COLOR_GRAY }),
   Edit: withDefaultProps(Edit, { color: COLOR_GRAY }),
-  Study: withDefaultProps(Study, { color: theme.color.neutral['white'] }),
-  LockFilled: withDefaultProps(LockFilled, { color: theme.color.neutral[500] }),
-  LockOutline: withDefaultProps(LockOutline, { color: theme.color.neutral[500] }),
-  UnlockFilled: withDefaultProps(UnlockFilled, { color: theme.color.neutral[500] }),
-  Invite: withDefaultProps(Invite, { color: theme.color.neutral[500] }),
-  Graph: withDefaultProps(Graph, { color: theme.color.neutral[500] }),
-  Ranking: withDefaultProps(Ranking, { color: theme.color.neutral[500] }),
-  Chat: withDefaultProps(Chat, { color: theme.color.neutral[500] }),
-  More: withDefaultProps(More, { color: theme.color.neutral[500] }),
-  Person: withDefaultProps(Person, { color: theme.color.neutral[500] }),
-  DoorOpened: withDefaultProps(DoorOpened, { color: theme.color.neutral[500] }),
-  Setting: withDefaultProps(Setting, { color: theme.color.neutral[500] }),
-  NotiOnFilled: withDefaultProps(NotiOnFilled, { color: theme.color.neutral[500] }),
-  NotiOffOutline: withDefaultProps(NotiOffOutline, { color: theme.color.neutral[500] }),
-  SendRight: withDefaultProps(SendRight, { color: theme.color.neutral[500] }),
-  TrashBin: withDefaultProps(TrashBin, { color: theme.color.neutral[500] }),
-  Camera: withDefaultProps(Camera, { color: theme.color.neutral['white'] }),
+  Study: withDefaultProps(Study, { color: COLOR_WHITE }),
+  LockFilled: withDefaultProps(LockFilled, { color: COLOR_GRAY }),
+  LockOutline: withDefaultProps(LockOutline, { color: COLOR_GRAY }),
+  UnlockFilled: withDefaultProps(UnlockFilled, { color: COLOR_GRAY }),
+  Invite: withDefaultProps(Invite, { color: COLOR_GRAY }),
+  Graph: withDefaultProps(Graph, { color: COLOR_GRAY }),
+  Ranking: withDefaultProps(Ranking, { color: COLOR_GRAY }),
+  Chat: withDefaultProps(Chat, { color: COLOR_GRAY }),
+  More: withDefaultProps(More, { color: COLOR_GRAY }),
+  Person: withDefaultProps(Person, { color: COLOR_GRAY }),
+  DoorOpened: withDefaultProps(DoorOpened, { color: COLOR_GRAY }),
+  Setting: withDefaultProps(Setting, { color: COLOR_GRAY }),
+  NotiOnFilled: withDefaultProps(NotiOnFilled, { color: COLOR_GRAY }),
+  NotiOffOutline: withDefaultProps(NotiOffOutline, { color: COLOR_GRAY }),
+  SendRight: withDefaultProps(SendRight, { color: COLOR_GRAY }),
+  TrashBin: withDefaultProps(TrashBin, { color: COLOR_GRAY }),
+  Camera: withDefaultProps(Camera, { color: COLOR_WHITE }),
+  Palette: withDefaultProps(Palette, { color: COLOR_GRAY }),
 };
 
 export default IconSet;

src/features/category/hooks/useCategoryColor.ts

@@ -0,0 +1,19 @@
+
+import { type GroupColorKey } from '@/constants/groupColors';
+import { useGroupsQuery } from '@/features/groups/api/queries';
+import { useGroupColorKey } from '@/features/groups/hooks/useGroupColorKey';
+import { theme } from '@/theme';
+
+const DEFAULT_COLOR_KEY: GroupColorKey = theme.color.primary[500];
+
+export const useCategoryColor = (categoryId: number) => {
+  const { data: groupsData } = useGroupsQuery();
+
+  const matchingGroupId =
+    groupsData?.find((g) => g.categoryIds.includes(categoryId))?.groupId ?? null;
+
+  const { colorKey: groupColor } = useGroupColorKey(matchingGroupId);
+  const colorKey = groupColor ?? DEFAULT_COLOR_KEY;
+
+  return { colorKey };
+};

src/features/groups/hooks/useGroupColorKey.ts

@@ -0,0 +1,50 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+
+import type { GroupColorKey } from '@/constants/groupColors';
+import { GROUP_COLORS } from '@/constants/groupColors';
+import { useProfileQuery } from '@/features/user/api/queries';
+import { ASYNC_KEYS, asyncStorage } from '@/utils/asyncStorage';
+
+const GROUP_COLOR_KEYS = Object.keys(GROUP_COLORS) as GroupColorKey[];
+
+const pickRandomGroupColorKey = (): GroupColorKey =>
+  GROUP_COLOR_KEYS[Math.floor(Math.random() * GROUP_COLOR_KEYS.length)];
+
+const isGroupColorKey = (v: string): v is GroupColorKey =>
+  (GROUP_COLOR_KEYS as readonly string[]).includes(v);
+
+export const useGroupColorKey = (groupId: number | null) => {
+  const { data: profileData } = useProfileQuery();
+  const userId = profileData?.id;
+  const qc = useQueryClient();
+
+  const queryKey = ['groupColor', userId, groupId];
+
+  const { data: colorKey } = useQuery({
+    queryKey,
+    enabled: userId != null && groupId != null,
+    queryFn: async () => {
+      if (userId == null || groupId == null) return null;
+
+      const storageKey = ASYNC_KEYS.groupColor(userId, groupId);
+      const stored = await asyncStorage.get(storageKey);
+
+      if (stored && isGroupColorKey(stored)) return stored;
+
+      const newKey = pickRandomGroupColorKey();
+      await asyncStorage.set(storageKey, newKey);
+      return newKey;
+    },
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+
+  const updateColorKey = async (next: GroupColorKey) => {
+    if (userId == null || groupId == null) return;
+
+    qc.setQueryData(queryKey, next);
+    await asyncStorage.set(ASYNC_KEYS.groupColor(userId, groupId), next);
+  };
+
+  return { colorKey: colorKey ?? null, updateColorKey };
+};

src/features/study/api/mutations.ts

@@ -26,6 +26,7 @@ export const useStartStudyMutation = () => {
         studyStatByDateQueryOptions(new Date()),
       );
       // TODO: 24시간이 넘어가는 공부시간에 대해 어떻게 처리할 것인지?
+      // TODO: StudyDataHydrator와 중복되는 로직 리팩토링
       const category = studyDataUtils.identifyCategory({
         categories: categories.data,
         categoryId: response.data.categoryId,
@@ -35,13 +36,7 @@ export const useStartStudyMutation = () => {
       const todayRecord = todayStudyRecords.find(
         record => record.categoryId === response.data.categoryId,
       );
-      if (todayRecord == null) {
-        // eslint-disable-next-line no-console
-        console.error('Today study record must be defined when starting study session');
-        return;
-      }
-
-      const recordedStudyTime = todayRecord.time;
+      const recordedStudyTime = todayRecord?.time ?? Time.fromMilliseconds(0);
       const progressiveStudyTime = Time.fromMilliseconds(
         new Date().getTime() - response.data.startTime.getTime(),
       );

src/layout/StackableScreenLayout/index.tsx

@@ -24,7 +24,7 @@ const StackableScreenLayout = ({
   headerElementColor = theme.color.primary[500],
   header,
   children,
-  safeAreas,
+  safeAreas = 'top',
   ...screenContainerProps
 }: StackableScreenProps) => {
   const navigation = useStackNavigation();

src/locales/ko/groupDetail.json

@@ -3,7 +3,7 @@
   "public-group": "공개 그룹",
   "private-group": "비공개 그룹",
   "ranking": "랭킹",
-  "statistics": "통계",
+  "color": "색상",
   "chat": "채팅",
   "setting": "설정",
   "member-list": "멤버 목록",
@@ -21,5 +21,6 @@
   "cannot-join-your-group": "본인이 속한 그룹에는 가입할 수 없어요.",
   "group-join-success": "그룹 가입이 완료되었습니다.",
   "group-join-request-sent": "그룹 참여 요청이 전송되었습니다.",
-  "failed-to-join-group": "그룹 가입에 실패했습니다. 다시 시도해주세요."
+  "failed-to-join-group": "그룹 가입에 실패했습니다. 다시 시도해주세요.",
+  "group-color-picker-title": "그룹 테마 색상 선택"
 }

src/screens/bottomTab/GroupsScreen/components/JoinedGroupPanel/index.tsx

@@ -2,6 +2,8 @@ import { GroupButton } from '@features/groups/ui';
 
 import { Button, Icon, Panel } from '@/components';
 import { useGroupsQuery } from '@/features/groups/api/queries';
+import { useGroupColorKey } from '@/features/groups/hooks/useGroupColorKey';
+import type { GetGroupsResponse } from '@/features/groups/model/groups';
 import { useStackNavigation } from '@/hooks';
 import { useTranslatedText } from '@/hooks/useTranslatedText';
 import { theme } from '@/theme';
@@ -14,34 +16,14 @@ const JoinedGroupPanel = () => {
   const tCreateNewGroup = useTranslatedText({ tKey: 'groups.create-new-group' });
   const navigation = useStackNavigation();
   const { data, isPending } = useGroupsQuery();
-
+  
   if (!data || isPending) return null;
 
   return (
     <Panel.View gap={theme.spacing[250]}>
       <Panel.View.Header title={tMyParticipatedGroups} />
       {data.length ?
-        data.map(group => {
-          const leaderImageUrl = 
-            group.profiles.find(profile => profile.role === 'LEADER')?.imageUrl ?? null;
-          const otherImageUrls = group.profiles
-            .filter(profile => profile.role !== 'LEADER')
-            .map(profile => profile.imageUrl);
-          return (
-            <GroupButton
-              achievedDailyGoalCount={5}
-              chatRoomId={group.chatRoomId}
-              // TODO: 그룹 색상 관리 방식 논의 후 수정 필요
-              groupColorKey={theme.color.blue[300]}
-              groupId={group.groupId}
-              groupName={group.groupName}
-              isPublic={group.isOpen}
-              key={group.groupId}
-              participantImageUrls={[leaderImageUrl, ...otherImageUrls]}
-              totalDailyGoalCount={10}
-            />
-          );
-        })
+        data.map(group => <GroupListItem group={group} key={group.groupId} />)
         :
         <EmptyFallback />}
       <Button.Basic
@@ -55,4 +37,29 @@ const JoinedGroupPanel = () => {
   );
 };
 
+const GroupListItem = ({ group }: { group: GetGroupsResponse['data'][number] }) => {
+  const { colorKey: groupColorKey } = useGroupColorKey(group.groupId);
+  if (!groupColorKey) return null;
+
+  const leaderImageUrl =
+    group.profiles.find(p => p.role === 'LEADER')?.imageUrl ?? null;
+
+  const otherImageUrls = group.profiles
+    .filter(p => p.role !== 'LEADER')
+    .map(p => p.imageUrl);
+
+  return (
+    <GroupButton
+      achievedDailyGoalCount={5}
+      chatRoomId={group.chatRoomId}
+      groupColorKey={groupColorKey}
+      groupId={group.groupId}
+      groupName={group.groupName}
+      isPublic={group.isOpen}
+      participantImageUrls={[leaderImageUrl, ...otherImageUrls]}
+      totalDailyGoalCount={10}
+    />
+  );
+};
+
 export default JoinedGroupPanel;

src/screens/bottomTab/HomeScreen/components/StudyBottomSheet/core/GoalItemList.tsx

@@ -1,11 +1,13 @@
 import { startOfDay } from 'date-fns';
 
-import type { GroupColorKey } from '@/constants/groupColors';
 import { useCategoriesQuery } from '@/features/category/api/queries';
+import { useCategoryColor } from '@/features/category/hooks/useCategoryColor';
+import type { GetCategoriesResponse } from '@/features/category/model';
 import type { DAY_MASK_BY_UTC_CODE } from '@/features/category/model/types';
 import { CategoryProgressItem } from '@/features/category/ui';
 import { useStartStudyMutation } from '@/features/study/api/mutations';
 import { useStudyStatByDateQuery } from '@/features/study/api/queries';
+import type { GetStudyStatByDateResponse } from '@/features/study/model';
 import { formatDateToHMS, getDayByUTCCode } from '@/utils/date';
 import { Time } from '@/utils/Time';
 
@@ -22,8 +24,6 @@ const GoalItemList = ({
 }: GoalItemListProps) => {
   const { data: categoryData, isPending: isCategoryDataPending } = useCategoriesQuery();
   const { data: studyData, isPending: isStudyDataPending } = useStudyStatByDateQuery(selectedDate);
-
-  const { startStudyMutate } = useStartStudyMutation();
 
   if (!categoryData || isCategoryDataPending) return null;
   if (!studyData || isStudyDataPending) return null;
@@ -37,38 +37,61 @@ const GoalItemList = ({
         getDayByUTCCode(selectedDate.getDay() as keyof typeof DAY_MASK_BY_UTC_CODE)
       ]; 
     })
-    .map(category => {
-      const onStudyButtonPress = () => {
-        startStudyMutate({
-          categoryId: category.id,
-          // TODO: 임시 카테고리 기능 구현 후 수정 필요
-          temporaryName: null,
-          startTime: formatDateToHMS(new Date()),
-        }, {
-          onSuccess: () => {
-            setBottomSheetEnabled(false);
-          },
-        });
-      };
-      const studyTime =
-        studyData.find(stat => stat.categoryId === category.id)?.time ?? Time.fromSeconds(0);
+    .map(category => 
+      <GoalItemListElement
+        category={category}
+        key={category.id}
+        selectedDate={selectedDate}
+        setBottomSheetEnabled={setBottomSheetEnabled}
+        studyData={studyData}
+      />);
+
+  return (
+    categoryNodes.length ? categoryNodes : <EmptyFallback />
+  );
+};
 
-      return (
-        <CategoryProgressItem
-          cumulativeTime={studyTime}
-          goalTime={category.goal}
-          groupColorKey={category.color as GroupColorKey}
-          isCompleted={false}
-          key={category.id}
-          onStudyButtonPress={onStudyButtonPress}
-          studyButtonVisible={selectedDate.toDateString() === new Date().toDateString()}
-          title={category.name}
-        />
-      );
+const GoalItemListElement = ({
+  category,
+  studyData,
+  setBottomSheetEnabled,
+  selectedDate,
+}: { 
+  category: GetCategoriesResponse['data'][number]; 
+  studyData: GetStudyStatByDateResponse['data'];
+  setBottomSheetEnabled: (enabled: boolean) => void; 
+  selectedDate: Date;
+}) => {
+  const { startStudyMutate } = useStartStudyMutation();
+  const { colorKey: categoryColor } = useCategoryColor(category.id);
+
+  const onStudyButtonPress = () => {
+    startStudyMutate({
+      categoryId: category.id,
+      // TODO: 임시 카테고리 기능 구현 후 수정 필요
+      temporaryName: null,
+      startTime: formatDateToHMS(new Date()),
+    }, {
+      onSuccess: () => {
+        setBottomSheetEnabled(false);
+      },
     });
+  };
+  const studyTime = studyData.find(
+    stat => stat.categoryId === category.id,
+  )?.time ?? Time.fromSeconds(0);
 
   return (
-    categoryNodes.length ? categoryNodes : <EmptyFallback />
+    <CategoryProgressItem
+      cumulativeTime={studyTime}
+      goalTime={category.goal}
+      groupColorKey={categoryColor}
+      isCompleted={false}
+      key={category.id}
+      onStudyButtonPress={onStudyButtonPress}
+      studyButtonVisible={selectedDate.toDateString() === new Date().toDateString()}
+      title={category.name}
+    />
   );
 };