[Merge] #145 - Commit Merge

Codiary-UMC-6th · Jan 31, 2025 · 164232f · 164232f
2 parents 1c29a49 + fe6dc66
commit 164232f
Show file tree

Hide file tree

Showing 13 changed files with 2,049 additions and 2,940 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.12",
     "typescript": "^4.9.5",
+    "url": "^0.11.4",
     "web-vitals": "^2.1.4",
     "zustand": "^4.5.4"
   },

diff --git a/src/App.js b/src/App.js
@@ -13,7 +13,7 @@ import DiaryEditor from "./pages/DiaryEditor.tsx";
 import DiaryDetails from "./pages/DiaryDetails.tsx";
 import DiaryRegister from "./components/diary/diary-register.jsx";
 import { SignUp } from "./components/signup/SignUp.tsx";
-import { ModifyProfile } from "./components/profile/ModifyProfile.jsx";
+import { ModifyProfile } from "./components/profile/ModifyProfile.tsx";
 import KakaoCallback from "@/components/login/component/KakaoCallback.tsx";
 
 import Example from "./pages/Example.jsx";

diff --git a/src/components/modal/AddModal.jsx → src/components/modal/AddModal.tsx b/src/components/modal/AddModal.jsx → src/components/modal/AddModal.tsx
@@ -4,10 +4,17 @@ import * as Color from "../../common/Color";
 
 import CloseBtn from "../../assets/login/closeBtn.svg";
 
