로그인페이지, 사용자 전환 페이지 UI 수정

frontend/src/apis/auth.ts

@@ -1,27 +1,15 @@
 import ApiClient from './apiClient';
 
 export const kakaoOAuth = async (code: string) => {
-  const response = await ApiClient.postWithoutAuth('/auth/kakao/oauth', {
+  await ApiClient.postWithAuth('/auth/kakao', {
     code,
   });
-  return response.json();
 };
-export const appleOAuth = async (
-  code: string,
-  memberId: string | null = null,
-) => {
-  const response = await ApiClient.postWithoutAuth('/auth/apple/oauth', {
-    code,
-    memberId,
-  });
-  return response.json();
-};
-
 export const googleOAuth = async (
   idToken: string,
   memberId: string | null = null,
 ) => {
-  const response = await ApiClient.postWithoutAuth('/auth/google/oauth', {
+  const response = await ApiClient.postWithoutAuth('/auth/google', {
     idToken,
     memberId,
   });

frontend/src/apis/deletes.ts

@@ -7,5 +7,5 @@ export const deleteCancelChamyo = async (moimId: number) => {
 };
 
 export const deleteMyInfo = async () => {
-  await ApiClient.deleteWithLastDarakbangId(`/auth`);
+  await ApiClient.deleteWithAuth(`/auth`);
 };

frontend/src/common/getRoutes.ts

@@ -38,5 +38,15 @@ const GET_ROUTES = {
       getNowDarakbangRoute() + '/bet/' + betId + '/result',
     setting: () => getNowDarakbangRoute() + '/my-page/setting',
   },
+  default: {
+    notFound: '/*',
+    main: '/',
+    home: '/home',
+    kakaoSelection: '/oauth-migration',
+    oAuthSelection: '/oauth-select',
+    resultMigration: '/oauth-migration',
+    oAuthGoogle: '/oauth',
+    oAuth: '/oauth/:provider',
+  },
 };
 export default GET_ROUTES;

frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts

@@ -2,10 +2,8 @@ import { SerializedStyles, css } from '@emotion/react';
 
 export const name = ({ font }: { font: string | SerializedStyles }) => css`
   ${font}
-
-  max-width: 40vw;
-
   overflow-x: hidden;
+  max-width: 40vw;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;

frontend/src/components/Fallback/HappyFallback/HappyFallback.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import HappyFallback from './HappyFallback';
+import { css } from '@emotion/react';
+
+const meta: Meta<typeof HappyFallback> = {
+  component: HappyFallback,
+};
+
+export default meta;
+type Story = StoryObj<typeof HappyFallback>;
+
+export const Default: Story = {
+  args: { text: '없어요' },
+
+  decorators: (Story) => {
+    return (
+      <div
+        css={css`
+          width: 1000px;
+          height: 1000px;
+          border: solid 1px;
+        `}
+      >
+        <Story />
+      </div>
+    );
+  },
+};

frontend/src/components/Fallback/HappyFallback/HappyFallback.style.ts

@@ -0,0 +1,29 @@
+import { SerializedStyles, css } from '@emotion/react';
+
+export const container = ({
+  backgroundColor,
+}: {
+  backgroundColor?: string | SerializedStyles;
+}) => css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+  ${backgroundColor ? `background-color: ${backgroundColor};` : ''}
+
+  min-width: 30rem;
+  min-height: 30rem;
+
+  & > * {
+    text-align: center;
+    white-space: pre-line;
+  }
+`;
+
+export const image = css`
+  width: 100%;
+  max-width: 40rem;
+  height: 100%;
+  max-height: 40rem;
+`;

frontend/src/components/Fallback/HappyFallback/HappyFallback.tsx

@@ -0,0 +1,22 @@
+import * as S from './HappyFallback.style';
+
+import { SerializedStyles, useTheme } from '@emotion/react';
+
+import happyLogo from '@_common/assets/happy_logo.svg?url';
+
+interface HappyFallbackProps {
+  text: string;
+  font?: SerializedStyles;
+  backgroundColor?: string | SerializedStyles;
+}
+
+export default function HappyFallback(props: HappyFallbackProps) {
+  const { text, font, backgroundColor } = props;
+  const theme = useTheme();
+  return (
+    <div css={S.container({ backgroundColor })}>
+      <img src={happyLogo} alt="좋아용" css={S.image} />
+      <span css={font || theme.typography.h5}>{text}</span>
+    </div>
+  );
+}

frontend/src/components/MissingFallback/MissingFallback.style.ts → frontend/src/components/Fallback/MissingFallback/MissingFallback.style.ts

@@ -22,8 +22,8 @@ export const container = ({
 `;
 
 export const image = css`
-  width: 50%;
-  max-width: 30rem;
-  height: 50%;
-  max-height: 35rem;
+  width: 100%;
+  max-width: 40rem;
+  height: 100%;
+  max-height: 40rem;
 `;

frontend/src/components/MissingFallback/MissingFallback.tsx → frontend/src/components/Fallback/MissingFallback/MissingFallback.tsx

@@ -2,7 +2,7 @@ import * as S from './MissingFallback.style';
 
 import { SerializedStyles, useTheme } from '@emotion/react';
 
-import regretCat from '@_common/assets/regret_cat.webp';
+import missingLogo from '@_common/assets/missing_logo.svg?url';
 
 interface MissingFallbackProps {
   text: string;
@@ -15,7 +15,7 @@ export default function MissingFallback(props: MissingFallbackProps) {
   const theme = useTheme();
   return (
     <div css={S.container({ backgroundColor })}>
-      <img src={regretCat} alt="미안해용" css={S.image} />
+      <img src={missingLogo} alt="미안해용" css={S.image} />
       <span css={font || theme.typography.h5}>{text}</span>
     </div>
   );

frontend/src/components/GoogleLoginButton/GoogleLoginButton.tsx

@@ -3,23 +3,35 @@ import { useEffect, useRef } from 'react';
 import ROUTES from '@_constants/routes';
 import { useNavigate } from 'react-router-dom';
 
-function GoogleLoginButton() {
+interface GoogleLoginButtonProps {
+  type: 'bar' | 'circle';
+}
+function GoogleLoginButton({ type }: GoogleLoginButtonProps) {
   const navigate = useNavigate();
   const g_sso = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (g_sso.current) {
+      const renderOption =
+        type === 'bar'
+          ? {
+              theme: 'outline',
+              size: 'large',
+              width: 269,
+            }
+          : {
+              type: 'icon',
+              shape: 'circle',
+              theme: 'outline',
+              size: 'large',
+            };
       window.google.accounts.id.initialize({
         client_id: process.env.GOOGLE_O_AUTH_CLIENT_ID,
         callback: handleGoogleSignIn,
         ux_mode: 'popup',
       });
 
-      window.google.accounts.id.renderButton(g_sso.current, {
-        theme: 'outline',
-        size: 'large',
-        width: 269,
-      });
+      window.google.accounts.id.renderButton(g_sso.current, renderOption);
     }
   }, [g_sso]);
 

frontend/src/components/Icons/KakaoOAuthIcon.tsx

@@ -1,21 +1,33 @@
-export default function KakaoOAuthLoginIcon() {
-  return (
-    <svg
-      width="269"
-      height="49"
-      viewBox="0 0 269 49"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect width="269" height="49" rx="10" fill="#FEE500" />
-      <path
-        d="M115.445 18.75C115.43 22.875 114.164 26.5469 109.055 29.0625L108.242 27.9531C110.773 26.7109 112.281 25.2031 113.117 23.4219L108.539 23.8594L108.32 22.5781L113.57 22.2188C113.781 21.5078 113.906 20.75 113.961 19.9531H109.055V18.75H115.445ZM119.07 17.3281V22.9219H121.242V24.1406H119.07V31.3125H117.586V17.3281H119.07ZM129.273 18.75C129.258 22.875 127.992 26.5469 122.883 29.0625L122.07 27.9531C124.602 26.7109 126.109 25.2031 126.945 23.4219L122.367 23.8594L122.148 22.5781L127.398 22.2188C127.609 21.5078 127.734 20.75 127.789 19.9531H122.883V18.75H129.273ZM132.898 17.3281V22.9219H135.07V24.1406H132.898V31.3125H131.414V17.3281H132.898ZM142.195 18.1719C145.195 18.1875 147.367 19.6562 147.367 21.8906C147.367 23.9922 145.547 25.375 142.93 25.5938V28.3438H148.633V29.5781H135.82V28.3438H141.461V25.5938C138.859 25.375 137.039 23.9922 137.039 21.8906C137.039 19.6562 139.211 18.1875 142.195 18.1719ZM142.195 19.3906C140.039 19.375 138.477 20.375 138.477 21.8906C138.477 23.4688 140.039 24.4375 142.195 24.4531C144.367 24.4375 145.93 23.4688 145.93 21.8906C145.93 20.375 144.367 19.375 142.195 19.3906ZM162.461 28.4062V29.6562H149.648V28.4062H155.289V25.9531H151.211V21.5H159.43V19.5312H151.18V18.3125H160.898V22.6875H152.68V24.7344H161.227V25.9531H156.758V28.4062H162.461ZM180.195 28.4062V29.6562H167.383V28.4062H173.023V25.9531H168.945V21.5H177.164V19.5312H168.914V18.3125H178.633V22.6875H170.414V24.7344H178.961V25.9531H174.492V28.4062H180.195ZM192.305 18.75V20.25C192.305 22.0625 192.305 24.0312 191.789 27.0156L190.273 26.875C190.836 24.0781 190.836 22.0156 190.836 20.25V19.9688H182.586V18.75H192.305ZM193.977 28.1094V29.3438H181.211V28.1094H193.977ZM206.648 17.3438V27.5156H205.164V17.3438H206.648ZM207.07 29.8281V31.0312H197.492V26.4844H198.992V29.8281H207.07ZM199.055 18.2812C201.164 18.2812 202.773 19.7188 202.773 21.75C202.773 23.8125 201.164 25.2344 199.055 25.2344C196.945 25.2344 195.32 23.8125 195.32 21.75C195.32 19.7188 196.945 18.2812 199.055 18.2812ZM199.055 19.5781C197.742 19.5781 196.773 20.4688 196.773 21.75C196.773 23.0625 197.742 23.9375 199.055 23.9375C200.336 23.9375 201.32 23.0625 201.32 21.75C201.32 20.4688 200.336 19.5781 199.055 19.5781Z"
-        fill="black"
-      />
-      <path
-        d="M65.7309 13.3334C59.4425 13.3334 54.3333 17.4667 54.3333 22.5334C54.3333 25.7334 56.4294 28.5334 59.4425 30.2667L58.6565 34.6667L63.5037 31.4667C64.1588 31.6 64.9448 31.6 65.5998 31.6C71.8882 31.6 76.9975 27.4667 76.9975 22.4C77.1285 17.4667 72.0192 13.3334 65.7309 13.3334Z"
-        fill="black"
-      />
-    </svg>
-  );
+import CircleKakaoLogin from '@_common/assets/kakaoCircleOuathLogin.svg';
+interface KakaoOAuthLoginIconProps {
+  type: 'bar' | 'circle';
+}
+
+export default function KakaoOAuthLoginIcon({
+  type,
+}: KakaoOAuthLoginIconProps) {
+  if (type === 'bar') {
+    return (
+      <svg
+        width="269"
+        height="49"
+        viewBox="0 0 269 49"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect width="269" height="49" rx="10" fill="#FEE500" />
+        <path
+          d="M115.445 18.75C115.43 22.875 114.164 26.5469 109.055 29.0625L108.242 27.9531C110.773 26.7109 112.281 25.2031 113.117 23.4219L108.539 23.8594L108.32 22.5781L113.57 22.2188C113.781 21.5078 113.906 20.75 113.961 19.9531H109.055V18.75H115.445ZM119.07 17.3281V22.9219H121.242V24.1406H119.07V31.3125H117.586V17.3281H119.07ZM129.273 18.75C129.258 22.875 127.992 26.5469 122.883 29.0625L122.07 27.9531C124.602 26.7109 126.109 25.2031 126.945 23.4219L122.367 23.8594L122.148 22.5781L127.398 22.2188C127.609 21.5078 127.734 20.75 127.789 19.9531H122.883V18.75H129.273ZM132.898 17.3281V22.9219H135.07V24.1406H132.898V31.3125H131.414V17.3281H132.898ZM142.195 18.1719C145.195 18.1875 147.367 19.6562 147.367 21.8906C147.367 23.9922 145.547 25.375 142.93 25.5938V28.3438H148.633V29.5781H135.82V28.3438H141.461V25.5938C138.859 25.375 137.039 23.9922 137.039 21.8906C137.039 19.6562 139.211 18.1875 142.195 18.1719ZM142.195 19.3906C140.039 19.375 138.477 20.375 138.477 21.8906C138.477 23.4688 140.039 24.4375 142.195 24.4531C144.367 24.4375 145.93 23.4688 145.93 21.8906C145.93 20.375 144.367 19.375 142.195 19.3906ZM162.461 28.4062V29.6562H149.648V28.4062H155.289V25.9531H151.211V21.5H159.43V19.5312H151.18V18.3125H160.898V22.6875H152.68V24.7344H161.227V25.9531H156.758V28.4062H162.461ZM180.195 28.4062V29.6562H167.383V28.4062H173.023V25.9531H168.945V21.5H177.164V19.5312H168.914V18.3125H178.633V22.6875H170.414V24.7344H178.961V25.9531H174.492V28.4062H180.195ZM192.305 18.75V20.25C192.305 22.0625 192.305 24.0312 191.789 27.0156L190.273 26.875C190.836 24.0781 190.836 22.0156 190.836 20.25V19.9688H182.586V18.75H192.305ZM193.977 28.1094V29.3438H181.211V28.1094H193.977ZM206.648 17.3438V27.5156H205.164V17.3438H206.648ZM207.07 29.8281V31.0312H197.492V26.4844H198.992V29.8281H207.07ZM199.055 18.2812C201.164 18.2812 202.773 19.7188 202.773 21.75C202.773 23.8125 201.164 25.2344 199.055 25.2344C196.945 25.2344 195.32 23.8125 195.32 21.75C195.32 19.7188 196.945 18.2812 199.055 18.2812ZM199.055 19.5781C197.742 19.5781 196.773 20.4688 196.773 21.75C196.773 23.0625 197.742 23.9375 199.055 23.9375C200.336 23.9375 201.32 23.0625 201.32 21.75C201.32 20.4688 200.336 19.5781 199.055 19.5781Z"
+          fill="black"
+        />
+        <path
+          d="M65.7309 13.3334C59.4425 13.3334 54.3333 17.4667 54.3333 22.5334C54.3333 25.7334 56.4294 28.5334 59.4425 30.2667L58.6565 34.6667L63.5037 31.4667C64.1588 31.6 64.9448 31.6 65.5998 31.6C71.8882 31.6 76.9975 27.4667 76.9975 22.4C77.1285 17.4667 72.0192 13.3334 65.7309 13.3334Z"
+          fill="black"
+        />
+      </svg>
+    );
+  }
+  if (type === 'circle') {
+    return <CircleKakaoLogin />;
+  }
 }

frontend/src/components/Icons/MainLogoIcon.tsx

@@ -1,82 +1,4 @@
+import MainLogo from '@_common/assets/main_logo.svg';
 export default function MainLogoIcon() {
-  return (
-    <svg
-      width="97"
-      height="156"
-      viewBox="0 0 97 156"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M56.4298 85.6189C66.9193 92.3705 77.9332 91.7543 85.0777 86.0022C92.2965 80.1902 94.6455 69.8559 89.1462 59.3933C86.6317 54.6094 87.2342 47.4805 90.0051 42.0344C95.3819 31.4664 91.4874 19.5015 84.0799 12.1448C76.5625 4.67898 64.6431 1.19775 53.5721 8.58763C49.417 11.3612 43.7212 11.9622 39.3887 9.96939C28.5079 4.96458 17.2717 6.89035 10.2447 13.8065C3.13222 20.8069 1.0445 32.1835 6.91682 44.5315C8.23293 47.2989 8.2367 50.6317 6.94422 53.5003C1.35104 65.9139 4.3409 77.481 12.1605 84.1794C19.9184 90.825 31.8191 92.1402 42.8663 85.5048C46.9545 83.0492 52.4931 83.085 56.4298 85.6189Z"
-        fill="#43B75D"
-        stroke="black"
-        strokeWidth="7"
-      />
-      <path
-        d="M56.4298 85.6189C66.9193 92.3705 77.9332 91.7543 85.0777 86.0022C92.2965 80.1902 94.6455 69.8559 89.1462 59.3933C86.6317 54.6094 87.2342 47.4805 90.0051 42.0344C95.3819 31.4664 91.4874 19.5015 84.0799 12.1448C76.5625 4.67898 64.6431 1.19775 53.5721 8.58763C49.417 11.3612 43.7212 11.9622 39.3887 9.96939C28.5079 4.96458 17.2717 6.89035 10.2447 13.8065C3.13222 20.8069 1.0445 32.1835 6.91682 44.5315C8.23293 47.2989 8.2367 50.6317 6.94422 53.5003C1.35104 65.9139 4.3409 77.481 12.1605 84.1794C19.9184 90.825 31.8191 92.1402 42.8663 85.5048C46.9545 83.0492 52.4931 83.085 56.4298 85.6189Z"
-        fill="#43B75D"
-        stroke="black"
-        strokeWidth="7"
-      />
-      <path
-        d="M22 42.5071C21.9998 41.6521 22.1861 40.8075 22.546 40.032C22.9058 39.2564 23.4305 38.5688 24.0834 38.0169L44.6535 20.3884C45.7143 19.4919 47.0583 19 48.4472 19C49.8361 19 51.1801 19.4919 52.2409 20.3884L72.8109 38.0169C73.4638 38.5688 73.9885 39.2564 74.3484 40.032C74.7082 40.8075 74.8945 41.6521 74.8943 42.5071V68.9542C74.8943 70.513 74.2751 72.0078 73.173 73.11C72.0708 74.2122 70.5759 74.8314 69.0172 74.8314H27.8771C26.3184 74.8314 24.8236 74.2122 23.7214 73.11C22.6192 72.0078 22 70.513 22 68.9542V42.5071Z"
-        fill="white"
-        stroke="black"
-        strokeWidth="7"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M57.2628 74.8316V51.323C57.2628 50.5436 56.9532 49.7962 56.4021 49.2451C55.851 48.694 55.1036 48.3844 54.3242 48.3844H42.5699C41.7906 48.3844 41.0431 48.694 40.492 49.2451C39.9409 49.7962 39.6313 50.5436 39.6313 51.323V74.8316"
-        fill="white"
-      />
-      <path
-        d="M57.2628 74.8316V51.323C57.2628 50.5436 56.9532 49.7962 56.4021 49.2451C55.851 48.694 55.1036 48.3844 54.3242 48.3844H42.5699C41.7906 48.3844 41.0431 48.694 40.492 49.2451C39.9409 49.7962 39.6313 50.5436 39.6313 51.323V74.8316"
-        stroke="black"
-        strokeWidth="7"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <line
-        x1="39"
-        y1="74.5"
-        x2="56"
-        y2="74.5"
-        stroke="black"
-        strokeWidth="7"
-      />
-      <path
-        d="M22 42.5071C21.9998 41.6521 22.1861 40.8075 22.546 40.032C22.9058 39.2564 23.4305 38.5688 24.0834 38.0169L44.6535 20.3884C45.7143 19.4919 47.0583 19 48.4472 19C49.8361 19 51.1801 19.4919 52.2409 20.3884L72.8109 38.0169C73.4638 38.5688 73.9885 39.2564 74.3484 40.032C74.7082 40.8075 74.8945 41.6521 74.8943 42.5071V68.9542C74.8943 70.513 74.2751 72.0078 73.173 73.11C72.0708 74.2122 70.5759 74.8314 69.0172 74.8314H27.8771C26.3184 74.8314 24.8236 74.2122 23.7214 73.11C22.6192 72.0078 22 70.513 22 68.9542V42.5071Z"
-        fill="#FF7700"
-        stroke="black"
-        strokeWidth="7"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M57.2628 74.8316V51.323C57.2628 50.5436 56.9532 49.7962 56.4021 49.2451C55.851 48.694 55.1036 48.3844 54.3242 48.3844H42.5699C41.7906 48.3844 41.0431 48.694 40.492 49.2451C39.9409 49.7962 39.6313 50.5436 39.6313 51.323V74.8316"
-        fill="#FDDB35"
-      />
-      <path
-        d="M57.2628 74.8316V51.323C57.2628 50.5436 56.9532 49.7962 56.4021 49.2451C55.851 48.694 55.1036 48.3844 54.3242 48.3844H42.5699C41.7906 48.3844 41.0431 48.694 40.492 49.2451C39.9409 49.7962 39.6313 50.5436 39.6313 51.323V74.8316"
-        stroke="black"
-        strokeWidth="7"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <line
-        x1="39"
-        y1="74.5"
-        x2="56"
-        y2="74.5"
-        stroke="black"
-        strokeWidth="7"
-      />
-      <path
-        d="M22.956 143C21.9592 143 21.1722 142.599 20.5951 141.796C20.018 140.993 19.8606 140.124 20.123 139.189L34.1306 89.1778C34.3404 88.5037 34.7077 87.9727 35.2323 87.5849C35.7569 87.197 36.3602 87.0021 37.0423 87C38.0915 87 38.9047 87.4024 39.4818 88.2071C40.0589 89.0119 40.2163 89.8799 39.9539 90.8111L38.3801 96.3333H56.0863L58.0537 89.1778C58.2635 88.5037 58.6444 87.9727 59.1963 87.5849C59.7482 87.197 60.3641 87.0021 61.044 87C62.0408 87 62.8278 87.4024 63.4049 88.2071C63.982 89.0119 64.1394 89.8799 63.877 90.8111L49.8694 140.822C49.6596 141.496 49.2923 142.028 48.7677 142.418C48.2431 142.808 47.6398 143.002 46.9577 143C45.9085 143 45.0953 142.599 44.5182 141.796C43.9411 140.993 43.7837 140.124 44.0461 139.189L45.6199 133.667H27.9137L25.9463 140.822C25.7365 141.496 25.3556 142.028 24.8037 142.418C24.2518 142.808 23.6359 143.002 22.956 143ZM34.0519 111.889H51.6794L54.2763 102.556H36.6488L34.0519 111.889ZM29.7237 127.444H47.3512L49.9481 118.111H32.3206L29.7237 127.444Z"
-        fill="black"
-      />
-    </svg>
-  );
+  return <MainLogo />;
 }

frontend/src/components/ProfileFrame/ProfileFrame.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import ProfileFrame from './ProfileFrame';
-import EmptyProfile from '@_common/assets/empty_profile.svg';
+import EmptyProfile from '@_common/assets/default_profile.svg';
 import Plus from '@_common/assets/tabler_plus.svg?url';
 
 const meta = {

frontend/src/components/ProfileFrame/ProfileFrame.style.ts

@@ -38,8 +38,8 @@ export const profileFrame = ({
 
     width: ${width}rem;
     height: ${height}rem;
-    background: ${theme.colorPalette.white[100]};
 
+    background: ${theme.colorPalette.white[100]};
     border: ${borderWidth}rem solid ${theme.colorPalette.orange[200]};
     border-radius: 300rem;
   `;
@@ -54,7 +54,7 @@ export const profileImage = (
     height: 100%;
 
     object-fit: cover;
-    background-image: url(${EmptyProfile});
+    background-image: url(${props.isLoaded ? '' : EmptyProfile});
     background-position: center;
     background-size: cover;
   `;