From c39da5d9d53994f762dc15ed5f42589fe380425a Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 30 May 2025 18:40:14 +0900
Subject: [PATCH] =?UTF-8?q?WIP:=20=EC=84=A4=EB=AC=B8=20=EB=B3=B4=EA=B8=B0?=
 =?UTF-8?q?=20=EC=9E=91=EC=97=85=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../survey-article/[srvySn]/page.tsx          |   2 +
 apps/cs/src/entities/code/ui/code-select.tsx  |   5 +-
 apps/cs/src/pages/survey/index.ts             |   1 +
 .../survey/model/survey-table-columns.tsx     |  39 +++++-
 .../cs/src/pages/survey/ui/survey-article.tsx | 130 ++++++++++++++++++
 5 files changed, 173 insertions(+), 4 deletions(-)
 create mode 100644 apps/cs/app/(without-base-layout)/survey-article/[srvySn]/page.tsx
 create mode 100644 apps/cs/src/pages/survey/ui/survey-article.tsx

diff --git a/apps/cs/app/(without-base-layout)/survey-article/[srvySn]/page.tsx b/apps/cs/app/(without-base-layout)/survey-article/[srvySn]/page.tsx
new file mode 100644
index 000000000..a99cf686c
--- /dev/null
+++ b/apps/cs/app/(without-base-layout)/survey-article/[srvySn]/page.tsx
@@ -0,0 +1,2 @@
+import { SurveyArticle } from "@/pages/survey";
+export default SurveyArticle;
diff --git a/apps/cs/src/entities/code/ui/code-select.tsx b/apps/cs/src/entities/code/ui/code-select.tsx
index 441f334e3..850282375 100644
--- a/apps/cs/src/entities/code/ui/code-select.tsx
+++ b/apps/cs/src/entities/code/ui/code-select.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import {
+  cn,
   Select,
   SelectContent,
   SelectItem,
@@ -12,12 +13,14 @@ import { CodeApi } from "../api/code-service";
 type CodeSelectProps = {
   upCd: string;
   placeholder?: string;
+  className?: string;
 } & React.ComponentPropsWithoutRef<typeof Select>;
 
 function CodeSelect({
   upCd,
   defaultValue,
   placeholder = "선택",
+  className,
   ...props
 }: CodeSelectProps) {
   const { data: code } = useQuery({
@@ -31,7 +34,7 @@ function CodeSelect({
 
   return (
     <Select {...props}>
-      <SelectTrigger className="w-[12rem]">
+      <SelectTrigger className={cn("w-[12rem]", className)}>
         <SelectValue placeholder={defaultValueText} />
       </SelectTrigger>
       <SelectContent>
diff --git a/apps/cs/src/pages/survey/index.ts b/apps/cs/src/pages/survey/index.ts
index f0be08eac..92d7c71d0 100644
--- a/apps/cs/src/pages/survey/index.ts
+++ b/apps/cs/src/pages/survey/index.ts
@@ -2,3 +2,4 @@ export { SurveyPage } from "./ui/survey-page";
 export { CreatePage } from "./ui/create-page";
 export { DetailPage } from "./ui/detail-page";
 export { ModifyPage } from "./ui/modify-page";
+export { SurveyArticle } from "./ui/survey-article";
diff --git a/apps/cs/src/pages/survey/model/survey-table-columns.tsx b/apps/cs/src/pages/survey/model/survey-table-columns.tsx
index 39707d622..14710edf2 100644
--- a/apps/cs/src/pages/survey/model/survey-table-columns.tsx
+++ b/apps/cs/src/pages/survey/model/survey-table-columns.tsx
@@ -1,5 +1,5 @@
 import type { ColumnDef } from "@tanstack/react-table";
-import { Checkbox } from "@common/components";
+import { Button, Checkbox } from "@common/components";
 import type { Survey } from "./survey-interface";
 
 export const columns: ColumnDef<Survey>[] = [
@@ -46,15 +46,48 @@ export const columns: ColumnDef<Survey>[] = [
   {
     accessorKey: "srvyTrgtNm",
     header: "설문대상",
+    meta: {
+      width: 120,
+    },
   },
   {
     id: "preview",
     header: "설문 보기",
-    cell: () => {},
+    cell: ({ row }) => (
+      <Button
+        size="sm"
+        color="white"
+        onClick={(e) => {
+          e.stopPropagation();
+
+          const width = 767;
+          const height = 900;
+          const left = window.screen.width / 2 - width / 2 + window.screenX;
+          const top = window.screen.height / 2 - height / 2 + window.screenY;
+          window.open(
+            `/survey-article/${row.original.srvySn}`,
+            "",
+            `width=${width},height=${height},left=${left},top=${top}`,
+          );
+        }}
+      >
+        설문 보기
+      </Button>
+    ),
+    meta: {
+      width: 100,
+    },
   },
   {
     id: "result",
     header: "설문 결과",
-    cell: () => {},
+    cell: () => (
+      <Button size="sm" color="gray">
+        설문 결과
+      </Button>
+    ),
+    meta: {
+      width: 100,
+    },
   },
 ];
diff --git a/apps/cs/src/pages/survey/ui/survey-article.tsx b/apps/cs/src/pages/survey/ui/survey-article.tsx
new file mode 100644
index 000000000..99bcb22ae
--- /dev/null
+++ b/apps/cs/src/pages/survey/ui/survey-article.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { CodeSelect } from "@/entities/code";
+import {
+  Button,
+  Checkbox,
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+} from "@common/components";
+
+function SurveyArticle() {
+  return (
+    <div className="h-screen bg-[#f1f6f9]">
+      <div className="card card-border">
+        <div className="card-header">
+          <h1 className="text-2xl font-bold text-foreground">설문 제목</h1>
+          <div className="flex gap-2">
+            <Button>제출</Button>
+            <Button color="white">닫기</Button>
+          </div>
+        </div>
+        <div className="card">
+          <div>
+            <h2 className="text-[1.3rem] font-bold text-foreground">
+              설문 참여자 정보
+            </h2>
+            <div className="my-4 flex gap-4">
+              <div className="flex flex-1 flex-col gap-2">
+                <span>응답자명</span>
+                <Input
+                  className="text-[1.3rem]"
+                  placeholder="이름을 입력해주세요"
+                />
+              </div>
+              <div className="flex flex-1 flex-col gap-2">
+                <span>직업</span>
+                <CodeSelect upCd="" className="w-full" />
+              </div>
+              <div className="flex flex-1 flex-col gap-2">
+                <span>생년월일</span>
+                <Input type="date" className="text-[1.3rem]" />
+              </div>
+              <div className="flex flex-1 flex-col gap-2">
+                <span>성별</span>
+                <RadioGroup name="gndrCd" className="h-[3.2rem]">
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="M" id="M" />
+                    <Label htmlFor="M">남자</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="F" id="F" />
+                    <Label htmlFor="F">여자</Label>
+                  </div>
+                </RadioGroup>
+              </div>
+            </div>
+          </div>
+          <hr className="my-8" />
+          <div className="h-[8rem] overflow-auto rounded-sm bg-accent p-4">
+            답변 설명
+          </div>
+          <div className="mt-10 flex flex-col gap-10">
+            <div className="flex items-start gap-4">
+              <span className="flex size-8 items-center justify-center rounded-full bg-primary text-[1.3rem] font-medium text-primary-foreground">
+                1
+              </span>
+              <RadioArticle />
+            </div>
+            <div className="flex items-start gap-4">
+              <span className="flex size-8 items-center justify-center rounded-full bg-primary text-[1.3rem] font-medium text-primary-foreground">
+                2
+              </span>
+              <CheckboxArticle />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function RadioArticle() {
+  return (
+    <div>
+      <p className="mb-4 text-2xl font-bold text-foreground">질문 1</p>
+      <RadioGroup name="name">
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="1" id="r1" />
+            <Label htmlFor="r1" className="!text-[1.4rem]">
+              답변1
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="2" id="r2" />
+            <Label htmlFor="r2" className="!text-[1.4rem]">
+              답변2
+            </Label>
+          </div>
+        </div>
+      </RadioGroup>
+    </div>
+  );
+}
+
+function CheckboxArticle() {
+  return (
+    <div>
+      <p className="mb-4 text-2xl font-bold text-foreground">질문 2</p>
+      <div className="flex flex-col gap-3">
+        <div className="flex h-[1.8rem] items-center gap-2">
+          <Checkbox id="chk1" />
+          <Label htmlFor="chk1" className="!text-[1.4rem]">
+            답변1
+          </Label>
+        </div>
+        <div className="flex h-[1.8rem] items-center gap-2">
+          <Checkbox id="chk2" />
+          <Label htmlFor="chk2" className="!text-[1.4rem]">
+            답변2
+          </Label>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { SurveyArticle };