TripList 페이지 구현

frontend/package.json

@@ -18,7 +18,7 @@
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^4.29.19",
     "axios": "^1.4.0",
-    "hang-log-design-system": "^1.1.1",
+    "hang-log-design-system": "^1.1.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",

frontend/src/api/axiosInstance.ts

@@ -1,4 +1,4 @@
-import { BASE_URL } from '@/constants/api';
+import { BASE_URL } from '@constants/api';
 import axios from 'axios';
 
 export const axiosInstance = axios.create({

frontend/src/api/trips/trips.ts

@@ -0,0 +1,10 @@
+import { END_POINTS } from '@constants/api';
+import type { TripsType } from '@type/trips';
+
+import { axiosInstance } from '@api/axiosInstance';
+
+export const getTrips = async () => {
+  const { data } = await axiosInstance.get<{ trips: TripsType[] }>(END_POINTS.TRIPS);
+
+  return data?.trips;
+};

frontend/src/components/Trips/TripsHeader/TripsHeader.tsx

@@ -0,0 +1,23 @@
+import TripsHeaderSVG from '@assets/svg/TripsHeader.svg';
+import { Box, Flex, Heading } from 'hang-log-design-system';
+
+const TripsHeader = () => {
+  return (
+    <>
+      <Flex styles={{ justify: 'space-between', width: '100%', gap: '200px' }}>
+        <Box>
+          <Box
+            style={{ height: '200px', paddingLeft: '50px', display: 'flex', alignItems: 'center' }}
+          >
+            <Heading size="large">라곤의 여행</Heading>
+          </Box>
+        </Box>
+        <Flex styles={{ width: '70%', height: '18%', paddingRight: '50px', justify: 'right' }}>
+          <TripsHeaderSVG style={{ width: '854px' }} />
+        </Flex>
+      </Flex>
+    </>
+  );
+};
+
+export default TripsHeader;

frontend/src/components/Trips/TripsItem/TripsItem.style.ts

@@ -0,0 +1,68 @@
+import { css } from '@emotion/react';
+import { Theme } from 'hang-log-design-system';
+
+export const tripsBoxStyling = css({
+  alignSelf: 'start',
+
+  width: `calc((100vw - 196px) / 5)`,
+  margin: 0,
+  padding: 0,
+});
+
+export const tripsItemImageBoxStyling = css({
+  width: '100%',
+  height: '176px',
+});
+
+export const tripsItemImageStyling = css({
+  objectFit: 'cover',
+
+  width: '100%',
+  height: '100%',
+  minHeight: '176px',
+  maxHeight: '176px',
+  borderRadius: Theme.borderRadius.medium,
+});
+
+export const tripsItemNameStying = css({
+  marginBottom: Theme.spacer.spacing1,
+
+  fontWeight: '600',
+});
+
+export const tripsItemBadgeBoxStyling = css({
+  width: `calc((100vw - 196px) / 5)`,
+  minHeight: '22px',
+  marginTop: Theme.spacer.spacing3,
+  marginBottom: Theme.spacer.spacing2,
+
+  overflowX: 'scroll',
+  whiteSpace: 'nowrap',
+  '-ms-overflow-style': 'none',
+  scrollbarWidth: 'none',
+
+  '& > span': {
+    marginRight: Theme.spacer.spacing2,
+  },
+
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
+});
+
+export const tripsTiemDurationStyling = css({
+  marginBottom: Theme.spacer.spacing1,
+});
+
+export const tripsDurationTextStyling = css({
+  display: '-webkit-box',
+  '-webkit-line-clamp': '2',
+  '-webkit-box-orient': 'vertical',
+
+  marginTop: '4px',
+  width: '100%',
+
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  wordBreak: 'break-word',
+});

frontend/src/components/Trips/TripsItem/TripsItem.tsx

@@ -0,0 +1,43 @@
+import { Cities } from '@type/trips';
+import { Badge, Box, Flex, Text } from 'hang-log-design-system';
+
+import {
+  tripsBoxStyling,
+  tripsDurationTextStyling,
+  tripsItemBadgeBoxStyling,
+  tripsItemImageBoxStyling,
+  tripsItemImageStyling,
+  tripsItemNameStying,
+} from '@components/trips/TripsItem/TripsItem.style';
+
+interface TripItemProps {
+  coverImage: string;
+  cityTags: Cities[];
+  itemName: string;
+  duration: string;
+  description?: string | null;
+}
+
+const TripsItem = ({ coverImage, cityTags, itemName, duration, description }: TripItemProps) => {
+  return (
+    <Flex styles={{ direction: 'column' }} css={tripsBoxStyling}>
+      <Box css={tripsItemImageBoxStyling}>
+        <img src={coverImage} css={tripsItemImageStyling} />
+      </Box>
+      <Box css={tripsItemBadgeBoxStyling}>
+        {cityTags.map((badge) => {
+          return <Badge key={badge.id}>{badge.name}</Badge>;
+        })}
+      </Box>
+      <Text size="large" css={tripsItemNameStying}>
+        {itemName}
+      </Text>
+      <Text size="medium">{duration}</Text>
+      <Text size="small" css={tripsDurationTextStyling}>
+        {description}
+      </Text>
+    </Flex>
+  );
+};
+
+export default TripsItem;

frontend/src/components/Trips/TripsItemList/TripsItemList.style.ts

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+import { Theme } from 'hang-log-design-system';
+
+export const TripsItemGridBoxStyling = css({
+  margin: `${Theme.spacer.spacing4} 50px ${Theme.spacer.spacing7}`,
+  display: 'grid',
+  gridTemplateColumns: 'repeat(5, 1fr)',
+  rowGap: Theme.spacer.spacing5,
+  columnGap: Theme.spacer.spacing4,
+  placeItems: 'center',
+});
+
+export const TripsToggleGroupStyling = css({
+  marginTop: Theme.spacer.spacing3,
+});

frontend/src/components/Trips/TripsItemList/TripsItemList.tsx

@@ -0,0 +1,58 @@
+import { ORDER_BY_DATE, ORDER_BY_REGISTRATION } from '@constants/order';
+import { TripsType } from '@type/trips';
+import { Box, Flex, Toggle, ToggleGroup } from 'hang-log-design-system';
+
+import { formatDate } from '@utils/formatter';
+
+import TripsItem from '@components/trips/TripsItem/TripsItem';
+import {
+  TripsItemGridBoxStyling,
+  TripsToggleGroupStyling,
+} from '@components/trips/TripsItemList/TripsItemList.style';
+
+interface TripsItemListProps {
+  trips: TripsType[];
+  order: string | number;
+  changeSelect: (selectedId: string | number) => void;
+}
+
+const TripsItemList = ({ trips, order, changeSelect }: TripsItemListProps) => {
+  return (
+    trips && (
+      <>
+        <Flex styles={{ justify: 'right', paddingRight: '50px' }} css={TripsToggleGroupStyling}>
+          <ToggleGroup>
+            <Toggle
+              text={ORDER_BY_REGISTRATION}
+              toggleId={ORDER_BY_REGISTRATION}
+              selectedId={order}
+              changeSelect={changeSelect}
+            />
+            <Toggle
+              text={ORDER_BY_DATE}
+              toggleId={ORDER_BY_DATE}
+              selectedId={order}
+              changeSelect={changeSelect}
+            />
+          </ToggleGroup>
+        </Flex>
+        <Box css={TripsItemGridBoxStyling}>
+          {trips.map((trip) => {
+            return (
+              <TripsItem
+                key={trip.id}
+                coverImage={trip.imageUrl}
+                cityTags={trip.cities}
+                itemName={trip.title}
+                duration={`${formatDate(trip.startDate)}~${formatDate(trip.endDate)}`}
+                description={trip.description}
+              />
+            );
+          })}
+        </Box>
+      </>
+    )
+  );
+};
+
+export default TripsItemList;

frontend/src/components/Trips/TripsItemNone/TripsItemNone.style.ts

@@ -0,0 +1,5 @@
+import { css } from '@emotion/react';
+
+export const TripsItemNoneBoxStyling = css({
+  marginLeft: '50px',
+});

frontend/src/components/Trips/TripsItemNone/TripsItemNone.tsx

@@ -0,0 +1,21 @@
+import { Box, Button, Heading, Text } from 'hang-log-design-system';
+
+import { TripsItemNoneBoxStyling } from '@components/trips/TripsItemNone/TripsItemNone.style';
+import TutorialModal from '@components/trips/TutorialModal/TutorialModal';
+
+const TripsItemNone = () => {
+  return (
+    <Box css={TripsItemNoneBoxStyling}>
+      <Heading size="xSmall">아직 기록된 여행이 없습니다!</Heading>
+      <Text style={{ padding: '8px 0 16px' }}>
+        여행 가방에 쌓인 먼지를 털어내고 여행을 기록해 보세요.
+      </Text>
+      <Button variant="primary" size="medium">
+        여행 기록하기
+      </Button>
+      <TutorialModal />
+    </Box>
+  );
+};
+
+export default TripsItemNone;

frontend/src/components/Trips/TutorialModal/TutorialModal.style.ts

@@ -0,0 +1,16 @@
+import { css } from '@emotion/react';
+
+export const ModalCarouselBoxStyling = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+
+  width: '450px',
+  height: '581px',
+  marginTop: '30px',
+});
+
+export const ModalCloseButtonStyling = css({
+  width: '100%',
+  marginTop: 'auto',
+});

