[김세환]sprint11

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["addboard", "addfile", "sortmobile"]
+  "cSpell.words": ["addboard", "addfile", "Kakao", "signup", "sortmobile"]
 }

apis/addBoard.ts

@@ -2,24 +2,18 @@ import axios from "@/lib/axios";
 
 interface Params<T> {
   data: T;
-  token: string;
 }
 
-export const postNewArticle = async ({ data, token }: Params<object>) => {
-  const res = await axios.post("/articles", data, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
+export const postNewArticle = async ({ data }: Params<object>) => {
+  const res = await axios.post("/articles", data);
 };
 
-export const postUploadImage = async ({ data, token }: Params<File>) => {
+export const postUploadImage = async ({ data }: Params<File>) => {
   const formData = new FormData();
   formData.append("image", data);
   try {
-    const res = await axios.post("/images/upload", formData, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
+    const res = await axios.post("/images/upload", formData);
+    console.log(res);
     return res.data;
   } catch (err) {
     console.log(err);

apis/auth.ts

@@ -0,0 +1,35 @@
+import axios from "@/lib/axios";
+
+interface SignInData {
+  email: string;
+  password: string;
+}
+
+interface SignUpData extends SignInData {
+  passwordConfirmation: string;
+  nickname: string;
+}
+
+interface ResponseData {
+  accessToken: string;
+  refreshToken: string;
+}
+
+export const postSignUp = async (signUpData: SignUpData) => {
+  try {
+    await axios.post("/auth/signUp", signUpData);
+    return true;
+  } catch (err) {
+    console.log(err);
+    return false;
+  }
+};
+
+export const postSignIn = async (signInData: SignInData) => {
+  try {
+    const res = await axios.post("/auth/signIn", signInData);
+    return res.data;
+  } catch (err) {
+    return false;
+  }
+};

apis/comment.ts

@@ -3,21 +3,17 @@ import axios from "@/lib/axios";
 interface PostArticleCommentParams {
   articleId: number;
   data: string;
-  token: string;
 }
 
 export const postArticleComment = async ({
   articleId,
   data,
-  token,
 }: PostArticleCommentParams) => {
   try {
     const body = {
       content: data,
     };
-    const res = await axios.post(`/articles/${articleId}/comments`, body, {
-      headers: { Authorization: `Bearer ${token}` },
-    });
+    const res = await axios.post(`/articles/${articleId}/comments`, body);
   } catch (err) {
     console.log(err);
   }

apis/user.ts

@@ -0,0 +1,10 @@
+import axios from "@/lib/axios";
+
+export const getMe = async () => {
+  try {
+    const res = await axios.get("/users/me");
+    return res.data;
+  } catch {
+    console.log("유저정보가 없습니다");
+  }
+};

components/addboard/AddBoardForm.tsx

@@ -12,17 +12,17 @@ export default function AddBoardForm() {
     onChangeFileInput,
     isInputValid,
   } = useAddBoard();
+  const activeColor = isInputValid ? "bg-my-blue" : "bg-gray-400";
   return (
     <form className="m-container mt-[70px] pt-4">
       <div className="flex justify-between">
         <span className="font-bold text-xl">게시글 쓰기</span>
-        <Button
-          className="btn w-[74px] h-[42px]"
+        <button
           onClick={onSubmitForm}
-          activeBtn={isInputValid}
+          className={`flex-center text-white btn w-[74px] h-[42px]${activeColor}`}
         >
           등록
-        </Button>
+        </button>
       </div>
       <Input
         name="title"

components/boards/Article.tsx

@@ -25,8 +25,8 @@ export default function Article({ articles, setTarget }: Props) {
               href={`/boards/${article.id}`}
               className="flex h-full flex-col justify-between"
             >
-              <div className="flex justify-between gap-10">
-                <div className="font-semibold text-lg">{article.content}</div>
+              <div className="flex justify-between gap-10 overflow-ellipsis overflow-hidden whitespace-nowrap">
+                <div className="font-semibold text-lg ">{article.content}</div>
                 {article.image && (
                   <Image
                     className="rounded-lg border border-gray-200 max-h-[72px]"

components/layout/AuthContainer.tsx

@@ -0,0 +1,58 @@
+import { PropsWithChildren, ReactNode } from "react";
+import Image from "next/image";
+
+import logoImg from "@/public/images/img_logo.svg";
+import logoText from "@/public/images/img_logo_text.svg";
+import icKakao from "@/public/images/ic_kakao.png";
+import icGoogle from "@/public/images/ic_google.png";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import path from "path";
+
+const INITIAL_TEXT = {
+  login: {
+    msg: "판다마켓이 처음이신가요?",
+    link: "회원가입",
+  },
+  signup: {
+    msg: "이미 회원이신가요?",
+    link: "로그인",
+  },
+} as const;
+
+export default function AuthContainer({ children }: PropsWithChildren) {
+  const pathName = usePathname();
+  const nowPathname = pathName === "/auth/login" ? "login" : "signup";
+
+  return (
+    <div className="mx-auto mt-20 max-w-2xl px-4 md:mt-48 md:px-5 lg:mt-56">
+      <div className="flex-center">
+        <Link href="/" className="flex-center gap-3 md:gap-5">
+          <div className=" relative w-[52px] md:w-[103px] h-[52px] md:h-[103px]">
+            <Image fill priority src={logoImg} alt="로고 이미지" />
+          </div>
+          <div className="relative h-[45px] md:h-[90px] w-[133px] md:w-[268px] ">
+            <Image fill priority src={logoText} alt="로고 글씨" />
+          </div>
+        </Link>
+      </div>
+      <div className="pt-6 md:pt-14">{children}</div>
+      <div className="mt-6 flex w-full items-center justify-between rounded-lg bg-blue-100 px-6 py-4">
+        <span className="text-base">간편 로그인하기</span>
+        <div className="flex gap-4">
+          <Image alt="구글 아이콘" src={icGoogle} width={42} height={42} />
+          <Image alt="카카오 아이콘" src={icKakao} width={42} height={42} />
+        </div>
+      </div>
+      <p className="flex-center gap-1 pt-6 text-sm font-medium">
+        {INITIAL_TEXT[nowPathname].msg}
+        <Link
+          href={nowPathname === "login" ? "/auth/signup" : "/auth/login"}
+          className="text-my-blue underline"
+        >
+          {INITIAL_TEXT[nowPathname].link}
+        </Link>
+      </p>
+    </div>
+  );
+}

components/layout/Header.tsx

@@ -0,0 +1,83 @@
+import { useContext, useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import Image from "next/image";
+import Link from "next/link";
+
+import { UserContext, UserContextInterface } from "@/context/userProvider";
+
+import logoImg from "@/public/images/img_logo.svg";
+import logoText from "@/public/images/img_logo_text.svg";
+import icProfile from "@/public/images/ic_profile.svg";
+
+export default function Header() {
+  const pathname = usePathname();
+  const [visibleHeader, setVisibleHeader] = useState(false);
+  const [isLogin, setIsLogin] = useState(false);
+  const { user } = useContext(UserContext) as UserContextInterface;
+  useEffect(() => {
+    if (!user) {
+      setIsLogin(false);
+    } else {
+      setIsLogin(true);
+    }
+  }, [user]);
+
+  useEffect(() => {
+    if (pathname?.includes("auth")) {
+      setVisibleHeader(false);
+    } else {
+      setVisibleHeader(true);
+    }
+  }, [pathname]);
+  return (
+    <>
+      {visibleHeader && (
+        <nav
+          className={`fixed top-0 w-full border-b bg-white drop-shadow-sm z-10`}
+        >
+          <div className="mx-auto flex h-[70px] max-w-[1120px] items-center justify-between gap-2 px-4 py-2.5 md:gap-5 lg:gap-8">
+            <Link href="/" className="flex gap-2.5">
+              <Image
+                src={logoImg}
+                alt="로고이미지"
+                width={40}
+                height={41}
+                className="hidden md:block"
+                priority
+              />
+              <Image
+                src={logoText}
+                alt="로고글씨"
+                width={101}
+                height={41}
+                priority
+              />
+            </Link>
+            {pathname?.includes("items") && (
+              <div className="grow font-bold">
+                <Link href="forum" className="px-1 md:px-4">
+                  자유게시판
+                </Link>
+                <Link href="items" className={`px-1 text-gray-600 md:px-4`}>
+                  중고마켓
+                </Link>
+              </div>
+            )}
+            {isLogin ? (
+              <Image
+                src={icProfile}
+                width={32}
+                height={32}
+                alt="유저프로필이미지"
+              />
+            ) : (
+              <Link href="/auth/login">
+                <button className="btn h-[48px] w-[128px]">로그인</button>
+              </Link>
+            )}
+          </div>
+        </nav>
+      )}
+    </>
+  );
+}

components/ui/NewButton.tsx

@@ -0,0 +1,21 @@
+import { MouseEvent } from "react";
+
+type ButtonProps = {
+  className?: string;
+  children: string;
+  activeBtn?: boolean;
+};
+
+export default function NewButton({
+  children,
+  activeBtn,
+  className,
+}: ButtonProps) {
+  const activeColor = activeBtn ? "bg-my-blue" : "bg-gray-400";
+
+  return (
+    <button className={` flex-center text-white ${className} ${activeColor}`}>
+      {children}
+    </button>
+  );
+}

components/ui/NewInput.tsx

@@ -0,0 +1,37 @@
+import { FieldErrors, FieldValues } from "react-hook-form";
+
+interface InputProps {
+  label: string;
+  type: string;
+  placeholder: string;
+  name: string;
+  register: any;
+  validator: object;
+  errors: any;
+}
+
+export default function NewInput({
+  name,
+  placeholder,
+  type,
+  label,
+  register,
+  validator,
+  errors,
+}: InputProps) {
+  return (
+    <div className="flex flex-col pb-6">
+      <label className="pb-4 text-lg font-bold" htmlFor={name}>
+        {label}
+      </label>
+      <input
+        className="rounded-xl border-none bg-gray-100 px-6 py-4 outline-none"
+        type={type}
+        placeholder={placeholder}
+        id={name}
+        {...register(name, validator)}
+      ></input>
+      <div className="text-my-error-red">{errors[name]?.message}</div>
+    </div>
+  );
+}