[FE] feat: 휴지통 기능 구현

backend/src/main/java/org/donggle/backend/auth/JwtToken.java

@@ -0,0 +1,65 @@
+package org.donggle.backend.auth;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.FetchType;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.OneToOne;
+import lombok.AccessLevel;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import org.donggle.backend.domain.member.Member;
+
+import java.util.Objects;
+
+@Entity
+@Getter
+@NoArgsConstructor(access = AccessLevel.PROTECTED)
+public class JwtToken {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+    private String refreshToken;
+    @OneToOne(fetch = FetchType.LAZY)
+    private Member member;
+
+    public JwtToken(final String token, final Member member) {
+        this.refreshToken = token;
+        this.member = member;
+    }
+
+    public boolean isDifferentRefreshToken(final String refreshToken) {
+        return !this.refreshToken.equals(refreshToken);
+    }
+
+    public void updateRefreshToken(final String refreshToken) {
+        this.refreshToken = refreshToken;
+    }
+
+    @Override
+    public String toString() {
+        return "JwtToken{" +
+                "id=" + id +
+                ", token='" + refreshToken + '\'' +
+                ", member=" + member +
+                '}';
+    }
+
+    @Override
+    public boolean equals(final Object o) {
+        if (this == o) {
+            return true;
+        }
+        if (o == null || getClass() != o.getClass()) {
+            return false;
+        }
+        final JwtToken jwtToken = (JwtToken) o;
+        return Objects.equals(getId(), jwtToken.getId());
+    }
+
+    @Override
+    public int hashCode() {
+        return Objects.hash(getId());
+    }
+}

backend/src/main/java/org/donggle/backend/auth/JwtTokenService.java

@@ -0,0 +1,22 @@
+package org.donggle.backend.auth;
+
+import jakarta.transaction.Transactional;
+import lombok.RequiredArgsConstructor;
+import org.donggle.backend.application.repository.TokenRepository;
+import org.donggle.backend.domain.member.Member;
+import org.springframework.stereotype.Service;
+
+@Service
+@Transactional
+@RequiredArgsConstructor
+public class JwtTokenService {
+    private final TokenRepository tokenRepository;
+
+    public void synchronizeRefreshToken(final Member member, final String refreshToken) {
+        tokenRepository.findByMemberId(member.getId())
+                .ifPresentOrElse(
+                        token -> token.updateRefreshToken(refreshToken),
+                        () -> tokenRepository.save(new JwtToken(refreshToken, member))
+                );
+    }
+}

backend/src/main/java/org/donggle/backend/auth/exception/EmptyAuthorizationHeaderException.java

@@ -0,0 +1,11 @@
+package org.donggle.backend.auth.exception;
+
+import org.donggle.backend.exception.business.BusinessException;
+
+public class EmptyAuthorizationHeaderException extends BusinessException {
+    private static final String MESSAGE = "header에 Authorization이 존재하지 않습니다.";
+
+    public EmptyAuthorizationHeaderException() {
+        super(MESSAGE);
+    }
+}

backend/src/main/java/org/donggle/backend/auth/exception/InvalidAccessTokenException.java

@@ -0,0 +1,11 @@
+package org.donggle.backend.auth.exception;
+
+import org.donggle.backend.exception.business.BusinessException;
+
+public class InvalidAccessTokenException extends BusinessException {
+    private static final String MESSAGE = "유효하지 않은 토큰입니다.";
+
+    public InvalidAccessTokenException() {
+        super(MESSAGE);
+    }
+}

backend/src/main/java/org/donggle/backend/auth/exception/NoSuchTokenException.java

@@ -0,0 +1,11 @@
+package org.donggle.backend.auth.exception;
+
+import org.donggle.backend.exception.business.BusinessException;
+
+public class NoSuchTokenException extends BusinessException {
+    private static final String MESSAGE = "존재하지 않는 토큰입니다.";
+
+    public NoSuchTokenException() {
+        super(MESSAGE);
+    }
+}

