merge dev

Author: junjeeong

src/pages/Home.tsx

@@ -1,6 +1,5 @@
 import { useNavigate } from "react-router-dom";
 import Banner from "@/components/Banner";
-import PrimaryButton from "@/components/button/PrimaryButton";
 import NavBar from "@/components/NavBar";
 import StrokeBanner from "@/components/StrokeBanner";
 import SubTitle from "@/components/SubTitle";
@@ -15,7 +14,7 @@ const Home = () => {
   };
 
   return (
-    <div className="flex w-[360px] flex-col bg-white md:w-[375px] lg:w-[500px]">
+    <div className="flex flex-col bg-white w-[360px] md:w-[375px] lg:w-[500px]">
       <header>
         <NavBar />
       </header>
@@ -26,7 +25,7 @@ const Home = () => {
         </section>
 
         <section className="mt-5 w-full" aria-label="빠른 대화">
-          <div className="w-full px-[20px] py-[13px]">
+          <div className="px-[20px] py-[13px] w-full">
             <SubTitle mode="빠른대화" />
           </div>
           <div className="px-5 py-3">
@@ -35,7 +34,7 @@ const Home = () => {
         </section>
 
         <section aria-label="친구 목록">
-          <div className="w-full px-[20px] py-[21px]">
+          <div className="px-[20px] py-[21px] w-full">
             <SubTitle mode="친구목록" />
           </div>
           <div className="flex justify-center pb-[127px]">

tsconfig.app.json

@@ -4,8 +4,12 @@
     "paths": {
       "@/*": ["*"],
       "@/components/*": ["components/*"],
+      "@/hooks/*": ["hooks/*"],
+      "@/store/*": ["store/*"],
+      "@/types/*": ["types/*"],
       "@/utils/*": ["utils/*"],
-      "@/store/*" : ["store/*"],
+      "@/constant/*": ["constant/*"],
+
     },
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",

vite.config.ts

@@ -3,35 +3,31 @@ import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 
-// https://vite.dev/config/
+// vite에서 @/store/useAuthStore와 같은 절대 경로를 사용하려면, 
+// vite.config.ts 파일에서 alias 설정을 추가해야 합니다.(tsconfig.json을 인식하지 못함)
+
 export default defineConfig({
   plugins: [react(), tailwindcss()],
   resolve: {
     alias: [
       { find: "@/", replacement: path.resolve(__dirname, "src") },
+      { find: "@/api", replacement: path.resolve(__dirname, "src/api") },
       {
         find: "@/components",
         replacement: path.resolve(__dirname, "src/components")
       },
+      { find: "@/hooks", replacement: path.resolve(__dirname, "src/hooks") },
       {
         find: "@/pages",
         replacement: path.resolve(__dirname, "src/pages")
       },
-      { find: "@/hooks", replacement: path.resolve(__dirname, "src/hooks") },
-      { find: "@/utils", replacement: path.resolve(__dirname, "src/utils") },
+      { find: "@/store", replacement: path.resolve(__dirname, "src/store") },
       { find: "@/types", replacement: path.resolve(__dirname, "src/types") },
+      { find: "@/utils", replacement: path.resolve(__dirname, "src/utils") },
       {
         find: "@/constants",
         replacement: path.resolve(__dirname, "src/constants")
       },
-      {
-        find: "@/store",
-        replacement: path.resolve(__dirname, "src/store")
-      },
-      {
-        find: "@/api",
-        replacement: path.resolve(__dirname, "src/api")
-      }
     ]
   }
 });