Feature/118

src/app/(non-member)/signin/layout.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+import Header from '@/components/layout/Header';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <Header />
+      { children }
+    </>
+  );
+}

src/app/(non-member)/signup/layout.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+import Header from '@/components/layout/Header';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <Header />
+      { children }
+    </>
+  );
+}

src/components/common/Checkbox.test.tsx

@@ -0,0 +1,36 @@
+import { screen } from '@testing-library/react';
+
+import { renderWithProviders } from '@/utils/testHelper';
+
+import Checkbox from './Checkbox';
+
+jest.mock('usehooks-ts', () => ({
+  useDarkMode: () => ({ isDarkMode: false }),
+}));
+
+describe('Checkbox', () => {
+  const onChange = jest.fn();
+
+  const renderCheckbox = () => renderWithProviders(
+    <Checkbox
+      text="체크박스"
+      checked={given.checked}
+      onChange={onChange}
+    />,
+  );
+
+  it('체크박스 텍스트를 나타낸다.', () => {
+    given('checked', () => false);
+    renderCheckbox();
+
+    expect(screen.getByText(/체크박스/)).toBeInTheDocument();
+  });
+
+  it('체크박스를 클릭하면 onChange 함수가 실행된다.', () => {
+    given('checked', () => false);
+    renderCheckbox();
+
+    screen.getByText(/체크박스/).click();
+    expect(onChange).toHaveBeenCalled();
+  });
+});

src/components/common/Checkbox.tsx

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+import { useDarkMode } from 'usehooks-ts';
+
+import CheckIconLight from '@/lib/assets/check-icon.svg';
+import CheckIconDark from '@/lib/assets/check-icon-dark.svg';
+import UncheckIcon from '@/lib/assets/check-icon-inactive.svg';
+
+export type CheckboxProps = React.PropsWithChildren<{
+  checked: boolean,
+  text:string,
+  onChange:(value:boolean)=>void
+}>;
+
+export default function CheckBox({
+  checked, text, onChange, children,
+}: CheckboxProps) {
+  const { isDarkMode } = useDarkMode();
+  const { CheckedIcon, checkedBorderColor, checkedTextColor } = isDarkMode ? {
+    CheckedIcon: CheckIconDark,
+    checkedBorderColor: '#FFFFFF',
+    checkedTextColor: '#FFFFFF',
+  } : {
+    CheckedIcon: CheckIconLight,
+    checkedBorderColor: '#000000',
+    checkedTextColor: '#000000',
+  };
+
+  const CheckIcon = checked ? CheckedIcon : UncheckIcon;
+  const borderColor = checked ? checkedBorderColor : '#A0A0A0';
+  const textColor = checked ? checkedTextColor : '#A0A0A0';
+
+  return (
+    <Container
+      $borderColor={borderColor}
+    >
+      <CheckboxContainer
+        onClick={() => {
+          onChange(!checked);
+        }}
+      >
+        {checked ? <CheckIcon /> : <UncheckIcon />}
+        <LabelText $textColor={textColor}>{text}</LabelText>
+      </CheckboxContainer>
+      {children && (
+        <Divider
+          $borderColor={borderColor}
+        />
+      )}
+      {children}
+    </Container>
+  );
+}
+
+const Divider = styled.div<{ $borderColor:string }>`
+  width: 100%;
+  height: 1px;
+  background-color: ${({ $borderColor }) => $borderColor}
+`;
+
+const Container = styled.div<{ $borderColor:string }>`
+  display: flex;
+  flex-direction: column;
+  ${({ $borderColor }) => `border: 1px solid ${$borderColor};`}
+`;
+
+const CheckboxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  gap:8px;
+`;
+
+const LabelText = styled.label<{ $textColor:string }>`
+  font-size: 14px;
+  line-height: 16px;
+  color: ${({ $textColor }) => ($textColor)};
+`;

src/components/common/Header.test.tsx

@@ -0,0 +1,47 @@
+import { usePathname, useRouter } from 'next/navigation';
+
+import { fireEvent, screen } from '@testing-library/react';
+
+import { renderWithProviders } from '@/utils/testHelper';
+
+import Header from './Header';
+
+jest.mock('next/navigation', () => ({
+  usePathname: jest.fn(),
+  useRouter: jest.fn(),
+}));
+
+describe('Header', () => {
+  const mockBack = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (usePathname as jest.Mock).mockImplementation(() => given.pathname);
+    (useRouter as jest.Mock).mockImplementation(() => ({
+      back: mockBack,
+    }));
+  });
+
+  const rendeHeader = () => renderWithProviders(<Header title="설정" />);
+
+  context('제목이 설정 일 때', () => {
+    it('설정 타이틀이 보인다.', () => {
+      rendeHeader();
+
+      expect(screen.getByText('설정')).toBeInTheDocument();
+    });
+  });
+
+  context('뒤로 가기 버튼을 누르면', () => {
+    given('pathname', () => '/setting/tos');
+
+    it('페이지가 뒤로간다.', () => {
+      rendeHeader();
+
+      fireEvent.click(screen.getByTestId('back-button'));
+
+      expect(mockBack).toHaveBeenCalled();
+    });
+  });
+});

src/components/common/Header.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import styled from 'styled-components';
+
+import BackIcon from '@/lib/assets/back-icon.svg';
+
+type Props = {
+  title: string;
+};
+
+export default function Header({ title }:Props) {
+  const router = useRouter();
+
+  const onBack = () => router.back();
+
+  return (
+    <Container>
+      <BackButton data-testid="back-button" onClick={onBack} />
+      <Title>{title}</Title>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-height: 72px;
+  height: 72px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const BackButton = styled(BackIcon)`
+  position: absolute;
+  left: 16px;
+  top: 21px;
+  path{
+    fill: ${({ theme }) => theme.color.text.title02};
+  }
+`;
+
+const Title = styled.div`
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 26px;
+  color: ${({ theme }) => theme.color.text.title01};
+`;

src/components/layout/SettingHeader.tsx

@@ -1,10 +1,8 @@
 'use client';
 
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 
-import styled from 'styled-components';
-
-import BackIcon from '@/lib/assets/back-icon.svg';
+import Header from '../common/Header';
 
 const settingTitle:{ [key: string]: string } = {
   '/setting': '설정',
@@ -21,42 +19,10 @@ const settingTitle:{ [key: string]: string } = {
 
 export default function SettingHeader() {
   const pathname = usePathname();
-  const router = useRouter();
 
   const title = settingTitle[pathname || '/setting'];
 
-  const onBack = () => router.back();
-
   return (
-    <Container>
-      <BackButton data-testid="back-button" onClick={onBack} />
-      <Title>{title}</Title>
-    </Container>
+    <Header title={title ?? ''} />
   );
 }
-
-const Container = styled.div`
-  position: relative;
-  display: flex;
-  width: 100%;
-  min-height: 72px;
-  height: 72px;
-  justify-content: center;
-  align-items: center;
-`;
-
-const BackButton = styled(BackIcon)`
-  position: absolute;
-  left: 16px;
-  top: 21px;
-  path{
-    fill: ${({ theme }) => theme.color.text.title02};
-  }
-`;
-
-const Title = styled.div`
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 26px;
-  color: ${({ theme }) => theme.color.text.title01};
-`;

src/components/relation/index.tsx

@@ -3,12 +3,14 @@
 import { useSearchParams } from 'next/navigation';
 
 import { styled } from 'styled-components';
+import { useDarkMode } from 'usehooks-ts';
 
 import UserCard from '@/components/search/UserCard';
 import useGetInfiniteFollow, { GET_INFINITE_FOLLOW_KEY } from '@/hooks/api/useGetInfiniteRelations';
 import useToggleRelation from '@/hooks/api/useToggleRelation';
 
 export default function Relation() {
+  const { isDarkMode } = useDarkMode();
   const searchParams = useSearchParams();
   const search = searchParams?.get('defaultType');
   const [type, setType] = useState<'follower' | 'followee'>((search ?? 'follower') as ('follower' | 'followee'));
@@ -58,7 +60,7 @@
 const TabItem = styled.div<{ active?: boolean }>`
   font-size: 36px;
   font-weight: 200;
