Merge pull request #219 from depromeet/feat/setting

�feat: setting 페이지 마크업 및 기능(목표 거리 수정 / 탈퇴 / 로그아웃)을 구현했습니다.

app/api/goal/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { fetchData } from '@/apis/fetch-data';
+
+export type goalProps = {
+  goal: number;
+};
+
+export async function PATCH(request: NextRequest) {
+  try {
+    const { goal } = (await request.json()) as goalProps;
+    const data = await fetchData(`/goal`, 'PATCH', { goal });
+
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to update goal' },
+      { status: 500 },
+    );
+  }
+}

app/api/logout/route.ts

@@ -0,0 +1,12 @@
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+import { fetchData } from '@/apis/fetch-data';
+
+export async function GET() {
+  const data = await fetchData(`/logout`, 'GET');
+  cookies().delete('accessToken');
+  cookies().delete('refreshToken');
+
+  return NextResponse.json(data);
+}

app/api/member/route.ts

@@ -15,13 +15,7 @@ export interface MemberProps {
 }
 
 export async function GET() {
-  try {
-    const data = await fetchData<MemberProps>('/member', 'GET');
+  const data = await fetchData<MemberProps>('/member', 'GET');
 
-    return NextResponse.json(data);
-  } catch (error) {
-    console.error('Error fetching member data:', error);
-
-    return NextResponse.error();
-  }
+  return NextResponse.json(data);
 }

app/change-distance/page.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import { LoadingArea } from '@/components/atoms';
+import { BackButton, HeaderBar } from '@/components/molecules';
+import { useMemberData } from '@/features/setting/apis';
+import { SettingCalendar } from '@/features/setting/components';
+import { useSaveDialogHandler } from '@/features/setting/hooks';
+
+export default function Page() {
+  const router = useRouter();
+  const { data, error } = useMemberData();
+  const { openSaveModal } = useSaveDialogHandler();
+
+  const [selectedDistance, setSelectedDistance] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (data) {
+      setSelectedDistance(data.data.goal);
+    }
+  }, [data]);
+
+  if (!data) return <LoadingArea />;
+  if (error) return console.log(error);
+
+  const handleDistanceChange = (distance: number) => {
+    setSelectedDistance(distance);
+  };
+
+  const backButton = () => {
+    if (data.data.goal !== selectedDistance) {
+      openSaveModal();
+    } else {
+      router.push('/setting');
+    }
+  };
+
+  return (
+    <div>
+      <HeaderBar>
+        <HeaderBar.LeftContent>
+          <BackButton onClickBack={backButton} />
+        </HeaderBar.LeftContent>
+        <HeaderBar.Title>기록 시각화 기준 거리</HeaderBar.Title>
+      </HeaderBar>
+      <SettingCalendar
+        goal={data.data.goal}
+        selectedDistance={selectedDistance}
+        onDistanceChange={handleDistanceChange}
+      />
+    </div>
+  );
+}

app/delete-account/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import { BackButton, HeaderBar } from '@/components/molecules';
+import { Step1 } from '@/features/setting/components';
+import { Step2 } from '@/features/setting/components';
+import { Step3 } from '@/features/setting/components';
+
+export default function Page() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [step, setStep] = useState(1);
+
+  useEffect(() => {
+    const queryStep = searchParams.get('step');
+    if (queryStep) {
+      setStep(Number(queryStep));
+    }
+  }, [searchParams]);
+
+  const handleListItemClick = () => {
+    setStep(2);
+    router.push('?step=2');
+  };
+
+  const getStepComponent = (step: number) => {
+    switch (step) {
+      case 1:
+        return <Step1 onClickListItem={handleListItemClick} />;
+      case 2:
+        return <Step2 />;
+      case 3:
+        return <Step3 />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div>
+      <HeaderBar>
+        <HeaderBar.LeftContent>
+          <BackButton />
+        </HeaderBar.LeftContent>
+      </HeaderBar>
+      {getStepComponent(step)}
+    </div>
+  );
+}

