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

Feat/minder profile layout 329 #332

Merged
merged 11 commits into from
Jul 2, 2024
Merged

Feat/minder profile layout 329 #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
555c91c
feat: add grey background to minder profile page (#329)
kyuhho Jun 29, 2024
7fa15a1
feat: add profile nav white bg color (#329)
kyuhho Jun 29, 2024
7b2c69d
feat: apply changed counselor profile layout (#329)
kyuhho Jun 30, 2024
7aac601
chore: fix file name typo (#329)
kyuhho Jun 30, 2024
e0be188
feat: apply changed profile minder info card layout (#329)
kyuhho Jun 30, 2024
25360f0
feat: update minder profile response type (#329)
kyuhho Jul 1, 2024
4c3f883
feat: apply introduction (#329)
kyuhho Jul 1, 2024
6a361c8
feat: apply total consult number (#329)
kyuhho Jul 1, 2024
f80d3ee
feat: change review card bg color (#329)
kyuhho Jul 1, 2024
a27558b
chore: remove unusing class name (#329)
kyuhho Jul 2, 2024
72ad7f0
Merge remote-tracking branch 'origin/dev' into feat/minder_profile_la…
kyuhho Jul 2, 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
23 changes: 16 additions & 7 deletions src/components/Buyer/BuyerCounselorProfile/CounselorExp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
import { Space } from 'components/Common/Space';
import styled from 'styled-components';
import { Grey1, Grey3 } from 'styles/color';
import { Body1, Body2 } from 'styles/font';
import { Grey1, White } from 'styles/color';
import { Body1, Body2, Subtitle } from 'styles/font';

//
//
//

interface CounselorExpProps {
experience: string;
introduction: string;
}

//
//
//

export const CounselorExp = ({ experience }: CounselorExpProps) => {
export const CounselorExp = ({
experience,
introduction,
}: CounselorExpProps) => {
const formattedMessage = (message: string | null): JSX.Element[] | null => {
return message
? message.split('\n').map((item, key) => (
Expand All @@ -32,21 +37,25 @@ export const CounselorExp = ({ experience }: CounselorExpProps) => {

return (
<Wrapper>
<Body1 color={Grey3}>경험 소개</Body1>
<Subtitle color={Grey1} style={{ textAlign: 'left', width: '100%' }}>
마인더를 소개해요
</Subtitle>
<ExpBox>
<Body1 color={Grey1}>{introduction}</Body1>
<Space height="2.4rem" />
<Body2 color={Grey1}>{formattedMessage(experience)}</Body2>
</ExpBox>
</Wrapper>
);
};

const Wrapper = styled.div`
padding: 1.2rem 2rem 3rem 2rem;
margin-bottom: 5.2rem;
padding: 1.2rem 2rem 2rem 2rem;
`;

const ExpBox = styled.div`
padding: 1.6rem;
background-color: rgba(242, 241, 248, 0.8);
background-color: ${White};
border-radius: 1.2rem;
margin-top: 1.2rem;
`;
258 changes: 184 additions & 74 deletions src/components/Buyer/BuyerCounselorProfile/CounselorInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Flex } from 'components/Common/Flex';
import { useMemo } from 'react';
import styled from 'styled-components';
import { Grey1, Grey3, Grey6 } from 'styles/color';
import { Body3 } from 'styles/font';
import { convertTimeToString } from 'utils/convertTimeToString';
import { Grey1, Grey2, Grey6, LightGreen, White } from 'styles/color';
import { Body3, Body4, Subtitle } from 'styles/font';
import { convertTimeToStringProfileInfo } from 'utils/convertTimeToString';
import { ConsultTimes } from 'utils/type';

//
Expand All @@ -19,93 +21,201 @@ interface CounselorInfoProps {
//
//

const COUNSELOR_INFO_GAP = '6.4rem';

const DAY_MAPPING: { [key: string]: string } = {
MON: '월',
TUE: '화',
WED: '수',
THU: '목',
FRI: '금',
SAT: '토',
SUN: '일',
};

const ORDERED_DAY = ['월', '화', '수', '목', '금', '토', '일'];

//
//
//

export const CounselorInfo = ({
consultType,
letterPrice,
chattingPrice,
consultTimes,
}: CounselorInfoProps) => {
return (
<Wrapper>
<div className="row1">
<Body3 color={Grey3}>상담 방식</Body3>
<Body3 color={Grey1}>{consultType.join(', ')}</Body3>
</div>
<div className="row2">
<Body3 color={Grey3}>상담 시간</Body3>
<div>
{consultTimes.MON !== undefined && consultTimes.MON.length !== 0 ? (
<Body3 color={Grey1}>
월 {convertTimeToString(consultTimes.MON)}
</Body3>
) : null}
{consultTimes.TUE !== undefined && consultTimes.TUE.length !== 0 ? (
<Body3 color={Grey1}>
화 {convertTimeToString(consultTimes.TUE)}
</Body3>
) : null}
{consultTimes.WED !== undefined && consultTimes.WED.length !== 0 ? (
<Body3 color={Grey1}>
수 {convertTimeToString(consultTimes.WED)}
</Body3>
) : null}
{consultTimes.THU !== undefined && consultTimes.THU.length !== 0 ? (
<Body3 color={Grey1}>
목 {convertTimeToString(consultTimes.THU)}
</Body3>
) : null}
{consultTimes.FRI !== undefined && consultTimes.FRI.length !== 0 ? (
<Body3 color={Grey1}>
금 {convertTimeToString(consultTimes.FRI)}
</Body3>
) : null}
{consultTimes.SAT !== undefined && consultTimes.SAT.length !== 0 ? (
<Body3 color={Grey1}>
토 {convertTimeToString(consultTimes.SAT)}
</Body3>
) : null}
{consultTimes.SUN !== undefined && consultTimes.SUN.length !== 0 ? (
<Body3 color={Grey1}>
일 {convertTimeToString(consultTimes.SUN)}
const consultTimesArray = Object.entries(consultTimes);

const filterdTimes = useMemo(
() =>
consultTimesArray
.map(([day, times]) => {
return { day: DAY_MAPPING[day], times };
})
.sort(
(a, b) => ORDERED_DAY.indexOf(a.day) - ORDERED_DAY.indexOf(b.day),
),
[consultTimesArray],
);

const getCurrentDay = () => {
const today = new Date();
const dayIndex = today.getDay(); // 일요일: 0, 월요일: 1, ... , 토요일: 6

// match to the index of ORDERED_DAY
if (dayIndex === 0) {
return ORDERED_DAY[6];
}

return ORDERED_DAY[dayIndex - 1];
};

const currentDay = getCurrentDay();

/**
*
*/
const renderConsultTimes = () => {
return filterdTimes.map((dayItem) => {
if (dayItem.times.length === 0 || dayItem.times === undefined) {
return null;
}

const isCurrentDay = currentDay === dayItem.day;

return (
<Flex gap="0.8rem" align="flex-start">
<DayTag isCurrentDay={isCurrentDay}>
{isCurrentDay ? (
<Body4> {dayItem.day}</Body4>
) : (
<Body3>{dayItem.day}</Body3>
)}
</DayTag>
<TimeTag isCurrentDay={isCurrentDay}>
<Body3
color={Grey1}
style={{
whiteSpace: 'pre-wrap',
wordBreak: 'keep-all',
textAlign: 'left',
}}
>
{convertTimeToStringProfileInfo(dayItem.times)}
</Body3>
) : null}
</TimeTag>
</Flex>
);
});
};

//
//
//

return (
<Flex
direction="column"
gap="1.2rem"
style={{ padding: '1.2rem 2rem 2rem 2rem' }}
>
<Subtitle color={Grey1} style={{ textAlign: 'left', width: '100%' }}>
이렇게 상담할 수 있어요
</Subtitle>
<Wrapper>
<div className="row">
<Body4 color={Grey2}>상담 방식</Body4>
<Flex gap="0.8rem">
{consultType.map((type) => (
<Flex
key={type}
style={{
backgroundColor: LightGreen,
boxSizing: 'border-box',
padding: '0.3rem 0.8rem',
borderRadius: '0.5rem',
}}
>
<Body4>{type}</Body4>
</Flex>
))}
</Flex>
</div>
</div>
<div className="row3">
<Body3 color={Grey3}>상담 금액</Body3>
<div>
{letterPrice !== undefined ? (
<Body3 color={Grey1}>
편지 1건 {letterPrice.toLocaleString()}원
</Body3>
) : null}
{chattingPrice !== undefined ? (
<Body3 color={Grey1}>
채팅 30분당 {chattingPrice.toLocaleString()}원
</Body3>
) : null}
<div className="row">
<Body4 color={Grey2}>상담 시간</Body4>
<Flex direction="column" gap="0.4rem" align="flex-start">
{renderConsultTimes()}
</Flex>
</div>
</div>
</Wrapper>
<div className="row">
<Body4 color={Grey2}>상담 금액</Body4>
<Flex direction="column" gap="0.4rem" align="flex-start">
{letterPrice !== undefined ? (
<Flex
gap="0.4rem"
style={{
padding: '0.3rem 0.8rem',
backgroundColor: LightGreen,
borderRadius: '0.5rem',
}}
>
<Body3 color={Grey1}>편지 1건</Body3>
<Body4 color={Grey1}>{letterPrice.toLocaleString()}원</Body4>
</Flex>
) : null}
{chattingPrice !== undefined ? (
<Flex
gap="0.4rem"
style={{
padding: '0.3rem 0.8rem',
backgroundColor: LightGreen,
borderRadius: '0.5rem',
}}
>
<Body3 color={Grey1}>채팅 30분당</Body3>
<Body4 color={Grey1}>{chattingPrice.toLocaleString()}원</Body4>
</Flex>
) : null}
</Flex>
</div>
</Wrapper>
</Flex>
);
};

const Wrapper = styled.div`
padding: 1.6rem 2rem 1.2rem 5%;
background-color: ${White};
border-radius: 1.2rem;
width: 100%;
box-sizing: border-box;
padding: 1.6rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
gap: 1.6rem;
border-bottom: 1px solid ${Grey6};
.row1 {
display: flex;
gap: 6rem;
}
.row2 {
display: flex;
gap: 6rem;
}
.row3 {

.row {
display: flex;
gap: 6rem;
gap: ${COUNSELOR_INFO_GAP};
}
`;

const DayTag = styled.div<{ isCurrentDay: boolean }>`
display: flex;
justify-content: center;
align-items: center;
padding: 0.3rem 0.8rem;
border-radius: 0.5rem;
background-color: ${(props) => (props.isCurrentDay ? LightGreen : Grey6)};
`;

const TimeTag = styled.div<{ isCurrentDay: boolean }>`
display: flex;
justify-content: center;
align-items: center;
padding: 0.3rem 0.8rem;
border-radius: 0.5rem;
max-width: 15rem;
background-color: ${(props) => (props.isCurrentDay ? LightGreen : Grey6)};
`;
Loading
Loading