[#183] 담당페이지, 컴포넌트 메타데이터, 스토리북 작업

package.json

@@ -33,6 +33,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",
+    "@emotion/is-prop-valid": "^1.4.0",
     "@storybook/addon-a11y": "^10.0.2",
     "@storybook/addon-docs": "^10.0.2",
     "@storybook/addon-onboarding": "^10.0.2",

src/app/(auth)/reset-password/layout.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "비밀번호 재설정",
+  openGraph: {
+    title: "Coworkers",
+    description: "비밀번호 재설정 페이지",
+    type: "website",
+    url: "https://coworkes.com/signin",
+    locale: "ko_KR",
+    siteName: "Coworkers",
+    images: [
+      {
+        url: "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Coworkers/user/2449/open_graph.jpg",
+        width: 1200,
+        height: 630,
+        alt: "Coworkers",
+      },
+    ],
+  },
+};
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+export default Layout;

src/app/(auth)/reset-password/reset-password-page.tsx

@@ -57,6 +57,8 @@ const ResetPasswordPage = () => {
               type={showPassword ? "text" : "password"}
               errorMessage={errors.password?.message}
               rightIconClassName="pr-2"
+              autoComplete="new-password"
+              aria-invalid={!!errors.password}
               rightIcon={
                 <Button
                   aria-label={showPassword ? "show password" : "hide password"}
@@ -89,13 +91,17 @@ const ResetPasswordPage = () => {
             />
           </div>
           <div className="flex flex-col gap-3">
-            <label htmlFor="passwordConfirmation"></label>
+            <label htmlFor="passwordConfirmation" className="sr-only">
+              비밀번호 확인
+            </label>
             <TextInput
               id="passwordConfirmation"
               placeholder="새 비밀번호를 다시 한 번 입력해주세요"
               type={showPassword ? "text" : "password"}
               errorMessage={errors.passwordConfirmation?.message}
               rightIconClassName="pr-2"
+              autoComplete="new-password"
+              aria-invalid={!!errors.passwordConfirmation}
               rightIcon={
                 <Button
                   aria-label={showPassword ? "show password" : "hide password"}

src/app/(auth)/signin/layout.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "로그인",
+  openGraph: {
+    title: "Coworkers",
+    description: "로그인 페이지",
+    type: "website",
+    url: "https://coworkes.com/signin",
+    locale: "ko_KR",
+    siteName: "Coworkers",
+    images: [
+      {
+        url: "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Coworkers/user/2449/open_graph.jpg",
+        width: 1200,
+        height: 630,
+        alt: "Coworkers",
+      },
+    ],
+  },
+};
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+export default Layout;

src/app/(auth)/signin/page.tsx

@@ -4,7 +4,6 @@ import React, { useState } from "react";
 import SingUpInFormWrapper from "../_components/form_wrapper";
 import { Button, Icon, TextInput, LoadingSpinner } from "@/components";
 import { EMAIL_REGEX, PASSWORD_MIN_LENGTH } from "@/constants/regex";
-import { SignupRequest } from "@/api/auth/signup-action";
 import { useForm } from "react-hook-form";
 import Link from "next/link";
 import SimpleSignUpIn from "../_components/simple-signUpIn";
@@ -22,7 +21,7 @@ const Page = () => {
     register,
     formState: { errors, isValid },
     handleSubmit,
-  } = useForm<SignupRequest>({
+  } = useForm<SignInRequest>({
     mode: "all",
     defaultValues: { email: "", password: "" },
   });
@@ -51,6 +50,8 @@ const Page = () => {
                 type="email"
                 placeholder="이메일을 입력하세요."
                 errorMessage={errors.email?.message}
+                autoComplete="username"
+                aria-invalid={!!errors.email}
                 {...register("email", {
                   required: "이메일을 입력해주세요.",
                   pattern: {
@@ -68,6 +69,8 @@ const Page = () => {
                 placeholder="비밀번호를 입력하세요."
                 errorMessage={errors.password?.message}
                 rightIconClassName="pr-2"
+                autoComplete="current-password"
+                aria-invalid={!!errors.password}
                 rightIcon={
                   <Button
                     aria-label={

src/app/(auth)/signup/layout.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "회원가입",
+  openGraph: {
+    title: "Coworkers",
+    description: "회원가입 페이지",
+    type: "website",
+    url: "https://coworkes.com/signup",
+    locale: "ko_KR",
+    siteName: "Coworkers",
+    images: [
+      {
+        url: "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Coworkers/user/2449/open_graph.jpg",
+        width: 1200,
+        height: 630,
+        alt: "Coworkers",
+      },
+    ],
+  },
+};
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+export default Layout;

src/app/(auth)/signup/page.tsx

@@ -52,6 +52,9 @@ const Page = () => {
               type="text"
               placeholder="닉네임을 입력해주세요."
               errorMessage={errors.nickname?.message}
+              autoComplete="username"
+              aria-invalid={!!errors.nickname}
+              aria-describedby={errors.nickname ? "nickname-error" : undefined}
               {...register("nickname", {
                 required: "닉네임을 입력해주세요.",
               })}
@@ -64,6 +67,8 @@ const Page = () => {
               type="email"
               placeholder="이메일을 입력하세요."
               errorMessage={errors.email?.message}
+              autoComplete="email"
+              aria-invalid={!!errors.email}
               {...register("email", {
                 required: "이메일을 입력해주세요.",
                 pattern: {
@@ -81,6 +86,8 @@ const Page = () => {
               placeholder="비밀번호를 입력하세요."
               errorMessage={errors.password?.message}
               rightIconClassName="pr-2"
+              autoComplete="new-password"
+              aria-invalid={!!errors.password}
               rightIcon={
                 <Button
                   aria-label={showPassword ? "show password" : "hide password"}
@@ -120,6 +127,8 @@ const Page = () => {
               placeholder="비밀번호를 다시 한 번 입력하세요."
               errorMessage={errors.passwordConfirmation?.message}
               rightIconClassName="pr-2"
+              autoComplete="new-password"
+              aria-invalid={!!errors.passwordConfirmation}
               rightIcon={
                 <Button
                   aria-label={showPassword ? "show password" : "hide password"}

src/components/gnb/header/gnb-header.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import GnbHeader from "./gnb-header";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const MOCK_USER = {
+  nickname: "가상의 유저",
+  image: "",
+  memberships: [
+    {
+      group: {
+        id: 1,
+        name: "테스트 팀",
+      },
+    },
+  ],
+};
+
+const loggedInClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      staleTime: Infinity,
+    },
+  },
+});
+
+const QUERY_KEY = ["userInfo"];
+
+loggedInClient.setQueryData(QUERY_KEY, MOCK_USER);
+
+const loggedOutClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const meta = {
+  title: "components/GnbHeader",
+  component: GnbHeader,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof GnbHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedOut: Story = {
+  decorators: [
+    (Story) => {
+      return (
+        <QueryClientProvider client={loggedOutClient}>
+          <Story />
+        </QueryClientProvider>
+      );
+    },
+  ],
+};
+
+export const LoggedIn: Story = {
+  decorators: [
+    (Story) => {
+      return (
+        <QueryClientProvider client={loggedInClient}>
+          <Story />
+        </QueryClientProvider>
+      );
+    },
+  ],
+};

src/components/gnb/header/gnb-header.tsx

@@ -31,7 +31,11 @@ const GnbHeader = () => {
       {isLoggedIn ? (
         <div className="flex justify-between pl-4 pr-[14px]">
           <div className="flex items-center gap-3 py-[14px]">
-            <Button variant="none" onClick={() => setIsOpen(true)}>
+            <Button
+              variant="none"
+              onClick={() => setIsOpen(true)}
+              aria-label="사이드바 메뉴 열기"
+            >
               <Icon icon="menu" className="h-6 w-6" />
             </Button>
 
@@ -54,11 +58,11 @@ const GnbHeader = () => {
                 },
                 {
                   label: "계정 설정",
-                  onClick: () => router.replace("/mypage"),
+                  onClick: () => router.push("/mypage"),
                 },
                 {
                   label: "팀 참여",
-                  onClick: () => router.replace("/taketeam"),
+                  onClick: () => router.push("/taketeam"),
                 },
                 {
                   label: "로그아웃",

src/components/gnb/header/mobile-sidebar.tsx

@@ -2,7 +2,8 @@
 
 import React, { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
-import { Button, Icon } from "@/components/index";
+import Button from "@/components/button/button";
+import Icon from "@/components/icon/Icon";
 import SidebarMenu from "../sidebar/_components/sidebar-menu/sidebar-menu";
 import { usePathname } from "next/navigation";
 import { motion } from "framer-motion";
@@ -18,7 +19,7 @@ const MobileSidebar = ({ onClose }: MobileSidebarProps) => {
   const pathname = usePathname();
   const segments = pathname.split("/");
   const currentTeamId = segments[segments.length - 1];
-  const isBoardPage = pathname === "/boards";
+  const isBoardPage = pathname.startsWith("/boards");
   const isMyHistoryPage = pathname === "/myhistory";
   const { data: userInfo } = useGetUserInfoQuery();
   const [isMounted, setIsMounted] = useState(false);
@@ -46,7 +47,7 @@ const MobileSidebar = ({ onClose }: MobileSidebarProps) => {
             transition={{ duration: 0.1, ease: "easeIn" }}
           >
             <div className="flex w-full justify-end">
-              <Button variant="none" onClick={onClose}>
+              <Button variant="none" onClick={onClose} aria-label="메뉴 닫기">
                 <Icon icon="x" className="mr-4 h-5 w-5" />
               </Button>
             </div>
@@ -58,7 +59,6 @@ const MobileSidebar = ({ onClose }: MobileSidebarProps) => {
               >
                 <div
                   className={cn(
-                    "max-h-[300px] overflow-y-auto",
                     "max-h-[300px] overflow-y-auto",
                     "[&::-webkit-scrollbar]:w-1.5",
                     "[&::-webkit-scrollbar-track]:bg-transparent",