-  color: ${({ active }) => (active ? '#000' : '#BDBDBD')};
+  color: ${({ theme, active }) => (active ? theme.color.text.title01 : theme.color.text.subTitle02)};
   cursor: pointer;
 `;
 

src/components/signup/SignUpButton.test.tsx

@@ -16,7 +16,7 @@ describe('StepButton', () => {
   });
 
   context('회원가입 첫 번째 페이지일 경우', () => {
-    given('step', () => 0);
+    given('step', () => 1);
     it('"이메일로 인증번호 전송"버튼을 화면에 보여준다.', () => {
       renderStepButton();
 
@@ -25,7 +25,7 @@ describe('StepButton', () => {
   });
 
   context('회원가입 두 번째 페이지일 경우', () => {
-    given('step', () => 1);
+    given('step', () => 2);
     it('"확인"버튼을 화면에 보여준다.', () => {
       renderStepButton();
 
@@ -34,7 +34,7 @@ describe('StepButton', () => {
   });
 
   context('회원가입 마지막 페이지일 경우', () => {
-    given('step', () => 7);
+    given('step', () => 8);
     it('"가입 완료"버튼을 화면에 보여준다.', () => {
       renderStepButton();
 
@@ -43,7 +43,7 @@ describe('StepButton', () => {
   });
 
   context('그 외의 페이지의 경우', () => {
-    given('step', () => 5);
+    given('step', () => 6);
     it('"다음"버튼을 화면에 보여준다.', () => {
       renderStepButton();
 

src/components/signup/SignUpButton.tsx

@@ -8,13 +8,13 @@ type SignUpButtonProps = {
 };
 
 const getButtonText = (step: number) => {
-  if (step === 0) {
+  if (step === 1) {
     return '이메일로 인증번호 전송';
   }
-  if (step === 1) {
+  if (step === 2) {
     return '확인';
   }
-  if (step === 7) {
+  if (step === 8) {
     return '가입 완료';
   }
   return '다음';

src/components/signup/SignUpForm.test.tsx

@@ -10,11 +10,12 @@ describe('SignUpForm', () => {
     <SignUpForm
       step={given.step}
       formData={signupField}
+      onResend={jest.fn()}
     />,
   );
 
   context('회원가입 첫 번째 화면일 때', () => {
-    given('step', () => 0);
+    given('step', () => 1);
 
     it('이메일 입력 필드를 화면에 보여준다.', () => {
       renderSignUpForm();
@@ -24,7 +25,7 @@ describe('SignUpForm', () => {
   });
 
   context('회원가입 네 번째 화면일 때', () => {
-    given('step', () => 3);
+    given('step', () => 4);
 
     it('이름 입력 필드를 화면에 보여준다.', () => {
       renderSignUpForm();