feat: 봉사자앱 보호소프로필 페이지 UI 개발 (#180)

* feat(volunteer): 보호소프로필페이지의 보호소봉사후기 컴포넌트 추가

* feat(volunteer): 보호소프로필페이지의 봉사모집리스트 컴포넌트 추가

* feat(volunteer): 보호소 프로필 페이지 UI 추가

apps/volunteer/src/pages/shelters/profile/_components/ShelterRecruitments.tsx

@@ -0,0 +1,53 @@
+import { Box, Card, CardBody, Heading, Text } from '@chakra-ui/react';
+import ApplicantStatus from 'shared/components/ApplicantStatus';
+import InfoSubtext from 'shared/components/InfoSubtext';
+
+const DUMMY_RECRUITITEM = {
+  title: '봉사자를 모집합니다.',
+  volunteerDay: '23.12.20',
+  deadline: '23.12.10',
+  applicant: 4,
+  capacity: 10,
+};
+
+type RecruitmentProps = {
+  title: string;
+  volunteerDay: string;
+  deadline: string;
+  applicant: number;
+  capacity: number;
+};
+
+function ShelterRecruitmentItem(recruitmentInfo: RecruitmentProps) {
+  const { title, volunteerDay, deadline, applicant, capacity } =
+    recruitmentInfo;
+  return (
+    <Card p={4} pb={3.5} mb={2}>
+      <CardBody pos="relative" p={0}>
+        <Text pb={2} fontWeight={600}>
+          {title}
+        </Text>
+        <InfoSubtext title="봉사일" content={volunteerDay} />
+        <InfoSubtext title="마감일" content={deadline} />
+        <Box pos="absolute" right={0} bottom={0}>
+          <ApplicantStatus numerator={applicant} denominator={capacity} />
+        </Box>
+      </CardBody>
+    </Card>
+  );
+}
+
+export default function ShelterRecruitments() {
+  return (
+    <Box>
+      <Heading fontWeight={600} fontSize="md" py={4}>
+        보호소의 봉사 모집글 12개
+      </Heading>
+      {Array.from({ length: 5 }, () => DUMMY_RECRUITITEM).map(
+        (recruitmentInfo, index) => (
+          <ShelterRecruitmentItem key={index} {...recruitmentInfo} />
+        ),
+      )}
+    </Box>
+  );
+}

apps/volunteer/src/pages/shelters/profile/_components/ShelterReviews.tsx

@@ -0,0 +1,44 @@
+import { Box, Heading, HStack, Text, VStack } from '@chakra-ui/react';
+import InfoSubtext from 'shared/components/InfoSubtext';
+import Label from 'shared/components/Label';
+import ReviewItem from 'shared/components/ReviewItem';
+
+const DUMMY_REVIEW = {
+  volunteerId: 'abc***',
+  temperature: 38,
+  createdAt: '23.11.24',
+  content: '아이들이 너무 귀여워서 봉사하는 시간이 즐거웠습니다~!',
+  images: [
+    'https://source.unsplash.com/random',
+    'https://source.unsplash.com/random',
+    'https://source.unsplash.com/random',
+  ],
+};
+
+export default function ShelterReviews() {
+  //TODO 보호소에 후기 리스트 조회 API 연결
+  return (
+    <Box>
+      <Heading fontWeight={600} fontSize="md" py={4}>
+        보호소의 후기 12개
+      </Heading>
+      <VStack spacing={2}>
+        {Array.from({ length: 5 }, () => DUMMY_REVIEW).map((review, index) => {
+          const { content, images, volunteerId, temperature, createdAt } =
+            review;
+          return (
+            <ReviewItem key={index} content={content} images={images}>
+              <Box>
+                <HStack mb={1}>
+                  <Text fontWeight={600}>{volunteerId}</Text>
+                  <Label labelTitle={`${temperature}℃`} />
+                </HStack>
+                <InfoSubtext title="작성일" content={createdAt} />
+              </Box>
+            </ReviewItem>
+          );
+        })}
+      </VStack>
+    </Box>
+  );
+}

apps/volunteer/src/pages/shelters/profile/index.tsx

@@ -1,3 +1,32 @@
+import { Box, Divider } from '@chakra-ui/react';
+import InfoTextList from 'shared/components/InfoTextList';
+import ProfileInfo from 'shared/components/ProfileInfo';
+import Tabs from 'shared/components/Tabs';
+
+import ShelterRecruitments from './_components/ShelterRecruitments';
+import ShelterReviews from './_components/ShelterReviews';
+
 export default function SheltersProfilePage() {
-  return <h1>SheltersProfilePage</h1>;
+  return (
+    <Box>
+      <ProfileInfo
+        infoTitle="양천구 보호소"
+        infoTexts={['[email protected]', '비공개']}
+      />
+      <Divider />
+      <InfoTextList
+        infoTextItems={[
+          { title: '전화번호', content: '010-1234-5678' },
+          { title: '전화번호(임시)', content: '02-123-4567' },
+          { title: '상세주소', content: '비공개' },
+        ]}
+      />
+      <Tabs
+        tabs={[
+          ['봉사후기', <ShelterReviews key={1} />],
+          ['봉사모집글', <ShelterRecruitments key={2} />],
+        ]}
+      />
+    </Box>
+  );
 }