frontend/src/components/Trips/TutorialModal/TutorialModal.tsx

@@ -0,0 +1,36 @@
+import Tutorial1SVG from '@assets/svg/tutorial1.svg';
+import Tutorial2SVG from '@assets/svg/tutorial2.svg';
+import Tutorial3SVG from '@assets/svg/tutorial3.svg';
+import Tutorial4SVG from '@assets/svg/tutorial4.svg';
+import { Button, Flex, Modal, SVGCarousel, useOverlay } from 'hang-log-design-system';
+import { useCallback, useEffect } from 'react';
+
+import {
+  ModalCarouselBoxStyling,
+  ModalCloseButtonStyling,
+} from '@components/trips/TutorialModal/TutorialModal.style';
+
+const TutorialModal = () => {
+  const { isOpen, open, close } = useOverlay();
+
+  useEffect(() => {
+    open();
+  }, []);
+
+  return (
+    <Modal isOpen={isOpen} closeModal={close} hasCloseButton={true}>
+      <Flex css={ModalCarouselBoxStyling}>
+        <SVGCarousel
+          width={385}
+          height={412}
+          images={[Tutorial1SVG, Tutorial2SVG, Tutorial3SVG, Tutorial4SVG]}
+        />
+        <Button variant="primary" css={ModalCloseButtonStyling} onClick={close}>
+          닫기
+        </Button>
+      </Flex>
+    </Modal>
+  );
+};
+
+export default TutorialModal;

