feat: signin 중간완성

codeit-bootcamp-frontend · Apr 7, 2024 · f43f08e · f43f08e
1 parent 08fc14a
commit f43f08e
Show file tree

Hide file tree

Showing 19 changed files with 137 additions and 3,889 deletions.
diff --git a/pages/folder/index.tsx → app/folder/page.tsx b/pages/folder/index.tsx → app/folder/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useGetFolders } from "@/src/folder/data-access-folder";
 import { useGetLinks } from "@/src/link/data-access-link";
 import { Layout } from "@/src/sharing/feature-layout";
@@ -14,17 +15,23 @@ import { useIntersectionObserver } from "@/src/sharing/util";
 
 const FolderPage = () => {
   const { data: folders } = useGetFolders();
-  const [selectedFolderId, setSelectedFolderId] = useState<SelectedFolderId>(ALL_LINKS_ID);
+  const [selectedFolderId, setSelectedFolderId] =
+    useState<SelectedFolderId>(ALL_LINKS_ID);
   const { data: links, loading } = useGetLinks(selectedFolderId);
-  const { searchValue, handleChange, handleCloseClick, result } = useSearchLink(links);
+  const { searchValue, handleChange, handleCloseClick, result } =
+    useSearchLink(links);
   const { ref, isIntersecting } = useIntersectionObserver<HTMLDivElement>();
 
   return (
     <Layout isSticky={false} footerRef={ref}>
       <FolderLayout
         linkForm={<LinkForm hideFixedLinkForm={isIntersecting} />}
         searchBar={
-          <SearchBar value={searchValue} onChange={handleChange} onCloseClick={handleCloseClick} />
+          <SearchBar
+            value={searchValue}
+            onChange={handleChange}
+            onCloseClick={handleCloseClick}
+          />
         }
         folderToolBar={
           <FolderToolBar

diff --git a/app/global.scss b/app/global.scss
@@ -0,0 +1,4 @@
+@import "../styles/colors.scss";
+@import "../styles/variables.scss";
+@import "../styles/mixin.scss";
+@import "../styles/reset.css";
diff --git a/app/layout.jsx b/app/layout.jsx
@@ -0,0 +1,14 @@
+import Head from "next/head";
+import Image from "next/image";
+import { Inter } from "next/font/google";
+import "./global.scss";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function Home({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/pages/index.tsx → app/page.jsx b/pages/index.tsx → app/page.jsx
@@ -1,17 +1,7 @@
-import Head from "next/head";
-import Image from "next/image";
-import { Inter } from "next/font/google";
-import styles from "@/styles/Home.module.css";
 import Link from "next/link";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export default function Home() {
+export default function HomePage() {
   return (
     <>
-      <Head>
-        <title>Linkbrary</title>
-      </Head>
       <Link href="/folder">
         <h1
           style={{
@@ -69,7 +59,6 @@ export default function Home() {
           signin
         </h1>
       </Link>
-
       <main></main>
     </>
   );

diff --git a/pages/shared/index.tsx → app/shared/page.tsx b/pages/shared/index.tsx → app/shared/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useGetFolder } from "@/src/folder/data-access-folder";
 import { Layout } from "@/src/sharing/feature-layout";
 import { SharedLayout } from "@/src/page-layout/SharedLayout";
@@ -10,16 +11,25 @@ import { useSearchLink } from "@/src/link/util-search-link/useSearchLink";
 const SharedPage = () => {
   const { data } = useGetFolder();
   const { profileImage, ownerName, folderName, links } = data || {};
-  const { searchValue, handleChange, handleCloseClick, result } = useSearchLink(links);
+  const { searchValue, handleChange, handleCloseClick, result } =
+    useSearchLink(links);
 
   return (
     <Layout>
       <SharedLayout
         folderInfo={
-          <FolderInfo profileImage={profileImage} ownerName={ownerName} folderName={folderName} />
+          <FolderInfo
+            profileImage={profileImage}
+            ownerName={ownerName}
+            folderName={folderName}
+          />
         }
         searchBar={
-          <SearchBar value={searchValue} onChange={handleChange} onCloseClick={handleCloseClick} />
+          <SearchBar
+            value={searchValue}
+            onChange={handleChange}
+            onCloseClick={handleCloseClick}
+          />
         }
         cardList={
           <CardList>

diff --git a/pages/signin/index.js → app/signin/page.jsx b/pages/signin/index.js → app/signin/page.jsx
@@ -1,4 +1,4 @@
-import { SignInLayout } from "../../src/page-layout/SignInLayout/SignInLayout.jsx";
+import { SignInLayout } from "../../src/page-layout/SignInLayout/SignInLayout";
 
 export default function SignInPage() {
   return (

diff --git a/app/signup/page.jsx b/app/signup/page.jsx
@@ -0,0 +1,3 @@
+export default function SignUp() {
+  return <></>;
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
diff --git a/pages/_document.tsx b/pages/_document.tsx
diff --git a/src/folder/data-access-folder/useGetFolder.ts b/src/folder/data-access-folder/useGetFolder.ts
@@ -1,10 +1,12 @@
+"use client";
 import { SampleFolderRawData } from "@/src/folder/type";
 import { mapFolderData } from "@/src/folder/util-map";
 import { useAsync } from "@/src/sharing/util";
 import { axiosInstance } from "@/src/sharing/util";
 
 export const useGetFolder = () => {
-  const getFolder = () => axiosInstance.get<{ folder: SampleFolderRawData }>("sample/folder");
+  const getFolder = () =>
+    axiosInstance.get<{ folder: SampleFolderRawData }>("sample/folder");
   const { loading, error, data } = useAsync(getFolder);
 
   const folderData = mapFolderData(data?.folder);

diff --git a/src/folder/feature-folder-tool-bar/FolderToolBar.tsx b/src/folder/feature-folder-tool-bar/FolderToolBar.tsx
@@ -1,17 +1,23 @@
+"use client";
 import styles from "./FolderToolBar.module.scss";
 import classNames from "classnames/bind";
 import { AddFolderButton } from "@/src/folder/ui-add-folder-button";
 import { FolderButton } from "@/src/folder/ui-folder-button";
 import { IconAndTextButton } from "@/src/sharing/ui-icon-and-text-button";
-import { ALL_LINKS_TEXT, BUTTONS, KAKAO_SHARE_DATA, MODALS_ID } from "./constant";
+import {
+  ALL_LINKS_TEXT,
+  BUTTONS,
+  KAKAO_SHARE_DATA,
+  MODALS_ID,
+} from "./constant";
 import { ALL_LINKS_ID } from "@/src/link/data-access-link/constant";
 import { KeyboardEvent, useState } from "react";
 import { ShareModal } from "@/src/folder/ui-share-modal";
 import { InputModal } from "@/src/sharing/ui-input-modal";
 import { AlertModal } from "@/src/sharing/ui-alert-modal";
 import { Folder, SelectedFolderId } from "@/src/folder/type";
 import { copyToClipboard, useKakaoSdk } from "@/src/sharing/util";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 
 const cx = classNames.bind(styles);
 
@@ -21,7 +27,11 @@ type FolderToolBarProps = {
   onFolderClick: (folderId: SelectedFolderId) => void;
 };
 
-export const FolderToolBar = ({ folders, selectedFolderId, onFolderClick }: FolderToolBarProps) => {
+export const FolderToolBar = ({
+  folders,
+  selectedFolderId,
+  onFolderClick,
+}: FolderToolBarProps) => {
   const { shareKakao } = useKakaoSdk();
   const [currentModal, setCurrentModal] = useState<string | null>(null);
   const [inputValue, setInputValue] = useState<string>("");
@@ -32,7 +42,8 @@ export const FolderToolBar = ({ folders, selectedFolderId, onFolderClick }: Fold
       ? ALL_LINKS_TEXT
       : folders?.find(({ id }) => id === selectedFolderId)?.name ?? "";
 
-  const getShareLink = () => `${window.location.origin}/shared?user=1&folder=${selectedFolderId}`;
+  const getShareLink = () =>
+    `${window.location.origin}/shared?user=1&folder=${selectedFolderId}`;
   const closeModal = () => setCurrentModal(null);
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     if (event.key === "Escape") {

diff --git a/src/link/ui-read-only-card/ReadOnlyCard.tsx b/src/link/ui-read-only-card/ReadOnlyCard.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 import { Card } from "@/src/sharing/ui-card";
 import { CardContent } from "@/src/sharing/ui-card-content";

diff --git a/src/link/ui-search-bar/SearchBar.tsx b/src/link/ui-search-bar/SearchBar.tsx
@@ -12,7 +12,11 @@ type SearchBarProps = {
   onCloseClick: MouseEventHandler<HTMLButtonElement>;
 };
 
-export const SearchBar = ({ value, onChange, onCloseClick }: SearchBarProps) => {
+export const SearchBar = ({
+  value,
+  onChange,
+  onCloseClick,
+}: SearchBarProps) => {
   return (
     <div className={cx("container")}>
       <input

diff --git a/src/link/util-search-link/useSearchLink.ts b/src/link/util-search-link/useSearchLink.ts
@@ -1,3 +1,4 @@
+"use client";
 import { Link } from "@/src/link/type";
 import { ChangeEventHandler, MouseEventHandler, useState } from "react";
 

diff --git a/src/page-layout/SignInLayout/SignInLayout.jsx b/src/page-layout/SignInLayout/SignInLayout.jsx
@@ -1,9 +1,16 @@
+"use client";
 import classNames from "classnames/bind";
 import styles from "./SigninLayout.module.css";
 import Link from "next/link";
+import { useForm } from "react-hook-form";
 
 const LOGO_IMAGE = "images/linkbrary.svg";
 export function SignInLayout() {
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting, isSubmitted, errors },
+  } = useForm();
   const cx = classNames.bind(styles);
   return (
     <body className={cx("body")}>
@@ -17,22 +24,44 @@ export function SignInLayout() {
         </Link>
         <p className={cx("header-message")}>
           회원이 아니신가요?
-          <a className={cx("header-link")} href="signup.html">
+          <Link className={cx("header-link")} href="/signup">
             회원 가입하기
-          </a>
+          </Link>
         </p>
       </header>
       <div className={cx("sign-box")}>
-        <form id="form" className={cx("sign-form")}>
+        <form
+          id="form"
+          className={cx("sign-form")}
+          onSubmit={handleSubmit((data) => alert(JSON.stringify(data)))}
+        >
           <div className={cx("sign-inputs")}>
             <div className={cx("sign-input-box")}>
               <label className={cx("sign-input-label")}>이메일</label>
               <input
                 id="email"
                 className={cx("sign-input")}
                 placeholder="이메일을 입력해 주세요"
+                {...register("email", {
+                  required: "이메일을 입력해 주세요",
+                  pattern: {
+                    value: /\S+@\S+\.\S+/,
+                    message: "이메일 형식에 맞지 않습니다.",
+                  },
+                })}
+                aria-invalid={
+                  isSubmitted ? (errors.email ? "true" : "false") : undefined
+                }
               />
-              <p id="email-error-message" className={cx("error-message")}></p>
+              {errors.email && (
+                <p
+                  role="alert"
+                  id="email-error-message"
+                  className={cx("error-message")}
+                >
+                  {errors.email.message}
+                </p>
+              )}
             </div>
             <div className={cx("sign-input-box", "sign-password")}>
               <label className={cx("sign-input-label")}>비밀번호</label>
@@ -41,11 +70,26 @@ export function SignInLayout() {
                 className={cx("sign-input")}
                 type="password"
                 placeholder="영문, 숫자를 조합해 8자 이상 입력해 주세요."
+                {...register("password", {
+                  required: "비밀번호를 입력해 주세요.",
+                  minLength: {
+                    value: 8,
+                    message: "8자리 이상 비밀번호를 사용해주세요",
+                  },
+                })}
+                aria-invalid={
+                  isSubmitted ? (errors.password ? "true" : "false") : undefined
+                }
               />
-              <p
-                id="password-error-message"
-                className={cx("error-message")}
-              ></p>
+              {errors.password && (
+                <p
+                  role="alert"
+                  id="password-error-message"
+                  className={cx("error-message")}
+                >
+                  {errors.password.message}
+                </p>
+              )}
               <button
                 id="password-toggle"
                 className={cx("eye-button")}
@@ -55,25 +99,25 @@ export function SignInLayout() {
               </button>
             </div>
           </div>
-          <button className={cx("cta")} type="submit">
+          <button className={cx("cta")} type="submit" disabled={isSubmitting}>
             로그인
           </button>
         </form>
         <div className={cx("sns-box")}>
           <span className={cx("sns-text")}>소셜 로그인</span>
           <div className={cx("sns-links")}>
-            <a
+            <Link
               className={cx("sns-link", "google-link")}
               href="https://www.google.com/"
             >
               <img src="./images/google.png" />
-            </a>
-            <a
+            </Link>
+            <Link
               className={cx("sns-link", "kakao-link")}
               href="https://www.kakaocorp.com/page/"
             >
               <img src="./images/kakao.svg" />
-            </a>
+            </Link>
           </div>
         </div>
       </div>

diff --git a/src/page-layout/SignInLayout/SigninLayout.module.css b/src/page-layout/SignInLayout/SigninLayout.module.css
@@ -110,16 +110,16 @@
 }
 
 .error-message {
-  display: none;
+  /* display: none; */
   margin-top: -0.4rem;
   font-size: 1.4rem;
   font-weight: 400;
   color: #ff5b56;
 }
 
-.error-message.error-message-on {
+/* .error-message.error-message-on {
   display: inline-block;
-}
+} */
 
 .eye-button {
   position: absolute;
@@ -182,3 +182,7 @@
   padding-top: 0.2rem;
   background-color: #f5e14b;
 }
+.cta:disabled {
+  background-image: linear-gradient(135deg, #807eee 0%, #408999 100%);
+  cursor: not-allowed;
+}
diff --git a/src/sharing/util/index.js b/src/sharing/util/index.js
@@ -1,3 +1,4 @@
+"use client";
 export * from "./axiosInstance";
 export * from "./constant";
 export * from "./getElapsedTime";

diff --git a/src/sharing/util/useAsync.ts b/src/sharing/util/useAsync.ts
@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 import { useEffectOnce } from "./useEffectOnce";
 import { AxiosResponse } from "axios";