IT-Cotato · Cllaude99 · Jul 21, 2024 · Jul 21, 2024
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/imgs/Navbar/mainLogo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>모두의 중간</title>
+    <title>ASAP</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.3",
+    "@hookform/resolvers": "^3.9.0",
     "@tanstack/react-query": "^5.29.2",
     "axios": "^1.6.8",
     "framer-motion": "^11.2.10",
@@ -24,6 +25,7 @@
     "styled-components": "^6.1.8",
     "styled-reset": "^4.5.2",
     "vite-plugin-svgr": "^4.2.0",
+    "yup": "^1.4.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

diff --git a/src/apis/existence.ts b/src/apis/existence.ts
@@ -0,0 +1,7 @@
+import axios from 'axios';
+import { BACKEND_URL } from '.';
+
+export const fetchExistence = async (roomId: string) => {
+  const { data } = await axios.get(`${BACKEND_URL}/api/rooms/${roomId}/existence`);
+  return data.data;
+};
diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -2,15 +2,16 @@
 
 import axios from 'axios';
 
-const REFRESH_URL = '';
-
+export const BACKEND_URL = import.meta.env.VITE_BACKEND_URI;
 export const axiosInstance = axios.create({
   baseURL: '',
 });
+const REFRESH_URL = '';
 
 // 로그 아웃 함수
 const logout = () => {
   localStorage.removeItem('accessToken');
+  localStorage.removeItem('refreshToken');
 };
 
 // accessToken, refreshToken 재발급하는 함수

diff --git a/src/apis/login.ts b/src/apis/login.ts
@@ -1,6 +1,5 @@
 import axios from 'axios';
-
-const BACKEND_URL = import.meta.env.VITE_BACKEND_URI;
+import { BACKEND_URL } from '.';
 
 interface ILoginPayload {
   readonly roomId: string;

diff --git a/src/assets/imgs/Navbar/copyLogo.svg b/src/assets/imgs/Navbar/copyLogo.svg
diff --git a/src/assets/imgs/Navbar/mainLogo.svg b/src/assets/imgs/Navbar/mainLogo.svg
diff --git a/src/assets/imgs/loginLogo.svg b/src/assets/imgs/loginLogo.svg
diff --git a/src/components/BannerMessage.tsx b/src/components/BannerMessage.tsx
@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import { motion, AnimatePresence } from 'framer-motion';
+import CopyLogo from '@/assets/imgs/Navbar/copyLogo.svg?react';
+
+export default function BannerMessage() {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    const url = window.location.href;
+    navigator.clipboard.writeText(url).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1000);
+    });
+  };
+
+  return (
+    <Textbox className="flex items-center justify-center gap-2 p-2 py-5 rounded-lg">
+      <CopyWrapper>
+        <CopyLogo className="cursor-pointer" onClick={handleCopy} />
+        <AnimatePresence>
+          {copied && (
+            <CopiedMessage
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.5 }}
+            >
+              링크가 복사되었습니다
+            </CopiedMessage>
+          )}
+        </AnimatePresence>
+      </CopyWrapper>
+      <span className="text-lg">
+        상대방에게 <span className="text-[#2F5FDD] font-semibold">ASAP 링크를 공유해 위치를 입력</span>
+        하고 중간 지점을 찾아보세요!
+      </span>
+    </Textbox>
+  );
+}
+
+const Textbox = styled.div`
+  width: 80%;
+  background: ${(props) => props.theme.bgColor};
+`;
+
+const CopyWrapper = styled.div`
+  position: relative;
+`;
+
+const CopiedMessage = styled(motion.div)`
+  position: absolute;
+  bottom: 150%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: ${(props) => props.theme.mainColor};
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+  justify-content: center;
+  width: max-content;
+`;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -0,0 +1,28 @@
+import MainLogo from '@/assets/imgs/Navbar/mainLogo.svg?react';
+import { Link } from 'react-router-dom';
+import { useAtomValue } from 'jotai';
+import { loginAtom } from '@/stores/login-state';
+
+export default function Navbar() {
+  const isLogin = useAtomValue(loginAtom);
+
+  return (
+    <header className="w-4/5">
+      <nav className="flex items-center justify-between">
+        <ul>
+          <Link to="/" className="flex items-center gap-2">
+            <MainLogo />
+            <span className="text-4xl font-semibold">ASAP</span>
+          </Link>
+        </ul>
+        {isLogin && (
+          <ul className="flex items-center gap-6 *:cursor-pointer">
+            <li>중간지점찾기</li>
+            <li>투표만들기</li>
+            <li>모임시간정하기</li>
+          </ul>
+        )}
+      </nav>
+    </header>
+  );
+}