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

[SP2] 프로젝트 서비스 이용 가능 및 창업중 정보 보여주기 #254

Merged
merged 3 commits into from
Nov 6, 2023
Merged

[SP2] 프로젝트 서비스 이용 가능 및 창업중 정보 보여주기 #254

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
15cd91b
feat: 서비스 정보 컴포넌트 구현
Nov 3, 2023
34b39b5
feat: 프로젝트에 서비스 이용 가능 및 창업 중 정보 보여주기
Nov 3, 2023
e7c81cc
feat: svg 리액트 컴포넌트로 받기
Nov 4, 2023
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
3 changes: 3 additions & 0 deletions src/assets/icons/ic_ellipse_green.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions src/views/ProjectPage/components/project/ProjectCard/ServiceInfo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { ReactComponent as IcEllipseGreen } from '@src/assets/icons/ic_ellipse_green.svg';
import * as S from './style';

interface ServiceInfoProps {
text: string;
}

export default function ServiceInfo({ text }: ServiceInfoProps) {
return (
<S.Info>
<IcEllipseGreen />
<span>{text}</span>
</S.Info>
);
}
18 changes: 18 additions & 0 deletions src/views/ProjectPage/components/project/ProjectCard/ServiceInfo/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import styled from '@emotion/styled';
import { colors } from '@sopt-makers/colors';

export const Info = styled.div`
display: flex;
align-items: center;
gap: 4px;

color: ${colors.gray100};

/* Label/3_SB */
font-family: SUIT;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 133.333% */
letter-spacing: -0.24px;
`;
9 changes: 8 additions & 1 deletion src/views/ProjectPage/components/project/ProjectCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { track } from '@amplitude/analytics-browser';
import { useMediaQuery } from 'react-responsive';
import { ProjectType } from '@src/lib/types/project';
import ServiceInfo from '@src/views/ProjectPage/components/project/ProjectCard/ServiceInfo';
import * as S from './style';

export default function ProjectCard({ project }: { project: ProjectType }) {
Expand Down Expand Up @@ -44,7 +45,13 @@ export default function ProjectCard({ project }: { project: ProjectType }) {
</S.ProjectHeader>
<S.ProjectSummary>{project.summary}</S.ProjectSummary>
</S.ProjectContent>
{/* TODO: 서비스 이용 가능 및 창업 정보와 멤버 정보 추가 필요 */}
<S.ProjectDetail>
Copy link
Member

Choose a reason for hiding this comment

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

ProjectDetail과 ServiceDetail의 차이는 무엇인가용??

  • 뎁스를 줄여 하나로 만들거나,
  • 위치상 ProjectDetail을 Footer 등으로 변경하고, ServiceDetail을 ProjectDetail로 변경하여도 좋을 것 같습니다!!!

But.. 사연이 있다면 이대로도 정말 좋아요!

Copy link
Member Author

Choose a reason for hiding this comment

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

ProjectDetail이 서비스 이용 가능, 창업 중 + 멤버가 들어가는 부분이고 ServiceDetail은 서비스 이용 가능, 창업 중 정보가 들어가는 부분인데 네이밍이 너무 어렵네요.. ProjectDetail은 ProjectFooter로 바꿀 생각인데 ServiceDetail도 뭔가 더 적합한 이름이 있을까요?

Copy link
Contributor

Choose a reason for hiding this comment

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

네이밍이 까다롭네요..! 현재 서비스 상태를 나타낸다는 의미에서 ServiceDetail -> ProjectServiceStatus 는 어떨까요?

<S.ServiceDetail>
{project.isAvailable && <ServiceInfo text="서비스 이용 가능" />}
{project.isFounding && <ServiceInfo text="창업 중" />}
</S.ServiceDetail>
{/* TODO: 멤버 정보 추가 필요 */}
</S.ProjectDetail>
</S.ProjectCard>
);
}
16 changes: 15 additions & 1 deletion src/views/ProjectPage/components/project/ProjectCard/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,17 @@ export const ProjectCard = styled(Link)`
gap: 10px;

width: 352px;
/* height: 345px; */
height: 345px;
padding: 14px;
border: 1px solid ${colors.gray700};
border-radius: 20px;

cursor: pointer;

@media (max-width: 899px) {
gap: 6px;
width: 100%;
height: auto;
padding: 0 0 10px 0;
border: none;
border-bottom: 1px solid ${colors.gray900};
Expand Down Expand Up @@ -110,3 +112,15 @@ export const ProjectSummary = styled.div`
letter-spacing: -0.195px;
}
`;

export const ProjectDetail = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
height: 30px;
`;

export const ServiceDetail = styled.div`
display: flex;
gap: 6px;
`;
Loading