From 4a1e07be39c40c3da7499e59bac1ecd342569877 Mon Sep 17 00:00:00 2001 From: Joo Won <110383412+chqkq@users.noreply.github.com> Date: Wed, 17 Jul 2024 16:01:32 +0900 Subject: [PATCH 01/64] JobFairCard_Comment --- .../AdminSignupPreview.module.css | 7 ++ .../AdminSignupPreview.stories.tsx | 24 +++++++ .../AdminSignupPreview.test.tsx | 13 ++++ .../AdminSignupPreview/AdminSignupPreview.tsx | 19 +++++ .../Buttons/CommentBox/CommentBox.module.css | 68 ++++++++++++++++++ .../Buttons/CommentBox/CommentBox.stories.tsx | 20 ++++++ .../Buttons/CommentBox/CommentBox.test.tsx | 27 +++++++ .../common/Buttons/CommentBox/CommentBox.tsx | 65 +++++++++++++++++ .../JobFairCard/JobFairCard.module.css | 71 +++++++++++++++++++ .../JobFairCard/JobFairCard.stories.tsx | 26 +++++++ .../Buttons/JobFairCard/JobFairCard.test.tsx | 22 ++++++ .../Buttons/JobFairCard/JobFairCard.tsx | 35 +++++++++ .../RadioButton/RadioButton.module.css | 7 ++ .../RadioButton/RadioButton.stories.tsx | 36 ++++++++++ .../Buttons/RadioButton/RadioButton.test.tsx | 18 +++++ .../Buttons/RadioButton/RadioButton.tsx | 25 +++++++ 16 files changed, 483 insertions(+) create mode 100644 src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.module.css create mode 100644 src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.stories.tsx create mode 100644 src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.test.tsx create mode 100644 src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.tsx create mode 100644 src/components/common/Buttons/CommentBox/CommentBox.module.css create mode 100644 src/components/common/Buttons/CommentBox/CommentBox.stories.tsx create mode 100644 src/components/common/Buttons/CommentBox/CommentBox.test.tsx create mode 100644 src/components/common/Buttons/CommentBox/CommentBox.tsx create mode 100644 src/components/common/Buttons/JobFairCard/JobFairCard.module.css create mode 100644 src/components/common/Buttons/JobFairCard/JobFairCard.stories.tsx create mode 100644 src/components/common/Buttons/JobFairCard/JobFairCard.test.tsx create mode 100644 src/components/common/Buttons/JobFairCard/JobFairCard.tsx create mode 100644 src/components/common/Buttons/RadioButton/RadioButton.module.css create mode 100644 src/components/common/Buttons/RadioButton/RadioButton.stories.tsx create mode 100644 src/components/common/Buttons/RadioButton/RadioButton.test.tsx create mode 100644 src/components/common/Buttons/RadioButton/RadioButton.tsx diff --git a/src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.module.css b/src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.module.css new file mode 100644 index 00000000..7b2d6f21 --- /dev/null +++ b/src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.module.css @@ -0,0 +1,7 @@ +.element { + background-color: var(--color-primary); + &:hover { + background-color: var(--color-onPrimaryFixedVariant); + } + } + \ No newline at end of file diff --git a/src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.stories.tsx b/src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.stories.tsx new file mode 100644 index 00000000..165c8072 --- /dev/null +++ b/src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.stories.tsx @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { AdminSignupPreview } from './AdminSignupPreview'; + +const meta: Meta = { + title: 'AdminSignupPreview', + component: AdminSignupPreview, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, + args: {}, +}; + +export default meta; +type Story = StoryObj; + +export const Usage: Story = { + args: { + name: 'John Doe', + email: 'john.doe@example.com', + role: 'Administrator', + }, +}; diff --git a/src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.test.tsx b/src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.test.tsx new file mode 100644 index 00000000..34bc5662 --- /dev/null +++ b/src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.test.tsx @@ -0,0 +1,13 @@ +import { render, screen } from '@testing-library/react'; +import { AdminSignupPreview } from './AdminSignupPreview'; +import '@testing-library/jest-dom'; + +describe('AdminSignupPreview component', () => { + it('renders correctly with the given props', () => { + render(); + expect(screen.getByText('Admin Signup Preview')).toBeInTheDocument(); + expect(screen.getByText('John Doe')).toBeInTheDocument(); + expect(screen.getByText('john.doe@example.com')).toBeInTheDocument(); + expect(screen.getByText('Administrator')).toBeInTheDocument(); + }); +}); diff --git a/src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.tsx b/src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.tsx new file mode 100644 index 00000000..4ceec596 --- /dev/null +++ b/src/components/common/Buttons/AdminSignupPreview/AdminSignupPreview.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import classes from './AdminSignupPreview.module.css'; + +interface AdminSignupPreviewProps { + name: string; + email: string; + role: string; +} + +export const AdminSignupPreview: React.FC = ({ name, email, role }) => { + return ( +
+

Admin Signup Preview

+

Name: {name}

+

Email: {email}

+

Role: {role}

+
+ ); +}; diff --git a/src/components/common/Buttons/CommentBox/CommentBox.module.css b/src/components/common/Buttons/CommentBox/CommentBox.module.css new file mode 100644 index 00000000..d0abbb69 --- /dev/null +++ b/src/components/common/Buttons/CommentBox/CommentBox.module.css @@ -0,0 +1,68 @@ +@import url('src/theme/fonts/pretendard.css'); + +.commentBox { + display: flex; + flex-direction: column; + margin: 20px 0; + width: 100%; /* 가로 길이 최대화 */ + font-family: "Pretendard Variable", __Pretendard_Fallback_e223ab, sans-serif; /* 폰트 적용 */ +} + +.textareaContainer { + display: flex; + border: 1px solid #ccc; + overflow: hidden; +} + +.textarea { + flex: 1; + padding: 10px; + border: none; + resize: none; + outline: none; + font-family: inherit; /* 상속된 폰트 사용 */ +} + +.button { + width: 70px; + background-color: var(--color-primary); + color: white; + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-family: inherit; /* 상속된 폰트 사용 */ +} + +.button:hover { + background-color: var(--color-onPrimaryFixedVariant); +} + +.divider { + border-top: 2px solid #ccc; /* 굵기를 2px로 조정 */ + margin: 10px 0; /* 간격을 줄임 */ +} + +.commentsList { + margin-top: 0px; /* 간격을 줄임 */ +} + +.commentItem { + border-top: 1px solid #ccc; + padding: 10px 0; +} + +.commentItem:first-child { + border-top: none; +} + +.commentAuthor { + color: #666666; /* 글씨 색상을 변경 */ + margin-bottom: 5px; + font-weight: normal; /* 기본값으로 변경 */ +} + +.commentTitle { + font-weight: bold; /* h3 태그 bold 처리 */ +} diff --git a/src/components/common/Buttons/CommentBox/CommentBox.stories.tsx b/src/components/common/Buttons/CommentBox/CommentBox.stories.tsx new file mode 100644 index 00000000..6067a9e2 --- /dev/null +++ b/src/components/common/Buttons/CommentBox/CommentBox.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { CommentBox } from './CommentBox'; + +const meta: Meta = { + title: 'CommentBox', + component: CommentBox, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, + args: {}, +}; + +export default meta; +type Story = StoryObj; + +export const Usage: Story = { + args: {}, +}; diff --git a/src/components/common/Buttons/CommentBox/CommentBox.test.tsx b/src/components/common/Buttons/CommentBox/CommentBox.test.tsx new file mode 100644 index 00000000..8815231c --- /dev/null +++ b/src/components/common/Buttons/CommentBox/CommentBox.test.tsx @@ -0,0 +1,27 @@ +import { render, screen, fireEvent } from '@testing-library/react'; +import { CommentBox } from './CommentBox'; +import '@testing-library/jest-dom'; + +describe('CommentBox component', () => { + it('renders correctly', () => { + render( {}} />); + expect(screen.getByPlaceholderText('정책 위반 댓글은 삭제될 수 있습니다.')).toBeInTheDocument(); + }); + + it('calls onSubmit with the correct value', () => { + const handleSubmit = jest.fn(); + render(); + const textarea = screen.getByPlaceholderText('정책 위반 댓글은 삭제될 수 있습니다.'); + fireEvent.change(textarea, { target: { value: 'Test comment' } }); + fireEvent.submit(textarea); + expect(handleSubmit).toHaveBeenCalledWith('Test comment'); + }); + + it('displays submitted comment', () => { + render(); + const textarea = screen.getByPlaceholderText('정책 위반 댓글은 삭제될 수 있습니다.'); + fireEvent.change(textarea, { target: { value: 'Test comment' } }); + fireEvent.submit(textarea); + expect(screen.getByText('Test comment')).toBeInTheDocument(); + }); +}); diff --git a/src/components/common/Buttons/CommentBox/CommentBox.tsx b/src/components/common/Buttons/CommentBox/CommentBox.tsx new file mode 100644 index 00000000..988f631c --- /dev/null +++ b/src/components/common/Buttons/CommentBox/CommentBox.tsx @@ -0,0 +1,65 @@ +import React, { useState } from 'react'; +import classes from './CommentBox.module.css'; + +interface CommentBoxProps { + onSubmit?: (comment: string) => void; +} + +interface Comment { + author: string; + content: string; +} + +export const CommentBox: React.FC = ({ onSubmit }) => { + const [comment, setComment] = useState(''); + const [comments, setComments] = useState([]); + + const handleChange = (e: React.ChangeEvent) => { + setComment(e.target.value); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + handleSubmit(e as any); + } + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (comment.trim()) { + if (onSubmit) onSubmit(comment); + setComments([...comments, { author: '사람', content: comment }]); + setComment(''); + } + }; + + return ( +
+

댓글

+
+
+