Merge pull request #494 from New-Barams/feat/#493/page-prefetch

[노철] - 페이지 서버컴포넌트 변경

src/apis/client/getUserInformation.ts

@@ -3,5 +3,7 @@ import { axiosInstanceClient } from '@apis/axiosInstanceClient';
 import { DOMAIN } from '@constants/api';
 
 export const getUserInformation = () => {
-  return axiosInstanceClient<GetUserInformationResponse>(DOMAIN.GET_USERS);
+  return axiosInstanceClient<GetUserInformationResponse>(DOMAIN.GET_USERS).then(
+    (res) => res.data,
+  );
 };

src/apis/server/getPlanServer.ts

@@ -0,0 +1,12 @@
+import { axiosInstanceServer } from '@/apis/axiosInstanceServer';
+import { DOMAIN } from '@/constants/api';
+import { GetPlanResponse } from '@/types/apis/plan/GetPlan';
+
+export const getPlanServer = async (id: number, isLogin: boolean) => {
+  const { data } = await axiosInstanceServer.get<GetPlanResponse>(
+    DOMAIN.GET_PLANS(id),
+    { authorization: isLogin },
+  );
+
+  return data;
+};

src/apis/server/getUserInformationServer.ts

@@ -0,0 +1,9 @@
+import { GetUserInformationResponse } from '@/types/apis/users/GetUserInformation';
+import { DOMAIN } from '@constants/api';
+import { axiosInstanceServer } from '../axiosInstanceServer';
+
+export const getUserInformationServer = () => {
+  return axiosInstanceServer<GetUserInformationResponse>(DOMAIN.GET_USERS).then(
+    (res) => res.data,
+  );
+};