app/delete-account/page.tsx

@@ -0,0 +1,16 @@
+import dynamic from 'next/dynamic';
+import React, { Suspense } from 'react';
+
+import { LoadingArea } from '@/components/atoms';
+
+const StepComponent = dynamic(() => import('./index'), {
+  suspense: true,
+});
+
+export default function Page() {
+  return (
+    <Suspense fallback={<LoadingArea />}>
+      <StepComponent />
+    </Suspense>
+  );
+}

app/setting/page.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { LoadingArea } from '@/components/atoms';
+import { NormalShapeIcon } from '@/components/atoms';
+import { Divider } from '@/components/atoms/divider';
+import { BackButton, HeaderBar } from '@/components/molecules';
+import { useLogout, useMemberData } from '@/features/setting/apis';
+import { ListItem } from '@/features/setting/components';
+import { useLogoutDialogHandler } from '@/features/setting/hooks/use-logout-dialog-handler';
+import { css } from '@/styled-system/css';
+import { flex } from '@/styled-system/patterns';
+
+export default function Page() {
+  const logout = useLogout();
+  const router = useRouter();
+
+  const { data, isLoading, error } = useMemberData();
+  const { openLogoutModal } = useLogoutDialogHandler(logout);
+
+  if (isLoading) {
+    return <LoadingArea />;
+  }
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  const handleGoToDeleteAccount = () => {
+    router.push('/delete-account?step=1');
+  };
+
+  // TODO: 관련 페이지 작업 필요
+  const handleGoToSetting = () => {
+    // console.log('라우팅 경로 지정 필요');
+  };
+
+  const handleGoToChangeDistance = () => {
+    router.push('/change-distance');
+  };
+
+  if (isLoading) return <LoadingArea />;
+  if (error) return console.log(error);
+
+  return (
+    <div>
+      <HeaderBar>
+        <HeaderBar.LeftContent>
+          <BackButton onClickBack={() => router.push('/')} />
+        </HeaderBar.LeftContent>
+        <HeaderBar.Title>설정</HeaderBar.Title>
+      </HeaderBar>
+      <ListItem
+        text="기록 시각화 기준 거리"
+        subText="달력 한 칸에 표시되는 최대 수영 거리"
+        distance={`${data?.data.goal.toLocaleString()}m`}
+        onClick={handleGoToChangeDistance}
+      >
+        <NormalShapeIcon />
+      </ListItem>
+      <Divider variant="thick" />
+      <ListItem text="서비스 이용 약관" onClick={handleGoToSetting}>
+        <NormalShapeIcon />
+      </ListItem>
+      <ListItem text="개인정보 처리방침" onClick={handleGoToSetting}>
+        <NormalShapeIcon />
+      </ListItem>
+      <ListItem text="오픈소스 라이선스" onClick={handleGoToSetting}>
+        <NormalShapeIcon />
+      </ListItem>
+      <Divider variant="thick" />
+      <ListItem text="로그아웃" onClick={openLogoutModal}>
+        <NormalShapeIcon />
+      </ListItem>
+      <ListItem text="탈퇴하기" onClick={handleGoToDeleteAccount}>
+        <NormalShapeIcon />
+      </ListItem>
+      <Divider variant="thick" />
+      <ListItem text="스위미팀에게 문의하기" onClick={handleGoToSetting}>
+        <NormalShapeIcon />
+      </ListItem>
+
+      <div className={dividerStyles}>
+        <div className={dividerTextStyles}>앱 버전 1.1</div>
+      </div>
+    </div>
+  );
+}
+
+const dividerStyles = flex({
+  height: '266px',
+  backgroundColor: 'line.alternative',
+  fontWeight: '500',
+});
+
+const dividerTextStyles = css({
+  color: 'text.alternative',
+  textStyle: 'body2.normal',
+  padding: '20px 16px',
+});

