feat(rssUrl): rss link

woowacourse · May 24, 2024 · af16a46 · af16a46
1 parent 1f03fd5
commit af16a46
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 3 deletions.
diff --git a/backend/src/main/java/wooteco/prolog/member/application/MemberService.java b/backend/src/main/java/wooteco/prolog/member/application/MemberService.java
@@ -87,6 +87,7 @@ public void updateMember(LoginMember loginMember,
 
         persistMember.updateImageUrl(updateRequest.getImageUrl());
         persistMember.updateNickname(updateRequest.getNickname());
+        persistMember.updateRssFeedUrl(updateRequest.getRssFeedUrl());
     }
 
     @Transactional

diff --git a/backend/src/main/java/wooteco/prolog/member/application/dto/MemberResponse.java b/backend/src/main/java/wooteco/prolog/member/application/dto/MemberResponse.java
@@ -20,9 +20,10 @@ public class MemberResponse {
     private String nickname;
     private Role role;
     private String imageUrl;
+    private String rssFeedUrl;
 
     public static MemberResponse of(Member member) {
         return new MemberResponse(member.getId(), member.getUsername(), member.getNickname(),
-            member.getRole(), member.getImageUrl());
+            member.getRole(), member.getImageUrl(), member.getRssFeedUrl());
     }
 }
diff --git a/backend/src/main/java/wooteco/prolog/member/application/dto/MemberUpdateRequest.java b/backend/src/main/java/wooteco/prolog/member/application/dto/MemberUpdateRequest.java
@@ -11,4 +11,5 @@ public class MemberUpdateRequest {
 
     private String nickname;
     private String imageUrl;
+    private String rssFeedUrl;
 }
diff --git a/backend/src/main/java/wooteco/prolog/member/domain/Member.java b/backend/src/main/java/wooteco/prolog/member/domain/Member.java
@@ -48,6 +48,9 @@ public class Member {
     @Embedded
     private MemberTags memberTags;
 
+    @Column
+    private String rssFeedUrl;
+
     public Member(String username, String nickname, Role role, Long githubId, String imageUrl) {
         this(null, username, nickname, role, githubId, imageUrl);
     }
@@ -102,6 +105,10 @@ public void updateProfileIntro(String text) {
         }
     }
 
+    public void updateRssFeedUrl(String url) {
+        this.rssFeedUrl = url;
+    }
+
     public void addTag(Tag tag) {
         memberTags.add(new MemberTag(this, tag));
     }

diff --git a/backend/src/main/resources/db/migration/prod/V10__create_column_rssfeed.sql b/backend/src/main/resources/db/migration/prod/V10__create_column_rssfeed.sql
@@ -0,0 +1,2 @@
+ALTER TABLE member
+    ADD COLUMN rss_feed_url VARCHAR(256);
diff --git a/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.ts b/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.ts
@@ -56,6 +56,14 @@ const Nickname = styled.div`
   padding-left: 1.2rem;
 `;
 
+const RssFeedUrl = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  border-top: none;
+  padding-left: 1.2rem;
+`;
+
 const Role = styled.div`
   margin-top: 1rem;
   padding-left: 1.2rem;
@@ -142,6 +150,24 @@ const NicknameWrapper = styled.div`
   align-items: center;
 `;
 
+const RssFeedInput = styled.input`
+  margin: 0.5rem 1.2rem;
+  margin-right: 0;
+  padding: 0.2rem 0.5rem;
+  font-size: 1.6rem;
+  outline: none;
+  border-radius: 0.5rem;
+  border: 1px solid ${COLOR.LIGHT_GRAY_900};
+  width: 12rem;
+`;
+
+const RssFeedWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  word-break: break-all;
+  align-items: center;
+`;
+
 const EditButtonStyle = css`
   border: 1px solid ${COLOR.LIGHT_GRAY_200};
   background-color: ${COLOR.WHITE};