src/app/login/page.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { KAKAO_LOGIN_URL, UN_AUTH_URL } from '@/constants';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -26,6 +24,7 @@ export default function LoginPage() {
         </div>
         <div className="login__poster">
           <Image
+            priority
             className="login__poster--image"
             src={characters}
             alt="올해도 아좌좌 캐릭터들"

src/app/my/_components/MyPageContent/MyPageContent.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import {
+  Button,
+  Icon,
+  ModalBasic,
+  ModalVerification,
+  Popover,
+} from '@/components';
+import Link from 'next/link';
+import useMyPage from '../../hooks/useMyPage';
+import ModalRemindWay from '../ModalRemindWay/ModalRemindWay';
+import './index.scss';
+
+export default function MyPageContent() {
+  const {
+    receiveType,
+    nickname,
+    remindEmail,
+    defaultEmail,
+    emailVerified,
+    isChangeReceiveTypePending,
+    handleLogOut,
+    handleWithdrawal,
+    handleSetVerifiedEmail,
+    handleChangeNickName,
+    handleChangeReceiveType,
+  } = useMyPage();
+
+  return (
+    <div className="my-page__wrapper">
+      <h1 className="my-page__header font-size-xl">마이페이지</h1>
+      <div className="my-page__content">
+        <h1 className="my-page__welcome-text font-size-xl">
+          <span>안녕하세요, </span>
+          <span>
+            <span className="color-origin-primary">{nickname}</span>님!
+          </span>
+        </h1>
+        <div className="my-page__nick-name">
+          <h2 className="my-page__nick-name--label font-size-lg">닉네임</h2>
+          <div className="my-page__nick-name--content">
+            <div className="my-page__nick-name--content--main">
+              {nickname}
+              <button onClick={handleChangeNickName}>
+                <Icon
+                  name="REFRESH"
+                  color="text-100"
+                  size="xl"
+                  isFilled={true}
+                />
+              </button>
+            </div>
+            <div className="my-page__nick-name--content--alert font-size-xs">
+              새로고침 버튼 클릭시 닉네임이 랜덤으로 변경됩니다.
+            </div>
+          </div>
+        </div>
+        <div className="my-page__account">
+          <h2 className="my-page__account--label font-size-lg">
+            연결된 계정 및 이메일
+          </h2>
+          <div className="my-page__account--content font-size-base">
+            <div className="my-page__account--content--kakao ">
+              <h3>카카오톡 : {defaultEmail} </h3>
+            </div>
+            <div className="my-page__account--content--email">
+              <h3>
+                이메일 :{' '}
+                {emailVerified ? remindEmail : '이메일 인증이 필요합니다.'}{' '}
+              </h3>
+            </div>
+          </div>
+          <Popover.Main>
+            <Popover.Trigger>
+              <Button border={false} background="primary" color="white-100">
+                이메일 {emailVerified ? '변경' : '인증'}
+              </Button>
+            </Popover.Trigger>
+            <Popover.Content
+              renderModalContent={(onClickNo) => (
+                <ModalVerification
+                  handleCloseModal={onClickNo}
+                  setVerifiedEmail={handleSetVerifiedEmail}
+                  defaultValue={emailVerified ? '' : defaultEmail}>
+                  이메일 {emailVerified ? '변경' : '인증'}
+                </ModalVerification>
+              )}
+            />
+          </Popover.Main>
+        </div>
+        <div className="my-page__remindway">
+          <h2 className="my-page__remindway--label font-size-lg">
+            리마인드 및 응원 메시지
+          </h2>
+          <div className="my-page__remindway--content font-size-base">
+            {receiveType === 'both' ? (
+              <p className="color-origin-primary">
+                이메일<span className="color-origin-text-100">과</span> 카카오톡
+              </p>
+            ) : (
+              <span className="color-origin-primary">
+                {receiveType === 'email' ? '이메일' : '카카오톡'}
+              </span>
+            )}
+            을 통해서 리마인드 및 응원 메시지를 받고 있어요
+          </div>
+          <Popover.Main>
+            <Popover.Trigger>
+              <Button border={false} background="primary" color="white-100">
+                알림 방식 변경
+              </Button>
+            </Popover.Trigger>
+            <Popover.Content
+              renderModalContent={(onClickNo) => (
+                <ModalRemindWay
+                  isVerified={emailVerified}
+                  confirmSentence="변경하기"
+                  isPending={isChangeReceiveTypePending}
+                  receiveType={receiveType}
+                  onClickYes={handleChangeReceiveType}
+                  onClickNo={onClickNo}>
+                  알림 방식 변경
+                </ModalRemindWay>
+              )}
+            />
+          </Popover.Main>
+        </div>
+        <div className="my-page__etc font-size-base">
+          <Link
+            className="my-page__etc--notice color-origin-text-100"
+            href={'/notice'}>
+            공지사항
+          </Link>
+          <Popover.Main>
+            <Popover.Trigger>
+              <button className="my-page__etc--logout color-origin-text-100">
+                로그아웃
+              </button>
+            </Popover.Trigger>
+            <Popover.Content
+              renderModalContent={(onClickNo) => (
+                <ModalBasic
+                  onClickNo={onClickNo}
+                  onClickYes={handleLogOut}
+                  confirmSentense="로그아웃 하기">
+                  로그아웃 하시겠습니까?
+                </ModalBasic>
+              )}
+            />
+          </Popover.Main>
+          <Popover.Main>
+            <Popover.Trigger>
+              <button className="my-page__etc--withdrawal color-origin-text-300">
+                회원 탈퇴
+              </button>
+            </Popover.Trigger>
+            <Popover.Content
+              renderModalContent={(onClickNo) => (
+                <ModalBasic
+                  onClickYes={handleWithdrawal}
+                  onClickNo={onClickNo}
+                  confirmSentense="회원탈퇴 하기">
+                  정말 회원 탈퇴를 진행 하시겠습니까? 탈퇴시 모든 정보가
+                  삭제됩니다.
+                </ModalBasic>
+              )}
+            />
+          </Popover.Main>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/my/hooks/useMyPage.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { deleteUsers } from '@/apis/client/deleteUsers';
 import { ajajaToast } from '@/components/Toaster/customToast';
 import { KAKAO_LOGOUT_URL } from '@/constants/login';