feat: 걸음나눔터 페이지 슬라이더 컴포넌트 구현 (SanE-Seo#21)

ej070961 · Apr 27, 2024 · 6d20063 · 6d20063
1 parent d518e17
commit 6d20063
Show file tree

Hide file tree

Showing 7 changed files with 265 additions and 13 deletions.
diff --git a/src/components/Community/CourseDetail.tsx b/src/components/Community/CourseDetail.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+function CourseDetail() {
+  return (
+    <DetailLayout>
+      <span className="detail-title">코스 소개</span>
+      <span className="detail-text">
+        노원구 동네에서 걷기 좋은 산책로 추천드립니당
+      </span>
+      <span className="detail-title">사용자 등록 사진</span>
+    </DetailLayout>
+  );
+}
+
+export default CourseDetail;
+
+const DetailLayout = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 15px 20px;
+  cursor: default;
+
+  .detail-title {
+    ${(props) => props.theme.fonts.text_md};
+    color: ${(props) => props.theme.colors.gray700};
+  }
+  .detail-text {
+    ${(props) => props.theme.fonts.text_sm};
+    color: ${(props) => props.theme.colors.gray400};
+    margin: 5px 0 15px 0;
+  }
+`;
diff --git a/src/components/Community/Drawer.tsx b/src/components/Community/Drawer.tsx
@@ -1,8 +1,54 @@
-import React from 'react';
-import { DrawerLayout } from '../../styles/drawer.style';
-
-function Drawer() {
-  return <DrawerLayout></DrawerLayout>;
+import React, { useState } from 'react';
+import * as D from '../../styles/drawer.style';
+import TimeIcon from '../../assets/icons/time-icon';
+import HeartIcon from '../../assets/icons/heart-icon';
+import LengthIcon from '../../assets/icons/length-icon';
+import LevelIcon from '../../assets/icons/level-icon';
+import DefaultProfileImg from '../../assets/image/default-profile.png';
+import CourseDetail from './CourseDetail';
+import Review from './Review';
+type DrawerProps = {
+  isOpenDrawer: boolean;
+  setIsOpenDrawer: (value: boolean) => void;
+};
+function Drawer({ isOpenDrawer, setIsOpenDrawer }: DrawerProps) {
+  const [selectedMenu, setSelectedMenu] = useState<string>('상세정보');
+  return (
+    <D.DrawerLayout
+    // style={{
+    //   transform: isOpenDrawer ? 'translateX(0)' : 'translateX(-100%)',
+    // }}
+    >
+      <D.PostInfoBox>
+        <span className="title-sm">노원구 최애 산책길</span>
+        <span className="address-info">서울특별시 노원구</span>
+        <div className="description-box">
+          <TimeIcon width={20} height={20} />
+          <span className="description-text">1시간</span>
+          <HeartIcon width={20} height={20} />
+          <span className="description-text">15</span>
+          <LengthIcon width={11} height={17} />
+          <span className="description-text">2.51km</span>
+          <LevelIcon width={15} height={15} />
+          <span className="description-text">초급</span>
+        </div>
+        <div className="profile-box">
+          <img src={DefaultProfileImg} alt="profile" className="profile-img" />
+          <span className="name">응자 </span>
+        </div>
+      </D.PostInfoBox>
+      <hr className="custom-line" />
+      <D.MenuBox>
+        <D.MenuItem active={selectedMenu === '상세정보'.toString()}>
+          <button onClick={() => setSelectedMenu('상세정보')}> 상세정보</button>
+        </D.MenuItem>
+        <D.MenuItem active={selectedMenu === '리뷰'.toString()}>
+          <button onClick={() => setSelectedMenu('리뷰')}>리뷰</button>
+        </D.MenuItem>
+      </D.MenuBox>
+      {selectedMenu == '상세정보' ? <CourseDetail /> : <Review />}
+    </D.DrawerLayout>
+  );
 }
 
 export default Drawer;
diff --git a/src/components/Community/Review.tsx b/src/components/Community/Review.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import styled from 'styled-components';
+import DefaultProfileImg from '../../assets/image/default-profile.png';
+function Review() {
+  return (
+    <ReviewLayout>
+      <AddReviewButton>리뷰 작성하기</AddReviewButton>
+      <ReviewItem>
+        <div className="profile-rating-box">
+          <img src={DefaultProfileImg} className="profile-img" alt="profile" />
+          <span className="name">응자</span>
+        </div>
+        <span className="review-text">가볍게 산책하기 좋아요</span>
+        <span className="review-text">2024.04.17</span>
+      </ReviewItem>
+      <ReviewItem>
+        <div className="profile-rating-box">
+          <img src={DefaultProfileImg} className="profile-img" alt="profile" />
+          <span className="name">응자</span>
+        </div>
+        <span className="review-text">가볍게 산책하기 좋아요</span>
+        <span className="review-text">2024.04.17</span>
+      </ReviewItem>
+    </ReviewLayout>
+  );
+}
+
+export default Review;
+const ReviewLayout = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 15px 20px;
+  cursor: default;
+`;
+
+const AddReviewButton = styled.button`
+  width: 300px;
+  height: 40px;
+
+  background: #f9c758;
+  border-radius: 10px;
+  ${(props) => props.theme.fonts.text_md};
+  color: #ffffff;
+`;
+
+const ReviewItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+
+  .profile-rating-box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .profile-img {
+      width: 26px;
+      height: 26px;
+      border-radius: 50%;
+    }
+
+    .name {
+      ${(props) => props.theme.fonts.text_sm};
+      color: ${(props) => props.theme.colors.gray600};
+      margin-left: 6px;
+    }
+  }
+  .review-text {
+    margin-top: 5px;
+    ${(props) => props.theme.fonts.text_sm};
+    color: ${(props) => props.theme.colors.gray400};
+  }
+`;
diff --git a/src/components/Community/UserTrailMap.tsx b/src/components/Community/UserTrailMap.tsx
@@ -9,13 +9,19 @@ type MapProps = {
   lng: number;
 };
 function UserTrailMap({ lat, lng }: MapProps) {
-  // useKakaoLoader();
+  useKakaoLoader();
   const [isOpenDrawer, setIsOpenDrawer] = useState<boolean>(false);
 
   return (
     <>
-      {isOpenDrawer && <Drawer />}
       <U.MapLayout>
+        {isOpenDrawer && (
+          <Drawer
+            isOpenDrawer={isOpenDrawer}
+            setIsOpenDrawer={setIsOpenDrawer}
+          />
+        )}
+
         <Map
           id="map"
           center={{ lat: lat, lng: lng }}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -15,9 +15,9 @@ function Header() {
             navigate('/');
           }}
         >
-          <H.LogoText logoTextColor="#94C020">산책</H.LogoText>
-          <H.LogoText logoTextColor="#F9C758">이음</H.LogoText>
-          <H.LogoText logoTextColor="#645023">서울</H.LogoText>
+          <H.LogoText color="#94C020">산책</H.LogoText>
+          <H.LogoText color="#F9C758">이음</H.LogoText>
+          <H.LogoText color="#645023">서울</H.LogoText>
         </div>
         <span
           className="menu-text"

diff --git a/src/styles/drawer.style.ts b/src/styles/drawer.style.ts
@@ -3,7 +3,100 @@ import styled from 'styled-components';
 export const DrawerLayout = styled.div`
   position: absolute;
   width: 340px;
