[ feat ] 컴포넌트 구조 변경

src/app/login/oauth2/code/kakao/page.tsx

@@ -1,8 +1,15 @@
 import { postAuthKakao } from '@/api/auth';
-import LoginContainer from '@/container/login/oauth2/code/kakao/container';
+import LoginPageContainer from '@/domain/login/container';
+import { LoginService } from '@/domain/login/service';
+// import LoginContainer from '@/container/login/oauth2/code/kakao/container';
 
 export default async function KakaoLoginPage({ searchParams }: { searchParams: { code: string } }) {
-  const loginUserData = await postAuthKakao(searchParams.code);
-
-  return <LoginContainer loginUserData={loginUserData} />;
+  const { code } = searchParams;
+  return (
+    <>
+      <LoginPageContainer>
+        <LoginService code={code} />
+      </LoginPageContainer>
+    </>
+  );
 }

src/app/page.tsx

@@ -1,18 +1,12 @@
 import Header from '@/components/Common/Hedaer';
-import MainPageContainer from '@/container/container';
+import MainPageContainer from '@/domain/home/container';
+
 import MainLayout from '@/layouts/MainLayout';
 import { getLoginUserCookiesData } from '@/utils/common/cookies';
 
 export default async function Home() {
   const isLoggedIn = (await getLoginUserCookiesData()) ? true : false;
 
-  // 로그인 되어 있다면 Wishes 페이지로 리디렉션
-  // if (isLoggedIn) {
-  //   setTimeout(() => {
-  //     redirect('/wishes');
-  //   }, 500);
-  // }
-
   return (
     <>
       <Header isLoggedIn={isLoggedIn} />

src/app/wishes/page.tsx

@@ -8,19 +8,20 @@ import { ReceivedCakePresentList, WishesMessageToCreateUser } from '@/domain/wis
 
 export default async function WishesPage() {
   const progressWishesData = await getMainProgressWishesData();
-  const loginUserData = await getLoginUserCookiesData();
+  // const loginUserData = await getLoginUserCookiesData();
 
   return (
     <>
       <Header mypageBtn />
       <MainLayout>
-        <WishesPageContainer isWishProgress={!!progressWishesData} loginUserData={loginUserData}>
-          {progressWishesData && (
+        <WishesPageContainer>
+          <ReceivedCakePresentList wishId={progressWishesData.wishId} />
+          {/* {progressWishesData && (
             <>
               <WishesMessageToCreateUser wishId={progressWishesData.wishId} />
               <ReceivedCakePresentList wishId={progressWishesData.wishId} />
             </>
-          )}
+          )} */}
         </WishesPageContainer>
       </MainLayout>
     </>

src/domain/home/component.tsx

@@ -0,0 +1,17 @@
+import Image from 'next/image';
+import { MainCakeListImg } from '../../../public/assets/images';
+
+export function MainPageCenteredContent() {
+  return (
+    <div className="flex flex-col items-center">
+      <h1 className="text-[56px] leading-none text-main_blue mt-[91px] font-bitbit ">
+        조물주보다 <br />
+        생일선물주
+      </h1>
+      <Image src={MainCakeListImg} alt="케이크 리스트 이미지" priority></Image>
+      <span className="text-[24px] text-main_blue mt-[31px] font-bitbit">
+        현금으로 선물 받는 생일잔치
+      </span>
+    </div>
+  );
+}

src/domain/home/container.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouters } from '@/hooks/common/useRouters';
+import Button from '@/components/Common/Button';
+import { KakaoLoginIc } from '../../../public/assets/icons';
+import useToggle from '@/hooks/common/useToggle';
+import { PropsWithChildren } from 'react';
+import { MainPageCenteredContent } from './component';
+
+export default function MainPageContainer({ children }: PropsWithChildren) {
+  return (
+    <>
+      {children}
+      <MainPageCenteredContent />
+      <div className="flex flex-col gap-10">
+        <KakaoLoginButton />
+        <AlimTalkReceiveButton />
+      </div>
+    </>
+  );
+}
+
+export function KakaoLoginButton() {
+  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_KAKAO_RESTAPI_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI}`;
+
+  const { handleReplace } = useRouters();
+
+  const handleKaKaoLogin = () => {
+    handleReplace(KAKAO_AUTH_URL);
+  };
+
+  return (
+    <Button
+      bgColor="yellow"
+      fontColor="black"
+      onClick={handleKaKaoLogin}
+      styles={{ marginTop: '3.3rem' }}
+      icon={<Image src={KakaoLoginIc} alt="카카오 로고 아이콘" />}
+    >
+      카카오톡 로그인으로 시작하기
+    </Button>
+  );
+}
+
+export function AlimTalkReceiveButton() {
+  const handleKaKaoLogin = () => {};
+
+  return (
+    <Button bgColor="main_blue" fontColor="black" onClick={handleKaKaoLogin}>
+      생일 D-7 알림톡 받기
+    </Button>
+  );
+}

src/domain/login/container.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import Loading from '@/app/loading';
+import { useRouters } from '@/hooks/common/useRouters';
+import { LoginUserDataType } from '@/utils/common/cookies';
+import axios from 'axios';
+import { PropsWithChildren, useEffect } from 'react';
+
+export default function LoginPageContainer({ children }: PropsWithChildren) {
+  return <>{children}</>;
+}
+
+export function LoginWithSavedCookiesDatas({
+  loginUserData,
+}: {
+  loginUserData: LoginUserDataType;
+}) {
+  const { handleRouter } = useRouters();
+
+  useEffect(() => {
+    axios
+      .post('http://localhost:8080/api/set-cookies', JSON.stringify(loginUserData), {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+      .then(() => {
+        handleRouter('/wishes');
+      });
+
+    localStorage.setItem('accessToken', loginUserData.accessToken);
+    handleRouter('/wishes');
+  }, []);
+
+  return <Loading />;
+}

src/domain/login/service.tsx

@@ -0,0 +1,17 @@
+import { postAuthKakao } from '@/api/auth';
+import { LoginWithSavedCookiesDatas } from './container';
+import ErrorPage from '@/app/error';
+
+export async function LoginService({ code }: { code: string }) {
+  const loginUserData = await postAuthKakao(code);
+
+  return (
+    <>
+      {loginUserData ? (
+        <LoginWithSavedCookiesDatas loginUserData={loginUserData} />
+      ) : (
+        <ErrorPage alertMessage="카카오 로그인 실패" />
+      )}
+    </>
+  );
+}

src/domain/wishes/container.tsx

@@ -27,7 +27,19 @@ type WishesPageGlobalStateType = {
   cakeMessageModalState: boolean;
 };
 
-export default function WishesPageContainer({
+export default function WishesPageContainer({ children }: PropsWithChildren) {
+  const methods = useForm<WishesPageGlobalStateType>({
+    defaultValues: {
+      wishTitle: '',
+      wishesTitleInputModalState: false,
+      cakeMessageModalState: false,
+    },
+  });
+
+  return <section className="relative">{children}</section>;
+}
+
+export function WishesPageContai({
   isWishProgress,
   loginUserData,
   children,

src/domain/wishes/service.tsx

@@ -5,6 +5,10 @@ import { CakesTreeMessage } from './container';
 import { CakeItemType, defaultCakeListData } from '@/constant/model/cakes';
 
 export async function ReceivedCakePresentList({ wishId }: { wishId: string }) {
+  return <></>;
+}
+
+export async function ReceivedCakePresentListTest({ wishId }: { wishId: string }) {
   const receivedCakeList = await getCakesResult(wishId);
 
   function defineCakeTree(receivedCakeList?: CakeItemType[]) {