해시태그 추천 구현

Wanza2023 · Dec 13, 2023 · fc5ccec · fc5ccec
1 parent 84b8337
commit fc5ccec
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 33 deletions.
diff --git a/deploy.sh b/deploy.sh
@@ -1,16 +1,16 @@
-#!/bin/bash
-# 디렉토리로 이동
-cd /home/ubuntu/deploy
+# #!/bin/bash
+# # 디렉토리로 이동
+# cd /home/ubuntu/deploy
 
-# 종속성 설치
-npm install
+# # 종속성 설치
+# npm install
 
-# 리액트 애플리케이션 빌드
-npm run build
+# # 리액트 애플리케이션 빌드
+# npm run build
 
-# 빌드된 파일들을 웹 루트 디렉토리로 이동
-rsync -av --delete /home/ubuntu/deploy/build/ /var/www/html/
+# # 빌드된 파일들을 웹 루트 디렉토리로 이동
+# rsync -av --delete /home/ubuntu/deploy/build/ /var/www/html/
 
-# PM2와 Nginx 재시작
-sudo npx pm2 reload all
-sudo service nginx restart
+# # PM2와 Nginx 재시작
+# sudo npx pm2 reload all
+# sudo service nginx restart
diff --git a/src/component/ui/comment/CommentWrite.jsx b/src/component/ui/comment/CommentWrite.jsx
@@ -36,6 +36,7 @@ const ButtonContainerr = styled.div`
 const CommentWrite = ({ newComment, setNewComment, addComments, setIsPublic, isPublic }) => {
     // const nickname = useRecoilState(nickNameState);
     const { nickname } = useAuth();
+    const profileImg = sessionStorage.getItem('pfp');
 
     const handleSubmit = () => {
         addComments(); 
@@ -58,7 +59,7 @@ const CommentWrite = ({ newComment, setNewComment, addComments, setIsPublic, isP
         <div>
             <UserContainer>
                 <div className='info'>
-                    <BiUserCircle />
+                    {profileImg ? <img src={profileImg} alt="Profile" style={{ width: '30px', height: '30px', borderRadius: '50%' }} /> : <BiUserCircle />}
                     <p className='comments-nickname'>{nickname}</p>
                 </div>
             </UserContainer>

diff --git a/src/component/ui/personal/UserProfileChange.jsx b/src/component/ui/personal/UserProfileChange.jsx
@@ -10,17 +10,18 @@ import '../../../styles/component/UserProfileChange.css';
 
 const UserProfileChange = ({ onSaveChanges }) => {
     const [passwordError, setPasswordError] = useState('');
-
     const storedNickname = sessionStorage.getItem('nickName');
     const storedBirth = sessionStorage.getItem('birth');
     const storedGender = sessionStorage.getItem('gender');
     const Gender = storedGender === 'W' ? '여성' : storedGender === 'M' ? '남성' : '';
     const memberId = useRecoilValue(memberIdState);
     const [nickname, setNickname] = useState(storedNickname); // 닉네임 상태 변수
-    const [profileImage, setProfileImage] = useState(null); // 프로필 이미지 상태 변수
+
     const [password, setPassword] = useState(''); // 비밀번호 상태 변수
     const [confirmPassword, setConfirmPassword] = useState(''); // 비밀번호 확인 상태 변수
     const [passwordChangeUrl, setPasswordChangeUrl] = useState('');
+    const storedProfileImage = sessionStorage.getItem('pfp');
+    const [profileImage, setProfileImage] = useState(storedProfileImage || null); // 프로필 이미지 상태 변수
 
     const onFileChange = useCallback(async (e) => {
         const file = e.target.files[0];
@@ -45,6 +46,7 @@ const UserProfileChange = ({ onSaveChanges }) => {
                 console.log('Image uploaded to S3 successfully', uploadResult);
                 // 업로드된 이미지의 URL을 상태에 저장
                 setProfileImage(uploadResult.Location);
+                sessionStorage.setItem('pfp', uploadResult.Location);
             } catch (error) {
                 console.error('Error uploading image to S3:', error);
             }
@@ -60,7 +62,8 @@ const UserProfileChange = ({ onSaveChanges }) => {
 
     const handleImageChange = (e) => { // 이미지 변경
         if (e.target.files && e.target.files[0]) {
-            setProfileImage(URL.createObjectURL(e.target.files[0]));
+            const newProfileImage = URL.createObjectURL(e.target.files[0]);
+            setProfileImage(newProfileImage);
         }
     };
 
@@ -124,7 +127,7 @@ const UserProfileChange = ({ onSaveChanges }) => {
                 <label htmlFor="image-upload" className="imageEdit">
                     <FaCog size={30} />
                 </label>
-                <input id="image-upload" type="file" onChange={onFileChange} style={{ display: 'none' }} />
+                <input id="image-upload" type="file" onChange={handleImageChange} style={{ display: 'none' }} />
             </div>
             <div className="profileChangeBox">
                 <div className="profileField">

diff --git a/src/pages/personal/PersonalHome.jsx b/src/pages/personal/PersonalHome.jsx
@@ -47,6 +47,7 @@ const PersonalHome = () => {
 
     const { nickname } = useParams(); // useParams로 url에서 파라미터 추출
     const [posts, setPosts] = useState([]); // 게시물 담을 배열 생성
+    const profileImg = sessionStorage.getItem('pfp');
 
     const navigate = useNavigate();
     const location = useLocation();
@@ -87,16 +88,20 @@ const PersonalHome = () => {
     }, [nickName, currentPage, postPerPage, nickname]);
 
     const wrapperStyles = {
-        paddingBottom: showText ? '40vh' : '0',
+        paddingBottom: showText ? '30vh' : '0',
         width: 'auto',
         height: '90vh',
     };
 
 
     return (
         <div className='personal_wrapper' style={wrapperStyles}>
-            <div className='personal_profile'>
-                <img src={personal_profile_icon} alt="personal_profile_icon"/>
+             <div className='personal_profile'>
+                {profileImg ? (
+                    <img src={profileImg} alt="Profile" />
+                ) : (
+                    <img src={personal_profile_icon} alt="personal_profile_icon" />
+                )}
                 <h2>{nickname}</h2>
                 <p>님의 여행기록</p>
             </div>

diff --git a/src/pages/post/PostWrite.jsx b/src/pages/post/PostWrite.jsx
@@ -279,6 +279,33 @@ function PostWrite() {
     }
   };
 
+  //해시태그 생성
+  const fetchHashtag = async () => {
+    try {
+      const requestBody = {
+        content: desc ? desc : null,
+      };
+
+      const response = await axios.post(
+        `${process.env.REACT_APP_HASHTAG_API_KEY}/createTags`,
+        requestBody
+      );
+
+      if (response.data && "hashtag" in response.data) {
+        console.log(response.data.body)
+        setTagList(response.data.hashtag);
+      } else {
+        console.error("Invalid response format");
+      }
+    } catch (error) {
+      console.error("Failed to fetch hashtag:", error);
+      if (error.response) {
+        console.error("Server Response:", error.response.data);
+      }
+    }
+  };
+
+
   return (
     <Container>
       <div className="containerBox">
@@ -335,7 +362,7 @@ function PostWrite() {
           <div>
             <button className="menuButtonEdit" onClick={() => setShowSchedule(!showSchedule)}>일정 추가</button>
             <button className="menuButtonEdit" onClick={fetchSummaryN}>AI 요약</button>
-            <button className="menuButtonEdit">해시태그 추천</button>
+            <button className="menuButtonEdit" onClick={fetchHashtag}>해시태그 추천</button>
           </div>
           {showSchedule && (
             <>

diff --git a/src/styles/App.css b/src/styles/App.css
@@ -26,8 +26,11 @@
 .body {
   padding: 1.5rem 0;
   height: auto;
-  min-height: 100%;
+  min-height: calc(100vh - 17rem);
+}
 
+.footer {
+  height: 17rem;
 }
 
 * {

diff --git a/src/styles/component/Footer.css b/src/styles/component/Footer.css
@@ -1,7 +1,7 @@
 .footer {
-    background: #FAFAFA;
+    border-top: 1px solid #D8D8D8;
     text-align: center;
-    position: sticky;
+    /* position: sticky; */
     /* bottom: 0; */
     /* z-index: -1; */
 }
@@ -23,10 +23,9 @@
     margin-bottom: 1rem;
 }
 
-.footer-section .text-input {
-    width: 90%;
-    margin-bottom: 1rem;
-    padding: 0.5rem;
+.footer-section p {
+    color: gray;
+    font-size: 0.9rem;
 }
 
 .footer-section .btn {
@@ -36,7 +35,7 @@
 
 .footer-bottom {
     padding: 1rem 2rem;
-    border-top: 1px solid #A4A4A4;;
+    border-top: 1px solid #D8D8D8;
 }
 
 .footer ul {
@@ -45,7 +44,7 @@
 
 .footer ul li {
     margin-bottom: 0.5rem;
-    color: black;
+    color: gray;
     text-decoration: none;
 }
 
@@ -54,12 +53,14 @@
 .footer ul li a:hover,
 .footer ul li a:active,
 .footer ul li a:focus {
-    color: black;
+    color: gray;
     text-decoration: none;
 }
 
 .footer ul a {
     text-decoration: none;
+    color: gray;
+    font-size: 0.9rem;
 }
 
 .footer a:hover {
@@ -77,9 +78,13 @@
 .footer-contact a:hover,
 .footer-contact a:active,
 .footer-contact a:focus {
-    color: black;
+    color: gray;
     text-decoration: none;
 }
 .footer-contact svg {
-    color: black;
+    color: gray;
 }
+
+.footer-bottom {
+    color: gray;
+}
diff --git a/src/styles/pages/PersonalHome.css b/src/styles/pages/PersonalHome.css
@@ -38,6 +38,7 @@
     margin-right: 1rem;
     max-width: 6rem;
     object-fit: contain;
+    border-radius: 50%;
 }
 
 .personal_profile h2 {