WIP: 설문 보기 작업중

apps/cs/app/(without-base-layout)/survey-article/[srvySn]/page.tsx

@@ -0,0 +1,2 @@
+import { SurveyArticle } from "@/pages/survey";
+export default SurveyArticle;

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>

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";

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,
+    },
   },
 ];

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 };