@@ -160,12 +186,15 @@ export {
   Profile,
   Image,
   Nickname,
+  RssFeedUrl,
   Role,
   MenuList,
   MenuItem,
   MenuButton,
   Container,
   NicknameInput,
   NicknameWrapper,
+  RssFeedInput,
+  RssFeedWrapper,
   EditButtonStyle,
 };
diff --git a/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.tsx b/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.tsx
@@ -12,6 +12,7 @@ import {
   Profile,
   Image,
   Nickname,
+  RssFeedUrl,
   MenuList,
   MenuItem,
   MenuButton,
@@ -20,6 +21,8 @@ import {
   EditButtonStyle,
   NicknameWrapper,
   NicknameInput,
+  RssFeedWrapper,
+  RssFeedInput,
 } from './ProfilePageSideBar.styles';
 
 interface ProfilePageSideBarProps {
@@ -38,7 +41,9 @@ const ProfilePageSideBar = ({ menu }: ProfilePageSideBarProps) => {
   const [selectedMenu, setSelectedMenu] = useState(menu);
 
   const [isProfileEditing, setIsProfileEditing] = useState(false);
+  const [isRssFeedEditing, setIsRssFeedEditing] = useState(false);
   const [nickname, setNickname] = useState('');
+  const [rssFeedUrl, setRssFeedUrl] = useState('');
 
   const instance = createAxiosInstance();
 
@@ -47,6 +52,7 @@ const ProfilePageSideBar = ({ menu }: ProfilePageSideBarProps) => {
     {
       onSuccess: (data) => {
         setNickname(data.nickname);
+        setRssFeedUrl(data.rssFeedUrl);
       },
     }
   );
@@ -63,11 +69,13 @@ const ProfilePageSideBar = ({ menu }: ProfilePageSideBarProps) => {
     {
       user,
       nickname,
+      rssFeedUrl,
       accessToken,
     },
     {
       onSuccess: () => {
         setIsProfileEditing(false);
+        setIsRssFeedEditing(false);
       },
     }
   );
@@ -105,6 +113,30 @@ const ProfilePageSideBar = ({ menu }: ProfilePageSideBarProps) => {
             </Button>
           )}
         </NicknameWrapper>
+        <RssFeedWrapper>
+          {isRssFeedEditing ? (
+            <RssFeedInput
+              autoFocus
+              value={rssFeedUrl}
+              onChange={({ target }) => setRssFeedUrl(target.value)}
+            />
+          ) : (
+            <RssFeedUrl>{rssFeedUrl}</RssFeedUrl>
+          )}
+          {isOwner && (
+            <Button
+              size={BUTTON_SIZE.X_SMALL}
+              type="button"
+              css={EditButtonStyle}
+              alt={isRssFeedEditing ? '수정 완료 버튼' : '수정 버튼'}
+              onClick={() => {
+                isRssFeedEditing ? editProfile() : setIsRssFeedEditing(true);
+              }}
+            >
+              {isRssFeedEditing ? '완료' : '수정'}
+            </Button>
+          )}
+        </RssFeedWrapper>
       </Profile>
       {isLoading ? <></> : <BadgeList badgeList={badgeList} />}
       <MenuList>

diff --git a/frontend/src/hooks/queries/profile.ts b/frontend/src/hooks/queries/profile.ts
@@ -50,13 +50,13 @@ export const useGetProfileQuery = ({ username }, { onSuccess }) => {
   });
 };
 
-export const usePutProfileMutation = ({ user, nickname, accessToken }, { onSuccess }) => {
+export const usePutProfileMutation = ({ user, nickname, accessToken, rssFeedUrl }, { onSuccess }) => {
   const queryClient = useQueryClient();
 
   return useMutation(
     () =>
       requestEditProfile(
-        { username: user.username, nickname: nickname, imageUrl: user.imageUrl },
+        { username: user.username, nickname: nickname, imageUrl: user.imageUrl, rssFeedUrl: rssFeedUrl },
         accessToken
       ),
     {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		ALTER TABLE member
		ADD COLUMN rss_feed_url VARCHAR(256);