학생 인증 기능 추가, 유저 정보 등록 리팩터링

.storybook/preview.tsx

@@ -7,6 +7,9 @@ import { authHandlers, memberHandlers } from '../src/mocks/handlers';
 import { palettes } from '../src/styles/utils';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { getQueryClient } from '../src/react-query/common';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { GlobalModal } from '../src/components/GlobalModal';
+import { Toaster } from 'react-hot-toast';
 
 initialize({
   onUnhandledRequest: 'bypass',
@@ -44,6 +47,9 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <QueryClientProvider client={getQueryClient()}>
+        <Toaster />
+        <ReactQueryDevtools initialIsOpen />
+        <GlobalModal />
         <div>
           <StorybookGlobalStyles />
           <AppGlobalStyles />

package.json

@@ -46,17 +46,17 @@
   "devDependencies": {
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@faker-js/faker": "^8.0.2",
-    "@storybook/addon-a11y": "^7.0.8",
+    "@storybook/addon-a11y": "^7.0.27",
     "@storybook/addon-coverage": "^0.0.8",
-    "@storybook/addon-essentials": "^7.0.8",
-    "@storybook/addon-interactions": "^7.0.8",
-    "@storybook/addon-links": "^7.0.8",
-    "@storybook/blocks": "^7.0.8",
+    "@storybook/addon-essentials": "^7.0.27",
+    "@storybook/addon-interactions": "^7.0.27",
+    "@storybook/addon-links": "^7.0.27",
+    "@storybook/blocks": "^7.0.27",
     "@storybook/jest": "^0.1.0",
-    "@storybook/nextjs": "^7.0.8",
-    "@storybook/react": "^7.0.8",
-    "@storybook/test-runner": "^0.10.0",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/nextjs": "^7.0.27",
+    "@storybook/react": "^7.0.27",
+    "@storybook/test-runner": "^0.11.0",
+    "@storybook/testing-library": "^0.2.0",
     "@svgr/webpack": "^8.0.1",
     "@tanstack/react-query-devtools": "^4.29.6",
     "@testing-library/jest-dom": "^5.16.5",
@@ -82,7 +82,7 @@
     "msw-storybook-addon": "^1.8.0",
     "prettier": "^2.8.8",
     "react-error-boundary": "^4.0.4",
-    "storybook": "^7.0.8",
+    "storybook": "^7.0.27",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "typescript": "5.0.4"
   },

src/components/Common/Button/index.tsx

@@ -114,6 +114,7 @@ const variantsCss: Record<ButtonVariant, SerializedStyles> = {
     backgroundColor: themeColorVars.mainColor.var,
     '&:hover': { borderColor: palettes.white },
     '&:active': {
+      borderColor: 'transparent',
       backgroundColor: themeColorVars.mainDarkColor.var,
       color: palettes.white,
     },

src/components/Common/SsafyIcon/Track.tsx

@@ -18,7 +18,7 @@ import { defaultify } from '~/utils';
 // import 구문 옆에다 주석 달면 린트 오류가 발생해서 여기 적어둡니다.
 
 export interface TrackProps<Track extends keyof typeof tracks> {
-  name?: Track;
+  name?: Track | null;
   size?: TrackSize;
   style?: CSSProperties;
   theme?: Track extends 'fallback' | undefined ? FallbackTheme : undefined;

src/components/DelayedRedirection/index.tsx

@@ -8,12 +8,12 @@ import { useEffect } from 'react';
 interface DelayedRedirectionProps {
   children: ReactNode;
   to: UrlObject | string;
-  seconds: number;
+  seconds?: number;
   replace?: boolean;
 }
 
 const DelayedRedirection = (props: DelayedRedirectionProps) => {
-  const { children, to, seconds, replace = false } = props;
+  const { children, to, seconds = 3, replace = false } = props;
   const router = useRouter();
 
   useEffect(() => {

src/components/GlobalModal/GlobalModal.stories.tsx

@@ -55,8 +55,7 @@ export const BasicExample = () => {
         })}
       </div>
 
-      {/* 이 모달은 `_app.tsx`에서 한번만 렌더링합니다. */}
-      <GlobalModal />
+      {/* `GlobalModal`은 `_app.tsx`에서 한번만 렌더링합니다. */}
     </>
   );
 };
@@ -86,8 +85,7 @@ export const OnlyCloseWhenActionIsPressed = () => {
     <>
       <Button onClick={handleOpenModal}>트리거 버튼</Button>
 
-      {/* 이 모달은 `_app.tsx`에서 한번만 렌더링합니다. */}
-      <GlobalModal />
+      {/* `GlobalModal`은 `_app.tsx`에서 한번만 렌더링합니다. */}
     </>
   );
 };
@@ -123,8 +121,7 @@ export const ModalInModal = () => {
         <Button onClick={handleOpenModal}>트리거 버튼</Button>
       </div>
 
-      {/* 이 모달은 `_app.tsx`에서 한번만 렌더링합니다. */}
-      <GlobalModal />
+      {/* `GlobalModal`은 `_app.tsx`에서 한번만 렌더링합니다. */}
     </>
   );
 };

src/components/Layout/MainLayout.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 
 import { css } from '@emotion/react';
 
-import { gutter } from '~/styles/utils';
+import { paddingX } from '~/styles/utils';
 
 // 임시 레이아웃입니다.
 // 개발 단계에서, 보기 편하게 하기 위해서 넣어놨어요!
@@ -27,7 +27,8 @@ const selfCss = css({
   maxWidth: 576,
   minHeight: '100vh',
   margin: '0 auto',
-  padding: `0 ${gutter.mainLayout / 2}px`,
+  padding: `0 ${paddingX.mainLayout}px`,
   boxShadow: `20px 20px 40px #272b32, -20px -20px 40px #353a44;`,
+  overflow: 'hidden',
 });
 export default MainLayout;

src/components/Layout/index.tsx

@@ -1,3 +1,2 @@
 export { default as MainLayout } from './MainLayout';
 export { default as LunchLayout } from './LunchLayout';
-export { default as UserRegisterLayout } from './UserRegisterLayout';

src/components/NameCard/NameCard.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { UserInfo } from '~/services/member';
+
+import { userInfo } from '~/mocks/handlers/member/data';
+import { SsafyTrack } from '~/services/member';
+import { disableArgs } from '~/stories/utils';
+
+import NameCard from './index';
+
+const meta: Meta<typeof NameCard> = {
+  title: 'NameCard',
+  component: NameCard,
+  tags: ['autodocs'],
+  argTypes: {
+    ...disableArgs(['userInfo']),
+  },
+};
+
+export default meta;
+
+type NameCardStory = StoryObj<NameCardStoryProps>;
+interface NameCardStoryProps {
+  withBackground?: boolean;
+  track: SsafyTrack;
+  nickname: string;
+}
+
+export const Default: NameCardStory = {
+  args: {
+    withBackground: false,
+    track: SsafyTrack.EMBEDDED,
+    nickname: 'Kimee',
+  },
+  argTypes: {
+    track: {
+      control: 'radio',
+      options: Object.values(SsafyTrack),
+    },
+  },
+  render: (args) => {
+    const { withBackground, track, nickname } = args;
+    const user: UserInfo = userInfo.certifiedSsafyUserInfo;
+    user.nickname = nickname;
+    user.ssafyInfo.majorTrack = track;
+
+    return <NameCard userInfo={user} withBackground={withBackground} />;
+  },
+};

src/components/NameCard/index.tsx

@@ -0,0 +1,49 @@
+import type { UserInfo } from '~/services/member';
+
+import { css } from '@emotion/react';
+
+import Name from '~/components/Name';
+import { fontCss, inlineFlex, palettes } from '~/styles/utils';
+
+export interface NameCardProps {
+  userInfo: UserInfo;
+  withBackground?: boolean;
+}
+
+const NameCard = (props: NameCardProps) => {
+  const { userInfo, withBackground = false } = props;
+  const { ssafyInfo: { campus, semester } = {} } = userInfo;
+  const hasSsafyInfo = campus && semester;
+
+  return (
+    <div css={[selfCss, withBackground && backgroundCss]}>
+      <Name userInfo={userInfo} size="lg" />
+      {hasSsafyInfo && (
+        <div css={ssafyInfoCss}>{formatSsafyInfo(semester, campus)}</div>
+      )}
+    </div>
+  );
+};
+
+const formatSsafyInfo = (year: number, campus: string) => {
+  return `${campus}캠퍼스 SSAFY ${year}기`;
+};
+
+export default NameCard;
+
+const selfCss = css(
+  {
+    padding: '6px 10px',
+    color: palettes.white,
+    borderRadius: 10,
+  },
+  fontCss.family.auto,
+  inlineFlex('flex-start', 'center')
+);
+
+const ssafyInfoCss = css(fontCss.style.B16);
+
+const backgroundCss = css({
+  backgroundColor: palettes.white,
+  color: palettes.font.grey,
+});

src/components/PreviewCertifiedMyInfo/PreviewCertifiedMyInfo.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta } from '@storybook/react';
+
+import { userInfo } from '~/mocks/handlers/member/data';
+import { PageLayout } from '~/stories/Layout';
+import { disableArgs } from '~/stories/utils';
+
+import PreviewCertifiedMyInfo from './index';
+
+const meta: Meta<typeof PreviewCertifiedMyInfo> = {
+  title: 'PreviewCertifiedMyInfo',
+  component: PreviewCertifiedMyInfo,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <PageLayout>
+        <Story />
+      </PageLayout>
+    ),
+  ],
+  argTypes: {
+    ...disableArgs(['userInfo']),
+  },
+};
+
+export default meta;
+
+export const Default = {
+  args: {
+    userInfo: userInfo.certifiedSsafyUserInfo,
+  },
+};

