Merge pull request #16 from makchamakers/taepyeong/setting-page

설정 페이지 최상위 메뉴 UI 추가

.eslintrc.json

@@ -29,6 +29,7 @@
       {
         "additionalHooks": "useRecoilCallback"
       }
-    ]
+    ],
+    "react/prop-types": "off"
   }
 }

src/app/setting/ArrowIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const ArrowIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#AAA"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="m7 4 6 6-6 6"
+    />
+  </svg>
+);
+
+export default ArrowIcon;

src/app/setting/page.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import Link from 'next/link';
+import NavigationBar from '@/components/NavigationBar';
+import ArrowIcon from './ArrowIcon';
+import styled from 'styled-components';
+
+const menu = [
+  { label: '즐겨찾기 관리', href: '/setting/favorites' },
+  { label: '알림 주기 관리', href: '/setting/alarm' },
+];
+
+export default function setting() {
+  return (
+    <Container>
+      <Title>설정</Title>
+      <main>
+        {menu.map(({ label, href }, index) => (
+          <Link key={index} href={href}>
+            <span>{label}</span>
+            <ArrowIcon />
+          </Link>
+        ))}
+      </main>
+      <NavigationBar />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  padding: 0 16px;
+  > main {
+    padding-top: 16px;
+    > * {
+      display: flex;
+      justify-content: space-between;
+      padding: 20px 16px;
+      font-size: 16px;
+      line-height: 22px;
+      border-bottom: 1px solid #ddd;
+    }
+    > :last-child {
+      border-bottom: none;
+    }
+  }
+`;
+
+const Title = styled.h1`
+  padding-top: 70px;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+`;

src/components/HomeIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const HomeIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={28}
+    height={28}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill={props.color || '#BBBBBB'}
+      d="M14.571 2.397a1 1 0 0 0-1.142 0l-11 7.652A1 1 0 0 0 2 10.87V25a1 1 0 0 0 1 1h6.625a1 1 0 0 0 1-1v-5.652a1 1 0 0 1 1-1h4.75a1 1 0 0 1 1 1V25a1 1 0 0 0 1 1H25a1 1 0 0 0 1-1V10.87a1 1 0 0 0-.429-.82l-11-7.653Z"
+    />
+  </svg>
+);
+
+export default HomeIcon;

src/components/NavigationBar.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import HomeIcon from '@/components/HomeIcon';
+import PersonIcon from '@/components/PersonIcon';
+import SettingIcon from '@/components/SettingIcon';
+import styled from 'styled-components';
+
+export default function NavigationBar() {
+  const activePath = usePathname();
+  const isSetting = activePath === '/setting';
+  const isHome = activePath === '/';
+  const isMyPage = activePath === '/mypage';
+
+  return (
+    <Container>
+      <Link href="/setting">
+        <NavLink $active={isSetting}>
+          <SettingIcon color={isSetting ? '#FF8048' : '#BBBBBB'} />
+          <span>설정</span>
+        </NavLink>
+      </Link>
+      <Link href="/">
+        <NavLink $active={isHome}>
+          <HomeIcon color={isHome ? '#FF8048' : '#BBBBBB'} />
+          <span>홈</span>
+        </NavLink>
+      </Link>
+      <Link href="/mypage">
+        <NavLink $active={isMyPage}>
+          <PersonIcon color={isMyPage ? '#FF8048' : '#BBBBBB'} />
+          <span>마이페이지</span>
+        </NavLink>
+      </Link>
+    </Container>
+  );
+}
+
+const Container = styled.nav`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 88px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 8px 64px 32px;
+  background-color: #fff;
+  border-top: 1px solid #ddd;
+`;
+
+const NavLink = styled.div<{ $active: boolean }>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  > span {
+    position: absolute;
+    bottom: -18px;
+    white-space: nowrap;
+    font-size: 12px;
+    line-height: 18px;
+    color: ${({ $active }) => ($active ? '#FF8048' : '#BBBBBB')};
+  }
+`;

src/components/PersonIcon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const PersonIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={28}
+    height={28}
+    fill="none"
+    {...props}
+  >
+    <circle cx={14} cy={7.6} r={5.6} fill={props.color || '#BBBBBB'} />
+    <path
+      fill={props.color || '#BBBBBB'}
+      d="M25.951 25.001c.054.55-.4.999-.953.999H3c-.551 0-1.005-.45-.951-.999C2.599 19.394 7.739 15 14 15c6.26 0 11.4 4.394 11.951 10.001Z"
+    />
+  </svg>
+);
+
+export default PersonIcon;

src/components/SettingIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const SettingIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={28}
+    height={28}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill={props.color || '#BBBBBB'}
+      d="M23.175 15.175c.052-.375.078-.763.078-1.175 0-.4-.026-.8-.09-1.175l2.608-1.975a.602.602 0 0 0 .154-.762l-2.467-4.15c-.154-.276-.475-.363-.758-.276l-3.071 1.2a9.141 9.141 0 0 0-2.082-1.175l-.463-3.175A.617.617 0 0 0 16.467 2h-4.934a.603.603 0 0 0-.604.513l-.463 3.175c-.758.3-1.452.712-2.082 1.175l-3.071-1.2a.621.621 0 0 0-.758.274L2.1 10.088c-.154.263-.103.588.154.763l2.61 1.975A7.143 7.143 0 0 0 4.746 14c0 .387.026.8.09 1.175L2.23 17.15a.602.602 0 0 0-.154.763l2.467 4.15c.154.274.475.362.758.274l3.071-1.2a9.143 9.143 0 0 0 2.082 1.175l.463 3.175c.064.3.308.513.617.513h4.934a.594.594 0 0 0 .604-.512l.463-3.175c.758-.3 1.452-.7 2.082-1.175l3.071 1.2c.283.1.604 0 .758-.276l2.468-4.15c.154-.274.09-.587-.155-.762l-2.583-1.975ZM14 18.5c-2.544 0-4.626-2.025-4.626-4.5S11.456 9.5 14 9.5c2.544 0 4.626 2.025 4.626 4.5S16.544 18.5 14 18.5Z"
+    />
+  </svg>
+);
+
+export default SettingIcon;