[Fix] QA 수정사항 반영 및 디자인 시스템 수정사항 반영

src/apis/follow.ts

@@ -1,15 +1,10 @@
 import getQueryKey from '@/apis/getQueryKey';
 import apiInstance from '@/apis/instance.api';
+import { type FollowMemberType } from '@/apis/schema/member';
 import { type MissionItemTypeWithRecordId } from '@/apis/schema/mission';
 import { useQuery, type UseQueryOptions } from '@tanstack/react-query';
 
-interface FollowMember {
-  memberId: number;
-  nickname: string;
-  profileImageUrl: string;
-}
-
-type GetFollowMembersResponse = FollowMember[];
+type GetFollowMembersResponse = FollowMemberType[];
 
 interface GetFollowMissionsResponse {
   symbolStack: number;

src/apis/record.ts

@@ -46,7 +46,11 @@ type GetRecordsParams = {
   yearMonth: string;
 };
 
-type GetRecordsResponse = RecordType[];
+interface GetRecordsResponse {
+  missionFinishedAt: string;
+  missionStartedAt: string;
+  missionRecords: RecordType[];
+}
 
 type GetRecordDetailResponse = RecordType & {
   sinceDay: number;

src/apis/schema/member.ts

@@ -17,6 +17,11 @@ export interface MemberType {
   username: string;
 }
 
+export interface FollowMemberType {
+  memberId: number;
+  nickname: string;
+  profileImageUrl: string;
+}
 
 export type FollowStatusType = 'FOLLOWING' | 'FOLLOWED_BY_ME' | 'NOT_FOLLOWING';
 
@@ -25,4 +30,3 @@ export enum FileExtension {
   JPG = 'JPG',
   PNG = 'PNG',
 }
-

src/app/guest/mission/stopwatch/page.tsx

@@ -91,9 +91,11 @@ export default function GuestMissionStopwatchPage() {
       </section>
       <section className={buttonContainerCss}>
         {step === 'ready' && (
-          <Button variant="cta" size="large" type="button" onClick={onStart}>
-            시작
-          </Button>
+          <div className={fixedButtonContainerCss}>
+            <Button variant="primary" size="large" type="button" onClick={onStart}>
+              시작
+            </Button>
+          </div>
         )}
         {step === 'progress' && (
           <>
@@ -167,3 +169,16 @@ const buttonContainerCss = css({
   justifyContent: 'center',
   gap: '12px',
 });
+
+const fixedButtonContainerCss = css({
+  position: 'fixed',
+  left: '16px',
+  right: '16px',
+  bottom: '16px',
+  width: '100%',
+  maxWidth: 'calc(475px  - 48px)',
+  margin: '0 auto',
+  '@media (max-width: 475px)': {
+    maxWidth: 'calc(100vw  - 48px)',
+  },
+});

src/app/home/FollowContent.tsx

@@ -1,32 +1,42 @@
 import { useSearchParams } from 'next/navigation';
 import { useFollowMembers } from '@/apis/follow';
+import { type FollowMemberType } from '@/apis/schema/member';
 import FollowMissionList from '@/app/home/FollowMissionList';
 import FollowSummary from '@/app/home/FollowSummary';
 import MissionList from '@/app/home/MissionList';
 import { flex } from '@styled-system/patterns';
 
 function FollowContent() {
-  const { data } = useFollowMembers();
-  const searchParams = useSearchParams();
+  const selectedFollowData = useGetSelectFollowData();
 
-  const id = searchParams.get('id') ? Number(searchParams.get('id')) : null;
-  const selectedFollowData = data?.find((profile) => profile.memberId === id);
   if (!selectedFollowData)
     return (
       <div className={containerCss}>
         <MissionList />
       </div>
     );
+
   return (
     <div className={containerCss}>
-      <FollowSummary followId={selectedFollowData.memberId} followNickname={selectedFollowData.nickname} />
+      <FollowSummary {...selectedFollowData} />
       <FollowMissionList followId={selectedFollowData.memberId} />
     </div>
   );
 }
 
 export default FollowContent;
 
+const useGetSelectFollowData = (): FollowMemberType | null => {
+  const { data } = useFollowMembers();
+  const searchParams = useSearchParams();
+
+  if (!searchParams.get('id')) return null;
+
+  const id = Number(searchParams.get('id'));
+  const selectedFollowData = data?.find((profile) => profile.memberId === id);
+  return selectedFollowData ?? null;
+};
+
 const containerCss = flex({
   flexDirection: 'column',
   padding: '0 16px 30px',

src/app/home/FollowSummary.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { useGetMissionStack } from '@/apis/mission';
+import { type FollowMemberType } from '@/apis/schema/member';
 import Banner from '@/components/Banner/Banner';
 import LevelProgressBar from '@/components/Graph/LevelProgressBar';
 import Icon from '@/components/Icon';
@@ -11,12 +12,9 @@ import { calcProgress, getLevel } from '@/utils/result';
 import { css, cx } from '@styled-system/css';
 import { flex } from '@styled-system/patterns';
 
-interface FollowSummaryProps {
-  followId: number;
-  followNickname: string;
-}
+type FollowSummaryProps = FollowMemberType;
 
-function FollowSummary({ followId, followNickname }: FollowSummaryProps) {
+function FollowSummary({ memberId: followId, nickname: followNickname, profileImageUrl }: FollowSummaryProps) {
   const { data: stackData } = useGetMissionStack(followId.toString());
   const symbolStack = stackData?.symbolStack ?? 0;
   const currentLevel = getLevel(symbolStack);
@@ -25,7 +23,7 @@ function FollowSummary({ followId, followNickname }: FollowSummaryProps) {
   return (
     <div>
       <div className={followSummaryTitleCss}>
-        <Thumbnail size={'h36'} />
+        <Thumbnail size={'h18'} url={profileImageUrl} variant="filled" />
         <Link href={ROUTER.PROFILE.DETAIL(followId)}>
           <p className={followSummaryTextCss}>
             {followNickname} <Icon name={'arrow-forward'} size={12} />
@@ -40,7 +38,9 @@ function FollowSummary({ followId, followNickname }: FollowSummaryProps) {
             <span className={cx(levelLabelCss, gradientTextCss)}>{symbolStack}</span>
           </div>
           <p className={LevelNameCss}>{currentLevel.label}</p>
-          <LevelProgressBar current={progress} isLabel={false} backgroundColor={'purple.purple500'} />
+          <div className={levelProgressBarWrapperCss}>
+            <LevelProgressBar current={progress} isLabel={false} backgroundColor={'purple.purple500'} />
+          </div>
         </div>
       </div>
     </div>
@@ -51,8 +51,11 @@ export default FollowSummary;
 
 const followLevelInfoCss = flex({
   flexDirection: 'column',
-  paddingRight: '24px',
   justifyContent: 'center',
+  width: '90px',
+  flex: 0,
+  minWidth: '90px',
+  maxWidth: '90px',
 });
 
 const LevelNameCss = css({
@@ -78,6 +81,7 @@ const followBannerCss = flex({
   gap: '24px',
   marginBottom: '20px',
 });
+
 const followSummaryTitleCss = flex({
   padding: '12px 4px',
   flexDirection: 'row',
@@ -92,3 +96,7 @@ const followSummaryTextCss = flex({
   alignItems: 'center',
   gap: '4px',
 });
+
+const levelProgressBarWrapperCss = css({
+  width: '70px',
+});

src/app/mission/[id]/detail/MissionCalender/MissionCalendar.tsx

@@ -27,6 +27,7 @@ function MissionCalendar({
     missionId,
     yearMonth: getYearMonth(currentDate),
   });
+  const missionStartedAt = data?.missionStartedAt || '';
 
   return (
     <section>
@@ -46,12 +47,21 @@ function MissionCalendar({
             <tr key={i}>
               {week.map((day, index) => {
                 if (!day) return <td key={'calender-null-' + index} className={missionCalendarTdCss} />;
-                const { routerLink, ...restProps } = getMissionCalendarItemProps(day.date, data || [], isFollow);
+                const { routerLink, ...restProps } = getMissionCalendarItemProps(
+                  missionStartedAt,
+                  day,
+                  data?.missionRecords || [],
+                  isFollow,
+                );
                 return (
                   <td key={`${day.year}-${day.month}-${day.date}`} className={missionCalendarTdCss}>
-                    <Link href={getMissionCalendarItemProps(day.date, data || [], isFollow).routerLink}>
+                    {routerLink ? (
+                      <Link href={routerLink}>
+                        <MissionCalendarItem date={day.date} {...restProps} isActive={day.date === selectedDate} />
+                      </Link>
+                    ) : (
                       <MissionCalendarItem date={day.date} {...restProps} isActive={day.date === selectedDate} />
-                    </Link>
+                    )}
                   </td>
                 );
               })}

src/app/mission/[id]/detail/MissionCalender/MissionCalendar.utils.ts

@@ -1,5 +1,6 @@
 import { type RecordType } from '@/apis/schema/record';
 import { ROUTER } from '@/constants/router';
+import dayjs from 'dayjs';
 
 const getWeekArray = (totalDate: number, offsetDate: number) => {
   return Array.from({ length: 7 }, (_, i) => {
@@ -53,8 +54,32 @@ export const getCalenderInfo = (currentMonth: number, currentYear: number) => {
   return { monthCalendarData };
 };
 
-export const getMissionCalendarItemProps = (date: number, records: RecordType[], isFollow?: boolean) => {
-  const filterRecord = records.filter((record) => record.missionDay === date);
+export const getMissionCalendarItemProps = (
+  missionStartAt: string,
+  day: {
+    year: number;
+    month: number;
+    date: number;
+  },
+  records: RecordType[],
+  isFollow?: boolean,
+) => {
+  console.log({ missionStartAt, day });
+  const isMissionStarted =
+    dayjs(missionStartAt.split(' ')[0]).isBefore(dayjs(`${day.year}-${day.month}-${day.date}`)) ||
+    dayjs(missionStartAt.split(' ')[0]).isSame(dayjs(`${day.year}-${day.month}-${day.date}`));
+  const filterRecord = records.filter((record) => record.missionDay === day.date);
+  console.log({
+    isMissionStarted,
+    filterRecord,
+    missionStartAt,
+  });
+  if (!isMissionStarted) {
+    return {
+      routerLink: '',
+      imageUrl: undefined,
+    };
+  }
   if (filterRecord.length > 0) {
     return {
       routerLink: isFollow

src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi.tsx

@@ -9,7 +9,6 @@ function MissionHistoryBannerApi({ missionId }: { missionId: string }) {
   const description = data.content;
   const imageUrl = MISSION_CATEGORY_LABEL[data.category].imgUrl;
 
-  // TODO: 디자인 시스템으로 변경 필요
   return <MissionHistoryBanner title={title} description={description} imageUrl={imageUrl} />;
 }
 

src/app/mission/[id]/detail/MissionHistoryTab.tsx

@@ -38,5 +38,5 @@ const missionHistoryTabCss = css({
   display: 'flex',
   flexDirection: 'column',
   gap: '20px',
-  padding: '24px 16px 172px 16px',
+  padding: '24px 16px 192px 16px',
 });

src/app/mission/[id]/stopwatch/page.tsx

@@ -212,9 +212,11 @@ export default function StopwatchPage() {
         </section>
         <section className={cx(buttonContainerCss, opacityAnimation)}>
           {step === 'ready' && (
-            <Button variant="cta" size="large" type="button" onClick={onStart} disabled={isStopwatchPending}>
-              시작
-            </Button>
+            <div className={fixedButtonContainerCss}>
+              <Button variant="primary" size="large" type="button" onClick={onStart} disabled={isStopwatchPending}>
+                시작
+              </Button>
+            </div>
           )}
           {step === 'progress' && (
             <>
@@ -293,3 +295,16 @@ const buttonContainerCss = css({
 const opacityAnimation = css({
   animation: 'fadeIn .7s',
 });
+
+const fixedButtonContainerCss = css({
+  position: 'fixed',
+  left: '16px',
+  right: '16px',
+  bottom: '16px',
+  width: '100%',
+  maxWidth: 'calc(475px  - 48px)',
+  margin: '0 auto',
+  '@media (max-width: 475px)': {
+    maxWidth: 'calc(100vw  - 48px)',
+  },
+});

src/app/record/[id]/detail/HistoryThumbnail.tsx

@@ -20,6 +20,15 @@ const historyThumbnailWrapperCss = css({
   width: '100%',
   aspectRatio: '1 / 1',
   position: 'relative',
+  borderRadius: '22px',
+  overflow: 'hidden',
+  maxWidth: 'calc(475px - 32px)',
+  maxHeight: 'calc(475px - 32px)',
+
+  '@media (max-width: 475px)': {
+    maxWidth: 'calc(100vw - 32px)',
+    maxHeight: 'calc(100vw - 32px)',
+  },
 });
 
 const positionCss = css({

src/app/record/[id]/page.tsx

@@ -266,6 +266,10 @@ const imageWrapperCss = css({
     background: 'rgba(0, 0, 0, 0.1)',
     pointerEvents: 'none',
   },
+
+  '& img': {
+    objectFit: 'cover',
+  },
 });
 
 const imageIconCss = css({

src/app/search/page.tsx

@@ -12,6 +12,7 @@ import { css } from '@/styled-system/css';
 
 function SearchPage() {
   const [input, setInput] = useState('');
+  const filteredInput = input.trim();
   return (
     <>
       <SearchBar placeholder="닉네임을 검색해 주세요." value={input} onChange={setInput} />
@@ -25,7 +26,7 @@ function SearchPage() {
           </>
         }
       >
-        <List nickname={input} />
+        <List nickname={filteredInput} />
       </Suspense>
     </>
   );

src/components/AppBarBottom/AppBarBottomVIew.tsx

@@ -19,10 +19,10 @@ function AppBarBottomView(props: Props) {
             <div
               onClick={() => props.onClick?.(item)}
               className={css(itemCss, {
-                color: isActive ? 'purple.purple800' : 'text.quaternary',
+                color: isActive ? 'purple.purple800' : 'purple.purple100',
               })}
             >
-              <Icon name={item.icon} color={isActive ? 'purple.purple800' : 'text.quaternary'} />
+              <Icon name={item.icon} color={isActive ? 'purple.purple800' : 'purple.purple100'} />
               <span>{item.name}</span>
             </div>
           </Link>
@@ -36,7 +36,6 @@ export default AppBarBottomView;
 
 const containerCss = flex({
   padding: '12px 16px 14px',
-  backgroundColor: 'rgba(42, 42, 51, 0.80)',
   backdropFilter: 'blur(20px)',
   width: 'fit-content',
   borderRadius: '24px',
@@ -46,6 +45,7 @@ const containerCss = flex({
   right: 0,
   margin: '16px auto',
   zIndex: 'appBar',
+  background: 'linear-gradient(91deg, rgba(35, 40, 52, 0.70) 0%, rgba(39, 40, 62, 0.70) 100%)',
 });
 
 const itemCss = {