-
Notifications
You must be signed in to change notification settings - Fork 2
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
chysis
merged 11 commits into
develop
from
fe/design/1028-review-link-management-page-layout
Jan 10, 2025
Merged
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
d2185cf
refactor: 리뷰미 로고 글자 간격 및 크기 조정
soosoo22 47e8253
refactor: 푸터에 border 추가
soosoo22 8580927
feat: 리뷰 링크 관리 페이지 레이아웃 구현
soosoo22 4ec2fa7
feat: 리뷰 링크 관리 페이지 구현 및 레이아웃 적용
soosoo22 a82450d
feat: 라우터 설정
soosoo22 bfa7a9d
fix: Amplitude 방문 이벤트에 리뷰 링크 관리 페이지 추가
soosoo22 281b115
refactor: ErrorSuspenseContainer로 감싼 후, ReviewLinkManagementPage에서 Re…
soosoo22 45d1585
feat: ReviewLinkLayout 컴포넌트 추가 및 반응형 스타일 적용
soosoo22 e869d38
feat: 모바일 환경에서 CardList의 max-height를 none으로 설정 및 반응형 세부 수정
soosoo22 3202a95
fix: ReviewCard 컴포넌트 flex-start로 상단 정렬 및 위치 비워두기
soosoo22 c747261
refactor: 리뷰 링크 관리 페이지 경로명 및 폴더명 변경
soosoo22 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
frontend/src/components/layouts/ReviewLinkManagementLayout/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
|
||
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; |
48 changes: 48 additions & 0 deletions
48
frontend/src/components/layouts/ReviewLinkManagementLayout/styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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%; | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 기존 로고 컴포넌트가 Topbar의 padding 때문에 영역을 벗어났는데, 해결되었네요👍🏻 |
||
font-size: 2.6rem; | ||
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
스타일링이 복잡한 코드라면, 레이아웃 컴포넌트로 만들어서 재사용하면 좋겠지만 저는 다음의 이유로 레이아웃 컴포넌트보다는 리뷰 관리 페이지로 가는데 어떨까 싶네요. 리뷰 url 폼과 리뷰 url 목록 컴포넌트가 바로 ReviewLinkManagement에 선언되는 게 더 좋을 것 같아요.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이번에는 리뷰 링크 관리 페이지의 기본 레이아웃만, 즉 "껍데기"만 구현하는 것이 목표라고 생각해서 레이아웃 작업만 진행했는데, 역시 페이지 전체로 만드는게 더 나은 것 같네요!