Skip to content

Commit

Permalink
refactor: lint 및 코드 포매팅
Browse files Browse the repository at this point in the history
  • Loading branch information
Hyoeunkh committed May 17, 2024
1 parent 8351607 commit 2d5f17e
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 25 deletions.
2 changes: 1 addition & 1 deletion src/components/display/BoothInfo.styled.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const ImgWrapper = styled.div`
margin-bottom: 10px;
display: flex;
flex-direction: row;
flex-direction: row;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
Expand Down
50 changes: 29 additions & 21 deletions src/components/display/BoothInfo.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
import React from "react";
import { useState, useRef, useCallback, useEffect } from "react";

import jannaviImage from "@/assets/jannavi.jpg";
import norazoImage from "@/assets/norazo.jpg";

import { Text } from "../typography/Text";
import { BoothDetail, BoothImg, BoothName, ImgWrapper, ImgContainer, InfoWrapper, DotWrapper, Dot } from "./BoothInfo.styled";
import {
BoothDetail,
BoothImg,
BoothName,
ImgWrapper,
ImgContainer,
InfoWrapper,
DotWrapper,
Dot,
} from "./BoothInfo.styled";
import { Heart } from "./Heart";

import { useState, useRef,useCallback, useEffect } from "react";

//zustand 로 refactor 필요
const BoothInfo: React.FC = () => {
const boothdetail =
Expand All @@ -19,32 +27,32 @@ const BoothInfo: React.FC = () => {

const [currentIndex, setCurrentIndex] = useState(0);
const slideRefs = useRef<(HTMLDivElement | null)[]>([]);

const updateCurrentIndex = useCallback((entries: IntersectionObserverEntry[]) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const index = slideRefs.current.indexOf(entry.target as HTMLDivElement);
if (index !== -1) {
setCurrentIndex(index);
}
}
});
entries.forEach((entry) => {
if (entry.isIntersecting) {
const index = slideRefs.current.indexOf(entry.target as HTMLDivElement);
if (index !== -1) {
setCurrentIndex(index);
}
}
});
}, []);

useEffect(() => {
const observer = new IntersectionObserver(updateCurrentIndex, {
root: null,
threshold: 0.5
threshold: 0.5,
});
slideRefs.current.forEach(slide => {

slideRefs.current.forEach((slide) => {
if (slide) {
observer.observe(slide);
observer.observe(slide);
}
});

return () => {
slideRefs.current.forEach(slide => {
slideRefs.current.forEach((slide) => {

Check warning on line 55 in src/components/display/BoothInfo.tsx

View workflow job for this annotation

GitHub Actions / lint

The ref value 'slideRefs.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'slideRefs.current' to a variable inside the effect, and use that variable in the cleanup function
if (slide) {
observer.unobserve(slide);
}
Expand All @@ -53,11 +61,11 @@ const BoothInfo: React.FC = () => {
}, [updateCurrentIndex]);

return (
<>
<>
<ImgContainer>
<ImgWrapper>
{boothImg.map((src, index) => {
return <BoothImg key={index} src={src} ref={el => slideRefs.current[index] = el}/>;
return <BoothImg key={index} src={src} ref={(el) => (slideRefs.current[index] = el)} />;
})}
</ImgWrapper>
<DotWrapper>
Expand Down
5 changes: 2 additions & 3 deletions src/pages/BoothDetailPage.styled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const ContentContainer = styled.form`
border: 1px solid #3f3a6c;
border-radius: 30px;
position: relative;
textarea {
color: #5d5a88;
border: none;
Expand Down Expand Up @@ -70,5 +70,4 @@ export const SubBtn = styled.button`
right: 10px;
`;

export const SendImg = styled.img`
`;
export const SendImg = styled.img``;

0 comments on commit 2d5f17e

Please sign in to comment.