Merge pull request #39 from prgrms-web-devcourse-final-project/featur…

…e/QFEED-79

 [Feat] QFEED-79 질문 수정 페이지 레이아웃 구현

src/components/ui/HobbyTag/SelectableHobbyTags.styles.ts

@@ -14,7 +14,7 @@ export const Tag = styled.button<{ isSelected: boolean }>`
     isSelected ? `1px solid ${theme.colors.primary}` : `1px solid ${theme.colors.gray[300]}`};
   background-color: ${({ isSelected }) => (isSelected ? theme.colors.primary : 'transparent')};
   color: ${({ isSelected }) => (isSelected ? theme.colors.white : theme.colors.gray[300])};
-  font-size: 1rem;
+  font-size: 0.875rem;
   cursor: pointer;
   transition: all 0.2s;
 

src/components/ui/HobbyTag/SelectableHobbyTags.tsx

@@ -1,16 +1,21 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Tag, TagContainer } from '@/components/ui/HobbyTag/SelectableHobbyTags.styles';
 
 interface SelectableHobbyTagsProps {
   tags: string[]; // 태그 목록
+  selectedTags?: string[]; // 초기 선택된 태그
   onSelectionChange: (selectedTags: string[]) => void; // 선택된 태그 전달 콜백
 }
 
-const SelectableHobbyTags: React.FC<SelectableHobbyTagsProps> = ({ tags, onSelectionChange }) => {
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+const SelectableHobbyTags = ({
+  tags,
+  selectedTags = [],
+  onSelectionChange,
+}: SelectableHobbyTagsProps) => {
+  const [selected, setSelected] = useState<string[]>(selectedTags);
 
   const handleTagClick = (tag: string) => {
-    setSelectedTags((prevSelected) => {
+    setSelected((prevSelected) => {
       const isAlreadySelected = prevSelected.includes(tag);
 
       const updatedSelection = isAlreadySelected
@@ -25,7 +30,7 @@ const SelectableHobbyTags: React.FC<SelectableHobbyTagsProps> = ({ tags, onSelec
   return (
     <TagContainer>
       {tags.map((tag) => (
-        <Tag key={tag} isSelected={selectedTags.includes(tag)} onClick={() => handleTagClick(tag)}>
+        <Tag key={tag} isSelected={selected.includes(tag)} onClick={() => handleTagClick(tag)}>
           {tag}
         </Tag>
       ))}

src/pages/MyPage/components/Button/Button.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'], // 자동 문서화를 위한 태그
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: '기본 버튼',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    children: '프라이머리 버튼',
+  },
+};

src/pages/MyPage/components/Button.tsx → src/pages/MyPage/components/Button/Button.styles.tsx

@@ -1,20 +1,7 @@
 import styled from '@emotion/styled';
 import theme from '@/styles/theme';
 
-interface ButtonProps {
-  children: React.ReactNode;
-  onClick?: () => void; // 클릭 이벤트 핸들러
-}
-
-const Button: React.FC<ButtonProps> = ({ children, onClick }) => {
-  return (
-    <StyledButton onClick={onClick}>
-      {children}
-    </StyledButton>
-  );
-};
-
-const StyledButton = styled.button`
+export const StyledButton = styled.button`
   flex: 1;
   padding: 0.625rem 1rem;
   background-color: ${theme.colors.white};
@@ -31,6 +18,4 @@ const StyledButton = styled.button`
     color: ${theme.colors.white};
     scale: 1.025;
   }
-`;
-
-export default Button;
+`;

src/pages/MyPage/components/Button/Button.tsx

@@ -0,0 +1,16 @@
+import { StyledButton } from '@/pages/MyPage/components/Button/Button.styles';
+
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void; // 클릭 이벤트 핸들러
+}
+
+const Button = ({ children, onClick }: ButtonProps) => {
+  return (
+    <StyledButton onClick={onClick}>
+      {children}
+    </StyledButton>
+  );
+};
+
+export default Button;

src/pages/MyPage/components/Header/Header.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Header from './Header';
+
+const meta: Meta<typeof Header> = {
+  title: 'Components/Header',
+  component: Header,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text', description: 'The title displayed in the center of the header' },
+    className: { control: false, description: 'Optional additional class names' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Header>;
+
+export const Default: Story = {
+  args: {
+    title: '프로필',
+  },
+};
+
+export const WithoutTitle: Story = {
+  args: {
+    title: '',
+  },
+};
+
+export const CustomTitle: Story = {
+  args: {
+    title: '마이페이지',
+  },
+};

src/pages/MyPage/components/Header/Header.styles.tsx

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+import theme from '@/styles/theme';
+
+export const StyledHeader = styled.header`
+  width: 100%;
+  padding: 0.5rem 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: ${theme.colors.white};
+`;
+
+export const LogoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+
+export const Title = styled.h1`
+  font-size: 1.25rem;
+  font-family: ${theme.typography.header1.fontFamily.korean};
+  font-weight: bold;
+  color: ${theme.colors.black};
+  text-align: center;
+  flex: 1;
+`;
+
+export const RightSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+
+export const IconButton = styled.button`
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${theme.colors.black};
+`;

src/pages/MyPage/components/Header/Header.tsx

@@ -0,0 +1,44 @@
+import { HiOutlineBell } from 'react-icons/hi';
+import { useNavigate } from 'react-router-dom';
+import Logo from '@/assets/qfeed-logo.svg?react';
+import {
+  StyledHeader,
+  LogoWrapper,
+  Title,
+  RightSection,
+  IconButton,
+} from '@/pages/MyPage/components/Header/Header.styles'
+
+interface HeaderProps {
+  profileImage?: string;
+  className?: string;
+  title?: string;
+}
+
+const Header = ({ className, title }: HeaderProps) => {
+  const navigate = useNavigate();
+
+  const onLogoClick = () => {
+    navigate('/');
+  };
+
+  const handleNotificationClick = () => {
+    navigate('/alarm');
+  };
+
+  return (
+    <StyledHeader className={className}>
+      <LogoWrapper onClick={onLogoClick}>
+        <Logo />
+      </LogoWrapper>
+      <Title>{title}</Title>
+      <RightSection>
+        <IconButton onClick={handleNotificationClick} aria-label="알림">
+          <HiOutlineBell size={28} />
+        </IconButton>
+      </RightSection>
+    </StyledHeader>
+  );
+};
+
+export default Header;