-
-
+
+
diff --git a/src/components/Header/Nav.jsx b/src/components/Header/Nav.jsx
index ffc585315..8e7e11da1 100644
--- a/src/components/Header/Nav.jsx
+++ b/src/components/Header/Nav.jsx
@@ -11,12 +11,12 @@ const MENU = [
path: "/items",
reload: true,
title: "중고마켓",
- activePathList: ["/items", "/addItem"],
+ activePathList: ["/items", "/addItem", "/modifyItem"],
},
];
function isInclude(path, list = []) {
- return list.includes(path);
+ return list.filter((item) => path.startsWith(item)).length > 0;
}
export function Nav() {
diff --git a/src/components/Header/Profile.jsx b/src/components/Header/Profile.jsx
index 90af15c48..3884d2638 100644
--- a/src/components/Header/Profile.jsx
+++ b/src/components/Header/Profile.jsx
@@ -10,7 +10,7 @@ export function Profile({ user, onLogout }) {
return (
-
+
로그아웃
diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
index b2308a442..d7441c062 100644
--- a/src/components/Layout/Layout.jsx
+++ b/src/components/Layout/Layout.jsx
@@ -1,16 +1,21 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, ScrollRestoration, useNavigation } from "react-router-dom";
import { Header } from "@components/Header";
import { Footer } from "@components/Footer";
import styles from "./Layout.module.scss";
+import { LoadingSpinner } from "@components/ui";
export function Layout({ hasNav = false, hasFooter = false }) {
+ const navigation = useNavigation();
+
return (
<>
+ {navigation.state === "loading" && }
{hasFooter && }
+
);
}
diff --git a/src/components/List/List.jsx b/src/components/List/List.jsx
index a062d2177..1c74064c9 100644
--- a/src/components/List/List.jsx
+++ b/src/components/List/List.jsx
@@ -1,5 +1,4 @@
-import { LoadingSpinner } from "@components/ui";
-import { Message } from "@components/List";
+import { LoadingSpinner, Message } from "@components/ui";
export function List({
items,
diff --git a/src/components/List/Message.jsx b/src/components/List/Message.jsx
deleted file mode 100644
index b8318a788..000000000
--- a/src/components/List/Message.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import styles from "./Message.module.scss";
-
-export function Message({ children }) {
- return {children}
;
-}
diff --git a/src/components/List/index.js b/src/components/List/index.js
index 7f00167d3..870e1dcb4 100644
--- a/src/components/List/index.js
+++ b/src/components/List/index.js
@@ -1,2 +1 @@
export * from "./List";
-export * from "./Message";
diff --git a/src/components/Search/Search.module.scss b/src/components/Search/Search.module.scss
index aa7d613fc..1b1f8056d 100644
--- a/src/components/Search/Search.module.scss
+++ b/src/components/Search/Search.module.scss
@@ -28,7 +28,7 @@
}
&::placeholder {
- color: (--color-secondary-400);
+ color: var(--color-secondary-400);
}
}
}
diff --git a/src/components/Section/Section.jsx b/src/components/Section/Section.jsx
index f749815ad..760dad5e6 100644
--- a/src/components/Section/Section.jsx
+++ b/src/components/Section/Section.jsx
@@ -17,5 +17,10 @@ function Content({ children }) {
return <>{children};
}
+function Footer({ children }) {
+ return {children}
;
+}
+
Section.Header = Header;
Section.Content = Content;
+Section.Footer = Footer;
diff --git a/src/components/Section/Section.module.scss b/src/components/Section/Section.module.scss
index 37b747364..38cc7235b 100644
--- a/src/components/Section/Section.module.scss
+++ b/src/components/Section/Section.module.scss
@@ -23,4 +23,9 @@
color: var(--color-secondary-900);
}
}
+
+ .footer {
+ display: flex;
+ justify-content: flex-end;
+ }
}
diff --git a/src/components/routing/ProtectedRoute.jsx b/src/components/routing/ProtectedRoute.jsx
index a4230372e..d0dab1c97 100644
--- a/src/components/routing/ProtectedRoute.jsx
+++ b/src/components/routing/ProtectedRoute.jsx
@@ -2,9 +2,7 @@ import { Navigate } from "react-router-dom";
import { useAuth } from "@context/AuthContext";
export default function ProtectedRoute({ children }) {
- const {
- auth: { accessToken },
- } = useAuth();
+ const accessToken = localStorage.getItem("accessToken");
if (!accessToken) {
alert("로그인이 필요합니다.");
diff --git a/src/components/ui/Alert.module.scss b/src/components/ui/Alert.module.scss
index 7e8900af0..5ccf19f6f 100644
--- a/src/components/ui/Alert.module.scss
+++ b/src/components/ui/Alert.module.scss
@@ -10,7 +10,7 @@
font-weight: 500;
&.error {
- color: var(--color-error);
+ color: var(--color-error-100);
background: #fedde0;
}
diff --git a/src/components/ui/Author.jsx b/src/components/ui/Author.jsx
new file mode 100644
index 000000000..cfa52f715
--- /dev/null
+++ b/src/components/ui/Author.jsx
@@ -0,0 +1,15 @@
+import { Avatar } from "@components/ui";
+import { toDate } from "@util/formatter";
+import styles from "./Author.module.scss";
+
+export function Author({ avatar, nickname, updateAt }) {
+ return (
+
+
+
+
{nickname}
+
+
+
);
diff --git a/src/components/ui/Avatar.module.scss b/src/components/ui/Avatar.module.scss
index 5192a36e1..281a79f6f 100644
--- a/src/components/ui/Avatar.module.scss
+++ b/src/components/ui/Avatar.module.scss
@@ -4,7 +4,7 @@
border-radius: 50%;
overflow: hidden;
- &:hover {
+ &.hover:hover {
outline: 2px solid var(--color-secondary-100);
}
}
diff --git a/src/components/ui/Button.jsx b/src/components/ui/Button.jsx
index b38bbb219..8d88746e2 100644
--- a/src/components/ui/Button.jsx
+++ b/src/components/ui/Button.jsx
@@ -2,8 +2,22 @@ import { Link } from "react-router-dom";
import clsx from "clsx";
import styles from "./Button.module.scss";
-export function Button({ to, className, children, size, ...props }) {
- const css = clsx(styles.btn, size && styles[`btn-${size}`], className);
+export function Button({
+ to,
+ className,
+ children,
+ size = "sm",
+ variant = "solid",
+ color = "primary",
+ ...props
+}) {
+ const css = clsx(
+ styles.btn,
+ variant && styles[variant],
+ color && styles[color],
+ size && styles[size],
+ className
+ );
const Component = to ? Link : "button";
const ComponentProps = {
className: css,
diff --git a/src/components/ui/Button.module.scss b/src/components/ui/Button.module.scss
index 1b070554e..96483587e 100644
--- a/src/components/ui/Button.module.scss
+++ b/src/components/ui/Button.module.scss
@@ -1,27 +1,178 @@
@use "@assets/scss/base/mixins";
.btn {
- display: flex;
+ display: inline-flex;
justify-content: center;
align-items: center;
- background: var(--color-primary-100);
- color: var(--color-white);
+ gap: 0.8rem;
- &:hover {
- background: var(--color-primary-200);
+ &:disabled {
+ cursor: not-allowed;
}
+}
+
+.solid {
+ &.primary {
+ background: var(--color-primary-100);
+ color: var(--color-white);
- &:active {
- background: var(--color-primary-300);
+ &:hover {
+ background: var(--color-primary-200);
+ }
+
+ &:active {
+ background: var(--color-primary-300);
+ }
+
+ &:disabled {
+ background: var(--color-secondary-400);
+ }
}
- &:disabled {
- background: var(--color-secondary-400);
- cursor: not-allowed;
+ &.secondary {
+ background: var(--color-secondary-600);
+ color: var(--color-white);
+
+ &:hover {
+ background: var(--color-secondary-700);
+ }
+
+ &:active {
+ background: var(--color-secondary-800);
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ }
+ }
+
+ &.error {
+ background: var(--color-error-100);
+ color: var(--color-white);
+
+ &:hover {
+ background: var(--color-error-200);
+ }
+
+ &:active {
+ background: var(--color-error-300);
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ }
+ }
+}
+
+.outlined {
+ background: transparent;
+ color: #737373;
+ border: 1px solid;
+
+ &.primary {
+ border-color: var(--color-primary-100);
+ color: var(--color-primary-100);
+
+ &:hover {
+ border-color: var(--color-primary-200);
+ }
+
+ &:active {
+ border-color: var(--color-primary-300);
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ }
+ }
+
+ &.secondary {
+ border-color: var(--color-secondary-400);
+ color: var(--color-secondary-500);
+
+ &:hover {
+ border-color: var(--color-secondary-600);
+ }
+
+ &:active {
+ border-color: var(--color-secondary-800);
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ }
+ }
+
+ &.error {
+ border-color: var(--color-error-100);
+ color: var(--color-error-100);
+
+ &:hover {
+ border-color: var(--color-error-200);
+ }
+
+ &:active {
+ border-color: var(--color-error-300);
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ }
+ }
+}
+
+.text {
+ &.primary {
+ background: transparent;
+ color: var(--color-primary-100);
+
+ &:hover {
+ background: var(--color-secondary-100);
+ }
+
+ &:active {
+ background: var(--color-secondary-300);
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ }
+ }
+
+ &.secondary {
+ color: var(--color-secondary-500);
+
+ &:hover {
+ background: var(--color-secondary-100);
+ }
+
+ &:active {
+ background: var(--color-secondary-300);
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ }
+ }
+
+ &.error {
+ color: var(--color-error-100);
+
+ &:hover {
+ background: var(--color-secondary-100);
+ }
+
+ &:active {
+ background: var(--color-secondary-300);
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ }
}
}
-.btn-xl {
+.xl {
width: 100%;
height: 5.6rem;
border-radius: 9999px;
@@ -29,7 +180,7 @@
font-weight: 600;
}
-.btn-lg {
+.lg {
width: 35.7rem;
height: 5.6rem;
border-radius: 9999px;
@@ -43,7 +194,7 @@
}
}
-.btn-md {
+.md {
width: 24rem;
height: 4.8rem;
border-radius: 9999px;
@@ -51,7 +202,7 @@
font-weight: 600;
}
-.btn-sm {
+.sm {
min-width: 8.8rem;
height: 4.2rem;
padding: 0 2.4rem;
@@ -60,7 +211,7 @@
font-weight: 600;
}
-.btn-sm-48 {
+.sm-48 {
width: 8.8rem;
height: 4.8rem;
border-radius: 8px;
diff --git a/src/components/ui/Dropdown.jsx b/src/components/ui/Dropdown.jsx
index 50b7bc492..9b7810f74 100644
--- a/src/components/ui/Dropdown.jsx
+++ b/src/components/ui/Dropdown.jsx
@@ -9,16 +9,33 @@ import {
import styles from "./Dropdown.module.scss";
/** compound pattern + context api 복습 (mui dropdown 참고) */
-const DropdownContext = createContext();
-const useDropdown = () => useContext(DropdownContext);
+const DropdownStateContext = createContext();
+const DropdownDispatchContext = createContext();
+
+const useDropdownState = () => {
+ const context = useContext(DropdownStateContext);
+ if (!context) {
+ throw new Error("Dropdown components must be used within an Dropdown.");
+ }
+ return context;
+};
+
+const useDropdownDispatch = () => {
+ const context = useContext(DropdownDispatchContext);
+ if (!context) {
+ throw new Error("Dropdown components must be used within an Dropdown.");
+ }
+ return context;
+};
export function Dropdown({ onChange = () => {}, children }) {
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef(null);
- const value = {
+ const state = { isOpen };
+
+ const dispatch = {
onChange,
- isOpen,
setIsOpen,
};
@@ -36,16 +53,18 @@ export function Dropdown({ onChange = () => {}, children }) {
}, []);
return (
-
-
- {children}
-
-
+
+
+
+
+
);
}
function Toggle({ children, asChild = false }) {
- const { setIsOpen } = useDropdown();
+ const { setIsOpen } = useDropdownDispatch();
function handleClick() {
setIsOpen((prev) => !prev);
@@ -63,7 +82,7 @@ function Toggle({ children, asChild = false }) {
}
function Menu({ children }) {
- const { isOpen } = useDropdown();
+ const { isOpen } = useDropdownState();
if (!isOpen) return null;
@@ -71,7 +90,7 @@ function Menu({ children }) {
}
function Item({ value, onClick, children }) {
- const { setIsOpen, onChange } = useDropdown();
+ const { setIsOpen, onChange } = useDropdownDispatch();
function handleClick() {
setIsOpen(false);
diff --git a/src/components/ui/Dropdown.module.scss b/src/components/ui/Dropdown.module.scss
index ffb48be98..a26c7cbd4 100644
--- a/src/components/ui/Dropdown.module.scss
+++ b/src/components/ui/Dropdown.module.scss
@@ -1,12 +1,13 @@
.list-container {
- position: relative;
-
+ .list-inner {
+ position: relative;
+ }
.list {
overflow: hidden;
z-index: 100;
position: absolute;
right: 0;
- top: 5rem;
+ top: calc(100% + 0.4rem);
width: 13rem;
border-radius: 1.2rem;
border: 1px solid var(--color-secondary-200);
diff --git a/src/components/ui/Fullscreen.jsx b/src/components/ui/Fullscreen.jsx
new file mode 100644
index 000000000..4690e2584
--- /dev/null
+++ b/src/components/ui/Fullscreen.jsx
@@ -0,0 +1,35 @@
+import { cloneElement, useState } from "react";
+import { createPortal } from "react-dom";
+import styles from "./Fullscreen.module.scss";
+
+export function Fullscreen({ children }) {
+ const [imgSrc, setImgSrc] = useState(null);
+
+ function handleOpenScreen(src) {
+ setImgSrc(src);
+ }
+
+ function handleCloseScreen() {
+ setImgSrc(null);
+ }
+
+ return (
+ <>
+ {cloneElement(children, { onOpenScreen: handleOpenScreen })}
+ {imgSrc &&
+ createPortal(
+ ,
+ document.querySelector("#root")
+ )}
+
+ );
+}
+
+function ImgViewer({ src, onCloseScreen }) {
+ return (
+
+
아무곳이나 클릭하시면 닫힙니다.
+
+
{children}
;
+}
diff --git a/src/components/List/Message.module.scss b/src/components/ui/Loading.module.scss
similarity index 91%
rename from src/components/List/Message.module.scss
rename to src/components/ui/Loading.module.scss
index c3ae615df..30ab8782c 100644
--- a/src/components/List/Message.module.scss
+++ b/src/components/ui/Loading.module.scss
@@ -1,4 +1,4 @@
-.message {
+.loading {
display: flex;
align-items: center;
justify-content: center;
diff --git a/src/components/ui/Message.jsx b/src/components/ui/Message.jsx
new file mode 100644
index 000000000..dba8aa7f9
--- /dev/null
+++ b/src/components/ui/Message.jsx
@@ -0,0 +1,12 @@
+import clsx from "clsx";
+import styles from "./Message.module.scss";
+
+export function Message({ icon, alt = "", compact = false, children }) {
+ const css = clsx(styles.message, compact && styles.compact);
+ return (
+
+ {icon &&
}
+ {children}
+
diff --git a/src/components/ui/Thumbnail.jsx b/src/components/ui/Thumbnail.jsx
index 25bc85883..9a7e1476d 100644
--- a/src/components/ui/Thumbnail.jsx
+++ b/src/components/ui/Thumbnail.jsx
@@ -2,29 +2,39 @@ import clsx from "clsx";
import defaultImg from "@assets/img/icon/icon_placeholder.svg";
import clearIcon from "@assets/img/icon/icon_clear.svg";
import styles from "./Thumbnail.module.scss";
+import { useState } from "react";
export function Thumbnail({
src = defaultImg,
alt = "",
onRemove,
aspectRatio = "1 / 1",
+ onOpenScreen,
}) {
- function handleError(e) {
- e.target.src = defaultImg;
- e.target.classList.add(styles.default);
- }
+ const [isDefault, setIsDefault] = useState(src === defaultImg);
+ const hasFullScreen = onOpenScreen && !isDefault;
- const imgCss = clsx(styles.img, src === defaultImg && styles.default);
+ const coverCss = clsx(styles.cover, hasFullScreen && styles.fullscreen);
+ const imgCss = clsx(styles.img, isDefault && styles.default);
return (
-
+ onOpenScreen(src) })}
+ >
{onRemove && (
)}
-
+ 
setIsDefault(true)}
+ />
);
}
diff --git a/src/components/ui/Thumbnail.module.scss b/src/components/ui/Thumbnail.module.scss
index 046f95b9c..395957303 100644
--- a/src/components/ui/Thumbnail.module.scss
+++ b/src/components/ui/Thumbnail.module.scss
@@ -9,6 +9,10 @@
background: var(--color-secondary-100);
transition: all 0.2s;
+ &.fullscreen {
+ cursor: zoom-in;
+ }
+
.img {
width: 100%;
height: 100%;
diff --git a/src/components/ui/index.js b/src/components/ui/index.js
index 28f91247f..69dc6d4e4 100644
--- a/src/components/ui/index.js
+++ b/src/components/ui/index.js
@@ -8,3 +8,7 @@ export * from "./Select";
export * from "./Tags";
export * from "./Temporary";
export * from "./Thumbnail";
+export * from "./Author";
+export * from "./LikeButton";
+export * from "./Message";
+export * from "./Fullscreen";
diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx
index 68b6c029a..7cc94324c 100644
--- a/src/context/AuthContext.jsx
+++ b/src/context/AuthContext.jsx
@@ -1,5 +1,7 @@
-import { createContext, useContext, useEffect, useState } from "react";
-import { getUser, login, refreshAccessToken } from "@service/auth";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { getUser, login, refreshAccessToken, signUp } from "@service/auth";
+import { isTokenValid } from "@util/helper";
+import { axiosInstance } from "@service/axios";
const AuthContext = createContext();
@@ -10,36 +12,86 @@ export function AuthProvider({ children }) {
user: null,
}));
+ // request interceptor : access토큰이 변경될때마다, 요청 헤더에 토큰 심어주기
useEffect(() => {
if (!auth.accessToken) return;
+
+ const authInterceptor = axiosInstance.interceptors.request.use(
+ async function (config) {
+ if (!config._retry && auth.accessToken) {
+ config.headers.Authorization = `Bearer ${auth.accessToken}`;
+ }
+
+ return config;
+ }
+ );
+ return () => {
+ axiosInstance.interceptors.request.eject(authInterceptor);
+ };
+ }, [auth.accessToken]);
+
+ // response interceptor : 응답 실패시 토큰 재발급
+ useEffect(() => {
+ if (!auth.refreshToken) return;
+
+ const refreshInterceptor = axiosInstance.interceptors.response.use(
+ function (response) {
+ return response;
+ },
+ async function (error) {
+ if (error.response?.status === 401) {
+ try {
+ error.config._retry = true;
+ const accessToken = await handleRrefreshToken();
+ error.config.headers.Authorization = `Bearer ${accessToken}`;
+
+ return axiosInstance(error.config);
+ } catch (refreshError) {
+ console.log("refresh error", refreshError);
+ return Promise.reject(refreshError);
+ }
+ }
+
+ return Promise.reject(error);
+ }
+ );
+ return () => {
+ axiosInstance.interceptors.response.eject(refreshInterceptor);
+ };
+ }, []);
+
+ // access토큰이 변경될때마다, 유저정보 가져와서 업데이트
+ useEffect(() => {
+ if (!auth.accessToken) return;
+
(async function getUserData() {
try {
- const userData = await getUser(auth.accessToken);
- setAuth((prev) => ({ ...prev, user: userData }));
+ // 토큰이 만료되었으면 재발급후 종료 (다시 이 effect가 호출되어서 유저정보를 가져옴)
+ if (!isTokenValid(auth.accessToken)) {
+ return await handleRrefreshToken();
+ }
+
+ const user = await getUser();
+ setAuth((prev) => ({ ...prev, user }));
} catch (err) {
- if (err.status === 401 && auth.refreshToken) {
- await handleRefreshToken();
- } else {
- console.log(err);
+ if (err.name !== "CanceledError") {
+ console.error(err);
clear();
}
}
})();
}, [auth.accessToken]);
- async function handleRefreshToken() {
+ async function handleRrefreshToken() {
try {
- const { accessToken: newAccessToken } = await refreshAccessToken(
- auth.refreshToken
- );
-
- localStorage.setItem("accessToken", newAccessToken);
- setAuth((prev) => ({ ...prev, accessToken: newAccessToken }));
+ const { accessToken } = await refreshAccessToken(auth.refreshToken);
+ localStorage.setItem("accessToken", accessToken);
+ setAuth((prev) => ({ ...prev, accessToken }));
- return newAccessToken;
+ return accessToken;
} catch (err) {
- console.log(err);
clear();
+ throw err;
}
}
@@ -50,11 +102,7 @@ export function AuthProvider({ children }) {
password,
});
- setAuth({
- accessToken: accessToken,
- refreshToken: refreshToken,
- user: user,
- });
+ setAuth({ user, accessToken, refreshToken });
localStorage.setItem("accessToken", accessToken);
localStorage.setItem("refreshToken", refreshToken);
@@ -66,6 +114,10 @@ export function AuthProvider({ children }) {
}
}
+ async function handleSignup(formData) {
+ return signUp(formData);
+ }
+
function clear() {
localStorage.removeItem("accessToken");
localStorage.removeItem("refreshToken");
@@ -82,33 +134,11 @@ export function AuthProvider({ children }) {
window.location.replace("/");
}
- function withAuth(asyncFn) {
- return async function (...args) {
- try {
- return await asyncFn(...args, auth.accessToken);
- } catch (err) {
- if (err.status === 401 && auth.refreshToken) {
- try {
- const newAccessToken = await handleRefreshToken();
- return await asyncFn(...args, newAccessToken);
- } catch (refreshErr) {
- console.error("리프레시 요청 실패");
- clear();
- throw refreshErr;
- }
- } else {
- console.error(err);
- throw err;
- }
- }
- };
- }
-
const value = {
auth,
handleLogin,
handleLogout,
- withAuth,
+ handleSignup,
};
return {children};
diff --git a/src/hooks/useAsync.js b/src/hooks/useAsync.js
index 852ef9e95..39bc51cc6 100644
--- a/src/hooks/useAsync.js
+++ b/src/hooks/useAsync.js
@@ -1,25 +1,19 @@
-import { useRef, useState } from "react";
+import { useState } from "react";
export default function useAsync(asyncFn) {
const [result, setResult] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
- const abortcontrollerRef = useRef(null);
async function wrappedFn(...args) {
- abortcontrollerRef.current?.abort();
- abortcontrollerRef.current = new AbortController();
-
try {
setError(null);
setIsLoading(true);
- const res = await asyncFn(...args, {
- signal: abortcontrollerRef.current?.signal,
- });
+ const res = await asyncFn(...args);
setResult(res);
return res;
} catch (err) {
- if (err.name !== "AbortError") {
+ if (err.name !== "CanceledError") {
setError(err);
}
} finally {
diff --git a/src/hooks/useForm.js b/src/hooks/useForm.js
index a86c20899..824c6688d 100644
--- a/src/hooks/useForm.js
+++ b/src/hooks/useForm.js
@@ -1,6 +1,6 @@
import { useState } from "react";
-export default function useForm(formSchema) {
+export default function useForm(formSchema, defaultValues = {}) {
//rule은 따로 보관하기
const rules = Object.fromEntries(
Object.entries(formSchema)
@@ -12,7 +12,7 @@ export default function useForm(formSchema) {
const initialState = Object.fromEntries(
Object.entries(formSchema).map(([key, value]) => [
key,
- { value: value.value, error: null },
+ { value: defaultValues[key] ?? value.value, error: null },
])
);
@@ -203,6 +203,10 @@ export default function useForm(formSchema) {
};
}
+ function reset() {
+ setFormState(initialState);
+ }
+
return {
formState,
formError,
@@ -213,5 +217,6 @@ export default function useForm(formSchema) {
handleSubmit,
getValues,
register,
+ reset,
};
}
diff --git a/src/hooks/useList.js b/src/hooks/useList.js
deleted file mode 100644
index 59e34c5bb..000000000
--- a/src/hooks/useList.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useEffect } from "react";
-import useAsync from "@hooks/useAsync";
-
-export default function useList(fetchFn, params) {
- const { page, pageSize, keyword, orderBy } = params;
- const { isLoading, error, result, wrappedFn: getData } = useAsync(fetchFn);
- const items = result?.list || [];
- const totalCount = result?.totalCount || 0;
-
- useEffect(() => {
- (async function fetchData() {
- await getData({
- page,
- pageSize,
- keyword,
- orderBy,
- });
- })();
- }, [page, pageSize, keyword, orderBy]);
-
- return {
- isLoading,
- error,
- items,
- totalCount,
- };
-}
diff --git a/src/hooks/usePageSize.js b/src/hooks/useResponsive.js
similarity index 77%
rename from src/hooks/usePageSize.js
rename to src/hooks/useResponsive.js
index 97d739fef..fb4d92a72 100644
--- a/src/hooks/usePageSize.js
+++ b/src/hooks/useResponsive.js
@@ -2,20 +2,20 @@ import { useEffect, useState } from "react";
import { getDeviceType } from "@util/breakpoints";
import { debounce } from "@util/debounce";
-export default function usePageSize(
- initialPageSize = {
+export default function useReponsive(
+ initialOption = {
pc: 10,
tablet: 6,
mobile: 4,
}
) {
const [pageSize, setPageSize] = useState(
- () => initialPageSize[getDeviceType()]
+ () => initialOption[getDeviceType()]
);
useEffect(() => {
const debounceHandleResize = debounce(function () {
- const targetSize = initialPageSize[getDeviceType()];
+ const targetSize = initialOption[getDeviceType()];
setPageSize(targetSize);
}, 100);
diff --git a/src/hooks/useSingleFile.js b/src/hooks/useSingleFile.js
index a201ce6b5..31966e5b0 100644
--- a/src/hooks/useSingleFile.js
+++ b/src/hooks/useSingleFile.js
@@ -21,13 +21,22 @@ export default function useSingleFile({
useEffect(() => {
if (!value) return;
- const objectURL = URL.createObjectURL(value);
- setPreview(objectURL);
- return () => {
- setPreview(null);
- URL.revokeObjectURL(objectURL);
- };
+ if (typeof value === "string") {
+ setPreview(value);
+
+ return () => {
+ setPreview(null);
+ };
+ } else {
+ const objectURL = URL.createObjectURL(value);
+ setPreview(objectURL);
+
+ return () => {
+ setPreview(null);
+ URL.revokeObjectURL(objectURL);
+ };
+ }
}, [value]);
function handleChange(e) {
@@ -50,7 +59,6 @@ export default function useSingleFile({
}
function handleRemove() {
- console.log("e");
if (!fileRef.current) return;
fileRef.current.value = "";
diff --git a/src/pages/auth/LoginPage.jsx b/src/pages/auth/LoginPage.jsx
index 00864d425..d20c25943 100644
--- a/src/pages/auth/LoginPage.jsx
+++ b/src/pages/auth/LoginPage.jsx
@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { Navigate, useNavigate } from "react-router-dom";
import { useAuth } from "@context/AuthContext";
import useForm from "@hooks/useForm";
import { Form, FieldItem, Input } from "@components/Field";
@@ -12,6 +12,11 @@ export default function LoginPage() {
auth: { accessToken },
handleLogin,
} = useAuth();
+
+ if (accessToken) {
+ return ;
+ }
+
const { formError, isFormValid, isLoading, handleSubmit, register } =
useForm(loginFormSchema);
@@ -19,16 +24,12 @@ export default function LoginPage() {
try {
await handleLogin(data);
alert("로그인에 성공했습니다.");
- navigate("/items");
+ navigate("/items", { replace: true });
} catch (err) {
throw err;
}
}
- if (accessToken) {
- navigate("/items");
- }
-
return (
;
+ }
+
const {
formState,
formError,
@@ -33,18 +38,14 @@ export default function SignupPage() {
async function onSubmit(data) {
try {
- await signUp(data);
+ await handleSignup(data);
alert("회원가입에 성공했습니다. \n로그인 페이지로 이동합니다.");
- navigate("/login");
+ navigate("/login", { replace: true });
} catch (err) {
throw err;
}
}
- if (accessToken) {
- navigate("/items");
- }
-
return (
+