codeit-bootcamp-frontend · kiJu2 · Sep 12, 2025 · Sep 2, 2025 · Sep 2, 2025 · Sep 2, 2025
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*.env
diff --git a/index.html b/index.html
@@ -17,6 +17,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
@@ -24,6 +24,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "typescript": "^5.9.2",
     "vite": "^5.2.0"
   }
 }
diff --git a/src/App.jsx → src/App.tsx b/src/App.jsx → src/App.tsx
diff --git a/src/components/Inquiry.jsx b/src/components/Inquiry.jsx
@@ -6,7 +6,7 @@ import {
 import { requestInquiryLists } from "../services/inquiryApi";
 import { useNavigate } from "react-router";
 import icBack from "../assets/icons/ic_back.svg";
-import useService from "../hooks/useService";
+import useFetch from "../hooks/useService";
 import InquiryWriteArea from "./InquiryWriteArea";
 import InquiryList from "../pages/components/ItemDetail/InquiryList";
 
@@ -16,7 +16,7 @@ export default function Inquiry({ id }) {
   /**
    * 문의 내역을 가져온다.
    */
-  const { data, isLoading } = useService(() => requestInquiryLists(id));
+  const { data, isLoading } = useFetch(() => requestInquiryLists(id));
 
   return (
     <>

diff --git a/src/components/InquiryWriteArea.jsx b/src/components/InquiryWriteArea.jsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import usePost from "../hooks/usePost";
 import {
   InquirySubmitButton,
   InquiryTextArea,
@@ -30,7 +29,7 @@ export default function InquiryWriteArea() {
       },
     };
 
-    const { data: success } = usePost(requestPostInquiry(data));
+    // const { data: success } = usePost(requestPostInquiry(data));
 
     if (success) {
       location.reload(true);

diff --git a/src/hooks/usePost.jsx b/src/hooks/usePost.jsx
diff --git a/src/hooks/useService.jsx b/src/hooks/useService.jsx
@@ -3,18 +3,18 @@ import { useEffect, useState } from "react";
 /**
  * 데이터 통신을 위한 공통 커스텀 훅
  * @param {Function} fetchFunction 서버와 직접 통신하는 함수
- * @returns {data: object, isLoading: boolean}
+ * @returns {data: object, isLoading: boolean, error: boolean}
  */
-const useService = (fetchFunction) => {
+const useFetch = (fetchFunction) => {
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState();
   const [error, setError] = useState(false);
 
   useEffect(() => {
-    const getService = async (getDataFunction) => {
+    const fetcher = async (fetching) => {
       try {
         setIsLoading(true);
-        const response = await getDataFunction();
+        const response = await fetching();
 
         if (!response) {
           throw new Error("서버와의 통신에 실패했습니다.");
@@ -29,10 +29,10 @@ const useService = (fetchFunction) => {
       }
     };
 
-    getService(fetchFunction);
+    fetcher(fetchFunction);
   }, []);
 
   return { data, isLoading, error };
 };
 
-export default useService;
+export default useFetch;
diff --git a/src/layout/AuthLayout.jsx → src/layout/AuthLayout.tsx b/src/layout/AuthLayout.jsx → src/layout/AuthLayout.tsx
@@ -1,13 +1,14 @@
-import { useState } from 'react';
-import { Outlet } from 'react-router';
-import visibleEye_off from '../assets/icons/eyes_off.png';
-import visibleEye_on from '../assets/icons/eyes_on.png';
+import { useState } from "react";
+import { Outlet } from "react-router";
+import visibleEye_off from "../assets/icons/eyes_off.png";
+import visibleEye_on from "../assets/icons/eyes_on.png";
+import { isVisibleKey, VisibleValue } from "../types/authType";
 
 export default function AuthLayout() {
   /**
    * 비밀번호 보이기 / 가리기 상태
    */
-  const [visible, setVisible] = useState({
+  const [visible, setVisible] = useState<VisibleValue>({
     pw: false,
     checkPw: false,
   });
@@ -16,7 +17,9 @@ export default function AuthLayout() {
    * id 별로 비밀번호 가리기 여부를 변경한다.
    * @param {string} id
    */
-  const onClickVisible = (id) => {
+  const onClickVisible = (id: string) => {
+    if (!isVisibleKey(id)) return;
+
     setVisible((prevState) => ({
       ...prevState,
       [id]: !visible[id],

diff --git a/src/layout/Footer.jsx → src/layout/Footer.tsx b/src/layout/Footer.jsx → src/layout/Footer.tsx
@@ -1,8 +1,8 @@
-import '../styles/layout/footer.css';
-import ic_facebook from '../assets/icons/ic_facebook.svg';
-import ic_twitter from '../assets/icons/ic_twitter.svg';
-import ic_youtube from '../assets/icons/ic_youtube.svg';
-import ic_instagram from '../assets/icons/ic_instagram.svg';
+import "../styles/layout/footer.css";
+import ic_facebook from "../assets/icons/ic_facebook.svg";
+import ic_twitter from "../assets/icons/ic_twitter.svg";
+import ic_youtube from "../assets/icons/ic_youtube.svg";
+import ic_instagram from "../assets/icons/ic_instagram.svg";
 
 /**
  * 푸터

diff --git a/src/layout/Header.jsx → src/layout/Header.tsx b/src/layout/Header.jsx → src/layout/Header.tsx
diff --git a/src/layout/MainLayout.jsx → src/layout/MainLayout.tsx b/src/layout/MainLayout.jsx → src/layout/MainLayout.tsx
@@ -1,6 +1,6 @@
-import Header from './Header';
-import Footer from './Footer';
-import { Outlet } from 'react-router';
+import Header from "./Header";
+import Footer from "./Footer";
+import { Outlet } from "react-router";
 
 export default function MainLayout() {
   return (

diff --git a/src/main.jsx b/src/main.jsx
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import { BrowserRouter } from "react-router";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);
diff --git a/src/pages/Home.jsx → src/pages/Home.tsx b/src/pages/Home.jsx → src/pages/Home.tsx
@@ -1,10 +1,10 @@
-import '../styles/style.css';
-import home_top from '../assets/images/Img_home_top.png';
-import hot_item from '../assets/images/hot_item.png';
-import search_img from '../assets/images/search.png';
-import register_img from '../assets/images/register.png';
-import home_bottom from '../assets/images/Img_home_bottom.png';
-import { Link } from 'react-router';
+import "../styles/style.css";
+import home_top from "../assets/images/Img_home_top.png";
+import hot_item from "../assets/images/hot_item.png";
+import search_img from "../assets/images/search.png";
+import register_img from "../assets/images/register.png";
+import home_bottom from "../assets/images/Img_home_bottom.png";
+import { Link } from "react-router";
 
 /**
  * 메인화면

diff --git a/src/pages/auth/Login.jsx → src/pages/auth/Login.tsx b/src/pages/auth/Login.jsx → src/pages/auth/Login.tsx
@@ -1,16 +1,22 @@
-import '../../styles/auth.css';
-import ic_kakao from '../../assets/icons/ic_kakao.png';
-import ic_google from '../../assets/icons/ic_google.png';
-import { Link, useOutletContext } from 'react-router';
-import { useForm } from 'react-hook-form';
-import { useEffect } from 'react';
+import "../../styles/auth.css";
+import ic_kakao from "../../assets/icons/ic_kakao.png";
+import ic_google from "../../assets/icons/ic_google.png";
+import { Link, useOutletContext } from "react-router";
+import { useForm } from "react-hook-form";
+import { useEffect } from "react";
+import { AuthType } from "../../types/authType";
 
 /**
  * 로그인 화면
  */
 export default function Login() {
-  const { visible, setVisible, onClickVisible, visibleEye_off, visibleEye_on } =
-    useOutletContext();
+  const {
+    visible,
+    setVisible,
+    onClickVisible,
+    visibleEye_off,
+    visibleEye_on,
+  }: AuthType = useOutletContext();
 
   /**
    * 기본적으로 비밀번호 숨김 상태 유지
@@ -28,8 +34,8 @@ export default function Login() {
   const {
     register,
     formState: { errors },
-    handleSubmit,
-  } = useForm({ mode: 'onBlur' });
+    // handleSubmit,
+  } = useForm({ mode: "onBlur" });
 
   return (
     <>
@@ -40,20 +46,19 @@ export default function Login() {
               <div className="auth-logo-img"></div>
             </Link>
           </div>
-          <form id="form" className="form-box" onSubmit={handleSubmit}>
+          <form id="form" className="form-box">
             <div className="input-container">
               <div id="email-box" className="email-box">
                 <label htmlFor="email" className="basic-p">
                   이메일
                 </label>
                 <input
                   className={`input-box email ${
-                    errors.email ? 'auth-err-border' : ''
+                    errors.email ? "auth-err-border" : ""
                   }`}
-                  name="email"
                   type="email"
                   placeholder="이메일을 입력해주세요"
-                  {...register('email', {
+                  {...register("email", {
                     required: true,
                     pattern:
                       /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
@@ -70,12 +75,11 @@ export default function Login() {
                 </label>
                 <input
                   className={`input-box pw ${
-                    errors.password ? 'auth-err-border' : ''
+                    errors.password ? "auth-err-border" : ""
                   }`}
-                  name="password"
-                  type={visible.pw ? 'text' : 'password'}
+                  type={visible.pw ? "text" : "password"}
                   placeholder="비밀번호를 입력해주세요"
-                  {...register('password', {
+                  {...register("password", {
                     required: true,
                     minLength: 8,
                   })}
@@ -86,15 +90,15 @@ export default function Login() {
                     src={visible.pw ? visibleEye_on : visibleEye_off}
                     alt="visible-icon"
                     onClick={(e) => {
-                      onClickVisible(e.target.id);
+                      onClickVisible(e.currentTarget.id);
                     }}
                   />
                 </div>
               </div>
-              {errors.password?.type === 'required' && (
+              {errors.password?.type === "required" && (
                 <p className="auth-err-msg">비밀번호를 입력해주세요</p>
               )}
-              {errors.password?.type === 'minLength' && (
+              {errors.password?.type === "minLength" && (
                 <p className="auth-err-msg">
                   비밀번호를 8자 이상 입력해주세요.
                 </p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,3 +22,5 @@ dist-ssr @@
     *.njsproj
     *.sln
     *.sw?
+    *.env