login box

src/App.tsx

@@ -5,6 +5,7 @@ import { Footer } from './Footer';
 import { GalleryContent } from './Gallery';
 import { GalleryTitleHeader } from './GalleryTitleHeader';
 import { GlobalNavigationBar, Header, VisitHistory } from './Header';
+import { LoginBox } from './Sidebar';
 import { GalleryTable, TableRowData } from './table';
 
 
@@ -205,11 +206,18 @@ function App() {
             <CommentPagination currentPage={1} maxPage={2} />
             <CommentInput />
             <PostListControls owner />
-            <div style={{
-              width: "840px",
-            }}>
-              <GalleryTable data={tableData} />
-              <PostListControls />
+            <div className='flex justify-between'>
+              <div style={{
+                width: "840px",
+              }}>
+                <GalleryTable data={tableData} />
+                <PostListControls />
+              </div>
+              <div style={{
+                width: "300px",
+              }}>
+                <LoginBox />
+              </div>
             </div>
           </section>
         </main>

src/Sidebar.tsx

@@ -0,0 +1,41 @@
+
+export function LoginBox() {
+    return (
+        <div className="bg-white relative mb-4 border border-blue-primary">
+            <div className="h-[43px] leading-[44px] text-sm text-blue-primary px-[18px]">
+                <strong className="inline-block max-w-[153px] pr-0.5 align-top
+                text-custom-blue-dark
+                truncate whitespace-nowrap cursor-pointer overflow-hidden">
+                    로그인해 주세요.
+                </strong>
+            </div>
+            
+            <div className="bg-[#f3f3f3] h-9 leading-9 text-center px-[18px] whitespace-nowrap 
+            flex justify-center 
+            *:not-first:before:content-['|'] 
+            *:not-first:before:text-[11px]
+            *:not-first:before:p-[0_10px_0_13px]
+            *:not-first:before:text-[#ccc]
+            ">
+                <span>
+                    <a className="text-gray-800 text-[12px] font-bold">
+                        MY갤로그
+                        <em className="bg-[url('/sp_loginout.png')] bg-no-repeat"></em>
+                    </a>
+                </span>
+                <span>
+                    <a className="text-gray-800  text-[12px] font-bold">
+                        즐겨찾기
+                        <span className="absolute overflow-hidden invisible m-[-1px] w-0 top-[-9999px] text-[0px]">리스트 보기</span>
+                    </a>
+                </span>
+                <span>
+                    <a className="text-gray-800 text-[12px] font-bold">
+                        <em className="bg-[url('/sp_loginout.png')] bg-no-repeat inline-block w-[14px] h-[14px] mr-1.5 align-[-3px] bg-[0px_-27px]"></em>
+                        알림
+                    </a>
+                </span>
+            </div>
+        </div>
+    )
+}