Skip to content

Commit

Permalink
style: AttractionItem Hover 스타일 + 불필요 여백 제거
Browse files Browse the repository at this point in the history
  • Loading branch information
@seondy
seondy committed Aug 14, 2024
1 parent c50bff0 commit f98e3b6
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 74 deletions.
81 changes: 44 additions & 37 deletions gamgyul-front/src/components/common/AttractionItem/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@ import { useEffect, useState } from "react";
import { applyFontStyles } from "../../../utils/fontStyles";

/** 관광지 아이템 컴포넌트 (분리 필요) */
const AttractionItem = ({ isChecked, onCheckChange, type }) => {
const AttractionItem = ({ onDelete, isChecked, onCheckChange, type }) => {
const [bookmark, setBookmark] = useState("off");
const [isModal, setIsModal] = useState(false);

useEffect(() => {}, []);

Expand All @@ -24,40 +23,37 @@ const AttractionItem = ({ isChecked, onCheckChange, type }) => {
console.log("임시 체크박스 클릭 핸들러입니다.");
};

/** 삭제 버튼 클릭 => 이후 추가 */
const handleDeleteClick = () => {
console.log("삭제 버튼을 클릭했습니다.");
};

return (
<AtrctItemContainer>
<AtrctItemInfo>
{type === "CHECK" && (
<StyledCheckBtn>
<img src={`/images/Icon/check_${bookmark}.svg`} alt="북마크버튼" onClick={() => handleCheckClick()} />
</StyledCheckBtn>
<AtrctItemContents>
<AtrctItemInfo>
{type === "CHECK" && (
<StyledCheckBtn>
<img src={`/images/Icon/check_${bookmark}.svg`} alt="북마크버튼" onClick={() => handleCheckClick()} />
</StyledCheckBtn>
)}
<figure>
<img src="" alt="관광지 이미지" />
<figcaption>
<h3>리스트이름</h3>
<p>리스트내용</p>
</figcaption>
</figure>
</AtrctItemInfo>
{type === "DELETE" ? (
<StyledIconBtn>
<img src={`/images/Icon/delete.svg`} alt="삭제버튼" onClick={onDelete} />
</StyledIconBtn>
) : (
<StyledIconBtn>
<img
src={`/images/Icon/bookmark_${bookmark}.svg`}
alt="북마크버튼"
onClick={() => handleBookmarkClick(bookmark)}
/>
</StyledIconBtn>
)}
<figure>
<img src="" alt="관광지 이미지" />
<figcaption>
<h3>리스트이름</h3>
<p>리스트내용</p>
</figcaption>
</figure>
</AtrctItemInfo>
{type === "DELETE" ? (
<StyledIconBtn>
<img src={`/images/Icon/delete.svg`} alt="삭제버튼" onClick={() => handleDeleteClick()} />
</StyledIconBtn>
) : (
<StyledIconBtn>
<img
src={`/images/Icon/bookmark_${bookmark}.svg`}
alt="북마크버튼"
onClick={() => handleBookmarkClick(bookmark)}
/>
</StyledIconBtn>
)}
</AtrctItemContents>
</AtrctItemContainer>
);
};
Expand Down Expand Up @@ -88,20 +84,30 @@ const AtrctItemInfo = styled.section`
}
`;

/** 관광지 아이템 컴포넌트 스타일링 */
const AtrctItemContainer = styled.li`
const AtrctItemContents = styled.li`
width: 100%;
height: 90px;
border-bottom: 1px solid ${theme.color.sub2};
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid ${theme.color.sub2};
`;

/** 관광지 아이템 컴포넌트 스타일링 */
const AtrctItemContainer = styled.div`
padding: 0 20px;
&:hover {
background: #1eb17b0d;
}
`;

const StyledIconBtn = styled.button`
width: 24px;
height: 24px;
border: none;
background-color: inherit;
cursor: pointer;
`;

const StyledCheckBtn = styled.button`
Expand All @@ -111,8 +117,9 @@ const StyledCheckBtn = styled.button`
background-color: inherit;
margin-right: 16px;
& > img {
cursor: pointer;
width: 100%;
hegiht: 100%;
height: 100%;
}
`;

Expand Down
18 changes: 8 additions & 10 deletions gamgyul-front/src/pages/AttractionListPage/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 +23,17 @@ const AttractionListPage = () => {
<p>제주를 대표하는 과 관련된 장소를 여행해보세요.</p>
</Container>
</StyledAtrctHeader>
<Container>
<StyledListSection>
<ul>
{/* {data.map((element, index) => {
<StyledListSection>
<ul>
{/* {data.map((element, index) => {
return <AttractionItem />;
})} */}

<AttractionItem />
<AttractionItem />
<AttractionItem />
</ul>
</StyledListSection>
</Container>
<AttractionItem />
<AttractionItem />
<AttractionItem />
</ul>
</StyledListSection>
</AttractionListContainer>
</BasicLayout>
);
Expand Down
70 changes: 43 additions & 27 deletions gamgyul-front/src/pages/MyTripPage/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,24 @@ import { theme } from "../../style/theme";
import { TabButton } from "../../components/common/Button/TabButton.style";
import Button from "../../components/common/Button";
import NavigationBar from "../../components/common/NavigationBar";
import Modal from "../../components/common/Modal";

const MyTripPage = () => {
const [activeTab, setActiveTab] = useState("places");
const [isModalOpen, setIsModalOpen] = useState(false);

/** 모달 임시 클릭 (달성 조건 추가 필요) */
const handleButtonClick = () => {
setIsModalOpen(true);
};
/** 모달 닫기 */
const handleCloseModal = () => {
setIsModalOpen(false);
};

return (
<MyTripLayout>
{isModalOpen && <Modal type="DELETE" onClose={handleCloseModal} />}
<MyTripContainer>
<StyledMyTripHeader>
<Container>
Expand All @@ -37,35 +50,38 @@ const MyTripPage = () => {
</nav>
</StyledMyTripHeader>

<Container>
{activeTab === "places" && (
<StyledPlacesSection>
<AttractionItem type="CHECK" />
<AttractionItem type="CHECK" />
<AttractionItem type="CHECK" />
<AttractionItem type="CHECK" />
<AttractionItem type="CHECK" />
<MyTripButton isShadow={true}>내 경로 만들기</MyTripButton>
</StyledPlacesSection>
)}
{activeTab === "routes" && (
<>
<StyledRoutesSection>
{activeTab === "places" && (
<StyledPlacesSection>
<AttractionItem type="CHECK" />
<AttractionItem type="CHECK" />
<AttractionItem type="CHECK" />
<AttractionItem type="CHECK" />
<AttractionItem type="CHECK" />
<MyTripButton isShadow={true}>내 경로 만들기</MyTripButton>
</StyledPlacesSection>
)}
{activeTab === "routes" && (
<>
<StyledRoutesSection>
<Container>
<h3>저장한 경로</h3>
<AttractionItem />
<AttractionItem />
<AttractionItem />
</StyledRoutesSection>
<StyledRoutesSection>
</Container>
<AttractionItem />
<AttractionItem />
<AttractionItem />
</StyledRoutesSection>
<StyledRoutesSection>
<Container>
<h3>내가 만든 경로</h3>
<AttractionItem type="DELETE" />
<AttractionItem type="DELETE" />
<AttractionItem type="DELETE" />
<AttractionItem type="DELETE" />
</StyledRoutesSection>
</>
)}
</Container>
</Container>
<AttractionItem type="DELETE" onDelete={handleButtonClick} />
<AttractionItem type="DELETE" onDelete={handleButtonClick} />
<AttractionItem type="DELETE" onDelete={handleButtonClick} />
<AttractionItem type="DELETE" onDelete={handleButtonClick} />
<AttractionItem type="DELETE" onDelete={handleButtonClick} />
</StyledRoutesSection>
</>
)}
</MyTripContainer>
<NavigationBar />
</MyTripLayout>
Expand Down

0 comments on commit f98e3b6

Please sign in to comment.