all

src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.module.css

@@ -1,7 +1,29 @@
-.element {
-    background-color: var(--color-primary);
-    &:hover {
-      background-color: var(--color-onPrimaryFixedVariant);
-    }
-  }
-
+@import url('src/theme/fonts/pretendard.css');
+
+.tableContainer {
+  padding: 20px;
+  background-color: #fff; /* 배경색을 하얀색으로 설정 */
+  border-radius: 0; /* 모서리를 90도로 설정 */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  font-family: "Pretendard Variable", __Pretendard_Fallback_e223ab, sans-serif;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table th, .table td {
+  padding: 10px; /* 행 간 간격을 유지 */
+  padding-left: 20px; /* 열 간격을 늘리기 위해 좌우 패딩 조정 */
+  padding-right: 20px; /* 열 간격을 늘리기 위해 좌우 패딩 조정 */
+  text-align: left;
+}
+
+.table th {
+  border-bottom: 2px solid #000;
+}
+
+.table td {
+  border-bottom: none; /* 회색 구분선을 제거 */
+}

src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.stories.tsx

@@ -17,8 +17,11 @@ type Story = StoryObj<typeof meta>;
 
 export const Usage: Story = {
   args: {
-    name: 'John Doe',
-    email: '[email protected]',
-    role: 'Administrator',
+    signups: [
+      { id: 1, applicant: '김교수', date: '2024/07/05', category: '교수', remark: '' },
+      { id: 2, applicant: '나공기업', date: '2024/07/05', category: '공공기관', remark: '인공지능지원사업부' },
+      { id: 3, applicant: '김교수', date: '2024/07/05', category: '교수', remark: '' },
+      { id: 4, applicant: '나공기업', date: '2024/07/05', category: '공공기관', remark: '인공지능지원사업부' },
+    ],
   },
 };

src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.test.tsx

@@ -3,11 +3,30 @@ import { AdminSignupPreview } from './AdminSignupPreview';
 import '@testing-library/jest-dom';
 
 describe('AdminSignupPreview component', () => {
-  it('renders correctly with the given props', () => {
-    render(<AdminSignupPreview name="John Doe" email="[email protected]" role="Administrator" />);
-    expect(screen.getByText('Admin Signup Preview')).toBeInTheDocument();
-    expect(screen.getByText('John Doe')).toBeInTheDocument();
-    expect(screen.getByText('[email protected]')).toBeInTheDocument();
-    expect(screen.getByText('Administrator')).toBeInTheDocument();
+  it('renders correctly with given props', () => {
+    const signups = [
+      { id: 1, applicant: '김교수', date: '2024/07/05', category: '교수', remark: '' },
+      { id: 2, applicant: '나공기업', date: '2024/07/05', category: '공공기관', remark: '인공지능지원사업부' },
+      { id: 3, applicant: '김교수', date: '2024/07/05', category: '교수', remark: '' },
+      { id: 4, applicant: '나공기업', date: '2024/07/05', category: '공공기관', remark: '인공지능지원사업부' },
+    ];
+
+    render(<AdminSignupPreview signups={signups} />);
+
+    expect(screen.getByText('ID')).toBeInTheDocument();
+    expect(screen.getByText('신청자')).toBeInTheDocument();
+    expect(screen.getByText('신청일')).toBeInTheDocument();
+    expect(screen.getByText('분류')).toBeInTheDocument();
+    expect(screen.getByText('비고')).toBeInTheDocument();
+
+    signups.forEach((signup) => {
+      expect(screen.getByText(signup.id)).toBeInTheDocument();
+      expect(screen.getByText(signup.applicant)).toBeInTheDocument();
+      expect(screen.getByText(signup.date)).toBeInTheDocument();
+      expect(screen.getByText(signup.category)).toBeInTheDocument();
+      if (signup.remark) {
+        expect(screen.getByText(signup.remark)).toBeInTheDocument();
+      }
+    });
   });
 });

src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.tsx

@@ -1,19 +1,43 @@
 import React from 'react';
 import classes from './AdminSignupPreview.module.css';
 
+interface Signup {
+  id: number;
+  applicant: string;
+  date: string;
+  category: string;
+  remark?: string;
+}
+
 interface AdminSignupPreviewProps {
-  name: string;
-  email: string;
-  role: string;
+  signups: Signup[];
 }
 
-export const AdminSignupPreview: React.FC<AdminSignupPreviewProps> = ({ name, email, role }) => {
+export const AdminSignupPreview: React.FC<AdminSignupPreviewProps> = ({ signups }) => {
   return (
-    <div className={classes.element}>
-      <h3>Admin Signup Preview</h3>
-      <p><strong>Name:</strong> {name}</p>
-      <p><strong>Email:</strong> {email}</p>
-      <p><strong>Role:</strong> {role}</p>
+    <div className={classes.tableContainer}>
+      <table className={classes.table}>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>신청자</th>
+            <th>신청일</th>
+            <th>분류</th>
+            <th>비고</th>
+          </tr>
+        </thead>
+        <tbody>
+          {signups.map((signup) => (
+            <tr key={signup.id}>
+              <td>{signup.id}</td>
+              <td>{signup.applicant}</td>
+              <td>{signup.date}</td>
+              <td>{signup.category}</td>
+              <td>{signup.remark}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
 };

src/components/common/Buttons/JobFairCard/JobFairCard.module.css

@@ -1,10 +1,14 @@
 @import url('src/theme/fonts/pretendard.css');
 
+:root {
+  --primary-container: #D2E4FF; /* material-theme/sys/light/primary-container 값 */
+}
+
 .card {
   border: 1px solid #ddd;
   border-radius: 15px;
   padding: 20px;
-  max-width: 400px; /* 가로 길이를 더 길게 조정 */
+  max-width: 300px; /* 가로 길이를 더 길게 조정 */
   font-family: "Pretendard Variable", __Pretendard_Fallback_e223ab, sans-serif;
   background-color: #fff;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
@@ -14,16 +18,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 5px;
+  margin-bottom: 20px;
 }
 
 .logo img {
-    max-width: 250px; /* 원하는 최대 너비 설정 */
-    max-height: 300px; /* 원하는 최대 높이 설정 */
-    width: auto; /* 너비 자동 조절 */
-    height: auto; /* 높이 자동 조절 */
-  }
-
+  max-width: 100%;
+  height: auto;
+}
 
 .company {
   font-size: 1.4em;
@@ -48,7 +49,7 @@
 }
 
 .label {
-  color: #666;
+  color: #000;
   font-size: 0.9em;
   margin-right: 10px;
 }
@@ -59,7 +60,7 @@
 }
 
 .tag {
-  background-color: #e7efff;
+  background-color: var(--primary-container); /* primary-container 색상으로 변경 */
   color: #1c4975;
   padding: 5px 10px;
   border-radius: 5px;

src/components/common/Buttons/JobFairCard/JobFairCard.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classes from './JobFairCard.module.css';
 
 interface JobFairCardProps {
-  logo: string;
+  logo: string; // 이미지 URL
   company: string;
   position: string;
   employmentType: string[];

src/components/common/Buttons/RadioButton/RadioButton.module.css

@@ -1,7 +1,31 @@
-.element {
-    background-color: var(--color-primary);
-    &:hover {
-      background-color: var(--color-onPrimaryFixedVariant);
-    }
-  }
-
+@import url('src/theme/fonts/pretendard.css');
+
+.radioButton {
+  appearance: none;
+  width: 30px; /* 사이즈를 사진 크기에 맞게 조정 */
+  height: 30px; /* 사이즈를 사진 크기에 맞게 조정 */
+  border: 2px solid #3a5a8d;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  background-color: white;
+}
+
+.radioButton::before {
+  content: '';
+  width: 14px; /* 내부 원 크기 조정 */
+  height: 14px; /* 내부 원 크기 조정 */
+  border-radius: 50%;
+  background-color: #3a5a8d;
+}
+
+.radioButton.checked::before {
+  background-color: red;
+}
+
+.radioButton.checked {
+  border-color: red;
+}

src/components/common/Buttons/RadioButton/RadioButton.stories.tsx

@@ -8,29 +8,24 @@ const meta: Meta<typeof RadioButton> = {
     layout: 'centered',
   },
   tags: ['autodocs'],
-  argTypes: {},
-  args: {},
+  argTypes: {
+    checked: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    checked: false,
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const OptionOne: Story = {
+export const Usage: Story = {
   args: {
-    label: 'Option One',
-    name: 'example',
-    value: 'optionOne',
     checked: false,
-    onChange: () => {},
   },
-};
-
-export const OptionTwo: Story = {
-  args: {
-    label: 'Option Two',
-    name: 'example',
-    value: 'optionTwo',
-    checked: false,
-    onChange: () => {},
+  render: (args) => {
+    return <RadioButton {...args} />;
   },
 };

src/components/common/Buttons/RadioButton/RadioButton.test.tsx

@@ -3,16 +3,17 @@ import { RadioButton } from './RadioButton';
 import '@testing-library/jest-dom';
 
 describe('RadioButton component', () => {
-  it('renders correctly with the given props', () => {
-    render(<RadioButton label="Option One" name="example" value="optionOne" checked={false} onChange={() => {}} />);
-    expect(screen.getByLabelText('Option One')).toBeInTheDocument();
-  });
+  it('renders correctly and toggles state on click', () => {
+    render(<RadioButton defaultChecked={false} />);
+
+    const radioButton = screen.getByRole('button');
+    expect(radioButton).toBeInTheDocument();
+    expect(radioButton).not.toHaveClass('checked');
+
+    fireEvent.click(radioButton);
+    expect(radioButton).toHaveClass('checked');
 
-  it('calls onChange when clicked', () => {
-    const handleChange = jest.fn();
-    render(<RadioButton label="Option One" name="example" value="optionOne" checked={false} onChange={handleChange} />);
-    const radioButton = screen.getByLabelText('Option One');
     fireEvent.click(radioButton);
-    expect(handleChange).toHaveBeenCalled();
+    expect(radioButton).not.toHaveClass('checked');
   });
 });

src/components/common/Buttons/RadioButton/RadioButton.tsx

@@ -1,25 +1,31 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import classes from './RadioButton.module.css';
 
 interface RadioButtonProps {
-  label: string;
-  name: string;
-  value: string;
-  checked: boolean;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
 }
 
-export const RadioButton: React.FC<RadioButtonProps> = ({ label, name, value, checked, onChange }) => {
+export const RadioButton: React.FC<RadioButtonProps> = ({ checked = false, onChange }) => {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  useEffect(() => {
+    setIsChecked(checked);
+  }, [checked]);
+
+  const handleClick = () => {
+    const newChecked = !isChecked;
+    setIsChecked(newChecked);
+    if (onChange) {
+      onChange(newChecked);
+    }
+  };
+
   return (
-    <label className={classes.element}>
-      <input
-        type="radio"
-        name={name}
-        value={value}
-        checked={checked}
-        onChange={onChange}
-      />
-      {label}
-    </label>
+    <button
+      type="button"
+      className={`${classes.radioButton} ${isChecked ? classes.checked : ''}`}
+      onClick={handleClick}
+    ></button>
   );
 };