Merge pull request #50 from DevKor-github/feat/#32/home-page

홈페이지 지금까지 구현한거 일단 머지

Author: halionaz

src/common/components/MainTopBar/index.tsx

@@ -0,0 +1,23 @@
+import { Link } from 'react-router';
+import * as s from './style.css';
+
+import RepickaTitle from '@/libs/assets/RepickaTitle';
+
+const MainTopBar = () => {
+  return (
+    <div className={s.Wrapper}>
+      <Link className={s.Title} to={'/'}>
+        {/* TODO: 실제 로고 넣기 ! */}
+        <div className={s.Logo} />
+        <RepickaTitle />
+      </Link>
+      <div className={s.Menu}>
+        {/* TODO: 링크 연결하기 */}
+        <button className="mgc_search_2_fill" />
+        <button className="mgc_chat_3_fill" />
+        <button className="mgc_notification_fill" />
+      </div>
+    </div>
+  );
+};
+export default MainTopBar;

src/common/components/MainTopBar/style.css.ts

@@ -0,0 +1,35 @@
+import { css } from '@styled-system/css';
+
+export const Wrapper = css({
+  w: 'full',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0.875rem 1.25rem 0.875rem 1rem',
+});
+
+export const Title = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.45rem',
+  color: '100',
+});
+
+export const Logo = css({
+  width: '1.5rem',
+  height: '1.5rem',
+  bgColor: '100',
+  rounded: '3.2px',
+});
+
+export const Menu = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  gap: '0.75rem',
+  fontSize: '1.5rem',
+  color: 'systemGray',
+  '& button': {
+    cursor: 'pointer',
+  },
+});

src/common/components/Navigator/index.tsx

@@ -1,5 +1,6 @@
 import { Link, useLocation } from 'react-router';
 import * as s from './style.css';
+import { NAVIGATOR_HEIGHT_PX } from '@/libs/constants/sizes';
 
 const MENU_LIST = [
   {
@@ -33,7 +34,7 @@ const Navigator = () => {
   const { pathname } = useLocation();
 
   return (
-    <nav className={s.Container}>
+    <nav className={s.Container} style={{ height: `${NAVIGATOR_HEIGHT_PX}px` }}>
       {MENU_LIST.map(({ label, path, selectedClassName, unSelectedClassName }) => {
         const selected = pathname === path;
         return (

src/common/components/Navigator/style.css.ts

@@ -27,7 +27,7 @@ export const Menu = cva({
     flexShrink: 0,
     textAlign: 'center',
     fontSize: '0.875rem',
-    lineHeight: 'normal',
+    lineHeight: 1.2,
     letterSpacing: '-0.0175rem',
     cursor: 'pointer',
     '& p': {

src/common/components/TestAPIButton/index.tsx

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react';
+
+import * as s from './style.css';
+
+const Token = ({ children }: PropsWithChildren) => {
+  return <span className={s.Container}>{children}</span>;
+};
+export default Token;

src/common/components/TestAPIButton/style.css.ts

@@ -0,0 +1,11 @@
+import { css } from '@styled-system/css';
+
+export const Container = css({
+  padding: '0.1875rem 0.3125rem',
+  borderRadius: '4px',
+  bgColor: 'main-26',
+  color: 'main',
+  fontSize: '0.625rem',
+  fontWeight: 500,
+  letterSpacing: '-0.025rem',
+});

src/common/components/Token/index.tsx

@@ -0,0 +1,49 @@
+import { PRODUCT_TYPES_MAP, type PostInterface } from '@/libs/types/post';
+
+import * as s from './style.css';
+
+import Token from '@/common/components/Token';
+
+interface Props {
+  data: PostInterface;
+}
+const PostCard = ({ data }: Props) => {
+  return (
+    <div className={s.Container}>
+      <img className={s.Image} src={data.thumbnail} aria-hidden />
+      <div className={s.Info}>
+        <div className={s.Header}>
+          <h2 className={s.Title}>{data.title}</h2>
+          <div className={s.Price}>
+            <div className={s.PriceItem}>
+              <label>대여료</label>
+              <p>{data.price.toLocaleString()}원</p>
+            </div>
+            <div className={s.PriceItem}>
+              <label>보증금</label>
+              <p>{data.price.toLocaleString()}원</p>
+            </div>
+          </div>
+        </div>
+        <div className={s.Footer}>
+          <div className={s.Tokens}>
+            {data.productTypes.map((type, index) => (
+              <Token key={`${type}-${index}`}>{PRODUCT_TYPES_MAP[type]}</Token>
+            ))}
+          </div>
+          <div className={s.Interactions}>
+            <div className={s.InteractionItem}>
+              <span className="mgc_heart_fill" />
+              <p>{data.likeCount}</p>
+            </div>
+            <div className={s.InteractionItem}>
+              <span className="mgc_chat_2_fill" />
+              <p>{data.chatRoomCount}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default PostCard;

src/common/components/Token/style.css.ts

@@ -0,0 +1,99 @@
+import { css } from '@styled-system/css';
+
+export const Container = css({
+  w: 'full',
+  h: '6.25rem',
+  display: 'flex',
+  alignItems: 'stretch',
+  gap: '1rem',
+});
+
+export const Image = css({
+  w: '6.25rem',
+  h: '6.25rem',
+  borderRadius: '12.5px',
+  objectFit: 'cover',
+});
+
+export const Info = css({
+  flex: '1 0 0',
+  display: 'flex',
+  flexDir: 'column',
+  justifyContent: 'space-between',
+  padding: '0.25rem 0',
+});
+
+export const Header = css({
+  display: 'flex',
+  flexDir: 'column',
+  gap: '0.25rem',
+});
+
+export const Title = css({
+  color: '100',
+  fontSize: '1rem',
+  fontWeight: 500,
+  lineHeight: 1.2,
+  letterSpacing: '-0.04rem',
+});
+
+export const Price = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.875rem',
+  height: '1.5625rem',
+});
+
+export const PriceItem = css({
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: '0.25rem',
+  '& label': {
+    color: '54',
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    lineHeight: 1.4,
+    letterSpacing: '-0.035rem',
+  },
+  '& p': {
+    color: '100',
+    fontSize: '1rem',
+    fontWeight: 600,
+    lineHeight: 1.4,
+    letterSpacing: '-0.04rem',
+  },
+});
+
+export const Footer = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+export const Tokens = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.25rem',
+});
+
+export const Interactions = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.875rem',
+});
+
+export const InteractionItem = css({
+  display: 'flex',
+  alignItems: 'flex-end',
+  gap: '0.1875rem',
+  color: '54',
+  '& span': {
+    fontSize: '1rem',
+  },
+  '& p': {
+    fontSize: '0.75rem',
+    fontWeight: 400,
+    letterSpacing: '-0.03rem',
+    lineHeight: 1.2,
+  },
+});