From e99fc0618130f799ea7833482e90eda69dc8bfd4 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 21 Apr 2025 19:44:12 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A1=B0=EC=A7=81=EB=8F=84=20=ED=8F=BC?=
 =?UTF-8?q?=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=A1=9C=EC=A7=81=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../organization/ui/organization-form.tsx     | 239 +++++++++---------
 .../organization/ui/organization-page.tsx     |   7 +-
 2 files changed, 130 insertions(+), 116 deletions(-)

diff --git a/apps/cs/src/pages/organization/ui/organization-form.tsx b/apps/cs/src/pages/organization/ui/organization-form.tsx
index 9ff0fac22..a0ab0e4e5 100644
--- a/apps/cs/src/pages/organization/ui/organization-form.tsx
+++ b/apps/cs/src/pages/organization/ui/organization-form.tsx
@@ -71,126 +71,135 @@ function OrganizationForm({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="card">
-          <Table variant="secondary">
-            <colgroup>
-              <col width="15%" />
-              <col width="85%" />
-            </colgroup>
-            <TableBody>
-              <TableRow>
-                <TableHead>조직명</TableHead>
-                <TableCell className="border">
-                  <FormField
-                    control={form.control}
-                    name="ognzNm"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormControl>
-                          <Input
-                            {...field}
-                            value={field.value ?? ""}
-                            className="!text-[1.3rem]"
-                            placeholder="조직명을 입력해주세요"
-                          />
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHead>조직설명</TableHead>
-                <TableCell className="border">
-                  <FormField
-                    control={form.control}
-                    name="ognzExpln"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormControl>
-                          <Input
-                            {...field}
-                            value={field.value ?? ""}
-                            className="!text-[1.3rem]"
-                            placeholder="조직설명을 입력해주세요"
-                          />
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHead>정렬순서</TableHead>
-                <TableCell className="border">
-                  <FormField
-                    control={form.control}
-                    name="sortSeq"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormControl>
-                          <Input
-                            {...field}
-                            type="number"
-                            value={field.value ?? 0}
-                            onChange={(e) =>
-                              field.onChange(Number(e.target.value))
-                            }
-                            className="!text-[1.3rem]"
-                            placeholder="정렬순서를 입력해주세요"
-                          />
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableHead>사용여부</TableHead>
-                <TableCell className="border">
-                  <FormField
-                    control={form.control}
-                    name="useYn"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormControl>
-                          <RadioGroup
-                            {...field}
-                            name="useYn"
-                            value={field.value ?? ""}
-                            onValueChange={field.onChange}
-                          >
-                            <div className="flex items-center space-x-2">
-                              <RadioGroupItem value="Y" id="useY" />
-                              <Label htmlFor="useY">사용</Label>
-                            </div>
-                            <div className="flex items-center space-x-2">
-                              <RadioGroupItem value="N" id="useN" />
-                              <Label htmlFor="useN">사용안함</Label>
-                            </div>
-                          </RadioGroup>
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
+        <div className="card card-border">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">
+              {isModifyMode ? "조직도 수정" : "조직도 등록"}
+            </h3>
+          </div>
+          <div className="card">
+            <Table variant="secondary">
+              <colgroup>
+                <col width="15%" />
+                <col width="85%" />
+              </colgroup>
+              <TableBody>
+                <TableRow>
+                  <TableHead>조직명</TableHead>
+                  <TableCell className="border">
+                    <FormField
+                      control={form.control}
+                      name="ognzNm"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              value={field.value ?? ""}
+                              className="!text-[1.3rem]"
+                              placeholder="조직명을 입력해주세요"
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead>조직설명</TableHead>
+                  <TableCell className="border">
+                    <FormField
+                      control={form.control}
+                      name="ognzExpln"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              value={field.value ?? ""}
+                              className="!text-[1.3rem]"
+                              placeholder="조직설명을 입력해주세요"
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead>정렬순서</TableHead>
+                  <TableCell className="border">
+                    <FormField
+                      control={form.control}
+                      name="sortSeq"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              type="number"
+                              value={field.value ?? 0}
+                              onChange={(e) =>
+                                field.onChange(Number(e.target.value))
+                              }
+                              className="!text-[1.3rem]"
+                              placeholder="정렬순서를 입력해주세요"
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead>사용여부</TableHead>
+                  <TableCell className="border">
+                    <FormField
+                      control={form.control}
+                      name="useYn"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <RadioGroup
+                              {...field}
+                              name="useYn"
+                              value={field.value ?? ""}
+                              onValueChange={field.onChange}
+                            >
+                              <div className="flex items-center space-x-2">
+                                <RadioGroupItem value="Y" id="useY" />
+                                <Label htmlFor="useY">사용</Label>
+                              </div>
+                              <div className="flex items-center space-x-2">
+                                <RadioGroupItem value="N" id="useN" />
+                                <Label htmlFor="useN">사용안함</Label>
+                              </div>
+                            </RadioGroup>
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
         </div>
         <div className="flex justify-center gap-4 pb-12 pt-10">
           <Button size="lg" type="submit">
             저장
           </Button>
-          <Button
-            size="lg"
-            color="red"
-            type="button"
-            onClick={onDelete}
-            disabled={!isModifyMode}
-          >
-            삭제
-          </Button>
+          {isModifyMode && (
+            <Button
+              size="lg"
+              color="red"
+              type="button"
+              onClick={onDelete}
+              disabled={!isModifyMode}
+            >
+              삭제
+            </Button>
+          )}
         </div>
       </form>
     </Form>
diff --git a/apps/cs/src/pages/organization/ui/organization-page.tsx b/apps/cs/src/pages/organization/ui/organization-page.tsx
index d2a6d8128..96fe6da61 100644
--- a/apps/cs/src/pages/organization/ui/organization-page.tsx
+++ b/apps/cs/src/pages/organization/ui/organization-page.tsx
@@ -101,7 +101,12 @@ function OrganizationPage() {
       sortSeq: 1,
       useYn: "Y",
     },
-    values: organizationInfo,
+    values: {
+      ognzNm: organizationInfo?.ognzNm ?? "",
+      ognzExpln: organizationInfo?.ognzExpln ?? "",
+      sortSeq: organizationInfo?.sortSeq ?? 1,
+      useYn: organizationInfo?.useYn ?? "Y",
+    },
   });
 
   const additionalNodeForm = useForm<OrganizationFormData>({