[김미소]week15

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# page
+page_bak.tsx

api/folder.api.ts

@@ -0,0 +1,39 @@
+import { instance } from '@/lib/axios';
+
+const FOLDERS = '/users/1/folders';
+const LINKS = '/users/1/links';
+
+// folder name
+export async function getFolderProps() {
+  try {
+    const res = await instance.get(FOLDERS);
+    const { data } = res.data;
+    return data;
+  } catch (error) {
+    console.log('ERROR IN SERVER FETCHING DATA: ', error);
+    return;
+  }
+}
+export async function getFolderDetailProps(id: string) {
+  try {
+    const res = await instance.get(`${FOLDERS}/${id}`);
+    const { data } = res.data;
+    return data;
+  } catch (error) {
+    console.log('ERROR IN SERVER FETCHING DATA: ', error);
+    return;
+  }
+}
+
+// folder content list
+export async function getLinkProps(id?: string) {
+  try {
+    let endPoint = id ? `${LINKS}?folderId=${id}` : LINKS;
+    const res = await instance.get(endPoint);
+    const { data } = res.data;
+    return data;
+  } catch (error) {
+    console.log('ERROR IN SERVER FETCHING DATA: ', error);
+    return;
+  }
+}

app/(auth)/layout.tsx

@@ -0,0 +1,39 @@
+'use client';
+import Loading from '@/components/loading/Loading';
+import { ACCESS_TOKEN_KEY } from '@/lib/axios';
+import { JoinBody, JoinWrap } from '@/styles/loginStyle';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+function getCookie(name: string) {
+  const cookieString = document.cookie;
+  const cookies = cookieString.split('; ');
+  for (const cookie of cookies) {
+    const [cookieName] = cookie.split('=');
+    if (cookieName === name) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export default function Template({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (getCookie(ACCESS_TOKEN_KEY)) {
+      router.push('/folder');
+      return;
+    }
+    setIsLoading(false);
+  }, [isLoading]);
+
+  if (isLoading) return <Loading />;
+
+  return (
+    <JoinWrap className='no-header--container signup__wrap'>
+      <JoinBody>{children}</JoinBody>
+    </JoinWrap>
+  );
+}

app/(auth)/signin/page.tsx

@@ -0,0 +1,122 @@
+'use client';
+import AuthLink from '@/components/Auth/AuthLink';
+import AuthLogo from '@/components/Auth/AuthLogo';
+import AuthRegister from '@/components/Auth/AuthRegister';
+import Button from '@/components/common/atoms/Button';
+import { ErrorText, FormRowBox, FormWrap } from '@/components/join/formStyle';
+import { loginForm } from '@/components/join/interface';
+import { AuthContext } from '@/lib/auto.provider';
+import { instance } from '@/lib/axios';
+import { Relative } from '@/styles/commonStyle';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { useContext, useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+export default function SignIn() {
+  const router = useRouter();
+  const { handleLogin } = useContext(AuthContext);
+  const [IsVisibility, setIsVisibility] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setError,
+  } = useForm<loginForm>({ mode: 'onBlur' });
+
+  const handleLoginCheck = async (email: loginForm['email'], password: loginForm['password']) => {
+    try {
+      const res = await instance.post('/sign-in', { email, password });
+      const { data } = res;
+      if (data) {
+        handleLogin(data.data.accessToken);
+        router.push('/folder');
+      }
+    } catch {
+      setError('email', { message: '이메일을 확인해 주세요.' });
+      setError('password', { message: '비밀번호를 확인해 주세요.' });
+      return;
+    }
+  };
+
+  const handleValid = (data: loginForm) => {
+    const { email, password } = data;
+    handleLoginCheck(email, password);
+  };
+
+  return (
+    <>
+      <AuthLogo />
+      <AuthLink
+        desc={'회원이 아니신가요?'}
+        href={`/signup`}
+        btnText={'회원 가입하기'}
+      />
+      <FormWrap>
+        <form onSubmit={handleSubmit(handleValid)}>
+          <FormRowBox className='input__id'>
+            <label
+              htmlFor='input__id-element'
+              className='input__id-label'>
+              이메일
+            </label>
+            <input
+              {...register('email', {
+                required: '이메일을 입력해 주세요.',
+                pattern: {
+                  value: /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/,
+                  message: '올바른 이메일 주소가 아닙니다',
+                },
+              })}
+              type='email'
+              name='email'
+              id='input__id-element'
+              className={errors.email ? 'error' : ''}
+            />
+            <ErrorText className='error__text'>{errors.email?.message}</ErrorText>
+          </FormRowBox>
+          <FormRowBox className='input__password'>
+            <label
+              htmlFor='input__password-element'
+              className='input__password-label'>
+              비밀번호
+            </label>
+            <Relative>
+              <input
+                {...register('password', {
+                  required: '비밀번호를 입력해 주세요',
+                  pattern: {
+                    value: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,}$/,
+                    message: '비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.',
+                  },
+                })}
+                type={IsVisibility ? 'text' : 'password'}
+                name='password'
+                id='input__password-element'
+                className={errors.password ? 'error' : ''}
+              />
+              <Button
+                btnClass={'button--input-password'}
+                onclick={() => setIsVisibility((prev) => !prev)}>
+                <Image
+                  src={`/assets/icon/icon-eye-${IsVisibility ? 'on' : 'off'}.svg`}
+                  alt='비밀번호 보기'
+                  width={16}
+                  height={16}
+                />
+              </Button>
+            </Relative>
+            <ErrorText className='error__text'>{errors.password?.message}</ErrorText>
+          </FormRowBox>
+          <Button
+            type='submit'
+            btnClass={`button--gradient large btn_login`}>
+            로그인
+          </Button>
+        </form>
+      </FormWrap>
+      <AuthRegister title='소셜 로그인' />
+    </>
+  );
+}