Skip to content

Commit

Permalink
Merge pull request #335 from sharemindteam/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@rmdnps10
rmdnps10 authored Jul 2, 2024
2 parents 915dad3 + 54d4d91 commit fe5e7fd
Show file tree
Hide file tree
Showing 11 changed files with 477 additions and 218 deletions.
23 changes: 16 additions & 7 deletions src/components/Buyer/BuyerCounselorProfile/CounselorExp.tsx
View file
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
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

0 comments on commit fe5e7fd

Please sign in to comment.