Skip to content

타입 변경에 따른 미디어쿼리 수정, 비밀번호 재설정 해결, FAQ 더보기 기능 추가 (#issue 291) #292

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.

Sign up for GitHub

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

Merged
YouD0313 merged 3 commits into from
May 14, 2025
Merged

타입 변경에 따른 미디어쿼리 수정, 비밀번호 재설정 해결, FAQ 더보기 기능 추가 (#issue 291) #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
89c94df
fix: 타입 변경에 따른 미디어쿼리 수정
YouD0313 May 14, 2025
db91974
fix: 필요없어 보여 지운 스타일드 컴포넌트 비밀번호 재설정에서 필요해서 다시 추가
YouD0313 May 14, 2025
13b50c5
feat: FAQ 더보기 추가하기
YouD0313 May 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/home/projectCardLists/ProjectCardLists.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,14 @@ export const Wrapper = styled.div<{ $flex: Display }>`

@media ${({ theme }) => theme.mediaQuery.tablet} {
grid-template-columns: ${({ $flex }) =>
$flex ? '' : 'repeat(auto-fit, minmax(40%, 1fr))'};
$flex === 'grid' && 'repeat(auto-fit, minmax(40%, 1fr))'};
gap: 2rem;
}

@media ${({ theme }) => theme.mediaQuery.mobile} {
width: 100%;
grid-template-columns: ${({ $flex }) =>
$flex ? '' : 'repeat(auto-fit, minmax(50%, 1fr))'};
$flex === 'grid' && 'repeat(auto-fit, minmax(50%, 1fr))'};
gap: 1rem;
}
`;
21 changes: 21 additions & 0 deletions src/pages/customerService/faq/FAQ.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,24 @@ export const Wrapper = styled.div`
`;

export const ToggleWrapper = styled.div``;

export const ShowMoreFAQWrapper = styled.div``;

export const ShowMoreFAQ = styled.button`
width: 100%;
padding: 1.2rem 0;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
font-weight: bold;
font-size: 1rem;

svg {
width: 1rem;
}

&:hover {
background: ${({ theme }) => theme.color.lightgrey};
}
`;
28 changes: 22 additions & 6 deletions src/pages/customerService/faq/FAQ.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@ import CustomerServiceHeader from '../../../components/customerService/CustomerS
import FAQContent from '../../../components/customerService/faq/FAQContent';
import NoResult from '../../../components/common/noResult/NoResult';
import ContentBorder from '../../../components/common/contentBorder/ContentBorder';
import { ChevronDownIcon } from '@heroicons/react/24/outline';

export default function FAQ() {
const [keyword, setKeyword] = useState<SearchKeyword>({ keyword: '' });
const [value, setValue] = useState<string>('');
const [showFAQ, setShowFAQ] = useState<number>(10);
const { faqData, isLoading } = useGetFAQ(keyword);

const handleGetKeyword = (keyword: string) => {
Expand Down Expand Up @@ -38,15 +40,29 @@ export default function FAQ() {
<S.Container>
<S.Wrapper>
{faqData.length > 0 ? (
faqData.map((list) => (
<S.ToggleWrapper key={list.id}>
<FAQContent list={list} />
<ContentBorder />
</S.ToggleWrapper>
))
faqData
.filter((_, index) => index < showFAQ)
.map((list) => (
<S.ToggleWrapper key={list.id}>
<FAQContent list={list} />
<ContentBorder />
</S.ToggleWrapper>
))
) : (
<NoResult height='20rem' />
)}
{faqData.length > showFAQ && (
<>
<S.ShowMoreFAQ
type='button'
onClick={() => setShowFAQ((prev) => prev + 10)}
>
더보기
<ChevronDownIcon />
</S.ShowMoreFAQ>
<ContentBorder />
</>
)}
</S.Wrapper>
</S.Container>
</>
Expand Down
12 changes: 7 additions & 5 deletions src/pages/login/Login.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const Container = styled.div`
width: 100%;
height: 100vh;
max-width: ${({ theme }) => theme.layout.width.desktop};
min-width: 310px;
min-width: 22rem;
margin: 0 auto;
flex-direction: column;
align-items: center;
Expand All @@ -26,20 +26,22 @@ export const Container = styled.div`
}

button {
max-width: 310px;
max-width: 22rem;
width: 100%;
padding: 0.8rem 0.625rem;
font-weight: 600;
}
`;

export const LogoH1 = styled.h1``;

export const MoveHomeLink = styled(Link)`
padding-bottom: 2rem;
`;

export const InputContainer = styled.div`
display: flex;
min-width: 310px;
min-width: 22rem;
gap: 0.6rem;

button {
Expand All @@ -51,7 +53,7 @@ export const InputContainer = styled.div`
`;

export const InputWrapper = styled.div`
max-width: 310px;
max-width: 22rem;
width: inherit;
margin-bottom: 1.875rem;
position: relative;
Expand All @@ -69,7 +71,7 @@ export const ErrorMessage = styled.span<{ message?: string }>`

export const WrapperPassword = styled.div`
width: 100%;
max-width: 310px;
max-width: 22rem;
display: flex;
justify-content: space-between;
font-size: 0.8rem;
Expand Down