woowacourse-teams · pp449 · Oct 28, 2024 · Oct 28, 2024 · Oct 28, 2024 · Oct 28, 2024
diff --git a/frontend/src/@types/icon.ts b/frontend/src/@types/icon.ts
@@ -22,6 +22,7 @@ type IconKind =
   | "arrowRenew"
   | "check"
   | "menu"
-  | "close";
+  | "close"
+  | "githubLogo";
 
 export default IconKind;
diff --git a/frontend/src/assets/etc/spinner.svg b/frontend/src/assets/etc/spinner.svg
diff --git a/frontend/src/components/common/button/Button.style.ts b/frontend/src/components/common/button/Button.style.ts
@@ -54,8 +54,8 @@ const variantStyles = {
 const sizeStyles = {
   xSmall: css`
     width: fit-content;
-    max-width: 110px;
-    padding: 1rem;
+    max-width: 120px;
+    padding: 1rem 0.5rem;
 
     font: ${({ theme }) => theme.TEXT.semiSmall};
 

diff --git a/frontend/src/components/common/contentSection/ContentSection.style.ts b/frontend/src/components/common/contentSection/ContentSection.style.ts
@@ -12,7 +12,19 @@ export const ContentSectionHeader = styled.div`
   justify-content: space-between;
 `;
 
+export const TitleContainer = styled.div`
+  display: flex;
+  gap: 1rem;
+  align-items: flex-end;
+  justify-content: center;
+`;
+
 export const ContentSectionTitle = styled.h2`
   font: ${({ theme }) => theme.TEXT.xLarge_bold};
   color: ${({ theme }) => theme.COLOR.grey4};
 `;
+
+export const ContentSectionSubtitle = styled.h3`
+  font: ${({ theme }) => theme.TEXT.medium_bold};
+  color: ${({ theme }) => theme.COLOR.grey3};
+`;
diff --git a/frontend/src/components/common/contentSection/ContentSection.tsx b/frontend/src/components/common/contentSection/ContentSection.tsx
@@ -8,15 +8,20 @@ interface ContentSectionButton extends ButtonProps {
 
 interface ContentSectionProps {
   title: string;
+  subtitle?: string;
   children?: ReactNode;
   button?: ContentSectionButton | undefined;
 }
 
-const ContentSection = ({ title, children, button }: ContentSectionProps) => {
+const ContentSection = ({ title, subtitle, children, button }: ContentSectionProps) => {
   return (
     <S.ContentSectionContainer>
       <S.ContentSectionHeader>
-        <S.ContentSectionTitle>{title}</S.ContentSectionTitle>
+        <S.TitleContainer>
+          <S.ContentSectionTitle>{title}</S.ContentSectionTitle>
+          <S.ContentSectionSubtitle>{subtitle}</S.ContentSectionSubtitle>
+        </S.TitleContainer>
+
         {button && (
           <Button onClick={button.onClick} size="small">
             {button.label}

diff --git a/frontend/src/components/common/header/Header.tsx b/frontend/src/components/common/header/Header.tsx
@@ -15,7 +15,7 @@ const headerItems = [
     path: "/intro",
   },
   {
-    name: "코드리뷰가이드",
+    name: "가이드",
     path: "/guide",
   },
   // {

diff --git a/frontend/src/components/common/header/ProfileDropdown.tsx b/frontend/src/components/common/header/ProfileDropdown.tsx
@@ -6,14 +6,14 @@ import FocusTrap from "@/components/common/focusTrap/FocusTrap";
 import * as S from "@/components/common/header/ProfileDropdown.style";
 
 const dropdownItems = [
-  {
-    name: "피드백 모아보기",
-    path: "/feedback",
-  },
   {
     name: "마이페이지",
     path: "/profile",
   },
+  {
+    name: "피드백 모아보기",
+    path: "/feedback",
+  },
 ];
 
 const ProfileDropdown = () => {

diff --git a/frontend/src/components/common/header/SideNavBar.tsx b/frontend/src/components/common/header/SideNavBar.tsx
@@ -24,7 +24,7 @@ const loggedInMenuItems = [
     path: "/intro",
   },
   {
-    name: "코드리뷰가이드",
+    name: "가이드",
     path: "/guide",
   },
 ];
@@ -35,7 +35,7 @@ const commonMenuItems = [
     path: "/intro",
   },
   {
-    name: "코드리뷰가이드",
+    name: "가이드",
     path: "/guide",
   },
 ];

diff --git a/frontend/src/components/common/icon/Icon.tsx b/frontend/src/components/common/icon/Icon.tsx
@@ -6,6 +6,7 @@ import {
   FaRegFaceMeh,
   FaRegFaceSmile,
 } from "react-icons/fa6";
+import { IoLogoGithub } from "react-icons/io";
 import { IconType } from "react-icons/lib";
 import {
   MdArrowBackIos,
@@ -55,6 +56,7 @@ const ICON: { [key in IconKind]: IconType } = {
   check: MdCheck,
   menu: MdMenu,
   close: MdClear,
+  githubLogo: IoLogoGithub,
 };
 
 interface IconProps {

diff --git a/frontend/src/components/common/label/Label.style.ts b/frontend/src/components/common/label/Label.style.ts
@@ -58,6 +58,17 @@ export const LabelWrapper = styled.div<LabelWrapperProps>`
           background-color: ${theme.COLOR.error};
           border: 1px solid ${theme.COLOR.error};
         `;
+      case "MANAGER":
+        return css`
+          display: flex;
+          gap: 0.4rem;
+
+          font: ${({ theme }) => theme.TEXT.small};
+          color: ${theme.COLOR.black};
+
+          background-color: ${theme.COLOR.grey0};
+          border: 1px solid ${theme.COLOR.grey0};
+        `;
     }
   }}
 `;
diff --git a/frontend/src/components/common/label/Label.tsx b/frontend/src/components/common/label/Label.tsx
@@ -1,17 +1,27 @@
+import Icon from "@/components/common/icon/Icon";
 import * as S from "@/components/common/label/Label.style";
-import { ThemeType } from "@/styles/theme";
+import { ThemeType, theme } from "@/styles/theme";
+
+export type LabelType =
+  | "KEYWORD"
+  | "PARTICIPATED"
+  | "OPEN"
+  | "PROGRESS"
+  | "CLOSE"
+  | "FAIL"
+  | "MANAGER";
 
-export type LabelType = "KEYWORD" | "PARTICIPATED" | "OPEN" | "PROGRESS" | "CLOSE" | "FAIL";
 export type LabelSize = keyof ThemeType["TEXT"];
 
 interface LabelProps {
   text?: string;
+  managerText?: string;
   type: LabelType;
   size?: LabelSize;
   backgroundColor?: string;
 }
 
-const Label = ({ text, type, size = "semiSmall", backgroundColor }: LabelProps) => {
+const Label = ({ text, managerText, type, size = "semiSmall", backgroundColor }: LabelProps) => {
   return (
     <S.LabelWrapper type={type} $size={size} $backgroundColor={backgroundColor}>
       {type === "KEYWORD" && `#${text}`}
@@ -20,6 +30,12 @@ const Label = ({ text, type, size = "semiSmall", backgroundColor }: LabelProps)
       {type === "PROGRESS" && "진행 중"}
       {type === "CLOSE" && "종료"}
       {type === "FAIL" && "매칭 실패"}
+      {type === "MANAGER" && (
+        <>
+          <Icon kind="person" size="1.6rem" color={theme.COLOR.grey4} />
+          {managerText}
+        </>
+      )}
     </S.LabelWrapper>
   );
 };

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -18,7 +18,12 @@ const FeedbackCard = ({
   feedbackCardData,
   feedbackType,
 }: FeedbackCardProps) => {
-  const feedbackTarget = selectedFeedbackType === "받은 피드백" ? "FROM" : "TO";
+  const getFeedbackTarget = (feedbackType: "develop" | "social") => {
+    if (selectedFeedbackType === "받은 피드백") {
+      return feedbackType === "develop" ? "FROM. 나의 리뷰어" : "FROM. 나의 리뷰이";
+    }
+    return feedbackType === "develop" ? "TO. 나의 리뷰이" : "TO. 나의 리뷰어";
+  };
 
   return (
     <>
@@ -35,12 +40,12 @@ const FeedbackCard = ({
             {feedbackType === "develop" ? (
               <>
                 개발 역량 피드백
-                <p>{feedbackTarget}. 나의 리뷰어</p>
+                <p>{getFeedbackTarget(feedbackType)}</p>
               </>
             ) : (
               <>
                 소프트스킬 역량 피드백
-                <p>{feedbackTarget}. 나의 리뷰이</p>
+                <p>{getFeedbackTarget(feedbackType)}</p>
               </>
             )}
           </S.FeedbackType>

diff --git a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.style.ts b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.style.ts
@@ -110,9 +110,12 @@ export const FeedbackMissionPrompt = styled.span<{ $isSelected: boolean }>`
 
 export const FeedbackMissionInfo = styled.div`
   display: flex;
-  align-items: center;
+  align-items: start;
+
   margin-right: 1rem;
+
   font: ${({ theme }) => theme.TEXT.medium_bold};
+  color: ${({ theme }) => theme.COLOR.black};
 `;
 
 export const FeedbackCount = styled.div`
@@ -136,3 +139,10 @@ export const NoKeywordText = styled.span`
 export const ScreenReader = styled.div`
   ${VisuallyHidden}
 `;
+
+export const FeedbackLink = styled.button`
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.COLOR.black};
+  background-color: transparent;
+`;
diff --git a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.tsx b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.tsx
@@ -6,6 +6,7 @@ import FeedbackCard from "@/components/feedback/feedbackCard/FeedbackCard";
 import * as S from "@/components/feedback/feedbackCardList/FeedbackCardList.style";
 import { FeedbackCardDataList } from "@/@types/feedback";
 import { defaultCharacter } from "@/assets";
+import { HoverStyledLink } from "@/styles/common";
 import { theme } from "@/styles/theme";
 
 interface FeedbackCardListProps {
@@ -25,12 +26,9 @@ const FeedbackCardList = ({ selectedFeedbackType, feedbackData }: FeedbackCardLi
     setSelectedFeedback(roomId);
   };
 
-  useEffect(
-    function resetSelectedFeedback() {
-      setSelectedFeedback(undefined);
-    },
-    [feedbackData],
-  );
+  useEffect(() => {
+    setSelectedFeedback(undefined);
+  }, [feedbackData]);
 
   if (feedbackData.length === 0) {
     return (
@@ -97,6 +95,11 @@ const FeedbackCardList = ({ selectedFeedbackType, feedbackData }: FeedbackCardLi
               >
                 피드백을 보려면 클릭해주세요
               </S.FeedbackMissionPrompt>
+              {selectedFeedback === feedback.roomId && (
+                <HoverStyledLink to={`/rooms/${feedback.roomId}`}>
+                  상세페이지로 이동하기
+                </HoverStyledLink>
+              )}
             </S.FeedbackMissionWrapper>
             <S.FeedbackInfoWrapper
               $isVisible={feedback.roomId === selectedFeedback}

diff --git a/frontend/src/components/profile/profileCard/ProfileCard.style.ts b/frontend/src/components/profile/profileCard/ProfileCard.style.ts
@@ -30,7 +30,12 @@ export const ProfileWrapper = styled.div`
 `;
 
 export const ProfileNickname = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+
   max-width: 108px;
+
   font: ${({ theme }) => theme.TEXT.medium_bold};
   color: ${({ theme }) => theme.COLOR.grey3};
   text-align: center;

diff --git a/frontend/src/components/profile/profileCard/ProfileCard.tsx b/frontend/src/components/profile/profileCard/ProfileCard.tsx
@@ -17,7 +17,10 @@ const ProfileCard = (profileData: ProfileData) => {
         >
           <S.ProfileWrapper>
             <Profile imgSrc={profileData.profileImage} size={110} />
-            <S.ProfileNickname>{profileData.nickname}</S.ProfileNickname>
+            <S.ProfileNickname>
+              <Icon kind="githubLogo" size="2.5rem" />
+              {profileData.nickname}
+            </S.ProfileNickname>
           </S.ProfileWrapper>
         </HoverStyledLink>