feat: 기업상세정보 ui구현

src/app/globals.css

@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
 .loadingSpinner {
   width: 40px;
   height: 40px;
@@ -42,3 +47,10 @@
   src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
     format("woff");
 }
+
+.list-style {
+  list-style-type: square;
+  padding-inline-start: 1.5em;
+  list-style-position: inside;
+  line-height: 24px;
+}

src/app/login/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="lg:max-w-2000 flex h-screen w-full min-w-400 shrink-0 flex-col items-center justify-center bg-gradient-to-b from-green-100 via-green-50 to-white px-4 py-8 md:px-12 lg:px-16">
+    <div className="lg:max-w-2000 flex size-full min-w-400 shrink-0 flex-col items-center justify-center bg-gradient-to-b from-green-100 via-green-50 to-white px-4 py-8 md:px-12 lg:px-16">
       {children}
     </div>
   );

src/app/main/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="lg:max-w-2000 flex h-screen flex-col px-4 py-8 pt-30 md:px-12 lg:px-32">
+    <div className="lg:max-w-2000 px-4 py-8 pt-30 md:px-12 lg:px-32">
       {children}
     </div>
   );

src/app/members/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="lg:max-w-2000 flex h-screen w-full min-w-400 shrink-0 flex-col items-center justify-center bg-gradient-to-b from-green-100 via-green-50 to-white px-4 py-8 md:px-12 lg:px-16">
+    <div className="lg:max-w-2000 flex size-full min-w-400 shrink-0 flex-col items-center justify-center bg-gradient-to-b from-green-100 via-green-50 to-white px-4 py-8 md:px-12 lg:px-16">
       {children}
     </div>
   );

src/app/my-account/layout.tsx

@@ -10,9 +10,5 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return (
-    <div className="lg:max-w-2000 flex h-screen flex-col bg-[#F5F6F8]">
-      {children}
-    </div>
-  );
+  return <div className="lg:max-w-2000 h-full bg-[#F5F6F8]">{children}</div>;
 }

src/app/portfolio/layout.tsx

@@ -10,9 +10,5 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return (
-    <div className="lg:max-w-2000 flex h-screen flex-col bg-[#F5F6F8]">
-      {children}
-    </div>
-  );
+  return <div className="lg:max-w-2000 h-full bg-[#F5F6F8]">{children}</div>;
 }

src/app/search/[id]/_components/detail-info/company-overview/consensus.tsx