src/components/PreviewCertifiedMyInfo/index.tsx

@@ -0,0 +1,51 @@
+import type { UserInfo } from '~/services/member';
+
+import { css } from '@emotion/react';
+
+import { SsafyIcon, TrackSize } from '~/components/Common';
+import NameCard from '~/components/NameCard';
+import { flex, fontCss, palettes } from '~/styles/utils';
+
+interface PreviewCertifiedMyInfoProps {
+  userInfo: UserInfo;
+}
+
+const PreviewCertifiedMyInfo = (props: PreviewCertifiedMyInfoProps) => {
+  const { userInfo } = props;
+
+  return (
+    <div css={selfCss}>
+      <div css={topLayerCss}>
+        <p>SSAFY 캐릭터 프로필이</p>
+        <p>생성되었습니다</p>
+        <p
+          css={[
+            fontCss.style.R16,
+            { color: palettes.primary.default, marginTop: 18 },
+          ]}
+        >
+          SSAFY만의 커뮤니티를 이용해보세요
+        </p>
+      </div>
+      <div css={bottomLayerCss}>
+        <SsafyIcon.Track
+          size={TrackSize.LG2}
+          name={userInfo?.ssafyInfo?.majorTrack}
+        />
+
+        <NameCard userInfo={userInfo} withBackground />
+      </div>
+    </div>
+  );
+};
+
+export default PreviewCertifiedMyInfo;
+
+const selfCss = css(
+  { minHeight: '100vh', padding: '40px 0' },
+  flex('center', 'center', 'column', 120)
+);
+
+const topLayerCss = css({ textAlign: 'center' }, fontCss.style.B28);
+
+const bottomLayerCss = css(flex('center', '', 'column', 26));