[전소은]19주차 과제 업로드

.eslintrc.json

@@ -1,3 +1,19 @@
 {
-  "extends": "next/core-web-vitals"
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "google",
+        "plugin:react/recommended"
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+    }
 }

components/Input/Input.jsx

@@ -1,30 +1,55 @@
-// Input.jsx
-
-import React, { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./Input.module.css";
+import Image from "next/image";
 
-const Input = forwardRef(
-  ({ state, type = "text", placeholder, errorMessage, ...props }, ref) => {
-    const combinedStyles = classNames(styles["input-base"], {
-      [styles["input-state"]]: state === "error",
-    });
-
-    return (
-      <>
+const Input = ({
+  label,
+  type,
+  error,
+  placeholder,
+  id,
+  value,
+  onKeyPress,
+  onChangeType,
+  onChange,
+  defaultValue,
+  registerConfig,
+}) => {
+  return (
+    <>
+      <label className={styles.label} htmlFor={id}>
+        {label}
+      </label>
+      <div className={styles.inputBox}>
         <input
-          ref={ref}
+          className={classNames(styles.input, { [styles.error]: error })}
           type={type}
-          className={combinedStyles}
+          id={id}
           placeholder={placeholder}
-          {...props}
+          defaultValue={defaultValue}
+          value={value}
+          onChange={onChange}
+          {...registerConfig}
         />
-        {errorMessage && (
-          <p className={styles["error-message"]}>{errorMessage}</p>
+        {(type === "password" || type === "text") && onChangeType && (
+          <button
+            className={classNames(styles.imgWrapper)}
+            onClick={onChangeType}
+            type="button"
+            tabIndex={-1}
+          >
+            <Image
+              src={`/eye-${type === "password" ? "off" : "on"}.svg`}
+              alt="eye-icon"
+              width={24}
+              height={24}
+            />
+          </button>
         )}
-      </>
-    );
-  }
-);
+      </div>
+      {error && <p className={styles.errorMessage}>{error}</p>}
+    </>
+  );
+};
 
 export default Input;

components/Input/Input.module.css

@@ -1,24 +1,24 @@
-.input-base {
+.input {
   border-radius: 8px;
   border: 1px solid var(--Linkbrary-gray20, #ccd5e3);
   background: var(--Linkbrary-white, #fff);
   display: flex;
-  width: 350px;
+  width: 35rem;
   padding: 18px 15px;
   justify-content: center;
   align-items: center;
 }
-.input-base::placeholder {
+.input::placeholder {
   color: #9fa6b2;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
 }
-.input-base:focus {
+.input:focus {
   outline: none;
   border: 1px solid #6d6afe;
 }
-.input-base:focus::placeholder {
+.input:focus::placeholder {
   color: #373740;
   font-size: 1.6rem;
   font-weight: 400;
@@ -35,11 +35,24 @@
   font-weight: 400;
   line-height: 2.4rem;
 }
-.error-messgae {
+.errorMessage {
   color: #ff5b56;
   font-size: 1.4rem;
   font-weight: 400;
 }
 .input-base [data-iserror="true"] {
   border: 1px solid #ff5b56;
 }
+.imgWrapper {
+  position: absolute;
+  top: 50%;
+  right: 1.5rem;
+  transform: translateY(-50%);
+}
+.inputBox {
+  margin: 0.8rem 0;
+  position: relative;
+}
+.input.error {
+  border-color: red;
+}

components/Nav/Nav.jsx

@@ -1,21 +1,37 @@
 import Image from "next/image";
 import styles from "./Nav.module.css";
-export default function Nav() {
+import Link from "next/link";
+
+export default function Nav({ userProfile }) {
   return (
-    <>
-      <div className={styles["nav-all"]}>
-        <div className={styles["nav-layout"]}>
-          <div className={styles["logo-img"]}>
-            <Image fill src="/Linkbrary.svg" alt="로고 이미지" />
-          </div>
+    <div className={styles["nav-all"]}>
+      <div className={styles["nav-layout"]}>
+        <div className={styles["logo-img"]}>
+          <Image
+            src="/Linkbrary.svg"
+            alt="로고 이미지"
+            width={100}
+            height={100}
+          />
+        </div>
+        {userProfile ? (
           <div className={styles["profile-layout"]}>
             <div className={styles["profile-img"]}>
-              <Image fill src="/profile.svg" alt="프로필 이미지" />
+              <Image
+                src={userProfile.image_source}
+                alt="프로필 이미지"
+                width={50}
+                height={50}
+              />
             </div>
-            <div className={styles["profile-email"]}>[email protected]</div>
+            <div className={styles["profile-email"]}>{userProfile.email}</div>
           </div>
-        </div>
+        ) : (
+          <Link href="/signin">
+            <div className={styles["login-btn"]}>로그인</div>
+          </Link>
+        )}
       </div>
-    </>
+    </div>
   );
 }

components/SearchBar/SearchBar.jsx

@@ -13,7 +13,7 @@ export const SearchBar = ({ value, onChange, onCloseClick }) => {
       <div className={styles["search-icon"]}>
         <Image
           fill
-          src="/serach.svg"
+          src="/search.svg"
           alt="검색창인 것을 알려주는 돋보기 아이콘"
         />
       </div>

lib/axios.js

@@ -0,0 +1 @@
+export const BASE_URL = " https://bootcamp-api.codeit.kr/api/linkbrary/v1";