[feat] #4 마이페이지 기능 및 디자인

weatherfit_refactoring/package.json

@@ -10,6 +10,7 @@
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
   },
   "dependencies": {
+    "axios": "^1.6.5",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",

weatherfit_refactoring/src/Components/Molecules/Logout.tsx

@@ -0,0 +1,22 @@
+export default function Logout() {
+  const handleLogout = () => {
+    if (confirm('로그아웃 하시겠습니까?')) {
+      // 쿠키에 로그인 토큰 삭제
+      // console.log("로그아웃 후 쿠키 확인: ", accessToken);
+      console.log('로그아웃 후 쿠키 확인: ')
+      alert('로그아웃 되었습니다.')
+      window.location.href = '/'
+    }
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className="font-bold font-gmarketsans cursor-pointer"
+        onClick={handleLogout}>
+        로그아웃
+      </button>
+    </>
+  )
+}

weatherfit_refactoring/src/Components/Molecules/PostCount.tsx

@@ -0,0 +1,13 @@
+interface Props {
+  title: string
+  count: number
+}
+
+export default function PostCount({ title, count }: Props) {
+  return (
+    <div className="flex items-center flex-col font-Cafe24SsurroundAir text-sm">
+      <p className="font-bold">{title}</p>
+      <p>{count}</p>
+    </div>
+  )
+}

weatherfit_refactoring/src/Components/Molecules/ProfileImageEdit.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import React, { useState } from 'react'
+import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
+import Image from 'next/image'
+import axios from 'axios'
+
+export default function ProfileImageEdit() {
+  // const [selectedImage, setSelectedImage] = useState(userProfileImage)
+  const [selectedImage, setSelectedImage] = useState(null)
+
+  // 파일 비동기 전송
+  // const handleImageSubmit = async () => {
+  //   try {
+  //     if (confirm('이미지를 수정하시겠습니까?')) {
+  //       const formData = new FormData()
+  //       if (selectedImage) {
+  //         formData.append('image', selectedImage) // 이미지 파일을 FormData에 추가
+  //       }
+
+  //       formData.append('email', email)
+
+  //       for (let [key, value] of formData.entries()) {
+  //         console.log(`${key}: ${value}`)
+  //       }
+
+  //       const response = await axios.patch(
+  //         `https://www.jerneithe.site/user/api/profile/modify/image`,
+  //         formData,
+  //         {
+  //           headers: {
+  //             'Content-Type': 'multipart/form-data',
+  //           },
+  //         },
+  //       )
+
+  //       console.log('이미지 수정 Data:', response.data)
+
+  //       // 모달 닫히는 함수 실행하기
+  //     }
+  //   } catch (error) {
+  //     console.error('이미지 업로드 에러: ', error)
+  //   }
+  // }
+
+  const handleImageUpload = (e: any) => {
+    const file = e.target.files[0]
+    setSelectedImage(file)
+  }
+
+  const handleDefaultImage = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    e.preventDefault()
+    setSelectedImage(null) // 기본 이미지로 설정하면 userProfileImage가 null로 변경
+  }
+
+  return (
+    <>
+      <div className="profile_image">
+        {selectedImage ? (
+          typeof selectedImage === 'string' ? (
+            <Image
+              src={selectedImage}
+              alt="Current"
+              width={100}
+              height={100}
+              className="profile_image_icon_1"
+            />
+          ) : (
+            <Image
+              src={URL.createObjectURL(selectedImage)}
+              alt="Uploaded"
+              width={100}
+              height={100}
+              className="profile_image_icon_1"
+            />
+          )
+        ) : (
+          <IconStore iconStyle={IconStyle.MY_PROFILE_FILL} size={80} />
+        )}
+      </div>
+      {/* 파일 업로드 인풋 */}
+      <div className="profile_select_box">
+        <input
+          type="file"
+          id="imageUploadInput"
+          accept="image/*"
+          onChange={handleImageUpload}
+          style={{ display: 'none' }}
+        />
+        <label htmlFor="imageUploadInput" className="profile_select_btn">
+          이미지 선택
+        </label>
+        |
+        <button onClick={handleDefaultImage} type="button">
+          기본 이미지
+        </button>
+      </div>
+      <button type="submit">이미지 수정</button>
+    </>
+  )
+}

weatherfit_refactoring/src/Components/Molecules/Unregister.tsx

@@ -0,0 +1,36 @@
+import axios from 'axios'
+
+// Props로 UserInfo에서 email 있어야 함
+
+export default function Unregister() {
+  const handleUnregister = async () => {
+    try {
+      if (confirm('정말로 탈퇴하시겠습니까?')) {
+        const response = await axios({
+          method: 'DELETE',
+          // url: `https://www.jerneithe.site/user/api/profile/remove/${email}`,
+          headers: {
+            Authorization: 'Bearer ',
+          },
+        })
+        console.log('회원 탈퇴 response: ', response)
+        // 쿠키에 로그인 토큰 삭제
+        alert('그동안 옷늘날씨를 이용해 주셔서 감사합니다.')
+        window.location.href = '/'
+      }
+    } catch (error) {
+      console.log('회원 탈퇴 err: ', error)
+    }
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className="underline text-[#808080] text-[10px] font-gmarketsans cursor-pointer"
+        onClick={handleUnregister}>
+        회원탈퇴
+      </button>
+    </>
+  )
+}

weatherfit_refactoring/src/Components/Organisms/ProfileBoard.tsx

@@ -1,13 +1,53 @@
+'use client'
+
 import React, { useState } from 'react'
 import ProfilePostBar from '../Molecules/ProfilePostBar'
+import ProfilePost from '../Molecules/ProfilePost'
+
+interface IMAGE {
+  boardId: number
+  imageId: number
+  imageUrl: string
+}
+
+interface LIKE {
+  likeId: number
+  nickName: string
+}
+interface FEEDATA {
+  boardId: number
+  images: IMAGE
+  likeCount: number
+  likelist: LIKE[]
+  nickName: string
+  temperature: number
+  weather: string
+  weatherIcon?: string
+}
+
+interface Props {
+  myPost: FEEDATA[]
+  myLikePost: FEEDATA[]
+}
+
+export default function ProfileBoard({ myPost, myLikePost }: Props) {
+  const [isFeedSelected, setIsFeedSelected] = useState<boolean>(true)
+
+  const handleFeedClick = () => {
+    setIsFeedSelected(true)
+  }
 
-export default function ProfileBoard() {
-  // 여기서 게시물 수 불러오기
+  const handleLikeClick = () => {
+    setIsFeedSelected(false)
+  }
 
   return (
     <>
-      <ProfilePostBar />
-      <ProfileBoard />
+      <ProfilePostBar
+        onFeedClick={handleFeedClick}
+        onLikeClick={handleLikeClick}
+      />
+      <ProfilePost postData={isFeedSelected ? myPost : myLikePost} />
     </>
   )
 }