components/atoms/button/button.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { css } from '@/styled-system/css';
 
+import { StatisticsIcon } from '../icons';
 import BadgeIcon from '../icons/badge-icon';
-import StatisticsIcon from '../icons/statistics-icon';
 import { Button } from './button';
 
 const meta: Meta<typeof Button> = {

components/atoms/icons/badge-icon.tsx

@@ -1,4 +1,4 @@
-const BadgeIcon = () => {
+export function BadgeIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -13,5 +13,5 @@ const BadgeIcon = () => {
       />
     </svg>
   );
-};
+}
 export default BadgeIcon;

components/atoms/icons/index.ts

@@ -1,4 +1,6 @@
 export * from './album-icon';
+export * from './apple-logo-icon';
+export * from './badge-icon';
 export * from './bell-icon';
 export * from './camera-icon';
 export * from './check-icon';
@@ -12,19 +14,25 @@ export * from './delete-icon';
 export * from './divider-icon';
 export { DownArrowIcon } from './down-arrow-icon';
 export * from './find-member-icon';
+export * from './google-logo-icon';
+export * from './kakao-logo-icon';
 export { LeftArrowIcon } from './left-arrow-icon';
+export * from './loading-button-icon';
 export * from './loading-icon';
 export * from './logo-icon';
+export * from './normal-shape-icon';
 export * from './persons-icon';
 export * from './search-icon';
 export * from './setting-icon';
 export * from './speech-bubble-icon';
 export * from './star-icon';
 export * from './star-icon-fill';
+export * from './statistics-icon';
 export * from './success-check-icon';
 export * from './swim-icon';
 export * from './swimmer-icon';
 export * from './toast';
 export * from './triangle-arrow-icon';
 export * from './triangle-arrow-icon-reverse';
 export * from './types';
+export * from './user-image-icon';

components/atoms/icons/loading-button-icon.tsx

@@ -4,7 +4,7 @@ const spinAnimation = css({
   animation: 'spin 1s linear infinite',
 });
 
-export const LoadingButtonIcon = () => {
+export function LoadingButtonIcon() {
   return (
     <svg
       width="21"
@@ -40,4 +40,4 @@ export const LoadingButtonIcon = () => {
       </g>
     </svg>
   );
-};
+}

components/atoms/icons/normal-shape-icon.tsx

@@ -0,0 +1,20 @@
+export function NormalShapeIcon() {
+  return (
+    <svg
+      width="8"
+      height="16"
+      viewBox="0 0 8 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="Shape">
+        <path
+          id="Vector"
+          d="M1.72064 3.05413C1.38218 3.39259 1.38218 3.94133 1.72064 4.27979L5.44114 8.00029L1.72064 11.7208C1.38218 12.0593 1.38218 12.608 1.72064 12.9465C2.05909 13.2849 2.60783 13.2849 2.94629 12.9465L7.27961 8.61312C7.61807 8.27466 7.61807 7.72592 7.27961 7.38747L2.94629 3.05413C2.60783 2.71568 2.05909 2.71568 1.72064 3.05413Z"
+          fill="#37383C"
+          fillOpacity="0.61"
+        />
+      </g>
+    </svg>
+  );
+}

components/atoms/icons/statistics-icon.tsx

@@ -1,4 +1,4 @@
-const StatisticsIcon = () => {
+export function StatisticsIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -21,5 +21,4 @@ const StatisticsIcon = () => {
       />
     </svg>
   );
-};
-export default StatisticsIcon;
+}

features/profile/components/organisms/my-page.tsx

@@ -3,8 +3,8 @@
 import { useState } from 'react';
 
 import { Button } from '@/components/atoms';
+import { StatisticsIcon } from '@/components/atoms';
 import BadgeIcon from '@/components/atoms/icons/badge-icon';
-import StatisticsIcon from '@/components/atoms/icons/statistics-icon';
 import { Tab, TabItem } from '@/components/molecules';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';