Skip to content

Commit

Permalink
feat:addTravel에서 사용한 컴포넌트 재활용하여 addForFindGuide 페이지 작업(#101)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssumanlife
ssumanlife committed Nov 4, 2024
1 parent 16e27b9 commit 4f51714
Show file tree
Hide file tree
Showing 13 changed files with 309 additions and 171 deletions.
8 changes: 5 additions & 3 deletions src/components/addTravel/Course.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@ const Course = () => {

const handleAddCourse = () => {
if (courseRef.current) {
addField('courseList', courseRef.current.value);
courseRef.current.value = '';
if (courseRef.current.value.trim() !== '') {
addField('courseList', courseRef.current.value);
courseRef.current.value = '';
}
}
};

Expand Down Expand Up @@ -49,7 +51,7 @@ const Course = () => {
onKeyDown={(e) => handleKeyDown(e)}
onCompositionStart={() => setIsComposing(true)}
onCompositionEnd={() => setIsComposing(false)}
placeholder="40자 내외로 여행 코스를 작성해주세요."
placeholder="40자 내외로 여행 코스를 추가해주세요."
/>
<button css={plusBtn} onClick={handleAddCourse}>
<CirclePlus size={24} />
Expand Down
8 changes: 5 additions & 3 deletions src/components/addTravel/Details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,18 @@ const Details = ({ title }: DetailsProps) => {
const addFieldPmCheck = () => {
if (option === 'faqs') {
if (newFieldRef.current && answer.current) {
if (newFieldRef.current.value !== '' && answer.current.value !== '') {
if (newFieldRef.current.value.trim() !== '' && answer.current.value.trim() !== '') {
addField(option, newFieldRef.current.value, answer.current.value);
newFieldRef.current.value = '';
answer.current.value = '';
}
}
} else {
if (newFieldRef.current) {
addField(option, newFieldRef.current.value);
newFieldRef.current.value = '';
if (newFieldRef.current.value.trim() !== '') {
addField(option, newFieldRef.current.value);
newFieldRef.current.value = '';
}
}
}
};
Expand Down
6 changes: 6 additions & 0 deletions src/components/addTravel/DetailsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,9 @@ const list = css`
transform: scale(1.2);
}
}
& * {
display: block;
}
`;

const faqlist = css`
Expand All @@ -109,6 +112,9 @@ const faqlist = css`
font-weight: 700;
}
}
& * {
display: block;
}
`;

const answerWrapper = css`
Expand Down
162 changes: 96 additions & 66 deletions src/components/addTravel/FloatingMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,106 @@
// FloatingMenu.tsx
import useSectionsStore from '@/stores/useSectionsStore';
import styled from '@emotion/styled';
import { CircleMinus, CirclePlus } from 'lucide-react';
import { useLocation } from 'react-router-dom';

interface FloatingMenuProps {
openSections: string[];
toggleSection: (section: string) => void;
onClick: () => void;
}

const FloatingMenu = ({ openSections, toggleSection, onClick }: FloatingMenuProps) => {
const FloatingMenu = ({ onClick }: FloatingMenuProps) => {
const sections = useSectionsStore((state) => state.sections);
const setOpenSection = useSectionsStore((state) => state.setOpenSection);
const location = useLocation();
return (
<MenuContainer>
<MenuItem>
<span>제목</span>
</MenuItem>
<MenuItem>
<span>대표 이미지</span>
</MenuItem>
<MenuItem>
<span>상품소개</span>
</MenuItem>
<MenuItem>
<span>코스</span>
</MenuItem>
<MenuItem>
<span>태그</span>
</MenuItem>
<MenuItem>
<span>예약 생성</span>
</MenuItem>
<MenuItem>
<span>가격</span>
</MenuItem>
<MenuContainer location={location.pathname}>
{location.pathname === '/add-for-find-guide' ? (
<>
<MenuItem>
<span>제목</span>
</MenuItem>
<MenuItem isOpen={sections.includes('대표이미지')}>
<span>대표 이미지</span>
<ToggleIcon
onClick={() => setOpenSection('대표이미지')}
isOpen={sections.includes('대표이미지')}
>
{sections.includes('대표이미지') ? (
<CircleMinus size={22} />
) : (
<CirclePlus size={22} />
)}
</ToggleIcon>
</MenuItem>
<MenuItem>
<span>상품 소개</span>
</MenuItem>
<MenuItem>
<span>일정 및 팀 추가</span>
</MenuItem>
</>
) : (
<>
<MenuItem>
<span>제목</span>
</MenuItem>
<MenuItem>
<span>대표 이미지</span>
</MenuItem>
<MenuItem>
<span>상품소개</span>
</MenuItem>
<MenuItem>
<span>코스</span>
</MenuItem>
<MenuItem>
<span>태그</span>
</MenuItem>
<MenuItem>
<span>예약 생성</span>
</MenuItem>
<MenuItem>
<span>가격</span>
</MenuItem>

<MenuItem isOpen={openSections.includes('포함내용')}>
<span>포함내용</span>
<ToggleIcon
onClick={() => toggleSection('포함내용')}
isOpen={openSections.includes('포함내용')}
>
{openSections.includes('포함내용') ? <CircleMinus size={22} /> : <CirclePlus size={22} />}
</ToggleIcon>
</MenuItem>
<MenuItem isOpen={openSections.includes('미포함내용')}>
<span>미포함내용</span>
<ToggleIcon
onClick={() => toggleSection('미포함내용')}
isOpen={openSections.includes('미포함내용')}
>
{openSections.includes('미포함내용') ? (
<CircleMinus size={22} />
) : (
<CirclePlus size={22} />
)}
</ToggleIcon>
</MenuItem>
<MenuItem isOpen={openSections.includes('이용안내')}>
<span>이용안내</span>
<ToggleIcon
onClick={() => toggleSection('이용안내')}
isOpen={openSections.includes('이용안내')}
>
{openSections.includes('이용안내') ? <CircleMinus size={22} /> : <CirclePlus size={22} />}
</ToggleIcon>
</MenuItem>
<MenuItem isOpen={openSections.includes('FAQ')}>
<span>FAQ</span>
<ToggleIcon onClick={() => toggleSection('FAQ')} isOpen={openSections.includes('FAQ')}>
{openSections.includes('FAQ') ? <CircleMinus size={22} /> : <CirclePlus size={22} />}
</ToggleIcon>
</MenuItem>
<MenuItem isOpen={sections.includes('포함내용')}>
<span>포함내용</span>
<ToggleIcon
onClick={() => setOpenSection('포함내용')}
isOpen={sections.includes('포함내용')}
>
{sections.includes('포함내용') ? <CircleMinus size={22} /> : <CirclePlus size={22} />}
</ToggleIcon>
</MenuItem>
<MenuItem isOpen={sections.includes('미포함내용')}>
<span>미포함내용</span>
<ToggleIcon
onClick={() => setOpenSection('미포함내용')}
isOpen={sections.includes('미포함내용')}
>
{sections.includes('미포함내용') ? (
<CircleMinus size={22} />
) : (
<CirclePlus size={22} />
)}
</ToggleIcon>
</MenuItem>
<MenuItem isOpen={sections.includes('이용안내')}>
<span>이용안내</span>
<ToggleIcon
onClick={() => setOpenSection('이용안내')}
isOpen={sections.includes('이용안내')}
>
{sections.includes('이용안내') ? <CircleMinus size={22} /> : <CirclePlus size={22} />}
</ToggleIcon>
</MenuItem>
<MenuItem isOpen={sections.includes('FAQ')}>
<span>FAQ</span>
<ToggleIcon onClick={() => setOpenSection('FAQ')} isOpen={sections.includes('FAQ')}>
{sections.includes('FAQ') ? <CircleMinus size={22} /> : <CirclePlus size={22} />}
</ToggleIcon>
</MenuItem>
</>
)}

<BottomButtons>
<TempSaveButton>임시저장</TempSaveButton>
Expand All @@ -81,12 +112,11 @@ const FloatingMenu = ({ openSections, toggleSection, onClick }: FloatingMenuProp

export default FloatingMenu;

// 스타일 정의
const MenuContainer = styled.div`
const MenuContainer = styled.div<{ location: string }>`
position: sticky;
top: 20px;
min-width: 240px;
height: 520px;
height: ${({ location }) => (location === '/add-for-find-guide' ? '260px' : '520px')};
padding: 16px;
border: 1px solid #d2d2d2;
border-radius: 8px;
Expand Down
Loading

0 comments on commit 4f51714

Please sign in to comment.