Merge branch 'main' of https://github.com/woowacourse-teams/2024-corea

woowacourse-teams · Nov 4, 2024 · f30e244 · f30e244
2 parents 19ab332 + 3365a56
commit f30e244
Show file tree

Hide file tree

Showing 39 changed files with 720 additions and 777 deletions.
diff --git a/frontend/src/@types/feedback.ts b/frontend/src/@types/feedback.ts
@@ -17,6 +17,7 @@ export interface FeedbackCardData {
   readonly feedbackKeywords: NonEmptyArray<string>;
   readonly feedbackText: string;
   readonly evaluationPoint: 1 | 2 | 3 | 4 | 5;
+  readonly isWrited: boolean;
 }
 
 export interface RevieweeFeedbackData {

diff --git a/frontend/src/@types/reviewer.ts b/frontend/src/@types/reviewer.ts
@@ -2,6 +2,6 @@ export interface ReviewerInfo {
   userId: number;
   username: string;
   link: string;
-  isReviewed: boolean;
+  isReviewed?: boolean;
   isWrited: boolean;
 }
diff --git a/frontend/src/components/common/button/Button.style.ts b/frontend/src/components/common/button/Button.style.ts
@@ -1,22 +1,22 @@
 import { ButtonSize, ButtonVariant } from "./Button";
 import { css, styled } from "styled-components";
+import { ThemeType } from "@/styles/theme";
 
 export const ButtonContainer = styled.button<{
   $variant: ButtonVariant;
   $size: ButtonSize;
+  $outline?: boolean;
 }>`
   display: flex;
   align-items: center;
   justify-content: center;
-
-  color: ${({ theme }) => theme.COLOR.white};
   text-align: center;
 
-  ${(props) => variantStyles[props.$variant]}
-  ${(props) => sizeStyles[props.$size]}
+  ${({ $variant, $outline }) => variantStyles($variant, $outline)}
+  ${({ $size }) => sizeStyles[$size]}
 
-  ${(props) =>
-    props.$variant !== "disable"
+  ${({ $variant }) =>
+    $variant !== "disable"
       ? css`
           &:hover {
             cursor: pointer;
@@ -28,27 +28,40 @@ export const ButtonContainer = styled.button<{
         `}
 `;
 
-const variantStyles = {
-  default: css`
-    color: ${({ theme }) => theme.COLOR.black};
-    background-color: ${({ theme }) => theme.COLOR.white};
-  `,
-  primary: css`
-    background-color: ${({ theme }) => theme.COLOR.primary2};
-  `,
-  secondary: css`
-    background-color: ${({ theme }) => theme.COLOR.secondary};
-  `,
-  disable: css`
-    background-color: ${({ theme }) => theme.COLOR.grey1};
-  `,
-  confirm: css`
-    color: ${({ theme }) => theme.COLOR.black};
-    background-color: ${({ theme }) => theme.COLOR.lightGrass};
-  `,
-  error: css`
-    background-color: ${({ theme }) => theme.COLOR.error};
-  `,
+const variantStyles = (variant: ButtonVariant, outline?: boolean) => {
+  return css`
+    ${outline
+      ? css`
+          color: ${({ theme }) => getColor(theme, variant)};
+          background-color: ${({ theme }) => theme.COLOR.white};
+          border: 2px solid ${({ theme }) => getColor(theme, variant)};
+        `
+      : css`
+          color: ${({ theme }) =>
+            variant === "default" || variant === "confirm" ? theme.COLOR.black : theme.COLOR.white};
+          background-color: ${({ theme }) => getColor(theme, variant)};
+          border: 2px solid ${({ theme }) => getColor(theme, variant)};
+        `}
+  `;
+};
+
+const getColor = (theme: ThemeType, variant: ButtonVariant) => {
+  switch (variant) {
+    case "default":
+      return theme.COLOR.white;
+    case "primary":
+      return theme.COLOR.primary2;
+    case "secondary":
+      return theme.COLOR.secondary;
+    case "disable":
+      return theme.COLOR.grey1;
+    case "confirm":
+      return theme.COLOR.lightGrass;
+    case "error":
+      return theme.COLOR.error;
+    default:
+      return theme.COLOR.black;
+  }
 };
 
 const sizeStyles = {

diff --git a/frontend/src/components/common/button/Button.tsx b/frontend/src/components/common/button/Button.tsx
@@ -7,15 +7,20 @@ export type ButtonSize = "xSmall" | "small" | "medium" | "large";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
   size?: ButtonSize;
+  outline?: boolean;
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, variant = "primary", size = "medium", disabled = false, ...rest }, ref) => {
+  (
+    { children, variant = "primary", size = "medium", disabled = false, outline = false, ...rest },
+    ref,
+  ) => {
     return (
       <S.ButtonContainer
         ref={ref}
         $variant={disabled ? "disable" : variant}
         $size={size}
+        $outline={outline}
         disabled={disabled}
         tabIndex={disabled ? -1 : 0}
         {...rest}

diff --git a/frontend/src/components/common/header/SideNavBar.tsx b/frontend/src/components/common/header/SideNavBar.tsx
@@ -108,7 +108,7 @@ const SideNavBar = ({ isOpen, onClose, isLoggedIn }: SideNavBarProps) => {
             <Button
               onClick={handleClose}
               size="xSmall"
-              style={{ background: "transparent", color: "black" }}
+              style={{ background: "transparent", color: "black", border: "none" }}
               ref={firstChildRef}
             >
               <Icon kind="close" size="2.4rem" />
@@ -153,7 +153,7 @@ const SideNavBar = ({ isOpen, onClose, isLoggedIn }: SideNavBarProps) => {
             <Button
               onClick={onClose}
               size="xSmall"
-              style={{ background: "transparent", color: "black" }}
+              style={{ background: "transparent", color: "black", border: "none" }}
               ref={firstChildRef}
             >
               <Icon kind="close" size="2.4rem" />

diff --git a/frontend/src/components/common/modal/Modal.tsx b/frontend/src/components/common/modal/Modal.tsx
@@ -52,7 +52,7 @@ const Modal = ({ isOpen, onClose, hasCloseButton = true, style, children }: Moda
 
       element.removeAttribute("aria-hidden");
     });
-    
+
     return () => {
       previousFocusedElement.current?.focus();
       document.getElementById("root")?.setAttribute("aria-hidden", "false");

diff --git a/frontend/src/components/common/modal/confirmModal/ConfirmModal.style.ts b/frontend/src/components/common/modal/confirmModal/ConfirmModal.style.ts
@@ -8,6 +8,9 @@ export const ConfirmModalContainer = styled.div`
   padding: 3rem;
 
   font: ${({ theme }) => theme.TEXT.medium_bold};
+  line-height: normal;
+  text-align: center;
+  white-space: pre-line;
 `;
 
 export const ButtonWrapper = styled.div`

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.stories.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.stories.tsx
@@ -37,8 +37,8 @@ export const 기술적_피드백: Story = {
       feedbackKeywords: ["작업 속도", "PR 본문 메시지", "코드 관심사 분리"],
       feedbackText: `작업 속도가 정말 빠르면서 평소 책을 많이 읽어서 그런지 PR 본문 메시지가 정말 알이 꽉꽉 찼어요.
       
-      그리고 코드 관심사 분리라는 단어를 알고 있어서 대화하기 편했어요 ㅎㅎ.
-  `,
+      그리고 코드 관심사 분리라는 단어를 알고 있어서 대화하기 편했어요 ㅎㅎ.`,
+      isWrited: true,
       evaluationPoint: 1,
     },
     feedbackType: "develop",

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
@@ -3,6 +3,8 @@ import { EllipsisText, VisuallyHidden } from "@/styles/common";
 import media from "@/styles/media";
 
 export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
+  position: relative;
+
   overflow-y: hidden;
   display: flex;
   flex-direction: column;
@@ -27,6 +29,43 @@ export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
   `}
 `;
 
+export const Overlay = styled.div`
+  pointer-events: auto;
+
+  position: absolute;
+  z-index: 10;
+  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%);
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+
+  font: ${({ theme }) => theme.TEXT.large_bold};
+`;
+
+export const FeedbackContent = styled.div<{ $isWrited: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  filter: ${(props) => (props.$isWrited ? "none" : "blur(7px)")};
+`;
+
 export const FeedbackScoreContainer = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -1,9 +1,12 @@
+import { useNavigate } from "react-router-dom";
 import { FeedbackType } from "@/hooks/feedback/useSelectedFeedbackData";
+import Button from "@/components/common/button/Button";
 import Profile from "@/components/common/profile/Profile";
 import { Textarea } from "@/components/common/textarea/Textarea";
 import EvaluationPointBar from "@/components/feedback/evaluationPointBar/EvaluationPointBar";
 import * as S from "@/components/feedback/feedbackCard/FeedbackCard.style";
 import { FeedbackCardData } from "@/@types/feedback";
+import { ReviewerInfo } from "@/@types/reviewer";
 import { HoverStyledLink } from "@/styles/common";
 import { theme } from "@/styles/theme";
 
@@ -18,17 +21,50 @@ const FeedbackCard = ({
   feedbackCardData,
   feedbackType,
 }: FeedbackCardProps) => {
+  const navigate = useNavigate();
   const getFeedbackTarget = (feedbackType: "develop" | "social") => {
     if (selectedFeedbackType === "받은 피드백") {
       return feedbackType === "develop" ? "FROM. 나의 리뷰어" : "FROM. 나의 리뷰이";
     }
     return feedbackType === "develop" ? "TO. 나의 리뷰이" : "TO. 나의 리뷰어";
   };
 
+  const reviewer: ReviewerInfo = {
+    userId: feedbackCardData.receiverId,
+    username: feedbackCardData.username,
+    link: feedbackCardData.profile,
+    isWrited: feedbackCardData.isWrited,
+  };
+
+  // 피드백 페이지 이동 함수
+  const handleNavigateFeedbackPage = () => {
+    navigate(
+      `/rooms/${feedbackCardData.roomId}/feedback/${feedbackType === "develop" ? "reviewer" : "reviewee"}?username=${feedbackCardData.username}`,
+      {
+        state: { reviewer },
+      },
+    );
+  };
+
   return (
     <>
       <S.ScreenReader>미션의 상세 피드백 내용입니다.</S.ScreenReader>
+
       <S.FeedbackCardContainer $isTypeDevelop={feedbackType === "develop"}>
+        {!feedbackCardData.isWrited && (
+          <S.Overlay>
+            <S.ButtonWrapper>
+              <p>상대방 피드백을 작성해야 볼 수 있습니다.</p>
+              <Button
+                variant={feedbackType ? "primary" : "secondary"}
+                onClick={handleNavigateFeedbackPage}
+              >
+                피드백 작성하러가기
+              </Button>
+            </S.ButtonWrapper>
+          </S.Overlay>
+        )}
+
         <S.FeedbackHeader>
           <HoverStyledLink to={`/profile/${feedbackCardData.username}`} tabIndex={-1}>
             <S.FeedbackProfile>
@@ -51,35 +87,39 @@ const FeedbackCard = ({
           </S.FeedbackType>
         </S.FeedbackHeader>
 
-        <S.FeedbackScoreContainer>
-          <S.FeedbackTitle>피드백 점수</S.FeedbackTitle>
-          <EvaluationPointBar
-            initialOptionId={feedbackCardData.evaluationPoint}
-            readonly={true}
-            color={feedbackType === "social" ? theme.COLOR.secondary : undefined}
-            isTabFocusable={false}
-          />
-        </S.FeedbackScoreContainer>
+        <S.FeedbackContent $isWrited={feedbackCardData.isWrited}>
+          <S.FeedbackScoreContainer>
+            <S.FeedbackTitle>피드백 점수</S.FeedbackTitle>
+            <EvaluationPointBar
+              initialOptionId={feedbackCardData.evaluationPoint}
+              readonly={true}
+              color={feedbackType === "social" ? theme.COLOR.secondary : undefined}
+              isTabFocusable={false}
+            />
+          </S.FeedbackScoreContainer>
 
-        <S.FeedbackKeywordContainer>
-          <S.FeedbackTitle>피드백 키워드</S.FeedbackTitle>
-          <S.FeedbackKeywordWrapper>
-            {feedbackCardData.feedbackKeywords.map((keyword) => (
-              <S.FeedbackKeyword key={keyword}>{keyword}</S.FeedbackKeyword>
-            ))}
-          </S.FeedbackKeywordWrapper>
-        </S.FeedbackKeywordContainer>
+          <S.FeedbackKeywordContainer>
+            <S.FeedbackTitle>피드백 키워드</S.FeedbackTitle>
+            <S.FeedbackKeywordWrapper>
+              {feedbackCardData.feedbackKeywords.map((keyword) => (
+                <S.FeedbackKeyword key={keyword}>{keyword}</S.FeedbackKeyword>
+              ))}
+            </S.FeedbackKeywordWrapper>
+          </S.FeedbackKeywordContainer>
 
-        <S.FeedbackDetailContainer>
-          <S.FeedbackTitle>세부 피드백</S.FeedbackTitle>
-          <Textarea
-            rows={10}
-            maxLength={2000}
-            showCharCount={true}
-            value={feedbackCardData.feedbackText.length ? feedbackCardData.feedbackText : "없음"}
-            readOnly
-          />
-        </S.FeedbackDetailContainer>
+          <S.FeedbackDetailContainer>
+            <S.FeedbackTitle>세부 피드백</S.FeedbackTitle>
+            <Textarea
+              rows={10}
+              maxLength={2000}
+              showCharCount={true}
+              value={
+                feedbackCardData.feedbackText.length ? feedbackCardData.feedbackText : "미작성"
+              }
+              readOnly
+            />
+          </S.FeedbackDetailContainer>
+        </S.FeedbackContent>
       </S.FeedbackCardContainer>
     </>
   );

diff --git a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.stories.tsx b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.stories.tsx
@@ -29,12 +29,14 @@ const developFeedbackData = deliveredFeedbackInfo.feedbacks[0].developFeedback.m
   ...feedback,
   feedbackKeywords: feedback.feedbackKeywords as unknown as NonEmptyArray<string>,
   evaluationPoint: feedback.evaluationPoint as 1 | 2 | 3 | 4 | 5,
+  isWrited: feedback.isWrited as boolean,
 })) satisfies FeedbackCardData[];
 
 const socialFeedbackData = deliveredFeedbackInfo.feedbacks[0].socialFeedback.map((feedback) => ({
   ...feedback,
   feedbackKeywords: feedback.feedbackKeywords as unknown as NonEmptyArray<string>,
   evaluationPoint: feedback.evaluationPoint as 1 | 2 | 3 | 4 | 5,
+  isWrited: feedback.isWrited as boolean,
 })) satisfies FeedbackCardData[];
 
 export const Default: Story = {