Init commit

2025-10-13 12:10:16 +00:00 · 2025-10-13 12:10:16 +00:00 · e528263edc
commit e528263edc
41 changed files with 4535 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is currently not compatible with SWC. See [this issue](https://github.com/vitejs/vite-plugin-react/issues/428) for tracking the progress.
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>hansot-clone</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,34 @@
+{
+  "name": "hansot-clone",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "sass": "^1.93.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/node": "^24.6.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react-swc": "^4.1.0",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "globals": "^16.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "npm:rolldown-vite@7.1.14"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.1.14"
+  }
+}
--- a/public/btn_link.png
+++ b/public/btn_link.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icon_cont_more.png
+++ b/public/icon_cont_more.png
--- a/src/App.scss
+++ b/src/App.scss
@ -0,0 +1,50 @@
+@use "./shared.scss" as *;
+
+.banner-image {
+  height: 650px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 60px 0px;
+  gap: 60px;
+  width: 100%;
+}
+
+.youtube-ad {
+  max-width: $content-max-width;
+  aspect-ratio: 16 / 9;
+  height: auto;
+
+  @include point-tablet {
+    width: calc(100% - 24px);
+  }
+}
+
+.wrapper1 {
+  max-width: $content-max-width;
+  display: flex;
+  justify-content: space-between;
+  gap: 28px;
+  >* {
+    flex: 1 0 0;
+  }
+  @include point-phone {
+    flex-direction: column;
+  }
+  @include point-tablet {
+    margin: 0 12px;
+  }
+}
+
+footer {
+  height: 190px;
+  width: 100%;
+  background-color: $brand-color;
+  margin-bottom: -100px;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,66 @@
+import "./App.scss";
+import TopMenu from "./TopMenu";
+import "./index.css";
+
+import BannerImage1 from "./assets/banner1.jpg";
+import PhilosophyBanner from "./PhilosophyBanner";
+import IngredientBanner from "./IngredientBanner";
+import SmallBanner from "./SmallBanner";
+
+import MenuBannerImage from "./assets/main_img_01.jpg";
+import ShopBannerImage from "./assets/main_img_02.jpg";
+import OwnerBanner from "./OwnerBanner";
+import MoreInfo from "./MoreInfo";
+
+function App() {
+  return (
+    <>
+      <TopMenu />
+
+      <div
+        className="banner-image"
+        style={{
+          backgroundImage: `url(${BannerImage1})`,
+        }}
+      ></div>
+
+      <article className="content">
+        <iframe
+          className="youtube-ad"
+          width="100%"
+          height="100%"
+          src="https://www.youtube.com/embed/c6bPiFPfeZI?rel=0"
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerPolicy="strict-origin-when-cross-origin"
+          allowFullScreen
+        />
+        <div className="wrapper1">
+          <SmallBanner
+            image={MenuBannerImage}
+            title={["가격 이상의 가치가 담긴 ", "다양한 메뉴를 확인해 보세요"]}
+            linkText="한솥 메뉴"
+          />
+          <SmallBanner
+            image={ShopBannerImage}
+            title={[
+              "갓 지은 한끼가 기다리고 있는 ",
+              "가까운 한솥 매장을 찾아보세요",
+            ]}
+            linkText="주변점포찾기"
+          />
+        </div>
+        <OwnerBanner />
+        <PhilosophyBanner />
+        <IngredientBanner />
+        <MoreInfo />
+        <footer>
+          바닥글을 넣기: 그런데 이미지 너무 많고 오래걸려 placeholder 로 대체
+        </footer>
+      </article>
+    </>
+  );
+}
+
+export default App;
--- a/src/IngredientBanner.scss
+++ b/src/IngredientBanner.scss
@ -0,0 +1,64 @@
+@use "./shared.scss" as *;
+
+.ingredient-banner {
+  text-decoration: none;
+  width: 100%;
+  max-width: $content-max-width;
+  height: 450px;
+  position: relative;
+  display: flex;
+  justify-content: end;
+  @include point-tablet {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: auto;
+    z-index: -1;
+    @include point-tablet {
+      height: auto;
+      width: 100%;
+      position: static;
+    }
+  }
+
+  .widget {
+    height: 100%;
+    width: 400px;
+    z-index: 1;
+    position: relative;
+    border-bottom: 6px solid #373737;
+    @include point-tablet {
+      width: 100%;
+      height: auto;
+    }
+    @include text-widget(
+      $title-color: #373737,
+      $content-color: #333,
+      $background-color: #eeecec,
+      $padding: 43px 22px 0 26px,
+    );
+    &::after {
+      top: 100%;
+      visibility: hidden;
+      @include line-animation;
+    }
+    .link {
+      margin-bottom: 22px;
+      @include link-icon;
+    }
+  }
+  
+  &:hover .widget .link {
+    @include link-icon-hover;
+  }
+  &:hover .widget::after {
+    width: 100%;
+    visibility: visible;
+  }
+}
--- a/src/IngredientBanner.tsx
+++ b/src/IngredientBanner.tsx
@ -0,0 +1,29 @@
+import "./IngredientBanner.scss";
+import IngredientBannerImage from "./assets/main_img_05.jpg";
+
+export default function IngredientBanner(): React.ReactElement {
+  return (
+    <a className="ingredient-banner" href="#">
+      <img className="background-image" src={IngredientBannerImage} />
+      <div className="widget">
+        <p className="title">
+          식재료 앞에서는
+          <br />
+          한없이
+          <br />
+          까탈스럽습니다
+        </p>
+        <p className="text-content">
+          맑고 깨끗한 자연 환경속에서 재배된 식재료가
+          <br />
+          아니면 한솥이 될 수 없습니다.
+          <br />
+          모든 식재료는 고객분들이 안심하고 드실 수 있도록
+          <br />
+          엄격한 기준 아래 선별됩니다.
+        </p>
+        <p className="link">Why 한솥 가맹점</p>
+      </div>
+    </a>
+  );
+}
--- a/src/MoreInfo.scss
+++ b/src/MoreInfo.scss
@ -0,0 +1,78 @@
+@use "./shared.scss" as *;
+
+.more-container {
+  height: fit-content;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  @include point-tablet {
+    display: none;
+  }
+
+  .more-list {
+    display: flex;
+    margin-top: 60px;
+    gap: 24px;
+  }
+
+  .title {
+    font-weight: 800;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    p {
+      font-size: 1.5rem;
+      color: #373737;
+    }
+    .line {
+      content: '';
+      flex: 1 0 0;
+      background-color: #373737;
+      height: 16px;
+      margin-left: 38px;
+    }
+  }
+  
+  .card {
+    flex: 1 0 0;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    height: fit-content;
+    .card-image {
+      height: auto;
+      width: 100%;
+    }
+    .card-title {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      color: #fff;
+      background-color: #373737;
+      padding: 22px 20px 20px 30px;
+      font-weight: bold;
+      font-size: 0.98rem;
+      &::after {
+        content: '';
+        position: absolute;
+        right: 20px;
+        top: 28px;
+        width: 6px;
+        height: 10px;
+        background: url(/icon_cont_more.png) left top no-repeat;
+        background-size: 12px 10px;
+        display: inline-block;
+        background-position: 0px 0px;
+      }
+      transition: color 300ms ease 0s;
+    }
+    &:hover .card-title {
+      &::after {
+        background-position: -6px 0px;
+      }
+      color: $brand-color;
+    }
+  }
+}
--- a/src/MoreInfo.tsx
+++ b/src/MoreInfo.tsx
@ -0,0 +1,30 @@
+import "./MoreInfo.scss";
+
+import Image1 from "./assets/more_hansot.jpg";
+import Image2 from "./assets/more_event.jpg";
+import Image3 from "./assets/more_news.jpg";
+
+export default function MoreInfo(): React.ReactElement {
+  return (
+    <div className="more-container">
+      <div className="title">
+        <p>더 많은 이야기</p>
+        <div className="line"></div>
+      </div>
+      <div className="more-list">
+        <a className="card" href="#">
+          <img src={Image1} alt="" className="card-image" />
+          <div className="card-title">한솥의 약속</div>
+        </a>
+        <a className="card" href="#">
+          <img src={Image2} alt="" className="card-image" />
+          <div className="card-title">온라인 이벤트</div>
+        </a>
+        <a className="card" href="#">
+          <img src={Image3} alt="" className="card-image" />
+          <div className="card-title">한솥 NEWS</div>
+        </a>
+      </div>
+    </div>
+  );
+}
--- a/src/OwnerBanner.scss
+++ b/src/OwnerBanner.scss
@ -0,0 +1,53 @@
+@use "./shared.scss" as *;
+
+.owner-wrapper {
+  display: flex;
+  max-width: $content-max-width;
+  width: 100%;
+  gap: 28px;
+  > *:not(.title-widget-outter) {
+    flex: 1 0 0;
+  }
+  @include point-tablet {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    .title-widget-outter {
+      grid-column: 1 / span 2;
+    }
+    padding: 0 42px;
+    transition: padding 420ms ease 0s;
+  }
+  @include point-phone {
+    display: flex;
+    flex-direction: column;
+    > *:not(.title-widget-outter) {
+      margin: 0 12px;
+    }
+    .title-widget-outter {
+      margin-bottom: -30px;
+    }
+  }
+
+  .title-widget-outter {
+    position: relative;
+    &::after {
+      position: absolute;
+      content: '';
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background-color: $brand-color;
+      @include point-phone {
+        height: calc(100% + 100px);
+      }
+    }
+    .title-widget {
+      @include text-widget(
+        $title-color: #333,
+        $content-color: #333,
+        $background-color: transparent,
+      )
+    }
+  }
+}
--- a/src/OwnerBanner.tsx
+++ b/src/OwnerBanner.tsx
@ -0,0 +1,44 @@
+import "./OwnerBanner.scss";
+import SmallBanner from "./SmallBanner";
+
+import Image1 from "./assets/main_img_03.jpg";
+import Image2 from "./assets/main_img_04.jpg";
+
+export default function OwnerBanner(): React.ReactElement {
+  return (
+    <div className="owner-wrapper">
+      <div className="title-widget-outter">
+        <div className="title-widget">
+          <p className="title">
+            든든한 솥밥을 위해
+            <br />
+            한솥이 지키고,
+            <br />
+            키워가는 것들
+          </p>
+          <p className="text-content">
+            점주님들의 꿈을 실현시켜 드리기 위해
+            <br />
+            가맹점주와 성공까지 동행하는 한솥!
+            <br />
+            상담부터 개업까지 모든 희로애락을 함께 합니다.
+          </p>
+        </div>
+      </div>
+      <SmallBanner
+        image={Image1}
+        title={[
+          "한솥은 언제나 고객과 ",
+          "점주님들의 이익을 먼저 ",
+          "생각합니다",
+        ]}
+        linkText="Why 한솥 가맹점"
+      />
+      <SmallBanner
+        image={Image2}
+        title={["한솥과 함께하는 ", "가맹점주들의 성공 ", "스토리입니다"]}
+        linkText="성공수기"
+      />
+    </div>
+  );
+}
--- a/src/PhilosophyBanner.scss
+++ b/src/PhilosophyBanner.scss
@ -0,0 +1,46 @@
+@use "./shared.scss" as *;
+
+.wide-image-banner {
+  width: 100%;
+  height: 600px;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  // 배경
+  .background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    transition: all 900ms ease 0s;
+    z-index: -1;
+  }
+
+  .widget-container {
+    max-width: $content-max-width;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    .text-widget {
+      width: 370px;
+      @include point-tablet {
+        width: 100%;
+        margin: 40px 20px;
+        transition: width 420ms ease 0s;
+      }
+      @include text-widget;
+    }
+  }
+
+  &:hover {
+    .background-image {
+      transform: scale(1.05);
+    }
+  }
+}
--- a/src/PhilosophyBanner.tsx
+++ b/src/PhilosophyBanner.tsx
@ -0,0 +1,36 @@
+import "./PhilosophyBanner.scss";
+import PhilosophyBannerImage from "./assets/main_visual_02.jpg";
+
+export default function PhilosophyBanner(): React.ReactElement {
+  return (
+    <div className="wide-image-banner">
+      <div
+        className="background-image"
+        style={{ backgroundImage: `url(${PhilosophyBannerImage})` }}
+      ></div>
+      <div className="widget-container">
+        <div className="text-widget">
+          <p className="title">
+            든든한 솥밥을 위해
+            <br />
+            한솥이 지키고,
+            <br />
+            키워가는 것들
+          </p>
+          <p className="text-content">
+            한솥은 '따끈한 도시락으로 지역사회에 공헌한다' 라는
+            <br />
+            기업이념 아래, 고객 이익을 최우선으로 하며 엄선된
+            <br />
+            좋은 식재료만 사용하는 대한민국 외식종합기업 시장을
+            <br />
+            리드하는 글로벌 종합외식기업 입니다.
+          </p>
+          <a href="#none" className="button">
+            브랜드 철학
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/SmallBanner.scss
+++ b/src/SmallBanner.scss
@ -0,0 +1,39 @@
+@use "./shared.scss" as *;
+
+.small-banner {
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+
+  .image {
+    width: 100%;
+    height: auto;
+  }
+
+  .widget {
+    flex: 1 0 0;
+    position: relative;
+    border-bottom: 6px solid #373737;
+    @include text-widget(
+      $background-color: #eeecec,
+      $padding: 25px 25px 0 25px,
+    );
+    &::after {
+      top: 100%;
+      visibility: hidden;
+      @include line-animation;
+    }
+    .link {
+      margin-bottom: 22px;
+      @include link-icon;
+    }
+  }
+  
+  &:hover .widget .link {
+      @include link-icon-hover;
+  }
+  &:hover .widget::after {
+    width: 100%;
+    visibility: visible;
+  }
+}
--- a/src/SmallBanner.tsx
+++ b/src/SmallBanner.tsx
@ -0,0 +1,31 @@
+import { useMemo } from "react";
+import "./SmallBanner.scss";
+
+export default function SmallBanner(props: {
+  image: string;
+  title: string[];
+  linkText: string;
+  url?: string;
+}): React.ReactElement {
+  const title = useMemo(() => {
+    let title: React.ReactElement[] = [];
+
+    for (const text of props.title) {
+      title.push(<>{text}</>);
+      title.push(<br />);
+    }
+    title.pop();
+
+    return title;
+  }, props.title);
+
+  return (
+    <a className="small-banner" href={props.url ?? "#"}>
+      <img className="image" src={props.image} />
+      <div className="widget">
+        <p className="sub-title">{...title}</p>
+        <p className="link">{props.linkText}</p>
+      </div>
+    </a>
+  );
+}
--- a/src/TopMenu.scss
+++ b/src/TopMenu.scss
@ -0,0 +1,135 @@
+@use "./shared.scss" as *;
+
+$sub-list-height: 350px;
+
+.outter {
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+
+.container {
+  margin-top: 24px;
+  background-color: white;
+  max-width: $content-max-width;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 90px;
+  align-items: center;
+  position: relative;
+
+  // 로고
+  .logo {
+    height: 46px;
+    width: auto;
+    margin-left: 30px;
+    .logo-icon {
+      height: 46px;
+      width: auto;
+    }
+  }
+
+  // 리스트
+  .list {
+    display: flex;
+    height: 100%;
+    margin-right: 12px;
+  }
+
+  // 서브리스트 배경
+  .sub-background {
+    background-color: #f6f5f5;
+    opacity: 0;
+    height: 0px;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    transition: all 250ms ease 0s;
+  }
+}
+
+// 리스트 아이템
+.list-item {
+  position: relative;
+  font-size: 1rem;
+  height: 100%;
+  .list-link {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    font-weight: bold;
+    color: #333;
+    text-decoration: none;
+    padding: 0 30px;
+    position: relative;
+    height: 100%;
+    &::after {
+      @include line-animation;
+    }
+  }
+
+  // 오버레이 서브리스트
+  .sub-list {
+    padding: 40px 0 0 0;
+    overflow: hidden;
+    height: 0px;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    .sub-item {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      padding: 12px 0;
+      text-decoration: none;
+      .sub-text {
+        position: relative;
+        line-height: 120%;
+        font-weight: 300;
+        color: #373737;
+        text-align: center;
+        &::after {
+          visibility: hidden;
+          content: '';
+          position: absolute;
+          top: 100%;
+          left: 0;
+          height: 1px;
+          width: 100%;
+          background-color: #373737;
+        }
+      }
+      &:hover .sub-text {
+        font-weight: normal;
+        &::after {
+          visibility: visible;
+        }
+      }
+    }
+  }
+}
+
+// 리스트 아이템 호버링
+.list-link:hover,
+.list-item:has(.sub-list .sub-item:hover) .list-link {
+  color: $brand-color;
+  &::after {
+    width: calc(100% - 60px);
+  }
+}
+
+// 서브리스트 오픈
+.container:has(:is(.list-item:hover, .list-item:has(.sub-list:hover))) {
+  .sub-background {
+    opacity: .95;
+    height: $sub-list-height;
+  }
+  .sub-list {
+    height: $sub-list-height;
+  }
+}
--- a/src/TopMenu.tsx
+++ b/src/TopMenu.tsx
@ -0,0 +1,189 @@
+import "./TopMenu.scss";
+import HansotImage from "./assets/h1_logo.png";
+import { useMemo } from "react";
+
+type MenuItem = { name: string; url: string };
+type Menu = (MenuItem & { children: MenuItem[] })[];
+
+const menus: Menu = [
+  {
+    name: "BRAND",
+    url: "#none",
+    children: [
+      {
+        name: "브랜드 스토리",
+        url: "#none",
+      },
+      {
+        name: "브랜드 철학",
+        url: "#none",
+      },
+      {
+        name: "브랜드 유산",
+        url: "#none",
+      },
+    ],
+  },
+  {
+    name: "ESG",
+    url: "#none",
+    children: [
+      {
+        name: "한솥ESG경영",
+        url: "#none",
+      },
+      {
+        name: "세계 40대 브랜드 선정",
+        url: "#none",
+      },
+    ],
+  },
+  {
+    name: "MENU",
+    url: "#none",
+    children: [
+      {
+        name: "전체메뉴",
+        url: "#none",
+      },
+      {
+        name: "식재료 이야기",
+        url: "#none",
+      },
+      {
+        name: "페루찬차마요커피",
+        url: "#none",
+      },
+      {
+        name: "단체주문",
+        url: "#none",
+      },
+    ],
+  },
+  {
+    name: "STORE",
+    url: "#none",
+    children: [
+      {
+        name: "주변점포찾기",
+        url: "#none",
+      },
+    ],
+  },
+  {
+    name: "EVENT",
+    url: "#none",
+    children: [
+      {
+        name: "이 달의 이벤트",
+        url: "#none",
+      },
+      {
+        name: "신규점 오픈이벤트",
+        url: "#none",
+      },
+    ],
+  },
+  {
+    name: "FRANCHISE",
+    url: "#none",
+    children: [
+      {
+        name: "한솥 창업",
+        url: "#none",
+      },
+    ],
+  },
+  {
+    name: "HANSOT",
+    url: "#none",
+    children: [
+      {
+        name: "한솥의 약속",
+        url: "#none",
+      },
+      {
+        name: "한솥의 비전",
+        url: "#none",
+      },
+      {
+        name: "연혁&수상",
+        url: "#none",
+      },
+      {
+        name: "한솥 NEWS",
+        url: "#none",
+      },
+      {
+        name: "오시는 길",
+        url: "#none",
+      },
+      {
+        name: "고객센터",
+        url: "#none",
+      },
+    ],
+  },
+  {
+    name: "RECRUIT",
+    url: "#none",
+    children: [
+      {
+        name: "조직문화",
+        url: "#none",
+      },
+      {
+        name: "인사제도",
+        url: "#none",
+      },
+      {
+        name: "채용정보",
+        url: "#none",
+      },
+      {
+        name: "직무소개",
+        url: "#none",
+      },
+      {
+        name: "입사지원",
+        url: "#none",
+      },
+    ],
+  },
+];
+
+export default function TopMenu(): React.ReactElement {
+  const menuObject = useMemo(
+    () => (
+      <>
+        {...menus.map((menu) => (
+          <div className="list-item">
+            <a className="list-link" href={menu.url}>
+              <p className="list-text">{menu.name}</p>
+            </a>
+            <div className="sub-list">
+              {...menu.children.map((submenu) => (
+                <a className="sub-item" href={submenu.url}>
+                  <p className="sub-text">{submenu.name}</p>
+                </a>
+              ))}
+            </div>
+          </div>
+        ))}
+      </>
+    ),
+    menus
+  );
+
+  return (
+    <div className="outter">
+      <header className="top-menu container">
+        <div className="sub-background"></div>
+        <a className="logo" href="#">
+          <img className="logo-icon" src={HansotImage} alt="한솥" />
+        </a>
+        <div className="list">{menuObject}</div>
+      </header>
+    </div>
+  );
+}
--- a/src/assets/banner1.jpg
+++ b/src/assets/banner1.jpg
--- a/src/assets/h1_logo.png
+++ b/src/assets/h1_logo.png
--- a/src/assets/main_img_01.jpg
+++ b/src/assets/main_img_01.jpg
--- a/src/assets/main_img_02.jpg
+++ b/src/assets/main_img_02.jpg
--- a/src/assets/main_img_03.jpg
+++ b/src/assets/main_img_03.jpg
--- a/src/assets/main_img_04.jpg
+++ b/src/assets/main_img_04.jpg
--- a/src/assets/main_img_05.jpg
+++ b/src/assets/main_img_05.jpg
--- a/src/assets/main_visual_02.jpg
+++ b/src/assets/main_visual_02.jpg
--- a/src/assets/more_event.jpg
+++ b/src/assets/more_event.jpg
--- a/src/assets/more_hansot.jpg
+++ b/src/assets/more_hansot.jpg
--- a/src/assets/more_news.jpg
+++ b/src/assets/more_news.jpg
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,20 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+body, p {
+  margin: 0;
+  font-size: 15px;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
--- a/src/shared.scss
+++ b/src/shared.scss
@ -0,0 +1,129 @@
+$brand-color: #f6ca00;
+$text-color: #333;
+
+$content-max-width: 1170px;
+
+@mixin line-animation {
+  transition: opacity 0.2s, width 0.3s;
+  background-color: $brand-color;
+  width: 0;
+  content: '';
+  height: 6px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  width: 0;
+  display: block;
+  margin: 0 auto;
+}
+
+@mixin point-tablet {
+  @media (max-width: 768px) {
+    @content;
+  }
+}
+
+@mixin point-phone {
+  @media (max-width: 414px) {
+    @content;
+  }
+}
+
+@mixin text-widget(
+  $title-color: #fff,
+  $content-color: #dad8d8,
+  $button-active: #373737,
+  $background-color: rgba(55, 55, 55, .9),
+  $padding: 80px 25px 60px 25px,
+) {
+  padding: $padding;
+  background-color: $background-color;
+  display: flex;
+  flex-direction: column;
+  .title {
+    color: $title-color;
+    font-size: 2.25rem;
+    font-weight: bold;
+    @include point-tablet {
+      font-size: 1.72rem;
+    }
+  }
+  .sub-title {
+    font-size: 1.16rem;
+    @include point-tablet {
+      font-size: 1.09rem;
+    }
+    line-height: 140%;
+    font-weight: bold;
+    height: 80px;
+    color: #373737;
+    flex: 1 0 0;
+    @include point-tablet {
+      br {
+        display: none
+      }
+    }
+  }
+  .text-content {
+    flex-grow: 1;
+    color: $content-color;
+    margin-top: 35px;
+    line-height: 190%;
+    @include point-tablet {
+      margin-top: 16px;
+    }
+    &::before {
+      content: '';
+      display: block;
+      width: 40px;
+      height: 4px;
+      background-color: $title-color;
+      margin-bottom: 17px;
+      @include point-tablet {
+        margin-bottom: 10px;
+      }
+    }
+  }
+  .button {
+    border: 2px solid $title-color;
+    color: $title-color;
+    text-decoration: none;
+    box-sizing: border-box;
+    transition-duration: 0.3s;
+    padding: 15px 0;
+    min-height: 50px;
+    font-weight: bold;
+    text-align: center;
+    &:hover {
+      background-color: $title-color;
+      color: $button-active;
+    }
+  }
+}
+
+@mixin link-icon {
+  font-size: 0.9rem;
+  line-height: 20px;
+  display: flex;
+  gap: 8px;
+  color: #373737;
+  margin-top: 16px;
+  font-weight: bold;
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-image: url("/btn_link.png");
+    background-size: cover;
+    background-position: 0%;
+    transition: all 200ms ease 0s;
+  }
+}
+@mixin link-icon-hover {
+  &::before {
+    background-position: 100%;
+  }
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  assetsInclude: ["**/*.jpg", "**/*.png", "**/*.ico"],
+  server: {
+    allowedHosts: ["dev.code.qwreey.moe"],
+  },
+});