[최권진] sprint7, 8

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
+    "dayjs": "^1.11.13",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^5.0.0",
@@ -19,8 +20,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.21.0",
@@ -29,6 +30,7 @@
     "globals": "^15.15.0",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3",
     "vite": "^6.2.0"
   }
 }

src/App.jsx

@@ -8,6 +8,7 @@ import SignupPage from "./pages/SignupPage";
 import AddItemPage from "./pages/AddItemPage";
 import ErrorPage from "./pages/ErrorPage";
 import BoardsPage from "./pages/BoardsPage";
+import ItemDetailPage from "./pages/ItemDetailPage";
 
 function App() {
   return (
@@ -17,6 +18,7 @@ function App() {
         <Route path="/login" element={<LoginPage />} />
         <Route path="/signup" element={<SignupPage />} />
         <Route path="/items" element={<ItemsPage />} />
+        <Route path="/product/:id" element={<ItemDetailPage />} />
         <Route path="/additem" element={<AddItemPage />} />
         <Route path="/faq" element={<FaqPage />} />
         <Route path="/privacy" element={<PrivacyPage />} />

src/Components/Common/FormInput.jsx → src/Components/Common/FormInput.tsx

@@ -1,5 +1,21 @@
 import React from "react";
 
+export interface FormInputType {
+  id: string;
+  type?: string;
+  label?: string;
+  value?: string;
+  placeholder?: string;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  error?:string;
+  hidden?: boolean;
+  className?: string;
+  rightIcon?: React.ReactNode;
+  accept?: string;
+  onChange?: (e:React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  ref?:React.Ref<HTMLInputElement | HTMLTextAreaElement>;
+}
+
 const FormInput = ({
   id,
   type = "text",
@@ -13,7 +29,7 @@ const FormInput = ({
   accept,
   ref,
   ...rest
-}) => {
+}:FormInputType) => {
   return (
     <div className={`${hidden ? "hidden" : "mb-[24px]"}`}>
       {label && !hidden && (
@@ -25,11 +41,9 @@ const FormInput = ({
         {type === "textarea" ? (
           <textarea
             id={id}
-            ref={ref}
-            type={type}
+            ref={ref as React.Ref<HTMLTextAreaElement>}
             placeholder={placeholder}
             onBlur={onBlur}
-            accept={accept}
             {...rest}
             className={`input-primary resize-none px-4 py-3 h-[282px] ${
               error ? "border border-red-500 mb-[8px]" : ""
@@ -38,7 +52,7 @@ const FormInput = ({
         ) : (
           <input
             id={id}
-            ref={ref}
+            ref={ref as React.Ref<HTMLInputElement>}
             type={type}
             placeholder={placeholder}
             onBlur={onBlur}

src/Components/Home/MainBanner.jsx → src/Components/Home/MainBanner.tsx

@@ -1,5 +1,6 @@
-import React from "react";
 import { Link } from "react-router-dom";
+import { MainBannerPropsType } from "./MainTypes";
+
 
 const MainBanner = ({
   title,
@@ -9,14 +10,20 @@ const MainBanner = ({
   showButton,
   height,
   margintop,
-}) => {
+}:MainBannerPropsType) => {
   return (
     <div
       className="w-full bg-[#cfe5ff] flex justify-center overflow-hidden pc:h-[540px] tablet:h-[771px] mobile:h-[540px]"
       style={{ marginTop: margintop }}
     >
-      <div className="w-[356px] h-[200px] flex flex-col relative right-[1rem] pc:top-[12.5rem]  tablet:top-[7rem] mobile:top-[2rem] pc:left-0  tablet:left-[18rem] mobile:left-[13rem] ">
-        <span className="h-[112px] font-[700] text-[#374151] break-words leading-[56px] pc:w-[300px] tablet:w-[1920px] mobile:w-[270px] pc:text-left tablet:text-left mobile:text-center pc:text-[40px] tablet:text-[40px] mobile:text-[32px]  ">
+      <div
+        className={`w-[356px] h-[200px] flex flex-col relative right-[1rem] 
+          pc:top-[12.5rem] tablet:top-[7rem] mobile:top-[2rem] 
+          pc:left-0 tablet:left-[18rem] ${
+            title === "믿을 수 있는" ? "left-[12rem]" : "left-[13rem]"
+          }`}
+      >
+        <span className="h-[112px] font-[700] text-[#374151] break-words leading-[56px] pc:w-[300px] tablet:w-[1920px] mobile:w-[270px] pc:text-left tablet:text-left mobile:text-center pc:text-[40px] tablet:text-[40px] mobile:text-[32px]">
           {title}
           {title === "믿을 수 있는" ? <br /> : null}
           {title2}
@@ -36,9 +43,14 @@ const MainBanner = ({
         src={image}
         alt="panda-image"
         style={{ height: height }}
-        className={
-          "h-[21.25rem] relative object-contain pc:top-[12.5rem] tablet:top-[26.9rem] mobile:top-[17.8rem] pc:right-0 tablet:right-[170px] mobile:right-[8.5rem] pc:min-w-[746px] tablet:min-w-[746px] mobile:min-w-[375px] "
-        }
+        className={`h-[21.25rem] relative object-contain
+          ${
+            title === "믿을 수 있는"
+              ? "top-[250px] tablet:top-[400px] pc:top-[150px]"
+              : "pc:top-[12.5rem] tablet:top-[26.9rem] mobile:top-[17.8rem]"
+          }
+          pc:right-0 tablet:right-[170px] mobile:right-[8.5rem]
+          pc:min-w-[746px] tablet:min-w-[746px] mobile:min-w-[375px]`}
       />
     </div>
   );

src/Components/Home/MainFooter.jsx → src/Components/Home/MainFooter.tsx

@@ -6,7 +6,7 @@ import instagramimg from "../../assets/instagram.png";
 import youtubeimg from "../../assets/youtube.png";
 
 const MainFooter = () => {
-  return (
+    return (
     <footer className="h-[160px] bg-[#111827]">
       <div className="max-w-screen-xl mx-[200px] gap-10 flex justify-between items-center px-6 pt-8 tablet:mx-[100px] tablet:gap-[60px] mobile:mx-[32px] ">
         <div>