Merge pull request #223 from 3I-shikosai32/fix/205-new_user_refactoring

refactor: ♻ new-userの要件漏れ・設計からの逸脱を修正

.storybook/preview.js

@@ -4,6 +4,8 @@ import { RouterContext } from 'next/dist/shared/lib/router-context';
 import 'tailwindcss/tailwind.css';
 import '../src/presentation/style/stylesheet/storybook.scss';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { addDecorator } from '@storybook/react';
+import { urqlDecorator } from '@urql/storybook-addon';
 
 const OriginalNextImage = NextImage.default;
 
@@ -12,6 +14,8 @@ Object.defineProperty(NextImage, 'default', {
   value: (props) => <OriginalNextImage {...props} unoptimized />,
 });
 
+addDecorator(urqlDecorator);
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {

package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-separator": "^1.0.0",
     "@urql/devtools": "2.0.3",
     "@urql/exchange-auth": "1.0.0",
+    "@urql/storybook-addon": "^2.0.1",
     "daisyui": "2.31.0",
     "date-fns": "2.29.3",
     "date-fns-tz": "1.3.7",

src/infra/graphql/document/query/find-all-users-name.gql

@@ -0,0 +1,5 @@
+query FindAllUsersName {
+  findUsers {
+    name
+  }
+}

src/infra/graphql/generated/graphql.ts

@@ -71,6 +71,11 @@ export type CharacterStatusWhereUniqueInput = {
   id: Scalars['String'];
 };
 
+export enum Date {
+  Day1 = 'DAY1',
+  Day2 = 'DAY2'
+}
+
 export type DateTimeFilter = {
   equals?: InputMaybe<Scalars['DateTime']>;
   gt?: InputMaybe<Scalars['DateTime']>;
@@ -452,7 +457,9 @@ export type Query = {
   findItemCompletedCharacterStatuses: Array<CharacterStatus>;
   findUser?: Maybe<User>;
   findUsers: Array<User>;
+  getGameAttenders: GameAttenders;
   getObtainmentStatuses: Array<ObtainmentStatus>;
+  getRanking: Array<User>;
 };
 
 
@@ -511,6 +518,12 @@ export type QueryGetObtainmentStatusesArgs = {
   where: UserWhereUniqueInput;
 };
 
+
+export type QueryGetRankingArgs = {
+  date: Date;
+  rankingTarget: RankingTarget;
+};
+
 export enum QueryMode {
   Default = 'default',
   Insensitive = 'insensitive'
@@ -567,6 +580,7 @@ export type Subscription = {
 
 
 export type SubscriptionUpdatedRankingArgs = {
+  date: Date;
   rankingTarget: RankingTarget;
 };
 
@@ -693,6 +707,11 @@ export type CheckUserExistanceQueryVariables = Exact<{
 
 export type CheckUserExistanceQuery = { __typename?: 'Query', findUser?: { __typename?: 'User', id: string } | null };
 
+export type FindAllUsersNameQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type FindAllUsersNameQuery = { __typename?: 'Query', findUsers: Array<{ __typename?: 'User', name: string }> };
+
 export type FindGiftSalesDataQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -851,6 +870,17 @@ export const CheckUserExistanceDocument = gql`
 export function useCheckUserExistanceQuery(options: Omit<Urql.UseQueryArgs<CheckUserExistanceQueryVariables>, 'query'>) {
   return Urql.useQuery<CheckUserExistanceQuery, CheckUserExistanceQueryVariables>({ query: CheckUserExistanceDocument, ...options });
 };
+export const FindAllUsersNameDocument = gql`
+    query FindAllUsersName {
+  findUsers {
+    name
+  }
+}
+    `;
+
+export function useFindAllUsersNameQuery(options?: Omit<Urql.UseQueryArgs<FindAllUsersNameQueryVariables>, 'query'>) {
+  return Urql.useQuery<FindAllUsersNameQuery, FindAllUsersNameQueryVariables>({ query: FindAllUsersNameDocument, ...options });
+};
 export const FindGiftSalesDataDocument = gql`
     query FindGiftSalesData {
   findGifts {

src/infra/graphql/schema.json

@@ -566,6 +566,29 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "ENUM",
+        "name": "Date",
+        "description": null,
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": [
+          {
+            "name": "DAY1",
+            "description": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "DAY2",
+            "description": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "possibleTypes": null
+      },
       {
         "kind": "SCALAR",
         "name": "DateTime",
@@ -4675,6 +4698,22 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "getGameAttenders",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "OBJECT",
+                "name": "GameAttenders",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "getObtainmentStatuses",
             "description": null,
@@ -4715,6 +4754,63 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "getRanking",
+            "description": null,
+            "args": [
+              {
+                "name": "date",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "ENUM",
+                    "name": "Date",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "rankingTarget",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "ENUM",
+                    "name": "RankingTarget",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "LIST",
+                "name": null,
+                "ofType": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "OBJECT",
+                    "name": "User",
+                    "ofType": null
+                  }
+                }
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -5145,6 +5241,22 @@
             "name": "updatedRanking",
             "description": null,
             "args": [
+              {
+                "name": "date",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "ENUM",
+                    "name": "Date",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
               {
                 "name": "rankingTarget",
                 "description": null,

src/pages/auth/new-user.tsx

@@ -1,6 +1,11 @@
 import type { NextPage } from 'next';
+import { Layout } from '../../presentation/layout/layout.container';
 import NewUser from '@/presentation/relevant/new-user/new-user.page';
 
-const NewUserPage: NextPage = () => <NewUser />;
+const NewUserPage: NextPage = () => (
+  <Layout title="サインアップ | OZ">
+    <NewUser />
+  </Layout>
+);
 
 export default NewUserPage;

src/presentation/primitive/component/live-character/live-character.presenter.tsx

@@ -11,9 +11,10 @@ export type LiveCharacterProps = ComponentPropsWithRef<'figure'> &
   HTMLMotionProps<'figure'> & {
     name: string;
     images: Array<UserCharacterStatus['avaterUrl'] | Item['layerUrl']>;
+    displayName?: boolean;
   };
 
-export const LiveCharacter = forwardRef<HTMLElement, LiveCharacterProps>(({ name, images, className, ...props }, ref) => (
+export const LiveCharacter = forwardRef<HTMLElement, LiveCharacterProps>(({ name, images, className, displayName, ...props }, ref) => (
   <motion.figure
     ref={ref}
     transition={{ duration: 1.0, type: 'spring', stiffness: 100, damping: 5 }}
@@ -54,7 +55,12 @@ export const LiveCharacter = forwardRef<HTMLElement, LiveCharacterProps>(({ name
         ))}
       </ol>
     </motion.div>
-    <p className="-mt-2 text-xs">{name}</p>
+    {displayName && <p className="-mt-2 text-xs">{name}</p>}
   </motion.figure>
 ));
+
 LiveCharacter.displayName = 'LiveCharacter';
+
+LiveCharacter.defaultProps = {
+  displayName: true,
+};

src/presentation/relevant/new-user/component/character-selector/character-selector.container.tsx

@@ -0,0 +1,18 @@
+import type { FC } from 'react';
+import type { Form } from '../../hook/use-form.hook';
+import { CharacterSelectorPresenter } from './character-selector.presenter';
+import type { Character } from '@/model/character/character.model';
+
+type CharacterSelectorContainerProps = {
+  formValue: Form;
+  setFormValue: (character: Character) => void;
+};
+
+export const CharacterSelector: FC<CharacterSelectorContainerProps> = ({ formValue, setFormValue }) => (
+  <CharacterSelectorPresenter
+    selectedCharacter={formValue.character}
+    onChecked={(character) => {
+      setFormValue(character);
+    }}
+  />
+);

src/presentation/relevant/new-user/component/character-selector/character-selector.presenter.tsx

@@ -0,0 +1,36 @@
+import type { FC } from 'react';
+import { Character, CharacterNameDictionary } from '@/model/character/character.model';
+import { LiveCharacter } from '@/presentation/primitive/component/live-character/live-character.presenter';
+
+type CharacterSelectorPresenterProps = {
+  selectedCharacter: Character | undefined;
+  onChecked: (character: Character) => void;
+};
+
+export const CharacterSelectorPresenter: FC<CharacterSelectorPresenterProps> = ({ selectedCharacter, onChecked }) => (
+  <div className="grid grid-cols-3 px-5">
+    {Object.values(Character).map((character) => (
+      <div key={character} className="my-5 mx-3 h-[110px] w-[90px] rounded-2xl bg-white shadow-2xl md:mx-10 md:h-[200px] md:w-[200px]">
+        <div className="top-5 m-1 md:m-3">
+          <input
+            id={character}
+            type="checkbox"
+            className="h-5 w-5"
+            checked={selectedCharacter === character}
+            onChange={() => {
+              onChecked(character);
+            }}
+          />
+        </div>
+        <div className="flex items-center justify-center">
+          <LiveCharacter
+            name={CharacterNameDictionary[character]}
+            images={[`/characters/${character.toLowerCase()}.svg`]}
+            displayName={false}
+            className="w-2/3 p-3 md:w-1/2"
+          />
+        </div>
+      </div>
+    ))}
+  </div>
+);

src/presentation/relevant/new-user/component/email-input/email-input.container.tsx

@@ -0,0 +1,18 @@
+import type { FC } from 'react';
+import type { Form } from '../../hook/use-form.hook';
+import { EmailInputPresenter } from './email-input.presenter';
+
+export type EmailInputProps = {
+  formValue: Form;
+  setFormValue: (value: string) => void;
+};
+
+export const EmailInput: FC<EmailInputProps> = ({ formValue, setFormValue }) => (
+  <EmailInputPresenter
+    isValueMissing={!formValue.email}
+    value={formValue.email}
+    onChange={(event) => {
+      setFormValue(event.target.value);
+    }}
+  />
+);