[✨] 프로젝트 구조 설정 및 Tailwind 설정 확립

Front.csproj

@@ -15,10 +15,6 @@
 
     <ItemGroup>
       <AdditionalFiles Include="Program\Layout\MainLayout.razor" />
-      <AdditionalFiles Include="Program\Layout\NavMenu.razor" />
-      <AdditionalFiles Include="Program\Views\Counter.razor" />
-      <AdditionalFiles Include="Program\Views\Home.razor" />
-      <AdditionalFiles Include="Program\Views\Weather.razor" />
     </ItemGroup>
 
     <ItemGroup>
@@ -32,7 +28,10 @@
     <ItemGroup>
       <Folder Include="Program\Models\" />
       <Folder Include="Program\ViewModels\" />
-      <Folder Include="Program\Views\" />
+      <Folder Include="Program\Views\Academy\" />
+      <Folder Include="wwwroot\css\components\base\" />
+      <Folder Include="wwwroot\css\components\layout\" />
+      <Folder Include="wwwroot\css\components\reusable\" />
     </ItemGroup>
 
 

Program/Layout/MainLayout.razor

@@ -1,11 +1,19 @@
 @inherits LayoutComponentBase
 
-<div class="min-h-screen bg-gray-50 text-gray-900">
-    <header class="bg-purple-600 text-white p-4 shadow">
-        <h1 class="text-xl font-bold">AcaMate</h1>
-    </header>
 
-    <main class="p-6">
-        @Body
-    </main>
+<div class="min-h-screen bg-gray-50 text-gray-900">
+    <TopBanner />
+    <TopNav />
+
+    <div class="flex flex-1">
+        <SideNav />
+
+        <main class="flex-1 p-6">
+            @Body
+        </main>
+    </div>
+    
+    <FloatingButton />
+    <BottomNav />
+    <Footer/>
 </div>

Program/Views/Project/About.razor

@@ -0,0 +1,2 @@
+@page "/about"
+<h3>About</h3>

Program/Views/Project/About.razor.cs

@@ -0,0 +1,7 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Front.Program.Views.Company;
+
+public partial class About : ComponentBase
+{
+}

Program/Views/Project/TopBanner.razor

@@ -0,0 +1,20 @@
+@* <div class="flex items-center p-4 bg-second-darker shadow"> *@
+@*     $1$ 이동하는 거 말고 그냥 일반 텍스트 넣을거야 #1# *@
+@*     <img src="/logo.png" alt="Icon" class="w-8 h-8 mr-0 absolute left-4 top-1/2 transform -translate-y-1/2"> *@
+@*     <h3 class="flex-1 text-center text-normal-normal pl-12">일반 텍스트 작성</h3> *@
+@* </div> *@
+
+<div class="relative bg-second-darker shadow p-4 flex items-center justify-center">
+  
+    <!-- 왼쪽 아이콘 -->
+    <div class="absolute left-4 flex items-center">
+        <img src="/logo.png" alt="Icon" class="w-8 h-8">
+    </div>
+
+    <!-- 가운데 텍스트 -->
+    <h3 class="text-normal-normal text-center">긴급 공지 안내문입니다.</h3>
+
+    <!-- 오른쪽 가짜 공간 (아이콘 크기만큼) -->
+    <div class="absolute right-4 w-8 h-8"></div>
+
+</div>

Program/Views/Project/TopBanner.razor.cs

@@ -0,0 +1,7 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Front.Program.Views.Project;
+
+public partial class TopBanner : ComponentBase
+{
+}

Program/Views/Project/TopNav.razor

@@ -0,0 +1,6 @@
+<div class="flex justify-end items-center p-4 bg-white shadow">
+    <a href="#about" class="mx-2 text-gray-700 hover:text-blue-600">About</a>
+    <a href="#join" class="mx-2 text-gray-700 hover:text-blue-600">Join</a>
+    <a href="#notice" class="mx-2 text-gray-700 hover:text-blue-600">What’s New</a>
+    <a href="#login" class="ml-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Login</a>
+</div>

Program/Views/Project/TopNav.razor.cs

@@ -0,0 +1,7 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Front.Program.Views.Company;
+
+public partial class TopNav : ComponentBase
+{
+}

_Imports.razor

