feat: 걸음나눔터 페이지 헤더 - 코스등록버튼 구현 (SanE-Seo#21)

src/App.tsx

@@ -21,7 +21,7 @@ function App() {
           <Route path="/seoul-trails" element={<SeoulTrails />} />
           <Route path="/trail-detail" element={<SeoulTrailsDetail />} />
           <Route path="/community" element={<Community />} />
-          <Route path="/EditUserCourse" element={<EditUserCourse />} />
+          <Route path="/edit-user-course" element={<EditUserCourse />} />
         </Routes>
       </BrowserRouter>
     </>

src/assets/icons/right-arrow.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+type IconProps = {
+  width?: number;
+  height?: number;
+  color?: string;
+};
+
+const RightArrowIcon = ({ width, height, color }: IconProps) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_276_31)">
+      <path
+        d="M8.67035 12.76L13.7984 7.36592L8.65825 1.98393L7.52139 3.14499L11.0529 6.62817L1.52259 6.62817L1.52259 8.12787H11.0287L7.52139 11.5869L8.67035 12.76"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_276_31">
+        <rect
+          width="10"
+          height="10.69"
+          fill="white"
+          transform="translate(7.74316 0.189987) rotate(45)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default RightArrowIcon;

src/components/Community/MapItem.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function MapItem() {
+  return <div>MapItem</div>;
+}
+
+export default MapItem;

src/components/Header.tsx

@@ -43,14 +43,6 @@ function Header() {
         >
           로그인
         </button>
-        <button // 코스 등록 버튼 - 임시로 추가한 버튼입니다.
-          className="edit-course-button"
-          onClick={() => {
-            navigate('/EditUserCourse');
-          }}
-        >
-          코스 등록
-        </button>
       </H.HeaderLayout>
     </H.HeaderWrapper>
   );

src/pages/Community.tsx

@@ -1,12 +1,31 @@
-import React from 'react';
+import React, { useState } from 'react';
 import DefaultLayout from '../components/DefaultLayout';
-
+import * as C from '../styles/community.style';
+import RightArrowIcon from '../assets/icons/right-arrow';
+import { ReactComponent as SearchIcon } from '../assets/icons/search-icon.svg';
+import MapItem from '../components/Community/MapItem';
+import { useNavigate } from 'react-router-dom';
 function Community() {
+  const [placeInput, setPlaceInput] = useState<string>('');
+
+  const navigate = useNavigate();
   return (
     <>
-      <DefaultLayout>
-        <div>Community</div>
-      </DefaultLayout>
+      <DefaultLayout />
+      <C.HeaderLayout>
+        <C.SearchContainer>
+          <SearchIcon />
+          <input name="text" placeholder="지역을 검색하세요"></input>
+        </C.SearchContainer>
+        <C.AddButton onClick={() => navigate('/edit-user-course')}>
+          <span className="button_icon-wrapper">
+            <RightArrowIcon width={15} height={15} color="#645023" />
+            <RightArrowIcon width={15} height={15} color="#645023" />
+          </span>
+          <span>내 코스 추가하기</span>
+        </C.AddButton>
+      </C.HeaderLayout>
+      <MapItem />
     </>
   );
 }

src/styles/community.style.ts

@@ -0,0 +1,109 @@
+import styled from 'styled-components';
+
+export const HeaderLayout = styled.div`
+  width: 100%;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid #dbdbdb;
+  justify-content: space-between;
+  padding: 15px;
+`;
+
+export const SearchContainer = styled.div`
+  width: 324px;
+  height: 45px;
+
+  background: #ffffff;
+  border: 1px solid #949494;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 15px;
+
+  input {
+    margin-left: 3px;
+    border: none; //테두리 없애기
+    background-color: transparent; //input창 배경 투명하게
+    ${(props) => props.theme.fonts.text_md};
+    &:focus {
+      outline: none;
+    }
+  }
+`;
+
+// Button 컴포넌트
+export const AddButton = styled.button`
+  line-height: 1;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  background-color: ${(props) => props.theme.colors.deepBrown};
+  color: #fff;
+  width: 180px;
+  height: 40px;
+  border-radius: 10rem;
+  ${(props) => props.theme.fonts.text_md};
+  padding: 0.75rem 1.5rem;
+  padding-left: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: background-color 0.3s;
+  cursor: pointer;
+
+  .button_icon-wrapper {
+    flex-shrink: 0;
+    width: 25px;
+    height: 25px;
+    position: relative;
+    color: #645023;
+    background-color: #fff;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+
+    & svg {
+      &:nth-child(2) {
+        position: absolute;
+        transform: translate(-290%, 0%);
+      }
+    }
+  }
+
+  &:hover {
+    background-color: #000;
+
+    .button_icon-wrapper {
+      color: #000;
+
+      & svg {
+        transition: transform 0.3s ease-in-out;
+
+        &:first-child {
+          transform: translate(290%, 0%);
+          color: #ffffff;
+        }
+        &:nth-child(2) {
+          transition-delay: 0.1s;
+          transform: translate(0);
+          color: #ffffff;
+        }
+      }
+    }
+
+    .button_icon-svg:first-child {
+      transition: transform 0.3s ease-in-out;
+      transform: translate(150%, -150%);
+    }
+
+    .button_icon-svg--copy {
+      transition: transform 0.3s ease-in-out 0.1s;
+      transform: translate(0);
+    }
+  }
+`;