From 23938003b98d2dce5409a7eec6fe47ada7c76821 Mon Sep 17 00:00:00 2001
From: mina-gwak <mina.gwak@kakao.com>
Date: Sun, 27 Apr 2025 03:02:50 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Feat:=20PD-264=20=EA=B3=B5=EA=B3=A0=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=88?=
 =?UTF-8?q?=ED=81=AC=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/job-posting/create/page.ts       |   1 +
 src/features/job-posting-form/index.ts        |   2 +
 .../job-posting-form/ui/job-posting-form.tsx  | 131 ++++++++++++++++++
 .../job-posting-form/ui/side-panel.tsx        |  27 ++++
 .../ui/preview-job-posting-button.tsx         |  20 ++-
 src/pages/business-job-posting/index.ts       |   1 +
 .../ui/create-job-posting-page.tsx            |  30 ++++
 .../ui/job-posting-list-page.tsx              |   7 +-
 src/shared/form/ui/checkbox/checkbox.tsx      |   3 +
 src/shared/ui/text-area/variants.ts           |   5 +-
 10 files changed, 223 insertions(+), 4 deletions(-)
 create mode 100644 app/(business)/business/job-posting/create/page.ts
 create mode 100644 src/features/job-posting-form/index.ts
 create mode 100644 src/features/job-posting-form/ui/job-posting-form.tsx
 create mode 100644 src/features/job-posting-form/ui/side-panel.tsx
 create mode 100644 src/pages/business-job-posting/ui/create-job-posting-page.tsx

