머지 컨플릭트 피해서 그냥 한꺼번에...

codeit-bootcamp-frontend · May 27, 2024 · 71d04fb · 71d04fb
1 parent 6f47749
commit 71d04fb
Show file tree

Hide file tree

Showing 54 changed files with 1,118 additions and 632 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next"
+  "extends": "next/core-web-vitals"
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { AuthProvider } from '@/contexts/AuthContext';
+import '@/styles/reset.css';
+import '@/styles/globals.css';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang='ko'>
+      <head>
+        <title>Linkbrary</title>
+      </head>
+      <body>
+        <AuthProvider>{children}</AuthProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/app/lib/definitions.ts b/app/lib/definitions.ts
@@ -0,0 +1,41 @@
+import z from 'zod';
+
+export const SignInFormSchema = z.object({
+  email: z
+    .string()
+    .min(1, { message: '이메일을 입력해주세요' })
+    .email({ message: '올바른 이메일 형식이 아닙니다' }),
+
+  password: z
+    .string()
+    .min(1, { message: '비밀번호를 입력해주세요' })
+    .min(8, { message: '비밀번호는 최소 8자 이상이어야 합니다.' }),
+});
+
+export type SignInFormFields = z.infer<typeof SignInFormSchema>;
+
+export const SignUpFormSchema = z
+  .object({
+    email: z
+      .string()
+      .min(1, { message: '이메일을 입력해주세요' })
+      .email({ message: '올바른 이메일 형식이 아닙니다' }),
+
+    password: z
+      .string()
+      .min(1, { message: '비밀번호를 입력해주세요' })
+      .min(8, {
+        message: '비밀번호는 최소 8자 이상 영문, 숫자 조합이어야 합니다.',
+      })
+      .regex(/^(?=.*[A-Za-z])(?=.*\d).{8,}$/, {
+        message: '비밀번호는 영문과 조합이어야 합니다',
+      }),
+
+    confirmPassword: z.string().min(1, { message: '비밀번호를 입력해주세요' }),
+  })
+  .refine((data) => data.confirmPassword === data.password, {
+    message: '비밀번호가 일치하지 않습니다.',
+    path: ['confirmPassword'],
+  });
+
+export type SignUpFormFields = z.infer<typeof SignUpFormSchema>;
diff --git a/app/shared/[folderId]/page.tsx b/app/shared/[folderId]/page.tsx
@@ -0,0 +1,40 @@
+import { axiosInstance } from '@/utils/axiosInstance';
+import SharedLinkCardList from '@/components/SharedLinkCardList/SharedLinkCardList';
+import SharedProfile from '@/components/SharedProfile/SharedProfile';
+
+interface Props {
+  params: { folderId: string };
+}
+
+async function fetchFolderData(folderId: string) {
+  const response = await axiosInstance.get(`/folders/${folderId}`);
+  console.log(response);
+  return response.data.data[0];
+}
+
+async function fetchUserInfo(userId: number) {
+  const response = await axiosInstance.get(`/users/${userId}`);
+  console.log(response);
+  return response.data.data[0];
+}
+
+async function fetchUserLinks(userId: number, folderId: number) {
+  const response = await axiosInstance.get(
+    `/users/${userId}/links?folderId=${folderId}`
+  );
+  console.log(response);
+  return response.data.data;
+}
+
+export default async function Page({ params }: Props) {
+  const folderData = await fetchFolderData(params.folderId);
+  const userInfo = await fetchUserInfo(folderData.user_id);
+  const links = await fetchUserLinks(folderData.user_id, folderData.id);
+
+  return (
+    <>
+      <SharedProfile userInfo={userInfo} folderName={folderData.name} />
+      <SharedLinkCardList items={links} />
+    </>
+  );
+}
diff --git a/app/shared/layout.tsx b/app/shared/layout.tsx
@@ -0,0 +1,19 @@
+import { AuthProvider } from '@/contexts/AuthContext';
+import '@/styles/reset.css';
+import '@/styles/globals.css';
+import Header from '@/components/Header/Header';
+import Footer from '@/components/Footer/Footer';
+
+export default function SharedPageLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Header />
+      <main> {children}</main>
+      <Footer />
+    </>
+  );
+}
diff --git a/app/signin/page.tsx b/app/signin/page.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import styles from '@/styles/AuthPage.module.css';
+import AuthHeader from '@/components/AuthHeader/AuthHeader';
+import SignInForm from '@/components/SignInForm/SignInForm';
+import SocialAuth from '@/components/SocialAuth/SocialAuth';
+import { useUserInfo } from '@/hooks/useUserInfo';
+
+export default function SignUp() {
+  const router = useRouter();
+  const { user } = useUserInfo();
+  if (user) {
+    router.push('/folder');
+    return null;
+  }
+
+  return (
+    <>
+      <div className={styles.authPage}>
+        <div className={styles.authPageContainer}>
+          <AuthHeader>
+            <AuthHeader.Description>회원이 아니신가요?</AuthHeader.Description>
+            <AuthHeader.Link href={'/signup'}>회원 가입하기</AuthHeader.Link>
+          </AuthHeader>
+          <SignInForm />
+          <SocialAuth text='소셜 로그인' />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import styles from '@/styles/AuthPage.module.css';
+import AuthHeader from '@/components/AuthHeader/AuthHeader';
+import SignUpForm from '@/components/SignUpForm/SignUpForm';
+import SocialAuth from '@/components/SocialAuth/SocialAuth';
+import { useUserInfo } from '@/hooks/useUserInfo';
+
+export default function SignUp() {
+  const router = useRouter();
+  const { user } = useUserInfo();
+
+  if (user) {
+    router.push('/folder');
+    return null;
+  }
+
+  return (
+    <>
+      <div className={styles.authPage}>
+        <div className={styles.authPageContainer}>
+          <AuthHeader>
+            <AuthHeader.Description>이미 회원이신가요??</AuthHeader.Description>
+            <AuthHeader.Link href={'/signin'}>로그인하기</AuthHeader.Link>
+          </AuthHeader>
+          <SignUpForm />
+          <SocialAuth text='다른 방식으로 가입하기' />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/components/Account/Account.tsx b/components/Account/Account.tsx
@@ -5,7 +5,7 @@ interface AccountProps {
   userEmail: string;
 }
 
-const Account = ({ profileImgSource, userEmail }: AccountProps) => {
+export default function Account({ profileImgSource, userEmail }: AccountProps) {
   return (
     <div className={styles.account}>
       <img
@@ -16,5 +16,4 @@ const Account = ({ profileImgSource, userEmail }: AccountProps) => {
       <span className={styles.userEmail}>{userEmail}</span>
     </div>
   );
-};
-export default Account;
+}
diff --git a/components/AddLinkBar/AddLinkBar.module.scss b/components/AddLinkBar/AddLinkBar.module.scss
@@ -0,0 +1,73 @@
+.addLinkBarContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--background-color);
+  width: 100%;
+  padding: 60px 0 90px;
+  @media (max-width: 1124px) {
+  }
+
+  @media (max-width: 767px) {
+    padding: 24px 32px 40px;
+  }
+}
+
+.addLinkBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  padding: 16px 20px;
+  border-radius: 15px;
+  border: 1px solid #6d6afe;
+  background: #fff;
+  width: 800px;
+
+  .inputBox {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-grow: 1;
+    height: inherit;
+
+    .linkIcon {
+      width: 20px;
+      height: 20px;
+    }
+
+    .linkInput {
+      border: none;
+      font-size: 20px;
+      flex-grow: 1;
+    }
+  }
+
+  @media (max-width: 1124px) {
+    width: 664px;
+  }
+  @media (max-width: 767px) {
+    padding: 8px 10px;
+    width: 305px;
+
+    .inputBox {
+      gap: 8px;
+
+      .linkInput {
+        font-size: 14px;
+      }
+    }
+
+    .linkIcon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+.fixed {
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+  padding: 24px 0 24px;
+  z-index: 5;
+}
diff --git a/components/AddLinkBar/AddLinkBar.tsx b/components/AddLinkBar/AddLinkBar.tsx
@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+import Button from '@/components/Button/Button';
+import linkIcon from '@/public/assets/images/link.svg';
+import styles from './AddLinkBar.module.scss';
+import Image from 'next/image';
+
+export default function AddLinkBar() {
+  return (
+    <div className={styles.addLinkBarContainer}>
+      <div className={styles.addLinkBar}>
+        <div className={styles.inputBox}>
+          <Image
+            className={styles.linkIcon}
+            src={linkIcon}
+            alt='링크 추가하기'
+            width={20}
+            height={20}
+          />
+          <input
+            className={styles.linkInput}
+            placeholder='링크를 추가해 보세요'
+          />
+        </div>
+        <Button>추가하기</Button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/AuthHeader/AuthHeader.tsx b/components/AuthHeader/AuthHeader.tsx
@@ -1,26 +1,23 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import styles from './AuthHeader.module.css';
-
+import AuthHeaderLink from './AuthHeaderLink';
+import AuthHeaderDescription from './AuthHeaderDescription';
 interface AuthHeaderProps {
-  text: string;
-  linkText: string;
-  link: string;
+  children: React.ReactNode;
 }
 
-export default function AuthHeader({ text, linkText, link }: AuthHeaderProps) {
+export default function AuthHeader({ children }: AuthHeaderProps) {
   return (
     <div className={styles.authPageHeader}>
-      <Link href={'/'} className={styles.logo}>
+      <Link href='/' className={styles.logo}>
         <Image src={'/assets/images/logo.svg'} fill alt='Linkbrary' />
       </Link>
 
-      <div className={styles.membershipPromptBar}>
-        <span className={styles.membershipPromptText}>{text}</span>
-        <Link href={link} className={styles.membershipPromptLink}>
-          {linkText}
-        </Link>
-      </div>
+      <div className={styles.membershipPromptBar}>{children}</div>
     </div>
   );
 }
+
+AuthHeader.Description = AuthHeaderDescription;
+AuthHeader.Link = AuthHeaderLink;
diff --git a/components/AuthHeader/AuthHeaderDescription.tsx b/components/AuthHeader/AuthHeaderDescription.tsx
@@ -0,0 +1,11 @@
+import styles from './AuthHeader.module.css';
+
+interface AuthHeaderDescriptionProps {
+  children: React.ReactNode;
+}
+
+export default function AuthHeaderDescription({
+  children,
+}: AuthHeaderDescriptionProps) {
+  return <span className={styles.membershipPromptText}>{children}</span>;
+}
diff --git a/components/AuthHeader/AuthHeaderLink.tsx b/components/AuthHeader/AuthHeaderLink.tsx
@@ -0,0 +1,17 @@
+import Link, { LinkProps } from 'next/link';
+import styles from './AuthHeader.module.css';
+
+interface AuthHeaderLinkProps extends LinkProps {
+  children: React.ReactNode;
+}
+
+export default function AuthHeaderLink({
+  href,
+  children,
+}: AuthHeaderLinkProps) {
+  return (
+    <Link href={href} className={styles.membershipPromptLink}>
+      {children}
+    </Link>
+  );
+}