@@ -0,0 +1,29 @@
+export default function Consensus() {
+  return (
+    <div className="w-full">
+      <div className="mb-10 text-16-500">컨센서스</div>
+      <div className="flex w-full justify-between gap-8 text-center text-14-500 text-gray-100">
+        <div className="flex-1">
+          <div className="mb-6 h-9 w-full bg-green-900" />
+          <span>적극 매도</span>
+        </div>
+        <div className="flex-1">
+          <div className="mb-6 h-9 w-full bg-green-900" />
+          <span>매도</span>
+        </div>
+        <div className="flex-1">
+          <div className="mb-6 h-9 w-full bg-green-900" />
+          <span>중립</span>
+        </div>
+        <div className="flex-1">
+          <div className="mb-6 h-9 w-full bg-green-900" />
+          <span>매수</span>
+        </div>
+        <div className="flex-1">
+          <div className="mb-6 h-9 w-full bg-green-900" />
+          <span>적극 매수</span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/search/[id]/_components/detail-info/company-overview/financial-statements.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+type FinancialRatio = {
+  stockAccountingYearMonth: string;
+  grossMarginRatio: number;
+  businessProfitRate: number;
+  netInterestRate: number;
+  roeValue: number;
+  earningsPerShare: number;
+  salesPerShare: number;
+  bookValuePerShare: number;
+  reserveRate: number;
+  liabilityRate: number;
+};
+
+type NumberKeys = {
+  [K in keyof FinancialRatio]: FinancialRatio[K] extends number ? K : never;
+}[keyof FinancialRatio];
+
+type FinancialMetric = {
+  label: string;
+  key: NumberKeys;
+  isPercentage?: boolean;
+};
+
+const FINANCIAL_METRICS: FinancialMetric[] = [
+  { label: "총마진율", key: "grossMarginRatio", isPercentage: true },
+  { label: "사업 수익률", key: "businessProfitRate", isPercentage: true },
+  { label: "순이자율", key: "netInterestRate", isPercentage: true },
+  { label: "ROE", key: "roeValue", isPercentage: true },
+  { label: "EPS(주당순이익)", key: "earningsPerShare" },
+  { label: "SPS(주당매출액)", key: "salesPerShare" },
+  { label: "BPS(주당순자산)", key: "bookValuePerShare" },
+  { label: "주식유보율", key: "reserveRate", isPercentage: true },
+  { label: "부채율", key: "liabilityRate", isPercentage: true },
+];
+
+const formatValue = (value: number | null, isPercentage?: boolean) => {
+  if (value === null) return "-";
+  const formattedNumber = value.toLocaleString();
+  return isPercentage ? `${formattedNumber}%` : formattedNumber;
+};
+
+function TableHeader({ years }: { years: string[] }) {
+  return (
+    <thead className="border-y border-solid border-gray-100 bg-green-100">
+      <tr className="h-45">
+        <th
+          rowSpan={2}
+          className="border-r border-solid border-gray-100 text-16-500"
+        >
+          주요재무정보
+        </th>
+        <th colSpan={years.length} className="text-16-500">
+          연간
+        </th>
+      </tr>
+      <tr className="h-45 border-t border-solid border-gray-100">
+        {years.map((year) => (
+          <th
+            key={year}
+            className="border-x border-solid border-gray-100 text-16-500 last:border-r-0"
+          >
+            {year}
+          </th>
+        ))}
+      </tr>
+    </thead>
+  );
+}
+
+function TableRow({
+  label,
+  values,
+  isPercentage,
+}: {
+  label: string;
+  values: (number | null)[];
+  isPercentage?: boolean;
+}) {
+  return (
+    <tr className="h-45 border-y border-solid border-gray-100">
+      <th className="border-r border-solid border-gray-100 text-16-500">
+        {label}
+      </th>
+      {values.map((value, index) => (
+        <td
+          // eslint-disable-next-line react/no-array-index-key
+          key={index}
+          className="border-r border-solid border-gray-100 last:border-r-0"
+        >
+          {formatValue(value, isPercentage)}
+        </td>
+      ))}
+    </tr>
+  );
+}
+
+function NoDataMessage() {
+  return (
+    <div className="w-full p-8 text-center text-gray-500">
+      데이터가 없습니다.
+    </div>
+  );
+}
+
+interface FinancialStatementsProps {
+  data?: FinancialRatio[];
+}
+
+export default function FinancialStatements({
+  data,
+}: FinancialStatementsProps) {
+  if (!data || data.length === 0) {
+    return <NoDataMessage />;
+  }
+
+  const years = data.map((item) => item.stockAccountingYearMonth);
+
+  return (
+    <table className="mb-20 w-full">
+      <caption className="mb-10 text-left text-16-500">재무비율</caption>
+      <TableHeader years={years} />
+      <tbody className="text-center">
+        {FINANCIAL_METRICS.map((metric) => (
+          <TableRow
+            key={metric.key}
+            label={metric.label}
+            values={data.map((item) =>
+              item[metric.key] !== undefined ? Number(item[metric.key]) : null,
+            )}
+            isPercentage={metric.isPercentage}
+          />
+        ))}
+      </tbody>
+    </table>
+  );
+}

src/app/search/[id]/_components/detail-info/company-overview/index.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import Consensus from "./consensus";
+import FinancialStatements from "./financial-statements";
+import TargetPrice from "./target-price";
+
+export default function CompanyOverview() {
+  return (
+    <div>
+      <div className="mb-10 flex justify-between">
+        <div className="text-16-500">기업정보</div>
+        <span className="text-14-500 text-gray-100">[기준: 2024. 08. 16]</span>
+      </div>
+      <ul className="list-style mb-24 border-y-2 border-solid border-gray-100 py-14 text-14-500">
+        <li>한국 및 DX 부문 해외 9개</li>
+        <li>한국 및 DX 부문 해외 9개</li>
+        <li>한국 및 DX 부문 해외 9개</li>
+      </ul>
+
+      <FinancialStatements />
+      <Consensus />
+      <TargetPrice />
+      <div className="text-14-500 text-gray-100">
+        전 세계 1200개 리서치 회사의 정보를 종합적으로 분석합니다. <br />
+        기준 2024.08.29 . 레피니티브 제공
+      </div>
+    </div>
+  );
+}

src/app/search/[id]/_components/detail-info/company-overview/target-price.tsx

@@ -0,0 +1,17 @@
+export default function TargetPrice() {
+  return (
+    <div>
+      <div className="mt-13 text-16-500">목표주가</div>
+      <div className="flex justify-between">
+        <div className="text-20-700">43.90</div>
+        <div className="text-12-400">
+          <div>목표가범위</div>
+          <div>26.00~60.00</div>
+          <div className="mt-5 h-6 w-260 rounded-2 bg-green-500">
+            <span className="inline-block size-16 rounded-full bg-lime-300" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/search/[id]/_components/detail-info/index.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/common/tabs";
+
+import CompanyOverview from "./company-overview";
+import RelativeNews from "./relative-news";
+
+export default function DetailInfo() {
+  return (
+    <div className="mt-16 rounded-10 bg-white p-30">
+      <h3 className="mb-25 text-20-700">상세 정보</h3>
+      <Tabs defaultValue="company-overview">
+        <TabsList>
+          <TabsTrigger value="company-overview">기업 개요</TabsTrigger>
+          <TabsTrigger value="relative-news">관련 뉴스</TabsTrigger>
+        </TabsList>
+        <TabsContent value="company-overview">
+          <CompanyOverview />
+        </TabsContent>
+        <TabsContent value="relative-news">
+          <RelativeNews />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/app/search/[id]/_components/detail-info/relative-news/index.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+export default function RelativeNews() {
+  return (
+    <table className="border-y border-solid border-gray-100">
+      <caption className="text-left">관련뉴스</caption>
+      <thead>
+        <tr className="bg-green-100">
+          <th>제목</th>
+          <th>정보 제공</th>
+          <th>날짜</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr className="border-y border-solid border-gray-100">
+          <td>
+            코스피, 외국인 &quot;바이 코리아&quot;에 2680 선 마감.. LG 에너지
+            솔루
+          </td>
+          <td>머니 투데이</td>
+          <td>2024.09.02 </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

src/app/search/[id]/layout.tsx

@@ -10,9 +10,5 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return (
-    <div className="lg:max-w-2000 flex h-screen flex-col bg-[#F5F6F8]">
-      {children}
-    </div>
-  );
+  return <div className="lg:max-w-2000 bg-[#F5F6F8]">{children}</div>;
 }

src/app/search/[id]/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 
 import CandlestickChartContainer from "./_components/candle-chart-container";
+import DetailInfo from "./_components/detail-info";
 import OrderStock from "./_components/order-stock";
 import StockHeader from "./_components/stock-header";
 import TutorialContainer from "./_components/tutorial/tutorial-container";
@@ -74,6 +75,7 @@ export default async function StockPage({
 
           <OrderStock stockName={stockName} stockInfo={initialData.stockData} />
         </div>
+        <DetailInfo />
       </div>
     );
   } catch (error) {

src/app/search/layout.tsx

@@ -10,5 +10,5 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return <div className="lg:max-w-2000 flex h-screen flex-col">{children}</div>;
+  return <div className="lg:max-w-2000 flex flex-col">{children}</div>;
 }

src/components/nav-bar/_components/nav-menu.tsx

@@ -105,7 +105,7 @@ export default function NavMenu() {
   };
 
   return (
-    <menu className="fixed left-0 top-0 z-[999] flex h-screen w-82 flex-col items-center border-r bg-white py-20">
+    <menu className="fixed left-0 top-0 z-[999] flex h-full w-82 flex-col items-center border-r bg-white py-20">
       <LogoIcon />
       <div className="mt-30 flex flex-col items-center space-y-45">
         {NAV_ITEMS.map((item) => (