frontend/src/components/layout/Header/Header.style.ts

@@ -5,7 +5,7 @@ export const headerStyling = css({
   position: 'sticky',
   top: 0,
 
-  zIndex: Theme.zIndex.overlayTop,
+  zIndex: Theme.zIndex.overlayMiddle,
 
   backgroundColor: Theme.color.white,
   padding: `${Theme.spacer.spacing4} 50px`,

frontend/src/components/layout/Header/Header.tsx

@@ -17,8 +17,8 @@ const Header = () => {
           <div css={imageStyling} onClick={open}></div>
           {isOpen && (
             <MenuList>
-              <MenuItem name="마이페이지" onClick={() => navigate(PATH.ROOT)} />
-              <MenuItem name="로그아웃" onClick={() => navigate(PATH.ROOT)} />
+              <MenuItem onClick={() => navigate(PATH.ROOT)}>마이페이지</MenuItem>
+              <MenuItem onClick={() => navigate(PATH.ROOT)}>로그아웃</MenuItem>
             </MenuList>
           )}
         </Menu>

frontend/src/constants/api.ts

@@ -8,3 +8,7 @@ export const END_POINTS = {
   CREATE_TRIP_ITEM: (tripId: number) => `/trips/${tripId}/items`,
   CHANGE_TRIP_ITEM: (tripId: number, itemId: number) => `/trips/${tripId}/items/${itemId}`,
 } as const;
+
+export const NETWORK = {
+  RETRY_COUNT: 3,
+} as const;

frontend/src/constants/order.ts

@@ -0,0 +1,2 @@
+export const ORDER_BY_REGISTRATION = '등록순';
+export const ORDER_BY_DATE = '날짜순';