Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 모바일화면에서 화면이 밀리는 현상 및 태그기능 버그 수정 #630

25 changes: 20 additions & 5 deletions src/asset/css/Tags.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
line-height: 3rem;
font-size: 1.5rem;
font-weight: bold;
padding: 1rem 2rem 1rem 2rem;
padding: 1rem 2rem 1rem 1rem;
text-align: center;
margin: 1rem;
border-radius: 10px;
Expand Down Expand Up @@ -43,12 +43,18 @@
}

.button_tag-create-box {
position: flex;
line-height: 4rem;
font-size: large;
margin: 1rem;
background-color: rgba(95, 63, 54, 1);
color: rgba(255, 255, 255, 0.9);
width: 100%;
}

@media screen and (min-width: 767px) {
.button_tag-create-box {
width: 50%;
}
}

.button_tag-create-box::placeholder {
Expand All @@ -66,7 +72,6 @@
height: 100%;
min-height: 12rem;
overflow: hidden;
padding: 1.5rem 1rem;
margin: 6rem 0rem 0rem 0rem;
background-color: rgb(232, 232, 232, 0.9);
border-radius: 1rem;
Expand All @@ -83,7 +88,6 @@
height: 100%;
min-height: 12rem;
overflow: hidden;
padding: 1.5rem 1rem;
margin: -1.3rem 0rem 10rem 0rem;
background-color: rgb(232, 232, 232, 0.9);
border-radius: 1rem;
Expand Down Expand Up @@ -116,7 +120,18 @@
background-color: rgba(00, 00, 00, 0);
z-index: 1;
top: 50%;
left: 50%;
left: 0;
}

.button_tag-image-button-disabled {
display: flex;
cursor: not-allowed;
opacity: 0.4;
pointer-events: none;
}

.tooltip_cursor-message {
cursor: "help";
}

@keyframes rotateImage {
Expand Down
51 changes: 36 additions & 15 deletions src/component/book/tag/TagList.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
import { useState, useRef, useEffect } from "react";
import { TagType } from "../../../type/TagType";
import { useLocation } from "react-router-dom";
import { AxiosResponse, AxiosError } from "axios";
import { useApi } from "../../../hook/useApi";
import Tag from "./Tag";
import TagModal from "./TagModal";
import plusicon from "../../../asset/img/tag_plus.svg";
import Tooltip from "../../utils/Tooltip";
import { useRecoilValue } from "recoil";
import { userAtom } from "../../../atom/userAtom";
import { AxiosError, AxiosResponse } from "axios";

type TagListProps = {
tagData: TagType[];
setTagData: React.Dispatch<React.SetStateAction<TagType[]>>;
};

const TagList = ({ tagData, setTagData }: TagListProps) => {
const { isLogin } = useRecoilValue(userAtom);
const inputRef = useRef<HTMLInputElement>(null);
const location = useLocation();
const bookId = location.pathname.split("/")[2];
Expand All @@ -22,12 +25,25 @@ const TagList = ({ tagData, setTagData }: TagListProps) => {
const [lastPress, setLastPress] = useState(Date.now());
const [active, setActive] = useState<boolean>(false);
const [errorCode, setErrorCode] = useState<number | null>(null);
const errorCodeRef = useRef<number | null>(null);
const [showErrorMassege, setShowErrorMassege] = useState(false);
const { request } = useApi("post", `/tags/default`, {
const { request } = useApi("post", "tags/default", {
bookInfoId: +bookId,
content: createTag.trim().replace(/ /g, "_"),
});

useEffect(() => {
if (errorCode !== null && errorCode > 0) {
errorActive();
}
}, [errorCode]);

const onSuccess = (response: AxiosResponse) => {
const resTagdata: TagType = response.data;
setTagData(prev => [...prev, resTagdata]);
resetCreateContent();
};

const onError = (error: AxiosError) => {
setErrorCode(parseInt(error?.response?.data?.errorCode, 10));
errorActive();
Expand All @@ -42,14 +58,11 @@ const TagList = ({ tagData, setTagData }: TagListProps) => {
setTimeout(() => {
setShowErrorMassege(false);
}, 2500);
errorCodeRef.current = null;
};

const postTag = () => {
request((res: AxiosResponse) => {
const resTagdata: TagType = res.data;
setTagData(prev => [...prev, resTagdata]);
resetCreateContent();
}, onError);
request(onSuccess, onError);
};

const openModalFunc = (tagId: number) => {
Expand Down Expand Up @@ -79,15 +92,19 @@ const TagList = ({ tagData, setTagData }: TagListProps) => {
const now = Date.now();
if (now - lastPress < 300) return;
setLastPress(now);
if (!isLogin) {
setErrorCode(102);
errorCodeRef.current = 102;
}
if (createTag === "") {
setErrorCode(1);
errorCodeRef.current = 1;
} else if (createTag.length > 42) {
setErrorCode(2);
errorCodeRef.current = 2;
}

if (errorCode !== null && errorCode > 0) {
errorActive();
} else {
if (errorCodeRef.current === null) {
postTag();
}
if (inputRef.current !== null) {
Expand All @@ -97,7 +114,10 @@ const TagList = ({ tagData, setTagData }: TagListProps) => {
};

const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (errorCode !== null) setErrorCode(null);
if (errorCode !== null) {
setErrorCode(null);
errorCodeRef.current = null;
}
setCreateTag(event.target.value);
};

Expand Down Expand Up @@ -167,14 +187,15 @@ const TagList = ({ tagData, setTagData }: TagListProps) => {
onKeyUp={handleKeyPress}
/>

<Tooltip description="태그 등록">
<Tooltip
className={`${isLogin ? "" : "button_tag-image-button-disabled"}`}
description="태그 등록"
>
<img
className="button_tag-image-button"
src={plusicon}
alt="plus"
onClick={() => {
onClickCreateButton();
}}
onClick={onClickCreateButton}
/>
</Tooltip>
</button>
Expand Down
3 changes: 1 addition & 2 deletions src/component/utils/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,7 @@ const Tooltip = ({ children, description, className }: TooltipProps) => {
ref={targetRef}
onMouseOver={displayTooltip}
onMouseOut={hiddenTooltip}
style={{ cursor: "help" }}
className={className}
className={`tooltip_cursor-message ${className}`}
>
{children}
{isDisplayed && portal
Expand Down
5 changes: 4 additions & 1 deletion src/util/axios.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,8 @@ export default axiosPromise;

api.interceptors.response.use(
response => response,
error => Sentry.captureException(error),
error => {
Sentry.captureException(error);
throw error;
},
);
Loading