diff --git a/app/(business)/business/job-posting/create/page.ts b/app/(business)/business/job-posting/create/page.ts
new file mode 100644
index 00000000..847a9376
--- /dev/null
+++ b/app/(business)/business/job-posting/create/page.ts
@@ -0,0 +1 @@
+export { CreateJobPostingPage as default } from 'pages/business-job-posting'
diff --git a/src/features/job-posting-form/index.ts b/src/features/job-posting-form/index.ts
new file mode 100644
index 00000000..de87618b
--- /dev/null
+++ b/src/features/job-posting-form/index.ts
@@ -0,0 +1,2 @@
+export { JobPostingForm } from './ui/job-posting-form'
+export { SidePanel } from './ui/side-panel'
diff --git a/src/features/job-posting-form/ui/job-posting-form.tsx b/src/features/job-posting-form/ui/job-posting-form.tsx
new file mode 100644
index 00000000..75836e73
--- /dev/null
+++ b/src/features/job-posting-form/ui/job-posting-form.tsx
@@ -0,0 +1,131 @@
+import { fieldCss, Form } from 'shared/form'
+import { cn, Slot } from 'shared/lib'
+import { Checkbox, Label } from 'shared/ui'
+
+type Props = {
+  className?: string
+}
+
+export const JobPostingForm = ({ className }: Props) => {
+  const studentTypeOptions = [
+    'All',
+    'Kindergarten',
+    'Elementary',
+    'MiddleSchool',
+    'HighSchool',
+    'Adult',
+  ]
+
+  return (
+    <div className={cn('rounded-3xl border border-gray-300 p-10', className)}>
+      <div className={fieldCss.fieldWrapper({ className: 'not-last:mb-8' })}>
+        <Label required>공고 제목</Label>
+        <Form.Control name="title">
+          <Form.TextField
+            placeholder="간결하고 명확하게 입력해 주세요. ex) Full-Time ESL Instructor"
+            fullWidth
+          />
+          <Form.ErrorMessage />
+        </Form.Control>
+      </div>
+      <div className={fieldCss.fieldWrapper({ className: 'not-last:mb-8' })}>
+        <Label required>주요 업무</Label>
+        <Form.Control name="jobDescription">
+          <Form.TextArea
+            placeholder={`입사 후 맡게되는 업무에 대해 자세히 알려주세요\nex) Teach [elementary-level] English classes [30 hours per week]. Develop lesson plans and class materials.`}
+            fullWidth
+            className="h-[128px]"
+          />
+          <Form.ErrorMessage />
+        </Form.Control>
+      </div>
+      <div className={fieldCss.fieldWrapper({ className: 'not-last:mb-8' })}>
+        <Label>자격 요건</Label>
+        <Form.Control name="requiredQualification">
+          <Form.TextArea
+            placeholder={`지원자의 필요 조건을 입력해 주세요\nex) Native or native-level English speaker. Valid TEFL/TESOL/CELTA certification (preferred).`}
+            fullWidth
+            className="h-[128px]"
+          />
+          <Form.ErrorMessage />
+        </Form.Control>
+      </div>
+      <div className={fieldCss.fieldWrapper({ className: 'not-last:mb-8' })}>
+        <Label>우대 사항</Label>
+        <Form.Control name="preferredQualification">
+          <Form.TextArea
+            placeholder={`채용시 우대되는 사항이 있다면 입력해 주세요\nex) Basic Korean language skills for simple communication.\nExperience teaching [elementary students/IELTS/TOEFL].`}
+            fullWidth
+            className="h-[128px]"
+          />
+          <Form.ErrorMessage />
+        </Form.Control>
+      </div>
+      <div className={fieldCss.fieldWrapper({ className: 'not-last:mb-8' })}>
+        <Label>혜택/복지</Label>
+        <Form.Control name="benefits">
+          <Form.TextArea
+            placeholder={`근무자에게 제공되는 혜택을 알려주세요\nex) Provided housing or housing allowance. Paid vacation days (ex. 10 days) + national holidays. Round-trip airfare reimbursement (depending on contract).`}
+            fullWidth
+            className="h-[128px]"
+          />
+          <Form.ErrorMessage />
+        </Form.Control>
+      </div>
+      <div className={fieldCss.fieldWrapper({ className: 'not-last:mb-8' })}>
+        <Label required>월급</Label>
+        <Form.Control name="salary">
+          <Form.TextField placeholder="숫자만 입력해 주세요" fullWidth>
+            <Slot name="right">
+              <span className="body-large text-gray-700">KRW</span>
+            </Slot>
+          </Form.TextField>
+          <Form.ErrorMessage />
+        </Form.Control>
+        <Form.Control name="salaryNegotiable">
+          <Form.CheckboxGroup options={['true']}>
+            <Form.Checkbox label="협의 가능" value="true" />
+          </Form.CheckboxGroup>
+          <Form.ErrorMessage />
+        </Form.Control>
+      </div>
+
+      <div className={fieldCss.fieldWrapper({ className: 'not-last:mb-8' })}>
+        <Label required>대상 학생</Label>
+        <div className="flex gap-[30px]">
+          <Form.CheckboxGroup name="studentType" options={studentTypeOptions}>
+            <Form.Checkbox label="전체" value="All" />
+            <Form.Checkbox label="유치원" value="Kindergarten" />
+            <Form.Checkbox label="초등학생" value="Elementary" />
+            <Form.Checkbox label="중학생" value="MiddleSchool" />
+            <Form.Checkbox label="고등학생" value="HighSchool" />
+            <Form.Checkbox label="성인" value="Adult" />
+          </Form.CheckboxGroup>
+        </div>
+      </div>
+
+      <div className={fieldCss.fieldWrapper({ className: 'not-last:mb-7' })}>
+        <Label>업무 시작 가능 날짜</Label>
+        <Form.Control name="jobStartDate">
+          <Form.DatePicker
+            placeholder="업무 시작 날짜를 선택해 주세요"
+            fullWidth
+          />
+          <Form.ErrorMessage />
+        </Form.Control>
+      </div>
+
+      <div className={fieldCss.fieldWrapper({ className: 'not-last:mb-8' })}>
+        <Label required>공고 마감일</Label>
+        <Form.Control name="dueDate">
+          <Form.DatePicker
+            placeholder="공고 마감 날짜를 선택해 주세요"
+            fullWidth
+          />
+          <Form.ErrorMessage />
+        </Form.Control>
+        <Checkbox label="상시 채용" value="true" className="-mt-[6px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/src/features/job-posting-form/ui/side-panel.tsx b/src/features/job-posting-form/ui/side-panel.tsx
new file mode 100644
index 00000000..09012b4d
--- /dev/null
+++ b/src/features/job-posting-form/ui/side-panel.tsx
@@ -0,0 +1,27 @@
+import { Button } from 'shared/ui'
+
+export const SidePanel = () => {
+  return (
+    <div className="h-fit w-[340px] shrink-0 rounded-2xl border border-gray-300 p-6">
+      <p className="body-large mb-2 text-blue-800">
+        공고 내용은 영어로 작성해주세요.
+      </p>
+      <div className="mb-6">
+        <p className="body-medium text-gray-700">
+          입력한 정보는 검색에 반영돼요.
+        </p>
+        <p className="body-medium text-gray-700">
+          중요한 정보를 빠뜨리지 않았는지 확인해 주세요.
+        </p>
+      </div>
+      <div className="space-y-2">
+        <Button variant="primary" size="large" fullWidth>
+          등록하기
+        </Button>
+        <Button variant="lined" size="large" fullWidth>
+          임시 저장
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/features/preview-job-posting/ui/preview-job-posting-button.tsx b/src/features/preview-job-posting/ui/preview-job-posting-button.tsx
index 6c379869..61d597bc 100644
--- a/src/features/preview-job-posting/ui/preview-job-posting-button.tsx
+++ b/src/features/preview-job-posting/ui/preview-job-posting-button.tsx
@@ -3,15 +3,17 @@ import { MouseEvent } from 'react'
 import { getJobPost } from 'entities/job-post'
 import { JobPostDetail } from 'entities/job-post'
 import { colors } from 'shared/config'
+import { cn } from 'shared/lib'
 import { Button, Icon } from 'shared/ui'
 
 import { setPreviewJobPosting } from '../lib/storage'
 
 type Props = {
-  type: 'icon' | 'button'
+  type: 'icon' | 'button' | 'text-button'
   jobPostId?: number
   onLoad?: () => Promise<JobPostDetail>
   disabled?: boolean
+  className?: string
 }
 
 export const PreviewJobPostingButton = ({
@@ -19,6 +21,7 @@ export const PreviewJobPostingButton = ({
   jobPostId,
   onLoad,
   disabled,
+  className,
 }: Props) => {
   const handlePreviewButtonClick = async (
     event: MouseEvent<HTMLButtonElement>,
@@ -40,7 +43,7 @@ export const PreviewJobPostingButton = ({
   if (type === 'icon') {
     return (
       <button
-        className="flex h-10 w-10 items-center justify-center"
+        className={cn('flex h-10 w-10 items-center justify-center', className)}
         disabled={disabled}
         onClick={handlePreviewButtonClick}
       >
@@ -53,6 +56,18 @@ export const PreviewJobPostingButton = ({
     )
   }
 
+  if (type === 'text-button') {
+    return (
+      <button
+        className={cn('body-large text-gray-700', className)}
+        disabled={disabled}
+        onClick={handlePreviewButtonClick}
+      >
+        미리 보기
+      </button>
+    )
+  }
+
   return (
     <Button
       type="button"
@@ -60,6 +75,7 @@ export const PreviewJobPostingButton = ({
       size="small"
       onClick={handlePreviewButtonClick}
       disabled={disabled}
+      className={className}
     >
       <Button.Icon name="DocumentSearch" />
       미리 보기
diff --git a/src/pages/business-job-posting/index.ts b/src/pages/business-job-posting/index.ts
index 8d6c4782..53957200 100644
--- a/src/pages/business-job-posting/index.ts
+++ b/src/pages/business-job-posting/index.ts
@@ -1 +1,2 @@
+export { CreateJobPostingPage } from './ui/create-job-posting-page'
 export { BusinessJobPostingListPage } from './ui/job-posting-list-page'
diff --git a/src/pages/business-job-posting/ui/create-job-posting-page.tsx b/src/pages/business-job-posting/ui/create-job-posting-page.tsx
new file mode 100644
index 00000000..f0244269
--- /dev/null
+++ b/src/pages/business-job-posting/ui/create-job-posting-page.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { useForm } from 'react-hook-form'
+
+import { JobPostingForm, SidePanel } from 'features/job-posting-form'
+import { PreviewJobPostingButton } from 'features/preview-job-posting'
+import { Form } from 'shared/form'
+import { Layout } from 'shared/ui'
+
+export const CreateJobPostingPage = () => {
+  const form = useForm()
+
+  return (
+    <Layout wide>
+      <h1 className="display-small mb-10 text-center font-bold text-gray-900">
+        공고 등록
+      </h1>
+      <Form {...form} className="flex gap-[20px]">
+        <JobPostingForm className="flex-grow" />
+        <div className="space-y-2">
+          <SidePanel />
+          <PreviewJobPostingButton
+            type="text-button"
+            className="ml-auto block"
+          />
+        </div>
+      </Form>
+    </Layout>
+  )
+}
diff --git a/src/pages/business-job-posting/ui/job-posting-list-page.tsx b/src/pages/business-job-posting/ui/job-posting-list-page.tsx
index ed263880..f70015c7 100644
--- a/src/pages/business-job-posting/ui/job-posting-list-page.tsx
+++ b/src/pages/business-job-posting/ui/job-posting-list-page.tsx
@@ -78,7 +78,12 @@ export const BusinessJobPostingListPage = () => {
               {t('tabs.closed')}
             </Tabs.Trigger>
           </Tabs.List>
-          <Button variant="lined" size="medium">
+          <Button
+            variant="lined"
+            size="medium"
+            as="a"
+            href="/business/job-posting/create"
+          >
             <Button.Icon name="Plus" />
             {t('button.register-job-posting')}
           </Button>
diff --git a/src/shared/form/ui/checkbox/checkbox.tsx b/src/shared/form/ui/checkbox/checkbox.tsx
index 17c6f868..62f31898 100644
--- a/src/shared/form/ui/checkbox/checkbox.tsx
+++ b/src/shared/form/ui/checkbox/checkbox.tsx
@@ -52,12 +52,14 @@ type FormCheckboxProps = {
   label?: string
   value?: CheckboxValue
   indeterminate?: boolean
+  className?: string
 }
 
 const FormCheckboxItem = ({
   label,
   value,
   indeterminate = false,
+  className,
 }: FormCheckboxProps) => {
   const { clearErrors } = useFormContext()
   const {
@@ -101,6 +103,7 @@ const FormCheckboxItem = ({
       error={!isEmpty(error)}
       onChange={handleCheckboxChange}
       value={field.value}
+      className={className}
     />
   )
 }
diff --git a/src/shared/ui/text-area/variants.ts b/src/shared/ui/text-area/variants.ts
index 371a6ad3..38969952 100644
--- a/src/shared/ui/text-area/variants.ts
+++ b/src/shared/ui/text-area/variants.ts
@@ -1,7 +1,10 @@
 import { cva, VariantProps } from 'class-variance-authority'
 
 export const textarea = cva(
-  'body-large resize-none rounded-[10px] border border-gray-300 p-4 text-gray-900 transition-all',
+  [
+    'body-large resize-none rounded-[10px] border border-gray-300 p-4 text-gray-900 transition-all',
+    'placeholder:text-gray-500',
+  ],
   {
     variants: {
       fullWidth: {

From 6ddab1308bb11057053aa28077e628005a7ef60e Mon Sep 17 00:00:00 2001
From: mina-gwak <mina.gwak@kakao.com>
Date: Sun, 27 Apr 2025 03:08:00 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20PD-264=20=EA=B3=B5=EA=B3=A0=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../job-posting/[jobPostId]/update/page.ts    |  1 +
 .../job-posting-form/ui/side-panel.tsx        | 16 +++++++---
 src/pages/business-job-posting/index.ts       |  1 +
 .../ui/create-job-posting-page.tsx            |  2 +-
 .../ui/update-job-posting-page.tsx            | 30 +++++++++++++++++++
 5 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 app/(business)/business/job-posting/[jobPostId]/update/page.ts
 create mode 100644 src/pages/business-job-posting/ui/update-job-posting-page.tsx

diff --git a/app/(business)/business/job-posting/[jobPostId]/update/page.ts b/app/(business)/business/job-posting/[jobPostId]/update/page.ts
new file mode 100644
index 00000000..c62aed02
--- /dev/null
+++ b/app/(business)/business/job-posting/[jobPostId]/update/page.ts
@@ -0,0 +1 @@
+export { UpdateJobPostingPage as default } from 'pages/business-job-posting'
diff --git a/src/features/job-posting-form/ui/side-panel.tsx b/src/features/job-posting-form/ui/side-panel.tsx
index 09012b4d..f7379e69 100644
--- a/src/features/job-posting-form/ui/side-panel.tsx
+++ b/src/features/job-posting-form/ui/side-panel.tsx
@@ -1,6 +1,12 @@
 import { Button } from 'shared/ui'
 
-export const SidePanel = () => {
+type Props = {
+  type: 'register' | 'update'
+  onRegister?: () => void
+  onSave?: () => void
+}
+
+export const SidePanel = ({ type }: Props) => {
   return (
     <div className="h-fit w-[340px] shrink-0 rounded-2xl border border-gray-300 p-6">
       <p className="body-large mb-2 text-blue-800">
@@ -18,9 +24,11 @@ export const SidePanel = () => {
         <Button variant="primary" size="large" fullWidth>
           등록하기
         </Button>
-        <Button variant="lined" size="large" fullWidth>
-          임시 저장
-        </Button>
+        {type === 'register' && (
+          <Button variant="lined" size="large" fullWidth>
+            임시 저장
+          </Button>
+        )}
       </div>
     </div>
   )
diff --git a/src/pages/business-job-posting/index.ts b/src/pages/business-job-posting/index.ts
index 53957200..148caffa 100644
--- a/src/pages/business-job-posting/index.ts
+++ b/src/pages/business-job-posting/index.ts
@@ -1,2 +1,3 @@
 export { CreateJobPostingPage } from './ui/create-job-posting-page'
 export { BusinessJobPostingListPage } from './ui/job-posting-list-page'
+export { UpdateJobPostingPage } from './ui/update-job-posting-page'
diff --git a/src/pages/business-job-posting/ui/create-job-posting-page.tsx b/src/pages/business-job-posting/ui/create-job-posting-page.tsx
index f0244269..42b69019 100644
--- a/src/pages/business-job-posting/ui/create-job-posting-page.tsx
+++ b/src/pages/business-job-posting/ui/create-job-posting-page.tsx
@@ -18,7 +18,7 @@ export const CreateJobPostingPage = () => {
       <Form {...form} className="flex gap-[20px]">
         <JobPostingForm className="flex-grow" />
         <div className="space-y-2">
-          <SidePanel />
+          <SidePanel type="register" />
           <PreviewJobPostingButton
             type="text-button"
             className="ml-auto block"
diff --git a/src/pages/business-job-posting/ui/update-job-posting-page.tsx b/src/pages/business-job-posting/ui/update-job-posting-page.tsx
new file mode 100644
index 00000000..00fe82ef
--- /dev/null
+++ b/src/pages/business-job-posting/ui/update-job-posting-page.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { useForm } from 'react-hook-form'
+
+import { JobPostingForm, SidePanel } from 'features/job-posting-form'
+import { PreviewJobPostingButton } from 'features/preview-job-posting'
+import { Form } from 'shared/form'
+import { Layout } from 'shared/ui'
+
+export const UpdateJobPostingPage = () => {
+  const form = useForm()
+
+  return (
+    <Layout wide>
+      <h1 className="display-small mb-10 text-center font-bold text-gray-900">
+        공고 수정
+      </h1>
+      <Form {...form} className="flex gap-[20px]">
+        <JobPostingForm className="flex-grow" />
+        <div className="space-y-2">
+          <SidePanel type="update" />
+          <PreviewJobPostingButton
+            type="text-button"
+            className="ml-auto block"
+          />
+        </div>
+      </Form>
+    </Layout>
+  )
+}