Merge pull request #5 from kookmin-sw/feat/profile

Feat/profile

src/App.tsx

@@ -1,17 +1,70 @@
 import React, { useState, useEffect } from "react";
 import "./App.css";
+import { fetchProfile, saveProfile } from "./utils/profileApi";
 
 import Profile from "./page/Profile";
 import Home from "./page/Home";
 import Header from "./components/Header";
 import Login from "./page/Login2";
 import SignUp from "./page/SignUp2";
 
+const saveProfileData = async (
+  name: string,
+  title: string,
+  description: string,
+  githubLink: string
+) => {
+  try {
+    let response;
+    if (name == "" || title == "" || description == "" || githubLink == "") {
+      response = await saveProfile(
+        {
+          name: name,
+          title: title,
+          description: description,
+          githubLink: githubLink,
+        },
+        "post"
+      );
+    } else {
+      response = await saveProfile(
+        {
+          name: name,
+          title: title,
+          description: description,
+          githubLink: githubLink,
+        },
+        "put"
+      );
+    }
+    // console.log("40: ", response);
+    console.log("Profile saved successfully");
+    return response;
+  } catch (error) {
+    console.error("Error saving profile:", error);
+    return;
+  }
+};
+
 const App: React.FC = () => {
   const [isLoggedin, setIsLoggedin] = useState(false);
   const [currentPage, setCurrentPage] = useState("login");
   const [isReadOnly, setIsReadOnly] = useState(true);
 
+  // const [profileData, setProfileData] = useState({
+  //   name: "",
+  //   title: "",
+  //   description: "",
+  //   githubLink: "",
+  // });
+
+  const [name, setName] = useState("");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [githubLink, setGithubLink] = useState("");
+  const [projectsYouLike, setProjectsYouLike] = useState("");
+  const [peopleWhoLikeYou, setPeopleWhoLikeYou] = useState("");
+
   const handleProfileClick = () => {
     setCurrentPage("profile");
     setIsReadOnly(true);
@@ -29,6 +82,25 @@ const App: React.FC = () => {
     console.log("edit clicked");
   };
 
+  const handleSaveClick = async () => {
+    setIsReadOnly(true);
+    const response = await saveProfileData(
+      name,
+      title,
+      description,
+      githubLink
+    );
+    if (response) {
+      setName(response.name);
+      setTitle(response.title);
+      setDescription(response.description);
+      setGithubLink(response.githubLink);
+    }
+    console.log("99: ", response);
+    // setName(response.name);
+    console.log("done__icon clicked");
+  };
+
   const handleLogin = () => {
     setIsLoggedin(true);
     setCurrentPage("home");
@@ -56,20 +128,40 @@ const App: React.FC = () => {
     console.log("sign in clicked");
   };
 
+  const fetchProfileData = async () => {
+    try {
+      const profileData = await fetchProfile();
+      setName(profileData.profile.name);
+      setTitle(profileData.profile.title);
+      setDescription(profileData.profile.description);
+      setGithubLink(profileData.profile.githubLink);
+      console.log("138 fetchProfileData: ", profileData);
+    } catch (error) {
+      console.error("Error fetching profile:", error);
+    }
+  };
+
   useEffect(() => {
     const accessToken = localStorage.getItem("accessToken");
     if (accessToken) {
       setIsLoggedin(true);
     }
   }, []);
 
+  useEffect(() => {
+    if (isLoggedin && currentPage === "profile") {
+      fetchProfileData();
+    }
+  }, [currentPage]);
+
   return (
     <div className="App">
       <Header
         currentPage={currentPage}
         onProfileClick={handleProfileClick}
         onHomeClick={handleHomeClick}
         onEditClick={handleEditClick}
+        onSaveClick={handleSaveClick}
         isReadOnly={isReadOnly}
         isLoggedin={isLoggedin}
         onLogout={handleLogout}
@@ -78,7 +170,21 @@ const App: React.FC = () => {
         {currentPage === "home" && isLoggedin ? (
           <Home />
         ) : currentPage === "profile" && isLoggedin ? (
-          <Profile onEditClick={handleEditClick} isReadOnly={isReadOnly} />
+          <Profile
+            name={name}
+            setName={setName}
+            title={title}
+            setTitle={setTitle}
+            description={description}
+            setDescription={setDescription}
+            githubLink={githubLink}
+            setGithubLink={setGithubLink}
+            projectsYouLike={projectsYouLike}
+            peopleWhoLikeYou={peopleWhoLikeYou}
+            isReadOnly={isReadOnly}
+            // onEditClick={handleEditClick}
+            // onSaveClick={handleSaveClick}
+          />
         ) : currentPage === "login" ? (
           <Login onLoginSuccess={handleLogin} onSignUpClick={handleSignUp} />
         ) : (

src/components/Header.css

@@ -40,19 +40,15 @@
   box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
 }
 
-.home__icon,
-.exit__icon,
-.edit__icon,
-.done__icon,
-.person__icon {
-  width: 40px !important;
-  height: 40px !important;
+.home__icon .MuiSvgIcon-root,
+.exit__icon .MuiSvgIcon-root,
+.edit__icon .MuiSvgIcon-root,
+.done__icon .MuiSvgIcon-root,
+.person__icon .MuiSvgIcon-root {
+  width: 60px !important;
+  height: 60px !important;
   font-size: "large";
   color: black !important;
+  /* background-color: white !important; */
   padding: 4vw !important;
 }
-
-/* .done__icon {
-  width: 50px !important;
-  height: 50px !important;
-} */

src/components/Header.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import "./Header.css";
 // import logo from "../assets/Logo_color.svg";
-import Logo from "./Logo";
+// import Logo from "./Logo";
 
 import { makeStyles } from "@material-ui/core/styles";
 import PersonIcon from "@material-ui/icons/Person";
@@ -16,14 +16,15 @@ function Header({
   onProfileClick,
   onHomeClick,
   onEditClick,
+  onSaveClick,
   isReadOnly,
   isLoggedin,
   onLogout,
 }) {
   return (
     <div className="header">
       <h1 className="header__text">
-        <Logo />
+        <img src="Logo_color.svg" alt="Logo" className="logo"></img>
         Codate
       </h1>
       {isLoggedin && (
@@ -44,7 +45,10 @@ function Header({
             )}
 
           {currentPage === "profile" && (
-            <IconButton className="button" onClick={onEditClick}>
+            <IconButton
+              className="button"
+              onClick={isReadOnly ? onEditClick : onSaveClick}
+            >
               {isReadOnly ? (
                 <EditIcon className="edit__icon" />
               ) : (

src/page/Profile.css

@@ -7,15 +7,15 @@
 .profile__header {
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 40px;
 }
 
 .profile__avatar {
-  width: 200px;
-  height: 200px;
-  margin-right: 1vw;
-  flex-shrink: 0;
-  padding-left: 14px;
+  width: 160px;
+  height: 100%;
+  margin-right: 2vw;
+  /* flex-shrink: 0; */
+  padding-left: 20px;
 }
 
 .profile__user-info {
@@ -41,10 +41,14 @@
   font-size: 0.8em;
 }
 
-.profile__link a {
-  color: #000;
-  text-decoration: underline;
-  display: inline-block;
+.profile__textarea-scrollable {
+  overflow-y: auto;
+  max-height: 250px;
+}
+
+.profile__header .MuiInputBase-input,
+.profile__title .MuiInputBase-input {
+  height: 0 !important;
 }
 
 .profile__section {
@@ -53,20 +57,9 @@
   padding: 0px;
 }
 
-/* .profile__textarea {
-  width: 100%;
-  height: 100px;
-  resize: none;
-  border: 1px solid #ccc;
-  padding: 10px;
-  font-size: 16px;
-  line-height: 1.5;
-  border-radius: 20px;
-  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
-} */
-
 .profile__textarea-readonly {
   background-color: #f0f0f0 !important;
+  border: 1px solid #ccc;
 }
 .profile__textarea-editable {
   background-color: #fff !important;
@@ -76,7 +69,7 @@
   font-size: 20px;
   margin-right: 5px;
 }
-
+/* 
 .profile__link a {
   color: #0366d6;
   text-decoration: none;
@@ -86,4 +79,4 @@
 .profile__link a:hover {
   color: #003d7f;
   border-bottom-color: #0056b3;
-}
+} */