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

[FE] feat: 리뷰 링크 관리 페이지와 라우터 설정 추가 #1032

Merged
merged 11 commits into from
Jan 10, 2025
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
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
2 changes: 2 additions & 0 deletions frontend/src/components/layouts/Footer/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ export const Footer = styled.footer`

background-color: ${({ theme }) => theme.colors.white};

border-top: 0.1rem solid ${({ theme }) => theme.colors.lightGray};

${media.xSmall} {
flex-direction: column;
gap: 0.2rem;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import * as S from './styles';

interface ReviewLinkManagementLayoutProps {
leftContent: React.ReactNode;
rightContent: React.ReactNode;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스타일링이 복잡한 코드라면, 레이아웃 컴포넌트로 만들어서 재사용하면 좋겠지만 저는 다음의 이유로 레이아웃 컴포넌트보다는 리뷰 관리 페이지로 가는데 어떨까 싶네요. 리뷰 url 폼과 리뷰 url 목록 컴포넌트가 바로 ReviewLinkManagement에 선언되는 게 더 좋을 것 같아요.

  • 가로 정렬과 세로 정렬을 오가는 단순한 스타일
  • 반복되어서 사용하지 않음
  • 코드의 단순성에 비해서, leftContent, rightContent 에 컴포넌트 할당 시 코드 가독성이 나빠짐

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이번에는 리뷰 링크 관리 페이지의 기본 레이아웃만, 즉 "껍데기"만 구현하는 것이 목표라고 생각해서 레이아웃 작업만 진행했는데, 역시 페이지 전체로 만드는게 더 나은 것 같네요!

const ReviewLinkManagementLayout = ({ leftContent, rightContent }: ReviewLinkManagementLayoutProps) => {
return (
<S.Layout>
<S.LeftWrapper>{leftContent}</S.LeftWrapper>
<S.Separator />
<S.RightWrapper>{rightContent}</S.RightWrapper>
</S.Layout>
);
};

export default ReviewLinkManagementLayout;
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import styled from '@emotion/styled';

import media from '@/utils/media';

export const Layout = styled.section`
width: 100%;

display: flex;

${media.small} {
flex-direction: column;

padding: 0 3rem;
}
`;

export const LeftWrapper = styled.div`
width: 30%;

padding: 10rem 0;

${media.small} {
width: 100%;
}
`;

export const Separator = styled.div`
width: 0.1rem;
min-height: calc(100vh - 13rem); // 전체 영역에서 헤더와 푸터 영역 제외

background-color: ${({ theme }) => theme.colors.lightGray};

margin: 0 10rem;

${media.small} {
display: none;
}
`;

export const RightWrapper = styled.div`
width: 70%;

padding: 10rem 0;

${media.small} {
width: 100%;
}
`;
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,11 @@ import styled from '@emotion/styled';
import media from '@/utils/media';

export const Logo = styled.div`
line-height: 8rem;
text-align: center;

span {
font-size: 3rem;
font-size: 2.8rem;
font-weight: ${({ theme }) => theme.fontWeight.bolder};
letter-spacing: 0.7rem;

${media.small} {
font-size: 2.8rem;
}

${media.xSmall} {
Comment on lines 5 to 12
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

기존 로고 컴포넌트가 Topbar의 padding 때문에 영역을 벗어났는데, 해결되었네요👍🏻

font-size: 2.6rem;
Expand Down
Loading