-  height: 100%;
+  height: calc(100vh - 140px);
   background: #ffffff;
   z-index: 2;
+  transition: 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(0);
+  .custom-line {
+    width: 100%;
+    height: 0px;
+    border: 1px solid #dbdbdb;
+  }
+`;
+
+export const PostInfoBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 19px;
+
+  .title-sm {
+    ${(props) => props.theme.fonts.title_sm};
+    color: ${(props) => props.theme.colors.gray600};
+  }
+  .address-info {
+    ${(props) => props.theme.fonts.text_md};
+    color: ${(props) => props.theme.colors.gray400};
+    margin-top: 8px;
+  }
+  .description-box {
+    display: flex;
+    flex-direction: row;
+    width: 240px;
+    margin-top: 10px;
+    align-items: center;
+
+    .description-text {
+      ${(props) => props.theme.fonts.caption};
+      color: ${(props) => props.theme.colors.gray300};
+      margin: 0 10px 0 3px;
+    }
+  }
+  .profile-box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 15px;
+    .profile-img {
+      width: 26px;
+      height: 26px;
+      border-radius: 50%;
+    }
+    .name {
+      ${(props) => props.theme.fonts.text_sm};
+      color: ${(props) => props.theme.colors.gray600};
+      margin-left: 6px;
+    }
+  }
+`;
+
+export const MenuBox = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  // padding: 0 40px;
+`;
+type LiProps = {
+  active: boolean;
+};
+export const MenuItem = styled.li<LiProps>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 170px;
+  height: 40px;
+  // margin: 0 14px;
+  list-style: none;
+
+  button {
+    border: none;
+    width: 100%;
+    height: 100%;
+    ${(props) => props.theme.fonts.text_md};
+    color: ${(props) =>
+      props.active
+        ? props.theme.colors.subAccentColor
+        : props.theme.colors.gray600};
+    border-bottom: ${(props) => (props.active ? '2px solid #F9C758' : 'none')};
+    background-color: transparent;
+    cursor: pointer;
+    &:hover {
+      color: ${(props) => props.theme.colors.subAccentColor};
+      font-weight: 600;
+    }
+  }
 `;
diff --git a/src/styles/header.style.ts b/src/styles/header.style.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 // HeaderLayout 컴포넌트의 Props 타입 정의
 type SpanProps = {
-  logoTextColor?: string; // logo-text의 색상을 설정할 수 있는 선택적 프로퍼티
+  color?: string; // logo-text의 색상을 설정할 수 있는 선택적 프로퍼티
 };
 
 export const HeaderWrapper = styled.nav`
@@ -54,5 +54,5 @@ export const LogoText = styled.span<SpanProps>`
   font-weight: 400;
   font-size: 32px;
   line-height: 40px;
-  color: ${(props) => props.logoTextColor || '#94C020'};
+  color: ${(props) => props.color || '#94C020'};
 `;