@@ -8,3 +8,8 @@
 @using Microsoft.JSInterop
 @using Front
 @using Front.Program.Layout
+
+@using Front.Program.Views.Project
+@* @using Front.Program.Views.Academy *@
+
+

tailwind.config.js

@@ -4,7 +4,63 @@ module.exports = {
     "./wwwroot/index.html"
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        disable: {
+            light: '#F8F8F8',
+            normal: '#B8B9B4',
+            dark: '#8A8B87',
+            darker: '#40413F'
+        },
+        information: {
+            light: '#F7FBF8',
+            normal: '#B2DBBB',
+            dark: '#86A48C',
+            darker: '#3E4D41'
+        },
+        point: {
+            light: '#F9FBFF',
+            normal: '#C2D6FA',
+            dark: '#92A1BC',
+            darker: '#444B58'
+        },
+        second: {
+            light: '#F2F0ED',
+            normal: '#79654E',
+            dark: '#5D4C3B',
+            darker: '#2A231B'
+        },
+        normal: {
+            light: '#FDFCFB',
+            normal: '#EBDFD2',
+            dark: '#B0A79E',
+            darker: '#524E4A'
+        },
+        danger: {
+            light: '#FFF9F9',
+            normal: '#FDC6C3',
+            dark: '#BE9592',
+            darker: '#594544'
+        },
+        text: {
+            title: '#1D1D1D',
+            detail: '#545454',
+            disabled: '#8E8E8E',
+            white: '#FFFFFF',
+            black: '#000000',
+            border: '#C6C6C6'
+        }
+      },
+      fontFamily: {},
+      screens: {
+        'xs': '400px',
+        'sm': '640px',
+        'md': '768px',
+        'lg': '1024px',
+        'xl': '1280px',
+        '2xl': '1536px'
+      }
+    },
   },
   plugins: [],
 }

wwwroot/css/app.css

@@ -2,25 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-/* 색상 변수 정의 */
-:root {
-    --disable-light: #F8F8F8;
-    --disable-normal: #B8B9B4;
-    --disable-dark: #8A8B87;
-    --disable-darker: #40413F;
-
-    --point-light: #F9FBFF;
-    --point-normal: #C2D6FA;
-    --point-dark: #92A1BC;
-    --point-darker: #444B58;
-
-    --text-title: #1D1D1D;
-    --text-detail: #545454;
-    --text-disabled: #8E8E8E;
-    --text-white: #FFFFFF;
-    --text-black: #000000;
-    --text-border: #C6C6C6;
-}
+/*@import './components/';*/
 
 /* 클리핑 애니메이션 (왼쪽부터 점점 보임) */
 @keyframes clipReveal {
@@ -58,49 +40,3 @@
     mask-repeat: no-repeat;
     mask-position: center;
 }
-
-:root {
-    /* Disable */
-    --disable-light: #F8F8F8;
-    --disable-normal: #B8B9B4;
-    --disable-dark: #8A8B87;
-    --disable-darker: #40413F;
-
-    /* Information */
-    --information-light: #F7FBF8;
-    --information-normal: #B2DBBB;
-    --information-dark: #86A48C;
-    --information-darker: #3E4D41;
-
-    /* Point */
-    --point-light: #F9FBFF;
-    --point-normal: #C2D6FA;
-    --point-dark: #92A1BC;
-    --point-darker: #444B58;
-
-    /* Second */
-    --second-light: #F2F0ED;
-    --second-normal: #79654E;
-    --second-dark: #5D4C3B;
-    --second-darker: #2A231B;
-
-    /* Normal */
-    --normal-light: #FDFCFB;
-    --normal-normal: #EBDFD2;
-    --normal-dark: #B0A79E;
-    --normal-darker: #524E4A;
-
-    /* Danger */
-    --danger-light: #FFF9F9;
-    --danger-normal: #FDC6C3;
-    --danger-dark: #BE9592;
-    --danger-darker: #594544;
-
-    /* 湲고<E6B9B2> <20>띿뒪<EB9DBF><EB92AA> 諛<> <20>곹깭 */
-    --text-title: #1D1D1D;
-    --text-detail: #545454;
-    --text-disabled: #8E8E8E;
-    --text-white: #FFFFFF;
-    --text-black: #000000;
-    --text-border: #C6C6C6;
-}