설정 페이지 UI 생성

src/App.js

@@ -4,6 +4,7 @@ import PopPage from "./pages/PopPage/PopPage";
 import MyPage from "./pages/MyPage/MyPage";
 import NavigationBar from "./components/NavigationBar";
 import TestPage from "./pages/TestPage/TestPage";
+import SettingPage from "./pages/SettingPage/SettingPage";
 
 function App() {
   return (
@@ -14,6 +15,7 @@ function App() {
           <Route path="post/:postId" element={<PopPage />}></Route>
         </Route>
         <Route path="/profile" element={<MyPage />}></Route>
+        <Route path="/profile/setting" element={<SettingPage />}></Route>
         <Route path="/test" element={<TestPage />}></Route>
       </Routes>
       <NavigationBar />

src/pages/MyPage/MyPage.jsx

@@ -1,8 +1,13 @@
 import React from "react";
 import Layout from "../../components/Layout";
+import { Link } from "react-router-dom";
 
 const MyPage = () => {
-  return <Layout>MY</Layout>;
+  return (
+    <Layout>
+      <Link to="setting">설정버튼</Link>
+    </Layout>
+  );
 };
 
 export default MyPage;

src/pages/SettingPage/SettingPage.jsx

@@ -0,0 +1,90 @@
+import React from "react";
+import Layout from "../../components/Layout";
+import ListItem from "./components/ListItem";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+const Header = styled.header`
+  width: 100%;
+  height: 56px;
+  padding: 16px;
+  background-color: ${(props) => props.theme.modal.black};
+  border-bottom: 1px solid ${(props) => props.theme.modal.gray};
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+
+const Prev = styled(Link)`
+  width: 24px;
+  height: 24px;
+`;
+
+const Title = styled.h1`
+  font-size: 18px;
+  line-height: 1.3;
+  height: 24px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const Main = styled.main`
+  width: 100%;
+  padding: 0 20px;
+`;
+
+const List = styled.ul`
+  width: 100%;
+`;
+
+const Quit = styled.div`
+  font-size: 12px;
+  margin-top: 12px;
+  color: ${(props) => props.theme.modal.lightGray};
+  text-decoration: underline;
+  cursor: pointer;
+`;
+
+const SettingPage = () => {
+  const handleAskClick = () => {
+    console.log("카카오 문의하기 채널로 이동");
+  };
+
+  const handleSignOutClick = () => {
+    console.log("로그아웃 API");
+  };
+
+  const handleQuitClick = () => {
+    console.log("회원탈퇴 API");
+  };
+
+  return (
+    <Layout>
+      <Header>
+        <Prev to="/profile">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M15 6L9 12L15 18" stroke="currentColor" strokeWidth="2" />
+          </svg>
+        </Prev>
+        <Title>설정</Title>
+      </Header>
+      <Main>
+        <List>
+          <ListItem onClick={handleAskClick}>카카오 문의하기</ListItem>
+          <ListItem onClick={handleSignOutClick}>로그아웃</ListItem>
+        </List>
+        <Quit onClick={handleQuitClick}>회원 탈퇴</Quit>
+      </Main>
+    </Layout>
+  );
+};
+
+export default SettingPage;

src/pages/SettingPage/components/ListItem.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "styled-components";
+
+const Layout = styled.li`
+  width: 350px;
+  height: 56px;
+  border-bottom: 1px solid ${(props) => props.theme.modal.gray};
+  padding: 24px 0 16px;
+  cursor: pointer;
+`;
+
+const Text = styled.div`
+  font-size: 16px;
+  line-height: 1;
+  height: 16px;
+`;
+
+const ListItem = ({ onClick, children }) => {
+  return (
+    <Layout onClick={onClick}>
+      <Text>{children}</Text>
+    </Layout>
+  );
+};
+
+export default ListItem;