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.

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

Jump to bottom

[FE] 3주차 운영 피드백 반영 - 1(#717) #721

Merged
merged 23 commits into from
Nov 8, 2024
Merged

[FE] 3주차 운영 피드백 반영 - 1(#717) #721

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
bdae751
design: 프로필 페이지 이름 아래 잘리는 오류 해결
chlwlstlf Nov 5, 2024
b2f705e
design: 버튼 xSmall 디자인 수정
chlwlstlf Nov 5, 2024
392faf3
feat: 로그인 완료 됐을 때 리다이렉트
chlwlstlf Nov 5, 2024
29d210b
refactor: reviewerInfo에서 reviewInfo로 변경
chlwlstlf Nov 5, 2024
a9dc909
fix: 피드백 모아보기에서 textarea 클릭 막기
chlwlstlf Nov 5, 2024
dbe303f
fix: review 주석 수정, link로 profile 넘기던 것 빈 값으로 수정
chlwlstlf Nov 5, 2024
ffc9df6
design: 확인 모달 버튼 outline 속성 추가
chlwlstlf Nov 5, 2024
590e08f
feat: 피드백 모아보기에서 수정 기능 추가
chlwlstlf Nov 5, 2024
e8c4224
fix: 피드백 모아보기 페이지 키워드 아래로 넘어가는 오류 해결
chlwlstlf Nov 5, 2024
a425dea
fix: 바뀐 정책에 따라 프로세스 설명 변경
chlwlstlf Nov 5, 2024
e5deaed
feat: selectedFeedbackTyped을 세션스토리지로 관리
chlwlstlf Nov 5, 2024
3269934
feat: 피드백 모아보기 페이지에서 selectedFeedbackType과 selectedFeedback를 session …
chlwlstlf Nov 5, 2024
a953c61
design: 상세페이지 각 섹션별 디자인 통일하기
chlwlstlf Nov 5, 2024
6b9abdc
design: 프로필 페이지 모바일 환경 디자인
chlwlstlf Nov 5, 2024
20cf78a
refactor: roomInfo에서 ContentLineBreak 모두 넣기
chlwlstlf Nov 5, 2024
eafe9bb
design: 모바일에서 상위 코멘트 왼쪽 정렬
chlwlstlf Nov 6, 2024
f5626fe
design: 피드백 상세 페이지에 Comment 링크, PR 링크 UI 추가
chlwlstlf Nov 7, 2024
12c6530
feat: 피드백 모아보기에서 pr링크, comment 링크 이동 api 연결
chlwlstlf Nov 7, 2024
62feeac
Merge branch 'develop' into fix/#717
chlwlstlf Nov 8, 2024
573fab0
Merge branch 'develop' of https://github.com/woowacourse-teams/2024-c…
chlwlstlf Nov 8, 2024
49f0d6e
Merge branch 'fix/#717' of https://github.com/woowacourse-teams/2024-…
chlwlstlf Nov 8, 2024
5274776
fix: roomCard에서 키워드 가려져 보였던 오류 해결
chlwlstlf Nov 8, 2024
eb76994
design: 피드백 페이지 개수 제목 옆에 붙이기
chlwlstlf Nov 8, 2024
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
51 changes: 41 additions & 10 deletions frontend/src/components/profile/profileCard/ProfileCard.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import styled from "styled-components";
import { EllipsisText } from "@/styles/common";
import media from "@/styles/media";

export const ProfileCardContainer = styled.div`
overflow: hidden;

width: 100%;
padding: 1rem;

border: 1px solid ${({ theme }) => theme.COLOR.grey1};
border-radius: 20px;
border-radius: 8px;
box-shadow: ${({ theme }) => theme.BOX_SHADOW.regular};
`;

export const ProfileTitle = styled.div`
Expand All @@ -15,18 +20,26 @@ export const ProfileTitle = styled.div`

export const ProfileCardWrapper = styled.div`
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: center;
justify-content: space-between;

${media.small`
gap: 2rem;
flex-direction: column;
`}
`;

export const ProfileWrapper = styled.div`
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
justify-content: center;

width: 100%;
margin: 0 auto;
padding: 1.5rem;
padding: 2rem;
`;

export const ProfileNickname = styled.div`
Expand All @@ -35,7 +48,7 @@ export const ProfileNickname = styled.div`
align-items: center;
justify-content: center;

max-width: 110px;
max-width: 150px;
`;

export const GithubIcon = styled.div`
Expand All @@ -53,20 +66,38 @@ export const ProfileSummaryContainer = styled.div`
flex-direction: column;
gap: 1.5rem;

width: 180px;
width: 150px;
margin: 0 auto;
padding: 0;

font: ${({ theme }) => theme.TEXT.medium};

${media.small`
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
word-break: keep-all;
`}

dl {
display: flex;
justify-content: space-between;

${media.small`
gap: 1rem;
flex-direction: column;
align-items: center;
justify-content: center;
`}
}

dt {
font: ${({ theme }) => theme.TEXT.small};
color: ${({ theme }) => theme.COLOR.grey4};
${media.small`
font: ${({ theme }) => theme.TEXT.semiSmall};
`}
}

dd {
Expand All @@ -77,16 +108,12 @@ export const ProfileSummaryContainer = styled.div`
}
`;

export const ProfileFlex = styled.div`
display: flex;
align-items: center;
`;

export const KeywordContainer = styled.div`
display: flex;
flex-direction: column;
gap: 0.6rem;

width: fit-content;
margin: 0 auto;
padding: 1rem;
`;
Expand All @@ -96,6 +123,10 @@ export const KeywordWrapper = styled.div`
flex-direction: row;
gap: 1rem;
font: ${({ theme }) => theme.TEXT.small};

svg {
flex-shrink: 0;
}
`;

export const Keyword = styled.div`
Expand Down
8 changes: 3 additions & 5 deletions frontend/src/components/profile/profileCard/ProfileCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import { HoverStyledLink } from "@/styles/common";
const ProfileCard = (profileData: ProfileData) => {
return (
<S.ProfileCardContainer>
<S.ProfileTitle>프로필</S.ProfileTitle>

<S.ProfileCardWrapper>
<HoverStyledLink
to={`https://github.com/${profileData.nickname}`}
Expand All @@ -28,15 +26,15 @@ const ProfileCard = (profileData: ProfileData) => {

<S.ProfileSummaryContainer>
<dl>
<dt>리뷰한 개수</dt>
<dt>완료한 리뷰</dt>
<dd>{profileData.givenReviewCount}개</dd>
</dl>
<dl>
<dt>리뷰 받은 개수</dt>
<dt>받은 리뷰</dt>
<dd>{profileData.receivedReviewCount}개</dd>
</dl>
<dl>
<dt>피드백 받은 개수</dt>
<dt>받은 피드백</dt>
Copy link
Member

Choose a reason for hiding this comment

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

리뷰는 작성한 것 받은 것 2가지 보여주는데, 피드백은 받은 것에 대해서만 보여주니까 어색한 것 같아요. 작성한 피드백을 보여주는 건 어떤 것 같나요~?

만약 이걸 추가한다면 평점평균은 키워드의 상단에 나타나도록 해서 현재 디자인을 유지하면 좋을 것 같아용 :)

Copy link
Contributor

@chlwlstlf chlwlstlf Nov 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

흐음.. 작성한 피드백 개수를 서버에서 넘겨주지 않고 있어요🤔
image

저도 작성한 피드백도 같이 보여주면 좋을 것 같다고 생각해서 백엔드한테 한 번 말씀드려 보겠습니다~!!

<dd>{profileData.feedbackCount}개</dd>
</dl>
<dl>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/profile/userParticipatedRoom/UserParticipatedRoom.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@ import styled from "styled-components";
export const UserParticipatedRoomContainer = styled.div`
display: flex;
flex-direction: column;
gap: 7rem;
gap: 8rem;
`;
2 changes: 1 addition & 1 deletion frontend/src/pages/profile/ProfilePage.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@ import styled from "styled-components";
export const ProfilePageContainer = styled.div`
display: flex;
flex-direction: column;
gap: 5rem;
gap: 8rem;
`;
6 changes: 5 additions & 1 deletion frontend/src/pages/profile/ProfilePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useFetchProfile } from "@/hooks/queries/useFetchProfile";
import ContentSection from "@/components/common/contentSection/ContentSection";
import ProfileCard from "@/components/profile/profileCard/ProfileCard";
import UserParticipatedRoom from "@/components/profile/userParticipatedRoom/UserParticipatedRoom";
import * as S from "@/pages/profile/ProfilePage.style";
Expand All @@ -8,7 +9,10 @@ const ProfilePage = () => {

return (
<S.ProfilePageContainer>
<ProfileCard {...profileData} />
<ContentSection title="프로필">
<ProfileCard {...profileData} />
</ContentSection>

<UserParticipatedRoom />
</S.ProfilePageContainer>
);
Expand Down