로그인 구현을 위한 사전 작업 PR (#134)

* chore: edit, setting, sign-in, sign-up page 삭제 * feat: react-query devtools 설치 및 적용 * [ui] fix: InputProps 타입 변경 * feat: Pathbuilder에 editor, settings, user 경로 추가 * feat: editor, settings 페이지 UI추가
pagers-org · Sep 19, 2023 · dd9f7b4 · dd9f7b4
1 parent 019b02a
commit dd9f7b4
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 58 deletions.
diff --git a/apps/realworld/package.json b/apps/realworld/package.json
@@ -34,6 +34,7 @@
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
     "@packages/ts-config": "*",
+    "@tanstack/react-query-devtools": "^4.35.3",
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.4",

diff --git a/apps/realworld/src/app/edit/page.tsx → apps/realworld/src/app/editor/page.tsx b/apps/realworld/src/app/edit/page.tsx → apps/realworld/src/app/editor/page.tsx
diff --git a/apps/realworld/src/app/setting/page.tsx → apps/realworld/src/app/settings/page.tsx b/apps/realworld/src/app/setting/page.tsx → apps/realworld/src/app/settings/page.tsx
@@ -1,4 +1,6 @@
-import React from "react";
+import { LogoutButton } from '@/features/user';
+import { Button } from '@packages/ui';
+import React from 'react';
 
 const Setting = () => {
   return (
@@ -16,18 +18,10 @@ const Setting = () => {
               <form>
                 <fieldset>
                   <fieldset className="form-group">
-                    <input
-                      className="form-control"
-                      type="text"
-                      placeholder="URL of profile picture"
-                    />
+                    <input className="form-control" type="text" placeholder="URL of profile picture" />
                   </fieldset>
                   <fieldset className="form-group">
-                    <input
-                      className="form-control form-control-lg"
-                      type="text"
-                      placeholder="Your Name"
-                    />
+                    <input className="form-control form-control-lg" type="text" placeholder="Your Name" />
                   </fieldset>
                   <fieldset className="form-group">
                     <textarea
@@ -37,28 +31,17 @@ const Setting = () => {
                     ></textarea>
                   </fieldset>
                   <fieldset className="form-group">
-                    <input
-                      className="form-control form-control-lg"
-                      type="text"
-                      placeholder="Email"
-                    />
+                    <input className="form-control form-control-lg" type="text" placeholder="Email" />
                   </fieldset>
                   <fieldset className="form-group">
-                    <input
-                      className="form-control form-control-lg"
-                      type="password"
-                      placeholder="New Password"
-                    />
+                    <input className="form-control form-control-lg" type="password" placeholder="New Password" />
                   </fieldset>
-                  <button className="btn btn-lg btn-primary pull-xs-right">
-                    Update Settings
-                  </button>
+                  <button className="btn btn-lg btn-primary pull-xs-right">Update Settings</button>
                 </fieldset>
               </form>
               <hr />
-              <button className="btn btn-outline-danger">
-                Or click here to logout.
-              </button>
+
+              <LogoutButton>Or click here to logout.</LogoutButton>
             </div>
           </div>
         </div>

diff --git a/apps/realworld/src/app/sign-in/page.tsx b/apps/realworld/src/app/sign-in/page.tsx
diff --git a/apps/realworld/src/app/sign-up/page.tsx b/apps/realworld/src/app/sign-up/page.tsx
diff --git a/apps/realworld/src/providers/Providers.tsx b/apps/realworld/src/providers/Providers.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React, { ReactNode, useState } from 'react';
 
 interface ProviderProps {
@@ -18,7 +19,12 @@ const Provider = ({ children }: ProviderProps) => {
         },
       }),
   );
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
 };
 
 export default Provider;
diff --git a/apps/realworld/src/shared/utils/routes.ts b/apps/realworld/src/shared/utils/routes.ts
@@ -1,7 +1,19 @@
+const RouteList = {
+  home: '/',
+  login: '/login',
+  register: '/register',
+  article: '/article',
+  editor: '/editor',
+  settings: '/settings',
+  user: '/user',
+} as const;
+
+export type RoutePath = (typeof RouteList)[keyof typeof RouteList];
+
 export class PathBuilder {
-  private path: string;
+  private path: RoutePath;
 
-  private constructor(path: string) {
+  private constructor(path: RoutePath) {
     this.path = path;
   }
 
@@ -17,6 +29,18 @@ export class PathBuilder {
     return new PathBuilder('/login');
   }
 
+  static buildNewArticle(): PathBuilder {
+    return new PathBuilder('/editor');
+  }
+
+  static buildSettings(): PathBuilder {
+    return new PathBuilder('/settings');
+  }
+
+  static buildUser(): PathBuilder {
+    return new PathBuilder('/user');
+  }
+
   static buildArticle(): ArticlePathBuilder {
     return new ArticlePathBuilder('/article');
   }

diff --git a/packages/ui/src/components/Input/Input.tsx b/packages/ui/src/components/Input/Input.tsx
@@ -1,7 +1,7 @@
-import { HTMLAttributes, forwardRef } from "react";
+import { InputHTMLAttributes, forwardRef } from "react";
 
 interface InputProps
-  extends Omit<HTMLAttributes<HTMLInputElement>, "onChange"> {
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> {
   size?: "m" | "lg";
   value?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>, value: string) => void;

diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
@@ -1,7 +1,8 @@
 import Avatar from "./Avatar/Avatar";
-import Button from "./Button/Button";
+import Button, { ButtonProps } from "./Button/Button";
 import Input from "./Input/Input";
 import Tabs from "./Tabs/Tabs";
 import Tag from "./Tag/Tag";
 
 export { Button, Tag, Tabs, Avatar, Input };
+export type { ButtonProps };
diff --git a/yarn.lock b/yarn.lock
@@ -1513,11 +1513,27 @@
   resolved "https://registry.npmjs.org/@tanstack/eslint-plugin-query/-/eslint-plugin-query-4.34.1.tgz"
   integrity sha512-RflOwyXamuHhuMX5RL6wtKiVw9Hi5Hhiv9gW2/ICVc4omflB+GflrxwvQ+EWRKrSRv3C0YcR0UzRxuiZ4mLq7Q==
 
+"@tanstack/match-sorter-utils@^8.7.0":
+  version "8.8.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz#0b2864d8b7bac06a9f84cb903d405852cc40a457"
+  integrity sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==
+  dependencies:
+    remove-accents "0.4.2"
+
 "@tanstack/[email protected]":
   version "4.33.0"
   resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.33.0.tgz"
   integrity sha512-qYu73ptvnzRh6se2nyBIDHGBQvPY1XXl3yR769B7B6mIDD7s+EZhdlWHQ67JI6UOTFRaI7wupnTnwJ3gE0Mr/g==
 
+"@tanstack/react-query-devtools@^4.35.3":
+  version "4.35.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.35.3.tgz#f03b39b613782a97794a42798d979c02ba51a7df"
+  integrity sha512-UvLT7qPzCuCZ3NfjwsOqDUVN84JvSOuW6ukrjZmSqgjPqVxD6ra/HUp1CEOatQY2TRvKCp8y1lTVu+trXM30fg==
+  dependencies:
+    "@tanstack/match-sorter-utils" "^8.7.0"
+    superjson "^1.10.0"
+    use-sync-external-store "^1.2.0"
+
 "@tanstack/react-query@^4.33.0":
   version "4.33.0"
   resolved "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.33.0.tgz"
@@ -2747,6 +2763,13 @@ cookie@^0.4.2:
   resolved "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
+copy-anything@^3.0.2:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.5.tgz#2d92dce8c498f790fa7ad16b01a1ae5a45b020a0"
+  integrity sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==
+  dependencies:
+    is-what "^4.1.8"
+
 cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -4661,6 +4684,11 @@ is-weakset@^2.0.1:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
+is-what@^4.1.8:
+  version "4.1.15"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.15.tgz#de43a81090417a425942d67b1ae86e7fae2eee0e"
+  integrity sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==
+
 is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
@@ -6321,13 +6349,6 @@ [email protected]:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-error-boundary@^4.0.11:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.11.tgz#36bf44de7746714725a814630282fee83a7c9a1c"
-  integrity sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
 react-icons@^4.11.0:
   version "4.11.0"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65"
@@ -6441,6 +6462,11 @@ regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.0:
     define-properties "^1.2.0"
     functions-have-names "^1.2.3"
 
+[email protected]:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
+
 require-all@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/require-all/-/require-all-3.0.0.tgz"
@@ -7001,6 +7027,13 @@ sucrase@^3.32.0:
     pirates "^4.0.1"
     ts-interface-checker "^0.1.9"
 
+superjson@^1.10.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.13.1.tgz#a0b6ab5d22876f6207fcb9d08b0cb2acad8ee5cd"
+  integrity sha512-AVH2eknm9DEd3qvxM4Sq+LTCkSXE2ssfh1t11MHMXyYXFQyQ1HLgVvV+guLTsaQnJU3gnaVo34TohHPulY/wLg==
+  dependencies:
+    copy-anything "^3.0.2"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"