backend/src/main/java/org/donggle/backend/ui/KakaoOAuthController.java

@@ -21,6 +21,16 @@ public class KakaoOAuthController {
     private final int cookieTime;
 
     private final KakaoOAuthService kakaoOAuthService;
+    private final AuthService authService;
+
+    public KakaoOAuthController(@Value("${security.jwt.token.refresh-token-expire-length}") final int cookieTime,
+                                final KakaoOAuthService kakaoOAuthService,
+                                final AuthService authService
+    ) {
+        this.cookieTime = cookieTime;
+        this.kakaoOAuthService = kakaoOAuthService;
+        this.authService = authService;
+    }
 
     public KakaoOAuthController(@Value("${security.jwt.token.refresh-token-expire-length}") final int cookieTime,
                                 final KakaoOAuthService kakaoOAuthService

backend/src/test/java/org/donggle/backend/auth/JwtTokenProviderTest.java

@@ -0,0 +1,39 @@
+package org.donggle.backend.auth;
+
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+class JwtTokenProviderTest {
+
+    private final JwtTokenProvider jwtTokenProvider = new JwtTokenProvider(
+            "wjdgustmdwjdgustmdwjdgustmdwjsadasdgustmdwjdgustmdwjdgustmdwjdgustmdwjdgustmdwjdgustmdwjdgustmdwjdgustmdwjdgustmdwjdgustmd",
+            600000,
+            1200000
+    );
+
+    @Test
+    @DisplayName("RefreshToken 발급 테스트")
+    void createRefreshToken() {
+        //given
+        //when
+        final String token = jwtTokenProvider.createRefreshToken(1234L);
+        final Long payload = jwtTokenProvider.getPayload(token);
+
+        //then
+        assertThat(payload).isEqualTo(1234L);
+    }
+
+    @Test
+    @DisplayName("AccessToken 발급 테스트")
+    void createAccessToken() {
+        //given
+        //when
+        final String token = jwtTokenProvider.createAccessToken(23L);
+        final Long payload = jwtTokenProvider.getPayload(token);
+
+        //then
+        assertThat(payload).isEqualTo(23L);
+    }
+}

frontend/src/apis/trash.ts

@@ -1,9 +1,10 @@
 import { trashURL } from 'constants/apis/url';
 import { http } from './fetch';
+import { GetDeletedWritingsResponse } from 'types/apis/trash';
 
 // 글 휴지통으로 이동: POST
 export const moveToTrash = (writingIds: number[]) =>
-  http.post(`${trashURL}`, {
+  http.post(trashURL, {
     json: {
       writingIds,
       isPermanentDelete: false,
@@ -12,9 +13,16 @@ export const moveToTrash = (writingIds: number[]) =>
 
 // 글 영구 삭제: POST
 export const deletePermanentWritings = (writingIds: number[]) =>
-  http.post(`${trashURL}`, {
+  http.post(trashURL, {
     json: {
       writingIds,
       isPermanentDelete: true,
     },
   });
+
+// 휴지통에 있는 글 목록 조회: GET
+export const getDeletedWritings = (): Promise<GetDeletedWritingsResponse> => http.get(trashURL);
+
+// 휴지통에서 글 복구: POST
+export const restoreDeletedWritings = (writingIds: number[]) =>
+  http.post(`${trashURL}/restore`, { json: { writingIds } });

frontend/src/components/TrashCan/DeletedWritingList.tsx

@@ -0,0 +1,100 @@
+import { WritingIcon } from 'assets/icons';
+import { usePageNavigate } from 'hooks/usePageNavigate';
+import { useParams } from 'react-router-dom';
+import { styled } from 'styled-components';
+import DeleteButton from 'components/DeleteButton/DeleteButton';
+import { useDeletedWritings } from 'hooks/useDeletedWritings';
+import { useDeletePermanentWritings } from 'components/TrashCanTable/useDeletePermanentWritings';
+
+const DeletedWritingList = () => {
+  const { deletedWritings } = useDeletedWritings();
+  const { goWritingPage } = usePageNavigate();
+  const writingId = Number(useParams()['writingId']);
+  const deletePermanentWritings = useDeletePermanentWritings();
+
+  if (!deletedWritings || deletedWritings?.length === 0)
+    return <S.NoWritingsText>No Writings inside</S.NoWritingsText>;
+
+  return (
+    <ul>
+      {deletedWritings.map((deletedWriting) => (
+        <S.Item key={deletedWriting.id}>
+          <S.Button
+            $isClicked={writingId === deletedWriting.id}
+            aria-label={`${deletedWriting.title}글 메인화면에 열기`}
+            onClick={() =>
+              goWritingPage({ categoryId: deletedWriting.categoryId, writingId: deletedWriting.id })
+            }
+          >
+            <S.IconWrapper>
+              <WritingIcon width={14} height={14} />
+            </S.IconWrapper>
+            <S.Text>{deletedWriting.title}</S.Text>
+          </S.Button>
+          <S.DeleteButtonWrapper>
+            <DeleteButton onClick={() => deletePermanentWritings([writingId])} />
+          </S.DeleteButtonWrapper>
+        </S.Item>
+      ))}
+    </ul>
+  );
+};
+
+export default DeletedWritingList;
+
+const S = {
+  Item: styled.li`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    border-radius: 8px;
+
+    &:hover {
+      background-color: ${({ theme }) => theme.color.gray5};
+
+      div {
+        display: inline-flex;
+        flex-shrink: 0;
+        gap: 0.8rem;
+      }
+    }
+  `,
+
+  Button: styled.button<{ $isClicked: boolean }>`
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    min-width: 0;
+    height: 3.6rem;
+    padding: 0.8rem;
+    border-radius: 8px;
+    background-color: ${({ theme, $isClicked }) => $isClicked && theme.color.gray5};
+  `,
+
+  IconWrapper: styled.div`
+    flex-shrink: 0;
+  `,
+
+  Text: styled.p`
+    color: ${({ theme }) => theme.color.gray9};
+    font-size: 1.4rem;
+    font-weight: 400;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `,
+
+  NoWritingsText: styled.p`
+    padding: 0.8rem;
+    color: ${({ theme }) => theme.color.gray6};
+    font-size: 1.4rem;
+    font-weight: 500;
+    cursor: default;
+  `,
+
+  DeleteButtonWrapper: styled.div`
+    display: none;
+    margin-right: 0.8rem;
+  `,
+};

frontend/src/components/TrashCan/TrashCan.tsx

@@ -0,0 +1,61 @@
+import Accordion from 'components/@common/Accordion/Accordion';
+import { usePageNavigate } from 'hooks/usePageNavigate';
+import { styled } from 'styled-components';
+import DeletedWritingList from './DeletedWritingList';
+
+const TrashCan = () => {
+  const { goTrashCanPage } = usePageNavigate();
+
+  return (
+    <Accordion>
+      <Accordion.Item>
+        <Accordion.Title>
+          <S.Button aria-label='휴지통으로 이동하기' onClick={goTrashCanPage}>
+            <S.Text>휴지통</S.Text>
+          </S.Button>
+        </Accordion.Title>
+        <Accordion.Panel>
+          <DeletedWritingList />
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+
+export default TrashCan;
+
+const S = {
+  Button: styled.button`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 3.2rem;
+    padding: 0.8rem;
+    border-radius: 8px;
+    font-size: 1.4rem;
+
+    &:hover {
+      div {
+        display: inline-flex;
+        gap: 0.8rem;
+      }
+    }
+  `,
+
+  Text: styled.p`
+    color: ${({ theme }) => theme.color.gray10};
+    font-weight: 600;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `,
+
+  NoWritingsText: styled.p`
+    padding: 0.8rem;
+    color: ${({ theme }) => theme.color.gray6};
+    font-size: 1.4rem;
+    font-weight: 500;
+    cursor: default;
+  `,
+};