Merge pull request #52 from LikeLion-KNU/refactor/dropdown

Refactor/dropdown zustand-persist 추가 필요없는 파일 삭제

src/hooks/useSubmitResult.tsx

@@ -6,7 +6,7 @@ import { useUserInfo } from "@/store/store";
 
 export const useSubmitResult = () => {
     const [isPending, setIsPending] = useState<boolean>(false);
-    const major = useUserInfo((state) => state.major);
+    const department = useUserInfo((state) => state.department);
 
     const navigate = useNavigate();
     const [searchParams] = useSearchParams();
@@ -15,7 +15,7 @@ export const useSubmitResult = () => {
         const mbti = searchParams.get("type");
         console.log(searchParams);
 
-        api.post("/stats", { department: major, mbti })
+        api.post("/stats", { department: department, mbti })
             .then(() => {
                 navigate(`/result?type=${mbti}`);
             })

src/pages/AnalyticsPage.tsx

@@ -30,7 +30,7 @@ export interface top10Response {
     top: [string, number][];
 }
 
-const renderData = (data: top10Response | null, isPending: boolean, isError: any) => {
+const renderData = (data: top10Response | null, isPending: boolean, isError: boolean) => {
     if (isPending) return <Text size="m">로딩중...</Text>;
     if (isError) return <Text size="m">오류가 발생했습니다.</Text>;
     if (!data) {

src/pages/HomePage.tsx

@@ -33,7 +33,7 @@ export default function HomePage() {
     const userInfo = useUserInfo((state) => state);
 
     const [isOpen, setIsOpen] = useState<boolean>(false);
-    const [selectedMajor, setSelectedMajor] = useState<string>("");
+    const [selectedDepartment, setSelectedDepartment] = useState<string>(userInfo.department);
 
     const handleSideBar = () => {
         setIsOpen(!isOpen);
@@ -44,16 +44,16 @@ export default function HomePage() {
             toast.error("이름을 입력해주세용");
             return;
         }
-        if (!userInfo.major) {
+        if (!userInfo.department) {
             toast.error("단과대학을 입력해주세용");
             return;
         }
         navigate("/select");
     };
 
     useEffect(() => {
-        userInfo.setMajor(selectedMajor);
-    }, [selectedMajor, userInfo.setMajor]);
+        userInfo.setDepartment(selectedDepartment);
+    }, [selectedDepartment, userInfo.setDepartment]);
 
     return (
         <HomePageWrapper>
@@ -98,13 +98,14 @@ export default function HomePage() {
                         height="45px"
                         placeholder="이름을 입력하세용"
                         onChange={(e) => userInfo.setName(e.currentTarget.value)}
+                        defaultValue={userInfo.name}
                     />
                     <DropDown
                         color="primary"
                         width="242px"
                         height="45px"
-                        selectedDepartment={selectedMajor}
-                        setSelectedDepartment={setSelectedMajor}
+                        selectedDepartment={selectedDepartment}
+                        setSelectedDepartment={setSelectedDepartment}
                     />
                     <Text size="xs" color="#6E6E6E">
                         개인정보는 외부에 공유되지 않으니 안심하세용

src/store/store.ts

@@ -1,18 +1,28 @@
 import { create } from "zustand";
 
+import { persist } from "zustand/middleware";
+
 type UserProps = {
     name: string;
-    major: string;
+    department: string;
 };
 
 type UserAction = {
     setName: (name: UserProps["name"]) => void;
-    setMajor: (major: UserProps["major"]) => void;
+    setDepartment: (department: UserProps["department"]) => void;
 };
 
-export const useUserInfo = create<UserProps & UserAction>()((set) => ({
-    name: "",
-    major: "",
-    setName: (name) => set(() => ({ name: name })),
-    setMajor: (major) => set(() => ({ major: major })),
-}));
+export const useUserInfo = create<UserProps & UserAction>()(
+    persist(
+        (set) => ({
+            name: "",
+            department: "",
+            setName: (name) => set(() => ({ name: name })),
+            setDepartment: (department) => set(() => ({ department: department })),
+        }),
+        {
+            name: "user-storage",
+            getStorage: () => localStorage,
+        },
+    ),
+);