0726 ui수정 로그아웃버튼

client/src/components/Header.js

@@ -6,11 +6,66 @@ const Header = () => {
         style={{ backgroundColor: '#FCF4FF' }}
         className="flex-column align-items-center justify-content-center p-2"
       >
-        <div className="d-flex justify-content-center">
-          <Link to="/">
+        <div className="d-flex justify-content-end">
+          <div>
+          <Link to="/user">
             <img src="/BORA.png" style={{ width: '160px' }} />
           </Link>
           </div>
+          <button
+            type="button"
+            className=" mt-3 ms-5 rounded"
+            data-bs-toggle="modal"
+            data-bs-target="#logout"
+            style={{
+              height: '30px', 
+              backgroundColor: '#E0CEE8',
+              color: 'black',
+              border: '1px #E0CEE8',
+            }}
+          >
+            로그아웃
+          </button>
+          <div
+            className="modal fade"
+            id="logout"
+            tabIndex="-1"
+            aria-labelledby="logoutLabel"
+            aria-hidden="true"
+          >
+            <div className="modal-dialog">
+              <div className="modal-content">
+                <div className="modal-header">
+                  <button
+                    type="button"
+                    className="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="Close"
+                  ></button>
+                </div>
+                <div className="modal-body d-flex justify-content-center">
+                  로그아웃 하시겠습니까?
+                </div>
+                <div className="row mb-3">
+                  <div className="d-flex justify-content-evenly">
+                    {/* <Link to="/user"> */}
+                    <button type="submit" className="col-2 p-1 btn btn-primary">
+                      예
+                    </button>
+                    {/* </Link> */}
+                    <button
+                      type="submit"
+                      className="col-2 p-1 btn btn-primary"
+                      data-bs-dismiss="modal"
+                    >
+                      아니요
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </form>
       <div
         style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}