-export const AddModal = (props) => {
+interface props {
+  title: string;
+  placeholder: string;
+  onAdd: any;
+  onClose: any;
+}
+
+export const AddModal = (props: props) => {
   const [inputValue, setInputValue] = useState("");
 
-  const handleInputChange = (e) => {
+  const handleInputChange = (e: any) => {
     setInputValue(e.target.value); // 입력 값 업데이트
   };
 

diff --git a/src/components/profile/ModifyProfile.jsx → src/components/profile/ModifyProfile.tsx b/src/components/profile/ModifyProfile.jsx → src/components/profile/ModifyProfile.tsx
@@ -30,30 +30,30 @@ export const ModifyProfile = () => {
   });
 
   // 유저 정보 get api
-  const getUserInfo = async () => {
-    try {
-      const response = await get(`/members/info`);  // 회원 정보를 가져오는 API
-      const userData = response.result;
-      console.log(response.result);
-      setProfileFormData({
-        email: userData.email,
-        password: userData.password,
-        nickname: userData.nickname,
-        birth: userData.birth === '1000-01-01' ? '' : userData.birth.replaceAll('-', ''),
-        github: userData.githubUrl || '',
-        linkedin: userData.linkedinUrl || '',
-        discord: userData.discordUrl || '',
-        introduction: userData.introduction || '',
-      });
-
-      if (userData.birth === '1000-01-01') {
-        setProfileFormData({ birth: '' });
-      }
-      console.log(profileFormData);
-    } catch (error) {
-      console.error('회원 정보 가져오기 실패', error);
-    }
-  }
+  // const getUserInfo = async () => {
+  //   try {
+  //     const response = await get(`/members/info`);  // 회원 정보를 가져오는 API
+  //     const userData = response.result;
+  //     console.log(response.result);
+  //     setProfileFormData({
+  //       email: userData.email,
+  //       password: userData.password,
+  //       nickname: userData.nickname,
+  //       birth: userData.birth === '1000-01-01' ? '' : userData.birth.replaceAll('-', ''),
+  //       github: userData.githubUrl || '',
+  //       linkedin: userData.linkedinUrl || '',
+  //       discord: userData.discordUrl || '',
+  //       introduction: userData.introduction || '',
+  //     });
+
+  //     if (userData.birth === '1000-01-01') {
+  //       setProfileFormData({ birth: '' });
+  //     }
+  //     console.log(profileFormData);
+  //   } catch (error) {
+  //     console.error('회원 정보 가져오기 실패', error);
+  //   }
+  // }
 
   const [changeFormData, setChangeFormData] = useState({
     "birth": profileFormData.birth,
@@ -63,12 +63,12 @@ export const ModifyProfile = () => {
     "discord": profileFormData.discord,
   });
 
-  useEffect(() => {
-    console.log(memberId);
-    if (memberId) {
-      getUserInfo();
-    }
-  }, [memberId]);
+  // useEffect(() => {
+  //   console.log(memberId);
+  //   if (memberId) {
+  //     getUserInfo();
+  //   }
+  // }, [memberId]);
 
   const [errors, setErrors] = useState({
     nickname: '',
@@ -77,7 +77,7 @@ export const ModifyProfile = () => {
 
   const [isNicknameChecked, setIsNicknameChecked] = useState(true);
 
-  const handleChange = (name, value, error) => {
+  const handleChange = (name: string, value: string, error: string | undefined) => {
     if (name === 'birth') {
       setProfileFormData({
         ...profileFormData,
@@ -107,7 +107,7 @@ export const ModifyProfile = () => {
   };
 
   // 생년월일 포맷
-  const birthFormatDate = (date) => {
+  const birthFormatDate = (date: string) => {
     const year = date.slice(0, 4);
     const month = date.slice(4, 6);
     const day = date.slice(6, 8);
@@ -146,57 +146,73 @@ export const ModifyProfile = () => {
       <SignUpTitle>내 정보</SignUpTitle>
       <St.SignUpContainerWrapper>
         <SignUpInputContainer
-          title='이메일'
-          essential={Boolean(true)}
-          type='text'
-          value={profileFormData.email}
-          isButtonHidden={Boolean(false)}
-          disable={true}
-          onChange={() => { }}
+          props={{
+            title: "이메일",
+            essential: true,
+            placeholder: "이메일을 입력해주세요.",
+            value: profileFormData.email,
+            onChange: () => { },
+            isButtonHidden: false,
+            disable: true,
+            type: "text",
+          }}
         />
         <SignUpInputContainer
-          title='비밀번호'
-          essential={Boolean(true)}
-          type='password'
-          value={profileFormData.password}
-          isButtonHidden={Boolean(true)}
-          disable={true}
-          onChange={() => { }}
+          props={{
+            title: "비밀번호",
+            essential: true,
+            placeholder: "비밀번호를 입력해주세요.",
+            value: profileFormData.password,
+            onChange: () => { },
+            isButtonHidden: true,
+            disable: true,
+            type: "password",
+          }}
         />
         <SignUpInputContainer
-          title='닉네임'
-          essential={Boolean(true)}
-          type='text'
-          placeholder='사용자 닉네임을 입력해주세요.'
-          value={profileFormData.nickname}
-          isButtonHidden={Boolean(false)}
-          disable={true}
-          onChange={() => { }}
+          props={{
+            title: "닉네임",
+            essential: true,
+            placeholder: "사용자 닉네임을 입력해주세요.",
+            value: profileFormData.nickname,
+            onChange: () => { },
+            isButtonHidden: false,
+            disable: true,
+            type: "text",
+          }}
         />
         <SignUpInputContainer
-          title='생년월일'
-          essential={Boolean(false)}
-          type='text'
-          placeholder='YYYYDDMM'
-          value={profileFormData.birth}
-          isButtonHidden={Boolean(true)}
-          onChange={(value, error) => handleChange('birth', value, error)}
+          props={{
+            title: "생년월일",
+            essential: false,
+            placeholder: "YYYYDDMM",
+            value: profileFormData.birth,
+            onChange: (value, error) => handleChange('birth', value, error),
+            isButtonHidden: true,
+            type: "text",
+          }}
         />
       </St.SignUpContainerWrapper>
       <IntroduceInputContainer
-        value={profileFormData.introduction}
-        handleChange={handleChange}
+        props={{
+          value: profileFormData.introduction,
+          handleChange: handleChange
+        }}
       />
       <SocialInputContainer
-        handleChange={handleChange}
-        github={profileFormData.github}
-        linkedIn={profileFormData.linkedin}
-        discord={profileFormData.discord}
+        props={{
+          handleChange: handleChange,
+          github: profileFormData.github,
+          linkedIn: profileFormData.linkedin,
+          discord: profileFormData.discord
+        }}
       />
       <SignUpBtnBox
-        onSubmit={putUserInfo}
-        title='저장하기'
-        isDisable={false}
+        props={{
+          onSubmit: putUserInfo,
+          title: "저장하기",
+          isDisabled: false
+        }}
       />
     </St.SignUpWrapper>
   )

diff --git a/src/components/profile/MyDiary.tsx b/src/components/profile/MyDiary.tsx
@@ -7,49 +7,70 @@ import * as Color from '../../common/Color';
 import Diary from './Diary';
 import PagenationBox from "./PagenationBox";
 import { AddModal } from "../modal/AddModal";
-import { getPersonalDiaryData } from "@/shared/api/profile";
-import { diary } from "@/shared/api/profile/type";
+import { getMyProjectData, getPersonalDiaryData } from "@/shared/api/profile";
+import { diary, projectList } from "@/shared/api/profile/type";
 import { Content } from "./BottomStyle";
 
 interface props {
   memberId: string | undefined;
   onClick: any;
+  myPage: boolean;
 }
 
 const MyDiary = (props: props) => {
   const [diaryList, setDiaryList] = useState<diary[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
+  const [projectList, setProjectList] = useState<projectList[]>([]);
 
   const getPersonalDiary = async (memberId: string | undefined, page: number, size: number) => {
     try {
       const response = await getPersonalDiaryData(memberId, page, size);
-      console.log(response);
+      // console.log(response);
       setDiaryList(response.posts);
     } catch(error) {
       console.error(error);
     }
   }
 
   useEffect(() => {
-    // const memberId = props.memberId;
-    // axios.get(`/posts/member/${memberId}/paging?page=${currentPage-1}&size=5`)
-    //     .then((response) => {
-    //         console.log(response.data.result.posts);
-    //         setDiaryList(response.data.result.posts);
-    //     })
-    //     .catch((error) => {})
-    // setDiaryList(diaryList);
     getPersonalDiary(props.memberId, currentPage - 1, 5);
-    console.log("Page updated. current page : " + currentPage);
+    // console.log("Page updated. current page : " + currentPage);
   }, [currentPage]);
 
+  // 프로젝트 리스트 가져오기
+  const getMyProject = async () => {
+    try {
+      const response = await getMyProjectData();
+      console.log(response);
+      setProjectList(response);
+    } catch(error) {
+      console.error(error);
+    }
+  }
+
+  useEffect(() => {
+    getMyProject();
+  }, []);
+
+
+
   return (
     <Container>
       <Title>내 다이어리</Title>
       <Category>
         <Btn>전체</Btn>
-        <Btn>전체</Btn>
-        <AddBtn onClick={props.onClick}>+</AddBtn>
+        {projectList && projectList.length > 0 ? (
+          <>
+            {projectList.map((project: projectList) => {
+              return (
+                <Btn>{project.name}</Btn>
+              )
+            })}
+          </>
+        ) : (
+          <></>
+        )}
+        {props.myPage ? <AddBtn onClick={props.onClick}>+</AddBtn> : <></>}
       </Category>
       <DiaryBox>
         {diaryList && diaryList.length > 0 ? (

diff --git a/src/components/profile/ProfileLink.jsx → src/components/profile/ProfileLink.tsx b/src/components/profile/ProfileLink.jsx → src/components/profile/ProfileLink.tsx
@@ -4,7 +4,13 @@ const Img = styled.div`
     cursor: pointer;
 `
 
-const ProfileLink = ({ type, svg, link }) => {
+interface props {
+    type: string;
+    svg: string;
+    link: string;
+}
+
+const ProfileLink = ({ type, svg, link }: props) => {
 
     const OpenOuterProfilePage = () => {
         window.open(link)

diff --git a/src/components/profile/Techstack.tsx b/src/components/profile/Techstack.tsx
@@ -7,6 +7,7 @@ import PlusSvg from "../../assets/profile/ph_plus.svg";
 interface props {
   techstackList: string[];
   onClick: any;
+  my_page: boolean;
 }
 const Techstack = (props: props) => {
   const { techstackList, onClick } = props;
@@ -15,7 +16,7 @@ const Techstack = (props: props) => {
     <Container>
       <Head onClick={onClick}>
         <Infotype>TECH STACK</Infotype>
-        <Add src={PlusSvg} />
+        {props.my_page ? <Add src={PlusSvg} /> : <></>}
       </Head>
       {techstackList && techstackList.length > 0 ? (
         <TechStackWrapper>