feat: feedback 카드에 스크롤 기능 넣기

woowacourse-teams · Dec 9, 2024 · 32ebcf1 · 32ebcf1
1 parent 8c09e29
commit 32ebcf1
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 51 deletions.
diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
@@ -2,22 +2,10 @@ import styled from "styled-components";
 import { EllipsisText, VisuallyHidden } from "@/styles/common";
 import media from "@/styles/media";
 
-export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
+export const FeedbackCardContainer = styled.div`
   position: relative;
-
-  overflow-y: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 3rem;
-
   width: 40%;
   height: 700px;
-  padding: 1rem;
-
-  border: 3px solid
-    ${({ theme, $isTypeDevelop }) =>
-      $isTypeDevelop ? theme.COLOR.primary2 : theme.COLOR.secondary};
-  border-radius: 10px;
 
   ${media.medium`
     width: 100%;
@@ -29,33 +17,28 @@ export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
   `}
 `;
 
-export const Overlay = styled.div`
-  pointer-events: auto;
-
-  position: absolute;
-  top: 60px;
-  left: 0;
+export const FeedbackCardBox = styled.div<{ $isTypeDevelop: boolean }>`
+  position: relative;
 
+  overflow: hidden auto;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  gap: 3rem;
 
   width: 100%;
-  height: calc(100% - 60px);
-
-  background-color: rgb(255 255 255 / 50%);
-`;
+  height: 100%;
+  padding: 1rem;
 
-export const ButtonWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: center;
-  justify-content: center;
+  border: 3px solid
+    ${({ theme, $isTypeDevelop }) =>
+      $isTypeDevelop ? theme.COLOR.primary2 : theme.COLOR.secondary};
+  border-radius: 10px;
 
-  width: 100%;
+  -ms-overflow-style: none;
 
-  font: ${({ theme }) => theme.TEXT.large_bold};
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 export const FeedbackContent = styled.div<{ $isWrited: boolean }>`
@@ -83,8 +66,6 @@ export const FeedbackKeywordWrapper = styled.div`
   flex-wrap: wrap;
   gap: 1rem;
   align-content: flex-start;
-
-  height: 122px;
 `;
 
 export const FeedbackHeader = styled.div`
@@ -143,6 +124,7 @@ export const FeedbackDetailContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
+  margin-bottom: 70px;
 `;
 
 export const FeedbackDetail = styled.p`
@@ -156,3 +138,35 @@ export const FeedbackDetail = styled.p`
 export const ScreenReader = styled.div`
   ${VisuallyHidden}
 `;
+
+export const ButtonWrapper = styled.div`
+  position: absolute;
+  bottom: 20px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+
+  font: ${({ theme }) => theme.TEXT.large_bold};
+`;
+
+export const Overlay = styled.div`
+  pointer-events: auto;
+
+  position: absolute;
+  top: 60px;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: calc(100% - 60px);
+
+  background-color: rgb(255 255 255 / 50%);
+`;
diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -56,10 +56,10 @@ const FeedbackCard = ({
   };
 
   return (
-    <>
+    <S.FeedbackCardContainer>
       <S.ScreenReader>미션의 상세 피드백 내용입니다.</S.ScreenReader>
 
-      <S.FeedbackCardContainer $isTypeDevelop={feedbackType === "develop"}>
+      <S.FeedbackCardBox $isTypeDevelop={feedbackType === "develop"}>
         <S.FeedbackHeader>
           <HoverStyledLink to={`/profile/${feedbackCardData.username}`} tabIndex={-1}>
             <S.FeedbackProfile>
@@ -114,18 +114,6 @@ const FeedbackCard = ({
               disabled
             />
           </S.FeedbackDetailContainer>
-
-          {selectedFeedbackType === "쓴 피드백" && (
-            <S.ButtonWrapper>
-              <Button
-                onClick={handleNavigateMyFeedbackPage}
-                variant={feedbackType === "develop" ? "primary" : "secondary"}
-                size="small"
-              >
-                수정하기
-              </Button>
-            </S.ButtonWrapper>
-          )}
         </S.FeedbackContent>
 
         {!feedbackCardData.isWrited && (
@@ -141,8 +129,20 @@ const FeedbackCard = ({
             </S.ButtonWrapper>
           </S.Overlay>
         )}
-      </S.FeedbackCardContainer>
-    </>
+      </S.FeedbackCardBox>
+
+      {selectedFeedbackType === "쓴 피드백" && (
+        <S.ButtonWrapper>
+          <Button
+            onClick={handleNavigateMyFeedbackPage}
+            variant={feedbackType === "develop" ? "primary" : "secondary"}
+            size="small"
+          >
+            수정하기
+          </Button>
+        </S.ButtonWrapper>
+      )}
+    </S.FeedbackCardContainer>
   );
 };