diff --git a/README.md b/README.md
deleted file mode 100644
index 78e192f..0000000
--- a/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# WishWith-back
\ No newline at end of file
diff --git a/__pycache__/database.cpython-312.pyc b/__pycache__/database.cpython-312.pyc
new file mode 100644
index 0000000..51f044b
Binary files /dev/null and b/__pycache__/database.cpython-312.pyc differ
diff --git a/__pycache__/database.cpython-37.pyc b/__pycache__/database.cpython-37.pyc
new file mode 100644
index 0000000..ef4ead7
Binary files /dev/null and b/__pycache__/database.cpython-37.pyc differ
diff --git a/app/crawl.py b/app/crawl.py
new file mode 100644
index 0000000..7df837e
--- /dev/null
+++ b/app/crawl.py
@@ -0,0 +1 @@
+#이 파일은 예시고, 이런 식으로 app 파일 밑에 python backend 코드 파일을 기능별로 추가하면 된다.
\ No newline at end of file
diff --git a/application.py b/application.py
new file mode 100644
index 0000000..4ef5b9f
--- /dev/null
+++ b/application.py
@@ -0,0 +1,96 @@
+from flask import Flask, render_template , request, url_for, request, redirect , flash, session
+from database import DBhandler 
+import hashlib
+import sys
+
+app = Flask(__name__)
+app.config["SECRET_KEY"]="helloosp"
+DB = DBhandler()
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/mypage')
+def mypage():
+    return render_template('mypage.html')
+@app.route('/login')
+def login():
+    return render_template('login.html')
+
+
+
+
+
+@app.route("/product-add") 
+def productAdd():
+    return render_template('product_add.html')
+
+
+@app.route("/add-product-post", methods=["POST"])
+def registerproduct():
+    data = {
+        "product_description": request.form.get("product-description"),
+        "product_place": request.form.get("product-place"),
+        "product_number": request.form.get("product-number"),
+        "product_category": request.form.get("product-category"),
+        "start_date": request.form.get("start-date"),
+        "end_date": request.form.get("end-date")
+    }
+    DB.insert_item(data['product_category'], data)
+    return render_template("products_list.html", data=data)
+
+
+
+
+
+@app.route("/product-detail")
+def productDetail():
+    return render_template('product_detail.html')
+
+@app.route("/products-list")
+def productsList():
+    return render_template('products_list.html')
+
+@app.route("/review-add") 
+def reviewAdd():
+    return render_template('review_add.html')
+
+@app.route("/review-detail")
+def reviewDetail():
+    return render_template('review_detail.html')
+
+@app.route("/reviews-list")
+def reviewList():
+    return render_template('reviews_list.html')
+
+@app.route("/signup1")
+def signup1():
+    return render_template('signup1.html')
+
+@app.route("/signup2", methods=["GET", "POST"])
+def signup2():
+    if request.method == "POST":
+        return redirect(url_for('signup1'))
+    return render_template('signup2.html')
+
+
+
+@app.route("/signup1_post", methods=['POST'])
+def register_user():
+    data = request.form
+    pw = request.form['pw']
+    pw_hash = hashlib.sha256(pw.encode('utf-8')).hexdigest()
+    
+    if DB.insert_user(data, pw_hash):
+        return render_template("signup2.html")
+    else:
+        flash("user id already exist!")
+        return render_template("signup1.html")
+
+
+
+
+if __name__ == '__main__':
+    app.run('0.0.0.0', port=5000, debug=True)
\ No newline at end of file
diff --git a/authentication/firebase_auth.json b/authentication/firebase_auth.json
new file mode 100644
index 0000000..e195eda
--- /dev/null
+++ b/authentication/firebase_auth.json
@@ -0,0 +1,10 @@
+{
+    "apiKey": "AIzaSyAVqcnhvGdXBsFFGKIaLnbaj0uhKWc_j2Y",
+    "authDomain": "orang2e.firebaseapp.com",
+    "databaseURL": "https://orang2e-default-rtdb.firebaseio.com",
+    "projectId": "orang2e",
+    "storageBucket": "orang2e.appspot.com",
+    "messagingSenderId": "711343754986",
+    "appId": "1:711343754986:web:32775e00125e5ef9ca5193",
+    "measurementId": "G-60K28M0YGW"
+  }
\ No newline at end of file
diff --git a/database.py b/database.py
new file mode 100644
index 0000000..4e8f8aa
--- /dev/null
+++ b/database.py
@@ -0,0 +1,47 @@
+import pyrebase
+import json
+
+class DBhandler:
+    def __init__(self):
+        with open('./authentication/firebase_auth.json') as f:
+            config = json.load(f)
+            firebase = pyrebase.initialize_app(config)
+            self.db = firebase.database()
+
+    def insert_item(self, name, data):
+        item_info = {
+            "product_description": data['product_description'],
+            "product_place": data['product_place'],
+            "product_number": data['product_number'],
+            "product_category": data['product_category'],
+            "start_date": data['start_date'],
+            "end_date": data['end_date'],
+        }
+        self.db.child("item").child(name).set(item_info)
+        print(data)
+        return True
+
+    def insert_user(self, data, pw):
+        user_info = {
+            "id": data['id'],
+            "pw": pw,
+            "name": data['name']
+        }
+        if self.user_duplicate_check(str(data['id'])):
+            self.db.child("user").push(user_info)
+            print(data)
+            return True
+        else:
+            return False
+
+    def user_duplicate_check(self, id_string):
+        users = self.db.child("user").get()
+        print("users###", users.val())
+        if str(users.val()) == "None":  # first registration
+            return True
+        else:
+            for res in users.each():
+                value = res.val()
+                if value['id'] == id_string:
+                    return False
+            return True
diff --git a/static/css/footer.css b/static/css/footer.css
new file mode 100644
index 0000000..4005689
--- /dev/null
+++ b/static/css/footer.css
@@ -0,0 +1,22 @@
+.footer-container {
+  width: 100%;
+  height: 340px;
+  display: flex;
+  align-items: top;
+  justify-content: left;
+  position: absolute;
+  bottom: 0;
+  border-top: solid 1px black;
+  padding-top: 50px;
+  padding-left: 5%;
+  color: black; /* Or any other text color */
+  font-size: 14px; /* Adjust as necessary */
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: row;
+  gap: 10px; /* Adjust the space between items */
+}
+
+/* Add additional styling for the text as needed */
diff --git a/static/css/header.css b/static/css/header.css
new file mode 100644
index 0000000..f27f602
--- /dev/null
+++ b/static/css/header.css
@@ -0,0 +1,79 @@
+* {
+  padding: 0;
+  margin: 0;
+  border: none;
+  box-sizing: border-box;
+}
+
+.header {
+  display: flex;
+  width: 100%;
+  height: 173px;
+  position: relative;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem; /* 여백 */
+}
+
+#logo {
+  flex-grow: 1; /* 로고 이미지가 더 큰 공간을 차지하도록 함 */
+  display: flex;
+  position: absolute;
+  left: 5%;
+}
+.nav {
+  width: 100%;
+  height: 80px;
+  display: flex;
+  position: absolute;
+
+  left: 5%;
+  bottom: 0;
+}
+
+.nav a {
+  text-decoration: none;
+  color: black;
+  margin: 0 1rem; /* 링크 사이의 간격 */
+  font-family: "Pretendard-SemiBold", sans-serif;
+  font-size: 1rem; /* 글자 크기 */
+}
+
+#login-btn,
+#reg-btn,
+#wish-btn,
+#mypage-btn {
+  padding: 0.5rem 1rem; /* 버튼 내부 여백 */
+  border-radius: 5px; /* 버튼 모서리 둥글기 */
+  font-family: "Pretendard-Bold", sans-serif;
+  font-size: 0.875rem; /* 글자 크기 */
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#login-btn,
+#reg-btn {
+  background-color: #f5f5f5; /* 배경색 */
+  color: #5bab93; /* 텍스트 색상 */
+  margin-right: 1rem; /* 오른쪽 여백 */
+}
+
+#wish-btn {
+  background-color: #fffcf0; /* 배경색 */
+  color: #5bab93; /* 텍스트 색상 */
+}
+
+#mypage-btn {
+  background-color: #f5f5f5; /* 배경색 */
+  color: #5bab93; /* 텍스트 색상 */
+}
+
+.btn-box {
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  right: 5%;
+}
diff --git a/static/css/index.css b/static/css/index.css
new file mode 100644
index 0000000..a5be489
--- /dev/null
+++ b/static/css/index.css
@@ -0,0 +1,315 @@
+html {
+  position: relative;
+}
+body {
+  width: 100vw;
+  margin: 0;
+  background: white;
+}
+.text-box1,
+.text-box2,
+.text-box3,
+.text-box4 {
+  left: 50%;
+  transform: translateX(-55%);
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background: white;
+  border-radius: 20px;
+  border: 1px #e27a6c solid;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  display: inline-flex;
+  position: absolute;
+  white-space: nowrap;
+}
+.text-box1 {
+  top: 634px;
+}
+.text-box2 {
+  top: 1208px;
+}
+.text-box3 {
+  top: 1787px;
+}
+.text-box4 {
+  top: 50px;
+}
+.review-page-go {
+  top: 110px;
+  left: 50%;
+  transform: translateX(-55%);
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  white-space: nowrap;
+  font-family: Pretendard Variable;
+  font-weight: 500;
+}
+.text1-1,
+.text2-1,
+.text3-1 {
+  color: #e27a6c;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+.text1-2,
+.text2-2,
+.text3-2,
+.text4-1 {
+  color: black;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+.review-box {
+  margin: 0px;
+  width: 100%;
+  top: 2432px;
+  height: 646px;
+  background: rgb(255, 252, 240, 1);
+  position: absolute;
+}
+.footer {
+  display: flex;
+  position: fixed;
+  bottom: 0;
+}
+.card-line1,
+.card-line2,
+.card-line3,
+.card-line4 {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+}
+.card-line1 {
+  top: 706px;
+}
+.card-line2 {
+  top: 1280px;
+}
+.card-line3 {
+  top: 1860px;
+}
+.card-line4 {
+  top: 160px;
+}
+.card-container1,
+.card-container2,
+.card-container3,
+.card-container4 {
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  margin-left: 150px;
+  position: realtive;
+}
+.container {
+  display: flex;
+  position: relative;
+  width: 270px;
+  height: 432.02px;
+}
+.inner-box1 {
+  width: 268px;
+  height: 140px;
+  left: 0.16px;
+  top: 268px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  position: absolute;
+  background: white;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+.inner-box2 {
+  width: 268.02px;
+  height: 268.02px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  background: #d9d9d9;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+.inner-textbox {
+  text-align: left;
+  padding-top: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+.category {
+  padding-bottom: 5px;
+}
+.category-label {
+  color: #46a1bb;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+  text-align: left;
+}
+.store {
+  color: #00664f;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+  text-align: left;
+}
+.product-name {
+  color: black;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+  text-align: left;
+  padding-bottom: 5px;
+}
+.price {
+  color: #b9b9b9;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 400;
+  word-wrap: break-word;
+  text-align: left;
+}
+.progress {
+  text-align: left;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.progress-text {
+  padding-bottom: 4px;
+}
+.dday {
+  width: 44px;
+  height: 18px;
+  position: absolute;
+  text-align: center;
+  color: #e27a6c;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+.discount {
+  width: 33.96px;
+  height: 18.36px;
+  position: absolute;
+  text-align: right;
+  right: 20px;
+  color: #00664f;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+.progress-bar-bg {
+  width: 228px;
+  height: 12px;
+  position: absolute;
+  background: #d9d9d9;
+  border-radius: 5.97px;
+  overflow: hidden; /* 클리핑 추가 */
+}
+.progress-bar {
+  height: 100%; /* 높이 100%로 설정 */
+  position: relative;
+  background: #00664f;
+  border-radius: 5.97px;
+  transition: width 0.5s ease; /* 움직임 효과 추가 */
+}
+.UIcard {
+  margin-top: 60px;
+  position: relative;
+  width: 270px;
+  height: 388.98px;
+  padding: 0;
+  margin: 0;
+}
+.card.bottom {
+  width: 268px;
+  height: 145.98px;
+  left: 0.16px;
+  top: 268px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  position: absolute;
+  background: white;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+#name {
+  color: #00664f;
+  font-family: Pretendard Variable;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400px;
+  line-height: 18px;
+  flex-shrink: 0;
+}
+.card.top {
+  width: 268.02px;
+  height: 268.02px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  background: #d9d9d9;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+.card.textbox {
+  text-align: left;
+  padding-top: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+.review.contents {
+  color: #000;
+  font-family: Pretendard Variable;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  margin-top: 9px;
+}
+.line {
+  width: 268px;
+  height: 1px;
+  background-color: #d9d9d9;
+  padding: 0;
+  margin: 0;
+}
+.product.name {
+  color: #b9b9b9;
+  text-align: center;
+  font-family: Pretendard Variable;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  margin-top: 13px;
+}
+.heart {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  margin: 10px;
+}
diff --git a/static/css/login.css b/static/css/login.css
new file mode 100644
index 0000000..4840e67
--- /dev/null
+++ b/static/css/login.css
@@ -0,0 +1,185 @@
+@font-face {
+  font-family: "Pretendard-Regular";
+  font-weight: 400;
+  font-style: normal;
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot");
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2")
+      format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff")
+      format("woff"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.ttf")
+      format("truetype");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Pretendard-Medium";
+  font-weight: 500;
+  font-style: normal;
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot");
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff2")
+      format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff")
+      format("woff"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.ttf")
+      format("truetype");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Pretendard-Bold";
+  font-weight: 700;
+  font-style: normal;
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot");
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2")
+      format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff")
+      format("woff"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.ttf")
+      format("truetype");
+  font-display: swap;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+#ximg {
+  margin-left: 16px;
+  margin-top: 13px;
+}
+
+.textinfo {
+  margin-left: 121.5px;
+  margin-top: -9.77px;
+  width: 146px;
+  height: 64px;
+  padding: 10px;
+  text-align: center;
+  font-size: 16px;
+}
+
+.text1 {
+  font-family: "Pretendard-Regular";
+}
+
+.text2 {
+  font-family: "Pretendard-Bold";
+}
+
+#login {
+  margin-left: 29px;
+  margin-top: 138px;
+  width: 62px;
+  height: 39px;
+  padding: 10px;
+  font-size: 16px;
+  font-family: "Pretendard-Bold";
+  color: #000;
+  text-decoration: none;
+  text-align: center;
+  border-bottom-style: solid;
+  border-bottom-width: 1.5px;
+  border-bottom-color: #5bab93;
+}
+
+#signup {
+  margin-top: 138px;
+  width: 76px;
+  height: 39px;
+  padding: 10px;
+  font-size: 16px;
+  font-family: "Pretendard-Medium";
+  color: #b9b9b9;
+  text-decoration: none;
+  text-align: center;
+}
+
+#login-form > label {
+  margin-left: 28px;
+  height: 38px;
+  padding: 10px;
+  text-align: left;
+  font-size: 15px;
+  font-family: "Pretendard-Regular";
+  color: #000;
+}
+
+#login-form > label[id="id"] {
+  margin-top: 30px;
+  width: 59px;
+}
+
+#login-form > label[id="password"] {
+  width: 72px;
+}
+
+#login-form > input {
+  height: 38px;
+  padding: 10px;
+  font-size: 15px;
+  font-family: "Pretendard-Regular";
+  color: #d9d9d9;
+  background-color: #fff;
+}
+
+#login-form > input[name="id"] {
+  width: 107px;
+  margin-left: 28px;
+  margin-top: 30px;
+}
+
+#login-form > input[name="password"] {
+  width: 116px;
+  margin-left: 15px;
+  margin-top: 9px;
+}
+
+hr {
+  width: 332px;
+  height: 1.5px;
+  margin-left: 28px;
+  background-color: #5bab93;
+  border: 0;
+}
+
+.findpw {
+  display: flex;
+  flex-direction: row;
+  height: 17px;
+  padding: 10px;
+  margin-top: 18px;
+  text-align: left;
+  font-size: 14px;
+  font-family: "Pretendard-Regular";
+}
+
+#findpw1 {
+  margin-left: 27px;
+  width: 144px;
+}
+
+#findpw2 {
+  margin-left: 11px;
+  width: 77px;
+  color: #e27a6c;
+}
+
+#login-form > input[type="submit"] {
+  width: 332px;
+  height: 43px;
+  margin-left: 28px;
+  margin-top: 64px;
+  border-radius: 10px;
+  padding: 10px;
+  background-color: #5bab93;
+  color: #fff;
+  font-size: 16px;
+  font-family: "Pretendard-Regular";
+}
diff --git a/static/css/mypage.css b/static/css/mypage.css
new file mode 100644
index 0000000..e69de29
diff --git a/static/css/product_add.css b/static/css/product_add.css
new file mode 100644
index 0000000..5e4da04
--- /dev/null
+++ b/static/css/product_add.css
@@ -0,0 +1,181 @@
+.container {
+  width: 100%;
+  margin: auto;
+  border-radius: 4px;
+  background-color: #ffffff;
+}
+body {
+  margin: 0;
+  width: 100vw;
+  background-color: #ffffff;
+}
+
+.navigation {
+  width: 100%;
+  height: 100px;
+  margin-bottom: 70px;
+  display: flex;
+  position: relative;
+}
+
+.navigation .back-arrow {
+  height: 60px;
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  font-size: 24px;
+  left: 5%;
+  cursor: pointer;
+}
+
+.header {
+  color: #000;
+  margin-left: 5%;
+  margin-bottom: 40px;
+  font-family: Pretendard Variable;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.content .content-header {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #eee;
+  margin-bottom: 20px;
+}
+
+.sub-title {
+  color: #888;
+  font-size: 18px;
+}
+.navBar {
+  width: 90%;
+  height: 50px;
+  margin-left: 5%;
+  align-items: center;
+  flex: left;
+  display: flex;
+  text-align: center;
+}
+
+.navList {
+  width: 110px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navList.selected {
+  border-bottom: solid 2px #5bab93;
+}
+
+.form-section {
+  padding: 92px 5%;
+  gap: 50px;
+
+  display: flex;
+  background-color: #f5f5f5;
+  width: 100%;
+  flex-direction: column;
+}
+.form-title {
+  color: #000;
+  margin-bottom: 10px;
+
+  font-family: Pretendard Variable;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.form-description {
+  color: #000;
+
+  font-family: Pretendard Variable;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+input[type="text"] {
+  width: 312px;
+  height: 50px;
+  flex-shrink: 0;
+  border: 1px solid #b9b9b9;
+  background: #fff;
+  padding-left: 20px;
+  margin-left: 5%;
+  margin-right: 8px;
+}
+.product-info {
+  display: flex;
+  margin-bottom: 46px;
+}
+
+.image-placeholder {
+  display: flex;
+  width: 150px;
+  height: 150px;
+  background-color: grey;
+  margin-right: 20px;
+}
+
+.product-details div {
+  margin: 5px 0 15px 10px;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  height: 100%;
+  right: 5%;
+}
+
+.secondary-btn,
+.primary-btn {
+  display: flex;
+  width: 124.225px;
+  height: 32.251px;
+  padding: 2.389px 7.167px;
+  justify-content: center;
+  align-items: center;
+  gap: 23.889px;
+  flex-shrink: 0;
+  border-radius: 4.778px;
+  border: none;
+  font-family: Pretendard Variable;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.secondary-btn {
+  background-color: #f3f3f3;
+  color: #5bab93;
+  margin-right: 10px;
+}
+
+.primary-btn {
+  background-color: #5bab93;
+  color: white;
+}
+
+.register-btn {
+  width: 93px;
+  height: 43px;
+  padding: 10px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  margin-left: 20px;
+  background-color: #5bab93;
+  color: white;
+}
diff --git a/static/css/product_card.css b/static/css/product_card.css
new file mode 100644
index 0000000..e69de29
diff --git a/static/css/product_detail.css b/static/css/product_detail.css
new file mode 100644
index 0000000..80ea794
--- /dev/null
+++ b/static/css/product_detail.css
@@ -0,0 +1,265 @@
+body {
+  width: 100%;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  background-color: grey;
+  height: 173px;
+}
+
+.adBox {
+  width: 100%;
+  height: 119px;
+  background-color: #fffcf0;
+}
+
+.container {
+  display: flex;
+  width: 90%;
+  flex-direction: column;
+
+  margin: auto;
+  background-color: #ffffff;
+}
+.infoContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  margin-top: 71px;
+  position: relative;
+}
+.imgBox {
+  display: flex;
+  padding-bottom: 30%;
+  margin-right: 60px;
+  position: relative;
+  left: 0;
+  width: 30%;
+  background-color: grey;
+}
+.infoBox {
+  width: calc(70% - 60px);
+}
+
+.imgBox {
+  width: 100%; /* Adjust as necessary */
+  height: 200px; /* Adjust as necessary */
+  background-color: #f3f3f3; /* Placeholder color */
+  margin-bottom: 20px;
+}
+
+.infoBox {
+  display: flex;
+  flex-direction: column;
+  width: 80%;
+}
+
+.company {
+  display: flex;
+  color: #b9b9b9;
+  text-align: left;
+  text-align: center;
+  font-family: Pretendard Variable;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin-bottom: 11px;
+}
+.proTitle,
+.profileBox,
+.subInfo,
+.mainPrice {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.company {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.proTitle {
+  color: #000;
+
+  font-family: Pretendard Variable;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.profileBox {
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
+}
+
+.profileText {
+  display: flex;
+  width: 124.225px;
+  height: 32.251px;
+  padding: 2.389px 7.167px;
+  justify-content: center;
+  align-items: center;
+  gap: 23.889px;
+  flex-shrink: 0;
+  border-radius: 4.778px;
+  background: #f5f5f5;
+  color: #5bab93;
+  margin-right: 10px;
+
+  text-align: center;
+  font-family: Pretendard Variable;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.description {
+  color: #666;
+  color: #5bab93;
+  text-align: center;
+  font-family: Pretendard Variable;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.subInfo {
+  display: flex;
+}
+
+.subTitle {
+  width: 100px;
+  color: #b9b9b9;
+  text-align: left;
+  font-family: Pretendard Variable;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.subDate {
+  color: #000;
+  margin-right: 10px;
+
+  font-family: Pretendard Variable;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.dDay {
+  display: inline-flex;
+  padding: 5px 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 20px;
+  background: #e27a6c;
+
+  color: #fff;
+
+  text-align: center;
+  font-family: Pretendard Variable;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+.priceText {
+  color: #e27a6c;
+  text-align: center;
+  font-family: Pretendard Variable;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin-left: 5px;
+}
+.realPrice {
+  display: flex;
+  color: #888;
+  text-align: left;
+}
+
+.progressBar {
+  width: 150px;
+  height: 11px;
+  border-radius: 5.972px;
+  background: #00664f;
+}
+
+.mainPrice {
+  display: flex;
+  margin: 10px 8px 10px 5px;
+  align-items: baseline;
+}
+
+.perText {
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+.realPrice {
+  margin-left: 10px;
+  color: #666;
+}
+
+.particBtn {
+  display: flex;
+  position: absolute;
+  bottom: 20px;
+  right: 0;
+  border-radius: 10px;
+  border: none;
+  background: var(--mint, #5bab93);
+  padding: 10px 20px;
+  color: white;
+  cursor: pointer;
+  width: 332px;
+  height: 43px;
+  justify-content: center;
+  align-items: center;
+}
+
+.particBtn:hover {
+  background-color: #0056b3; /* Darker shade for hover effect */
+}
+
+footer {
+  width: 100%;
+  height: 340px;
+  background-color: #f9f9f9;
+  position: relative;
+  bottom: 0;
+}
+
+.navBar {
+  width: 100%;
+
+  height: 50px;
+  align-items: center;
+  flex: left;
+  display: flex;
+  text-align: center;
+}
+
+.navList {
+  width: 110px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navList.selected {
+  border-bottom: solid 2px #5bab93;
+}
diff --git a/static/css/products_list.css b/static/css/products_list.css
new file mode 100644
index 0000000..63fffb7
--- /dev/null
+++ b/static/css/products_list.css
@@ -0,0 +1,791 @@
+.header {
+  margin: 0px;
+  width: 100%;
+  height: 553px;
+  background: rgba(255, 252, 240, 1);
+}
+
+body {
+  width: 100vw;
+  margin: 0;
+  background: white;
+}
+
+.text-box1,
+.text-box2 {
+  top: 634px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background: white;
+  border-radius: 20px;
+  border: 1px #5bab93 solid;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  display: inline-flex;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.text-box1 {
+  margin-left: 150px;
+}
+
+.text-box2 {
+  margin-left: 250px;
+}
+
+.text1-1,
+.text2-1 {
+  color: #5bab93;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+
+.text4-1 {
+  color: black;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+
+.footer {
+  margin: 0px;
+  width: 100%;
+  top: 2875px;
+  height: 340px;
+  background: white;
+  position: absolute;
+}
+
+.card-line1,
+.card-line2,
+.card-line3,
+.card-line4 {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+}
+
+.card-line1 {
+  top: 706px;
+}
+
+.card-line2 {
+  top: 1180px;
+}
+
+.card-line3 {
+  top: 1660px;
+}
+
+.card-line4 {
+  top: 160px;
+}
+
+.card-container1,
+.card-container2,
+.card-container3,
+.card-container4 {
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  margin-left: 150px;
+  position: realtive;
+}
+
+.container {
+  display: flex;
+  position: relative;
+  width: 270px;
+  height: 432.02px;
+}
+
+.inner-box1 {
+  width: 268px;
+  height: 140px;
+  left: 0.16px;
+  top: 268px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  position: absolute;
+  background: white;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+
+.inner-box2 {
+  width: 268.02px;
+  height: 268.02px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  background: #d9d9d9;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+
+.inner-textbox {
+  text-align: left;
+  padding-top: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+
+.category {
+  padding-bottom: 5px;
+}
+
+.category-label {
+  color: #46a1bb;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+  text-align: left;
+}
+
+.store {
+  color: #00664f;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+  text-align: left;
+}
+
+.product-name {
+  color: black;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+  text-align: left;
+  padding-bottom: 5px;
+}
+
+.price {
+  color: #b9b9b9;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 400;
+  word-wrap: break-word;
+  text-align: left;
+}
+
+.progress {
+  text-align: left;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.progress-text {
+  padding-bottom: 4px;
+}
+
+.dday {
+  width: 44px;
+  height: 18px;
+  position: absolute;
+  text-align: center;
+  color: #e27a6c;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+
+.discount {
+  width: 33.96px;
+  height: 18.36px;
+  position: absolute;
+  text-align: right;
+  right: 20px;
+  color: #00664f;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+
+.progress-bar-bg {
+  width: 228px;
+  height: 12px;
+  position: absolute;
+  background: #d9d9d9;
+  border-radius: 5.97px;
+  overflow: hidden;
+  /* 클리핑 추가 */
+}
+
+.progress-bar {
+  height: 100%;
+  /* 높이 100%로 설정 */
+  position: relative;
+  background: #00664f;
+  border-radius: 5.97px;
+  transition: width 0.5s ease;
+  /* 움직임 효과 추가 */
+}
+
+.heart {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  margin: 10px;
+}
+
+.review-box {
+  margin: 0px;
+  width: 100%;
+  top: 2232px;
+  height: 646px;
+  background: rgb(255, 252, 240, 1);
+  position: absolute;
+}
+
+.review-page-go {
+  top: 110px;
+  left: 50%;
+  transform: translateX(-55%);
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  white-space: nowrap;
+  font-family: Pretendard Variable;
+  font-weight: 500;
+}
+
+.text-box4 {
+  left: 50%;
+  top: 50px;
+  transform: translateX(-55%);
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background: white;
+  border-radius: 20px;
+  border: 1px #e27a6c solid;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  display: inline-flex;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.text4-1 {
+  color: black;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+
+.UIcard {
+  margin-top: 60px;
+  position: relative;
+  width: 270px;
+  height: 388.98px;
+  padding: 0;
+  margin: 0;
+}
+
+.card.bottom {
+  width: 268px;
+  height: 145.98px;
+  left: 0.16px;
+  top: 268px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  position: absolute;
+  background: white;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+
+#name {
+  color: #00664f;
+  font-family: Pretendard Variable;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400px;
+  line-height: 18px;
+  flex-shrink: 0;
+}
+
+.card.top {
+  width: 268.02px;
+  height: 268.02px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  background: #d9d9d9;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+
+.card.textbox {
+  text-align: left;
+  padding-top: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+
+.review.contents {
+  color: #000;
+  font-family: Pretendard Variable;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  margin-top: 9px;
+}
+
+.line {
+  width: 268px;
+  height: 1px;
+  background-color: #d9d9d9;
+  padding: 0;
+  margin: 0;
+}
+
+.product.name {
+  color: #b9b9b9;
+  text-align: center;
+  font-family: Pretendard Variable;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  margin-top: 13px;
+}
+
+.pagebox {
+  top: 2130px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-55%);
+}
+
+.page {
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 35px;
+  display: inline-flex;
+}
+
+.page-now {
+  padding: 10px;
+  background: #5bab93;
+  border-radius: 10px;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.number-now {
+  text-align: center;
+  color: #fffcf0;
+  font-size: 14.33px;
+  font-family: Pretendard Variable;
+  font-weight: 700;
+  word-wrap: break-word;
+}
+
+.page-text {
+  text-align: center;
+  color: #b9b9b9;
+  font-size: 14.33px;
+  font-family: Pretendard Variable;
+  font-weight: 700;
+  word-wrap: break-word;
+}
+
+
+body {
+  width: 100vw;
+  margin: 0;
+  background: white;
+}
+.text-box1,
+.text-box2 {
+  top: 634px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background: white;
+  border-radius: 20px;
+  border: 1px #5bab93 solid;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  display: inline-flex;
+  position: absolute;
+  white-space: nowrap;
+}
+.text-box1 {
+  margin-left: 150px;
+}
+.text-box2 {
+  margin-left: 250px;
+}
+.text1-1,
+.text2-1 {
+  color: #5bab93;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+.text4-1 {
+  color: black;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+.footer {
+  margin: 0px;
+  width: 100%;
+  top: 2875px;
+  height: 340px;
+  background: white;
+  position: absolute;
+}
+.card-line1,
+.card-line2,
+.card-line3,
+.card-line4 {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+}
+.card-line1 {
+  top: 706px;
+}
+.card-line2 {
+  top: 1180px;
+}
+.card-line3 {
+  top: 1660px;
+}
+.card-line4 {
+  top: 160px;
+}
+.card-container1,
+.card-container2,
+.card-container3,
+.card-container4 {
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  margin-left: 150px;
+  position: realtive;
+}
+.container {
+  display: flex;
+  position: relative;
+  width: 270px;
+  height: 432.02px;
+}
+.inner-box1 {
+  width: 268px;
+  height: 140px;
+  left: 0.16px;
+  top: 268px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  position: absolute;
+  background: white;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+.inner-box2 {
+  width: 268.02px;
+  height: 268.02px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  background: #d9d9d9;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+.inner-textbox {
+  text-align: left;
+  padding-top: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+.category {
+  padding-bottom: 5px;
+}
+.category-label {
+  color: #46a1bb;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+  text-align: left;
+}
+.store {
+  color: #00664f;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+  text-align: left;
+}
+.product-name {
+  color: black;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+  text-align: left;
+  padding-bottom: 5px;
+}
+.price {
+  color: #b9b9b9;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 400;
+  word-wrap: break-word;
+  text-align: left;
+}
+.progress {
+  text-align: left;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.progress-text {
+  padding-bottom: 4px;
+}
+.dday {
+  width: 44px;
+  height: 18px;
+  position: absolute;
+  text-align: center;
+  color: #e27a6c;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+.discount {
+  width: 33.96px;
+  height: 18.36px;
+  position: absolute;
+  text-align: right;
+  right: 20px;
+  color: #00664f;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+.progress-bar-bg {
+  width: 228px;
+  height: 12px;
+  position: absolute;
+  background: #d9d9d9;
+  border-radius: 5.97px;
+  overflow: hidden; /* 클리핑 추가 */
+}
+.progress-bar {
+  height: 100%; /* 높이 100%로 설정 */
+  position: relative;
+  background: #00664f;
+  border-radius: 5.97px;
+  transition: width 0.5s ease; /* 움직임 효과 추가 */
+}
+.heart {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  margin: 10px;
+}
+.review-box {
+  margin: 0px;
+  width: 100%;
+  top: 2232px;
+  height: 646px;
+  background: rgb(255, 252, 240, 1);
+  position: absolute;
+}
+.review-page-go {
+  top: 110px;
+  left: 50%;
+  transform: translateX(-55%);
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  white-space: nowrap;
+  font-family: Pretendard Variable;
+  font-weight: 500;
+}
+.text-box4 {
+  left: 50%;
+  top: 50px;
+  transform: translateX(-55%);
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background: white;
+  border-radius: 20px;
+  border: 1px #e27a6c solid;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  display: inline-flex;
+  position: absolute;
+  white-space: nowrap;
+}
+.text4-1 {
+  color: black;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+.UIcard {
+  margin-top: 60px;
+  position: relative;
+  width: 270px;
+  height: 388.98px;
+  padding: 0;
+  margin: 0;
+}
+.card.bottom {
+  width: 268px;
+  height: 145.98px;
+  left: 0.16px;
+  top: 268px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  position: absolute;
+  background: white;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+#name {
+  color: #00664f;
+  font-family: Pretendard Variable;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400px;
+  line-height: 18px;
+  flex-shrink: 0;
+}
+.card.top {
+  width: 268.02px;
+  height: 268.02px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  background: #d9d9d9;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+.card.textbox {
+  text-align: left;
+  padding-top: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+.review.contents {
+  color: #000;
+  font-family: Pretendard Variable;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  margin-top: 9px;
+}
+.line {
+  width: 268px;
+  height: 1px;
+  background-color: #d9d9d9;
+  padding: 0;
+  margin: 0;
+}
+.product.name {
+  color: #b9b9b9;
+  text-align: center;
+  font-family: Pretendard Variable;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  margin-top: 13px;
+}
+.pagebox {
+  top: 2130px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-55%);
+}
+.page {
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 35px;
+  display: inline-flex;
+}
+.page-now {
+  padding: 10px;
+  background: #5bab93;
+  border-radius: 10px;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+.number-now {
+  text-align: center;
+  color: #fffcf0;
+  font-size: 14.33px;
+  font-family: Pretendard Variable;
+  font-weight: 700;
+  word-wrap: break-word;
+}
+.page-text {
+  text-align: center;
+  color: #b9b9b9;
+  font-size: 14.33px;
+  font-family: Pretendard Variable;
+  font-weight: 700;
+  word-wrap: break-word;
+}
diff --git a/static/css/review_add.css b/static/css/review_add.css
new file mode 100644
index 0000000..73ced5a
--- /dev/null
+++ b/static/css/review_add.css
@@ -0,0 +1,164 @@
+select {
+  display: flex;
+  position: relative;
+}
+
+.submit-section {
+  position: absolute;
+  right: 5%;
+  float: right;
+  display: flex;
+  width: 124.225px;
+  height: 32.251px;
+  padding: 2.389px 7.167px;
+  justify-content: center;
+  align-items: center;
+  gap: 23.889px;
+  flex-shrink: 0;
+}
+
+#button1 {
+  background-color: #f5f5f5;
+  color: #5bab93;
+  border-color: #f5f5f5;
+  display: flex;
+  width: 124.225px;
+  height: 32.251px;
+  padding: 2.389px 7.167px;
+  justify-content: center;
+  align-items: center;
+  gap: 23.889px;
+  flex-shrink: 0;
+  border-radius: 4.778px;
+  cursor: pointer;
+  outline: none;
+  box-shadow: none;
+}
+
+#button2 {
+  background-color: #5bab93;
+  border-color: #5bab93;
+  color: #f5f5f5;
+  display: flex;
+  width: 124.225px;
+  height: 32.251px;
+  padding: 2.389px 7.167px;
+  justify-content: center;
+  align-items: center;
+  gap: 23.889px;
+  flex-shrink: 0;
+  border-radius: 4.778px;
+  cursor: pointer;
+  outline: none;
+  box-shadow: none;
+}
+
+#title1 {
+  width: 196px;
+  height: 43px;
+  color: #000;
+  font-family: Pretendard Variable;
+  font-size: 26px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin-left: 5%;
+  margin-top: 100px;
+}
+
+.tabs div:hover {
+  border-bottom: 3px solid #5bab93;
+}
+
+.tabs {
+  display: inline;
+  float: left;
+  margin-left: 5%;
+  margin-top: 10px;
+}
+
+.tab {
+  display: inline;
+  float: left;
+  color: #000;
+  text-align: center;
+  font-family: Pretendard Variable;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 550;
+  line-height: normal;
+  padding: 8px;
+}
+
+.review-write {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.form-section {
+  display: flex;
+  width: 90%;
+  margin: auto;
+  flex-direction: column;
+}
+
+.form-section label {
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+.form-section p {
+  margin-top: 5px;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.form-section select,
+.form-section textarea {
+  margin-top: 10px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.form-section textarea {
+  height: 100px;
+  resize: vertical;
+}
+
+.form-section button {
+  margin-top: 10px;
+  padding: 10px 20px;
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.form-section button:hover {
+  background-color: #e7e7e7;
+}
+
+#backicon {
+  position: absolute;
+  left: 5%;
+  top: 40px;
+}
+
+#photo-upload {
+  width: 150px;
+  display: inline-flex;
+  padding: 10px 30px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 30px;
+  border: 1px solid #d9d9d9;
+
+  background: #fff;
+}
diff --git a/static/css/review_card.css b/static/css/review_card.css
new file mode 100644
index 0000000..e69de29
diff --git a/static/css/review_detail.css b/static/css/review_detail.css
new file mode 100644
index 0000000..12eb4ec
--- /dev/null
+++ b/static/css/review_detail.css
@@ -0,0 +1,96 @@
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.box1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* 가운데 정렬을 위한 transform 설정 */
+  width: 390px;
+  height: 654px;
+  flex-shrink: 0;
+  border-radius: 20px;
+  background: #ffffff;
+}
+
+.box2 {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 390px;
+  height: 390px;
+  border-radius: 20px 20px 0 0;
+  background: #d9d9d9;
+}
+
+.XmarkImage {
+  padding: 16px 13.47px;
+}
+
+.circleImage {
+  padding: 409px 0 0 29px; /*위, 오른쪽, 아래, 왼쪽*/
+}
+
+.box3 {
+  display: flex;
+  position: absolute;
+  top: 395px;
+  left: 80px;
+  height: 18px;
+  flex-shrink: 0;
+  color: #00664f;
+  font-family: Pretendard Variable;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.box4 {
+  position: absolute;
+  top: 425px;
+  padding: 12px 26px 89px 26px;
+  display: flex;
+  width: 335px;
+  height: 125px;
+  flex-direction: column;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #000;
+  font-family: Pretendard Variable;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+}
+
+.box5 {
+  position: absolute;
+  top: 585px;
+  width: 390px;
+  height: 1px;
+  background: #d9d9d9;
+}
+
+.box6 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-shrink: 0;
+  position: absolute;
+  top: 590px;
+  left: 58px;
+  color: #b9b9b9;
+  width: 273px;
+  text-align: center;
+  font-family: Pretendard Variable;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
diff --git a/static/css/reviews_list.css b/static/css/reviews_list.css
new file mode 100644
index 0000000..e69de29
diff --git a/static/css/signup1.css b/static/css/signup1.css
new file mode 100644
index 0000000..4e99246
--- /dev/null
+++ b/static/css/signup1.css
@@ -0,0 +1,222 @@
+@font-face {
+  font-family: "Pretendard-Regular";
+  font-weight: 400;
+  font-style: normal;
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot");
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2")
+      format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff")
+      format("woff"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.ttf")
+      format("truetype");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Pretendard-Medium";
+  font-weight: 500;
+  font-style: normal;
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot");
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff2")
+      format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff")
+      format("woff"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.ttf")
+      format("truetype");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Pretendard-Bold";
+  font-weight: 700;
+  font-style: normal;
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot");
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2")
+      format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff")
+      format("woff"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.ttf")
+      format("truetype");
+  font-display: swap;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+#ximg {
+  margin-left: 16px;
+  margin-top: 13px;
+}
+
+.textinfo {
+  margin-left: 121.5px;
+  margin-top: -9.77px;
+  width: 146px;
+  height: 64px;
+  padding: 10px;
+  text-align: center;
+  font-size: 16px;
+}
+
+.text1 {
+  font-family: "Pretendard-Regular";
+}
+
+.text2 {
+  font-family: "Pretendard-Bold";
+}
+
+#login {
+  margin-left: 29px;
+  margin-top: 138px;
+  width: 62px;
+  height: 39px;
+  padding: 10px;
+  font-size: 16px;
+  font-family: "Pretendard-Medium";
+  color: #b9b9b9;
+  text-decoration: none;
+  text-align: center;
+}
+
+#signup {
+  margin-top: 138px;
+  width: 76px;
+  height: 39px;
+  padding: 10px;
+  font-size: 16px;
+  font-family: "Pretendard-Bold";
+  color: #000;
+  text-decoration: none;
+  text-align: center;
+  border-bottom-style: solid;
+  border-bottom-width: 1.5px;
+  border-bottom-color: #5bab93;
+}
+
+#signup1-form > label {
+  margin-left: 28px;
+  height: 38px;
+  padding: 10px;
+  text-align: center;
+  font-size: 15px;
+  font-family: "Pretendard-Regular";
+}
+
+#signup1-form > div > label {
+  margin-left: 28px;
+  margin-top: 10px;
+  width: 59px;
+  height: 38px;
+  padding: 0px;
+  text-align: left;
+  font-size: 15px;
+  font-family: "Pretendard-Regular";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#signup1-form > input {
+  height: 38px;
+  margin-top: 6.5px;
+  padding: 10px;
+  font-size: 15px;
+  font-family: "Pretendard-Regular";
+  color: #d9d9d9;
+  background-color: #fff;
+}
+
+#signup1-form > input[name="name"] {
+  width: 130px;
+  margin-left: 53px;
+  margin-top: 30px;
+}
+
+#signup1-form > div > input {
+  margin-left: 44px;
+  margin-top: 0px;
+  width: 114px;
+  height: 38px;
+  padding: 10px;
+  text-align: left;
+  font-size: 15px;
+  font-family: "Pretendard-Regular";
+}
+
+#signup1-form > input[name="phone"] {
+  width: 190px;
+  margin-left: 26px;
+  margin-top: 7.5px;
+}
+
+#signup1-form > input[name="id"] {
+  width: 107px;
+  margin-left: 39px;
+  margin-top: 7.5px;
+}
+
+#signup1-form > input[name="password1"] {
+  width: 116px;
+  margin-left: 26px;
+  margin-top: 7.5px;
+}
+
+#signup1-form > input[name="password2"] {
+  width: 156px;
+  margin-left: -4px;
+  margin-top: 7.5px;
+}
+
+.emailrow {
+  display: flex;
+  flex-direction: row;
+}
+
+#ewhain {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+hr {
+  width: 332px;
+  height: 1.5px;
+  margin-left: 28px;
+  background-color: #5bab93;
+  border: 0;
+}
+
+.stepcircle {
+  display: flex;
+  flex-direction: row;
+  margin-top: 16.5px;
+}
+
+#circle1 {
+  margin-left: 178px;
+}
+
+#circle2 {
+  margin-left: 9px;
+}
+
+#signup1-form > input[type="submit"] {
+  width: 332px;
+  height: 43px;
+  margin-left: 28px;
+  margin-top: 42px;
+  border-radius: 10px;
+  padding: 10px;
+  background-color: #5bab93;
+  color: #fff;
+  font-size: 16px;
+  font-family: "Pretendard-Regular";
+}
diff --git a/static/css/signup2.css b/static/css/signup2.css
new file mode 100644
index 0000000..fbeef7b
--- /dev/null
+++ b/static/css/signup2.css
@@ -0,0 +1,227 @@
+@font-face {
+  font-family: "Pretendard-Regular";
+  font-weight: 400;
+  font-style: normal;
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot");
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2")
+      format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff")
+      format("woff"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.ttf")
+      format("truetype");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Pretendard-Medium";
+  font-weight: 500;
+  font-style: normal;
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot");
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff2")
+      format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff")
+      format("woff"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.ttf")
+      format("truetype");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Pretendard-Bold";
+  font-weight: 700;
+  font-style: normal;
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot");
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2")
+      format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff")
+      format("woff"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.ttf")
+      format("truetype");
+  font-display: swap;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+#ximg {
+  margin-left: 16px;
+  margin-top: 13px;
+}
+
+.textinfo {
+  margin-left: 121.5px;
+  margin-top: -9.77px;
+  width: 146px;
+  height: 64px;
+  padding: 10px;
+  text-align: center;
+  font-size: 16px;
+}
+
+.text1 {
+  font-family: "Pretendard-Regular";
+}
+
+.text2 {
+  font-family: "Pretendard-Bold";
+}
+
+#login {
+  margin-left: 29px;
+  margin-top: 138px;
+  width: 62px;
+  height: 39px;
+  padding: 10px;
+  font-size: 16px;
+  font-family: "Pretendard-Medium";
+  color: #b9b9b9;
+  text-decoration: none;
+  text-align: center;
+}
+
+#signup {
+  margin-top: 138px;
+  width: 76px;
+  height: 39px;
+  padding: 10px;
+  font-size: 16px;
+  font-family: "Pretendard-Bold";
+  color: #000;
+  text-decoration: none;
+  text-align: center;
+  border-bottom-style: solid;
+  border-bottom-width: 1.5px;
+  border-bottom-color: #5bab93;
+}
+
+#signup2-form > label {
+  margin-left: 28px;
+  height: 38px;
+  padding: 10px;
+  text-align: center;
+  font-size: 15px;
+  font-family: "Pretendard-Regular";
+}
+
+#signup2-form > div > label {
+  margin-left: 28px;
+  margin-top: 10px;
+  width: 59px;
+  height: 38px;
+  padding: 0px;
+  text-align: left;
+  font-size: 15px;
+  font-family: "Pretendard-Regular";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#signup2-form > input {
+  height: 38px;
+  margin-top: 6.5px;
+  padding: 10px;
+  font-size: 15px;
+  font-family: "Pretendard-Regular";
+  color: #d9d9d9;
+  background-color: #fff;
+}
+
+#signup2-form > input[name="nickname"] {
+  width: 157px;
+  margin-left: 40px;
+  margin-top: 30px;
+}
+
+hr {
+  width: 332px;
+  height: 1.5px;
+  margin-left: 28px;
+  background-color: #5bab93;
+  border: 0;
+}
+
+.upload {
+  display: flex;
+  flex-direction: row;
+  margin-top: 6.5px;
+}
+
+input[type="file"] {
+  display: none;
+}
+
+#signup2-form > div > div > p {
+  margin-left: 28px;
+  margin-top: 10px;
+  width: 59px;
+  height: 38px;
+  padding: 0px;
+  text-align: left;
+  font-size: 15px;
+  font-family: "Pretendard-Regular";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.custom-img-input::after {
+  margin-left: 50px;
+  margin-top: 6.5px;
+  content: "사진 불러오기";
+  display: inline-block;
+  width: 109px;
+  height: 26px;
+  border-radius: 20px;
+  padding: 10px;
+  cursor: pointer;
+  padding: 10px;
+  font-size: 13px;
+  font-family: "Pretendard-Regular";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #d9d9d9;
+}
+
+#info {
+  font-size: 12px;
+  font-family: "Pretendard-Regular";
+  margin-left: 137px;
+}
+
+.stepcircle {
+  display: flex;
+  flex-direction: row;
+  margin-top: 177px;
+}
+
+#circle1 {
+  margin-left: 178px;
+}
+
+#circle2 {
+  margin-left: 9px;
+}
+
+#signup2-form > input[type="submit"] {
+  width: 332px;
+  height: 43px;
+  margin-left: 28px;
+  margin-top: 42px;
+  border-radius: 10px;
+  padding: 10px;
+  background-color: #5bab93;
+  color: #fff;
+  font-size: 16px;
+  font-family: "Pretendard-Regular";
+}
diff --git a/static/css/signup3.css b/static/css/signup3.css
new file mode 100644
index 0000000..c3f3ebf
--- /dev/null
+++ b/static/css/signup3.css
@@ -0,0 +1,61 @@
+@font-face {
+  font-family: "Pretendard-Regular";
+  font-weight: 400;
+  font-style: normal;
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot");
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2")
+      format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff")
+      format("woff"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.ttf")
+      format("truetype");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Pretendard-Bold";
+  font-weight: 700;
+  font-style: normal;
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot");
+  src: url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2")
+      format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff")
+      format("woff"),
+    url("https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.ttf")
+      format("truetype");
+  font-display: swap;
+}
+
+.text1 {
+  margin-left: 134.5px;
+  margin-top: 242px;
+  width: 146px;
+  height: 64px;
+  padding: 10px;
+  text-align: center;
+  font-size: 16px;
+  font-family: "Pretendard-Bold";
+}
+
+.text1-2 {
+  margin-top: 6px;
+}
+
+.text2 {
+  margin-left: 82px;
+  margin-top: 49px;
+  width: 266px;
+  height: 64px;
+  padding: 10px;
+  text-align: center;
+  font-size: 16px;
+  font-family: "Pretendard-Regular";
+}
+
+.text2-2 {
+  margin-top: 6px;
+}
diff --git a/static/css/wish_list.css b/static/css/wish_list.css
new file mode 100644
index 0000000..dc08b4b
--- /dev/null
+++ b/static/css/wish_list.css
@@ -0,0 +1,422 @@
+.header {
+  margin: 0px;
+  width: 100%;
+  height: 553px;
+  background: rgba(255, 252, 240, 1);
+}
+
+body {
+  width: 100vw;
+  margin: 0;
+  background: white;
+}
+
+.text-box1,
+.text-box2 {
+  top: 634px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background: white;
+  border-radius: 20px;
+  border: 1px #5bab93 solid;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  display: inline-flex;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.text-box1 {
+  margin-left: 150px;
+}
+
+.text-box2 {
+  margin-left: 250px;
+}
+
+.text1-1,
+.text2-1 {
+  color: #5bab93;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+
+.text4-1 {
+  color: black;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+
+.footer {
+  margin: 0px;
+  width: 100%;
+  top: 2875px;
+  height: 340px;
+  background: white;
+  position: absolute;
+}
+
+.card-line1,
+.card-line2,
+.card-line3,
+.card-line4 {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+}
+
+.card-line1 {
+  top: 706px;
+}
+
+.card-line2 {
+  top: 1180px;
+}
+
+.card-line3 {
+  top: 1660px;
+}
+
+.card-line4 {
+  top: 160px;
+}
+
+.card-container1,
+.card-container2,
+.card-container3,
+.card-container4 {
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  margin-left: 150px;
+  position: realtive;
+}
+
+.container {
+  display: flex;
+  position: relative;
+  width: 270px;
+  height: 432.02px;
+}
+
+.inner-box1 {
+  width: 268px;
+  height: 140px;
+  left: 0.16px;
+  top: 268px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  position: absolute;
+  background: white;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+
+.inner-box2 {
+  width: 268.02px;
+  height: 268.02px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  background: #d9d9d9;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+
+.inner-textbox {
+  text-align: left;
+  padding-top: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+
+.category {
+  padding-bottom: 5px;
+}
+
+.category-label {
+  color: #46a1bb;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+  text-align: left;
+}
+
+.store {
+  color: #00664f;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+  text-align: left;
+}
+
+.product-name {
+  color: black;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+  text-align: left;
+  padding-bottom: 5px;
+}
+
+.price {
+  color: #b9b9b9;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 400;
+  word-wrap: break-word;
+  text-align: left;
+}
+
+.progress {
+  text-align: left;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.progress-text {
+  padding-bottom: 4px;
+}
+
+.dday {
+  width: 44px;
+  height: 18px;
+  position: absolute;
+  text-align: center;
+  color: #e27a6c;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+
+.discount {
+  width: 33.96px;
+  height: 18.36px;
+  position: absolute;
+  text-align: right;
+  right: 20px;
+  color: #00664f;
+  font-size: 14px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+
+.progress-bar-bg {
+  width: 228px;
+  height: 12px;
+  position: absolute;
+  background: #d9d9d9;
+  border-radius: 5.97px;
+  overflow: hidden;
+  /* 클리핑 추가 */
+}
+
+.progress-bar {
+  height: 100%;
+  /* 높이 100%로 설정 */
+  position: relative;
+  background: #00664f;
+  border-radius: 5.97px;
+  transition: width 0.5s ease;
+  /* 움직임 효과 추가 */
+}
+
+.heart {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  margin: 10px;
+}
+
+.review-box {
+  margin: 0px;
+  width: 100%;
+  top: 2232px;
+  height: 646px;
+  background: rgb(255, 252, 240, 1);
+  position: absolute;
+}
+
+.review-page-go {
+  top: 110px;
+  left: 50%;
+  transform: translateX(-55%);
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  white-space: nowrap;
+  font-family: Pretendard Variable;
+  font-weight: 500;
+}
+
+.text-box4 {
+  left: 50%;
+  top: 50px;
+  transform: translateX(-55%);
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background: white;
+  border-radius: 20px;
+  border: 1px #e27a6c solid;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  display: inline-flex;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.text4-1 {
+  color: black;
+  font-size: 16px;
+  font-family: Pretendard Variable;
+  font-weight: 600;
+  word-wrap: break-word;
+}
+
+.UIcard {
+  margin-top: 60px;
+  position: relative;
+  width: 270px;
+  height: 388.98px;
+  padding: 0;
+  margin: 0;
+}
+
+.card.bottom {
+  width: 268px;
+  height: 145.98px;
+  left: 0.16px;
+  top: 268px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  position: absolute;
+  background: white;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+
+#name {
+  color: #00664f;
+  font-family: Pretendard Variable;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400px;
+  line-height: 18px;
+  flex-shrink: 0;
+}
+
+.card.top {
+  width: 268.02px;
+  height: 268.02px;
+  left: 0px;
+  top: 0px;
+  position: absolute;
+  background: #d9d9d9;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  border: 1px #d9d9d9 solid;
+}
+
+.card.textbox {
+  text-align: left;
+  padding-top: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+
+.review.contents {
+  color: #000;
+  font-family: Pretendard Variable;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  margin-top: 9px;
+}
+
+.line {
+  width: 268px;
+  height: 1px;
+  background-color: #d9d9d9;
+  padding: 0;
+  margin: 0;
+}
+
+.product.name {
+  color: #b9b9b9;
+  text-align: center;
+  font-family: Pretendard Variable;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  margin-top: 13px;
+}
+
+.pagebox {
+  top: 2130px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-55%);
+}
+
+.page {
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 35px;
+  display: inline-flex;
+}
+
+.page-now {
+  padding: 10px;
+  background: #5bab93;
+  border-radius: 10px;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.number-now {
+  text-align: center;
+  color: #fffcf0;
+  font-size: 14.33px;
+  font-family: Pretendard Variable;
+  font-weight: 700;
+  word-wrap: break-word;
+}
+
+.page-text {
+  text-align: center;
+  color: #b9b9b9;
+  font-size: 14.33px;
+  font-family: Pretendard Variable;
+  font-weight: 700;
+  word-wrap: break-word;
+}
diff --git a/static/icon/Heart.svg b/static/icon/Heart.svg
new file mode 100644
index 0000000..4540b6e
--- /dev/null
+++ b/static/icon/Heart.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z" stroke="#E27A6C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/img/Ellipse 2.png b/static/img/Ellipse 2.png
new file mode 100644
index 0000000..653104b
Binary files /dev/null and b/static/img/Ellipse 2.png differ
diff --git a/static/img/Ellipse 5.png b/static/img/Ellipse 5.png
new file mode 100644
index 0000000..5ce60dd
Binary files /dev/null and b/static/img/Ellipse 5.png differ
diff --git a/static/img/Group 45.png b/static/img/Group 45.png
new file mode 100644
index 0000000..feb7c63
Binary files /dev/null and b/static/img/Group 45.png differ
diff --git a/static/img/Group.png b/static/img/Group.png
new file mode 100644
index 0000000..91ac5cb
Binary files /dev/null and b/static/img/Group.png differ
diff --git a/static/img/Settings Gear.png b/static/img/Settings Gear.png
new file mode 100644
index 0000000..313a2d6
Binary files /dev/null and b/static/img/Settings Gear.png differ
diff --git a/static/img/Xmark.png b/static/img/Xmark.png
new file mode 100644
index 0000000..228c9cc
Binary files /dev/null and b/static/img/Xmark.png differ
diff --git a/static/img/circle.png b/static/img/circle.png
new file mode 100644
index 0000000..566a8fd
Binary files /dev/null and b/static/img/circle.png differ
diff --git a/static/js/index.js b/static/js/index.js
new file mode 100644
index 0000000..1c28af6
--- /dev/null
+++ b/static/js/index.js
@@ -0,0 +1,2 @@
+/* 이 파일은 예시고, 아마 페이지별로 필요한 기능 정리해서 js 코드 파일을 만들면 좋을 것 같다.
+ 비슷한 기능이 있다면 굳이 파일 새로 안 만들고 기능 재활용 해도 좋음*/
diff --git a/static/js/product_add.js b/static/js/product_add.js
new file mode 100644
index 0000000..e69de29
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..782a43c
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,817 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../static/css/index.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <div id="header"></div>
+  <body>
+    <!--헤더 삽입-->
+
+    <div class="text-box1">
+      <div class="text1-1">마감 임박!</div>
+      <div class="text1-2">망설이면 늦어요</div>
+    </div>
+
+    <div class="card-line1">
+      <div class="card-container1">
+        <div class="container" id="cont1-1">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont1-2">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont1-3">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont1-4">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont1-5">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="text-box2">
+      <div class="text2-1">HOT</div>
+      <div class="text2-2">지금 인기 있는 공동구매</div>
+    </div>
+
+    <div class="card-line2">
+      <div class="card-container2">
+        <div class="container" id="cont2-1">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont2-2">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont2-3">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont2-4">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont2-5">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="text-box3">
+      <div class="text3-1">따끈따끈</div>
+      <div class="text3-2">방금 올라온 공동구매</div>
+    </div>
+
+    <div class="card-line3">
+      <div class="card-container3">
+        <div class="container" id="cont3-1">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont3-2">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont3-3">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont3-4">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont3-5">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="review-box">
+      <div class="text-box4">
+        <div class="text4-1">생생한 후기를 구경해보세요</div>
+      </div>
+      <div class="review-page-go">리뷰 전체 보기</div>
+
+      <div class="card-line4">
+        <div class="card-container4">
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+  <!--<footer id="footer"></footer>-->
+  <script>
+    fetch("layout/header_before.html")
+      .then((response) => response.text())
+      .then((data) => {
+        document.getElementById("header").innerHTML = data;
+      });
+  </script>
+</html>
diff --git a/templates/layout/banner_category.html b/templates/layout/banner_category.html
new file mode 100644
index 0000000..3f9ffd7
--- /dev/null
+++ b/templates/layout/banner_category.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<body>
+    <a href="index.html" target="_self" id="banner-img"><img src="url" alt="banner-img"
+        style="width:1920; height:119px; margin-top:2.89px"></a>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/layout/banner_main.html b/templates/layout/banner_main.html
new file mode 100644
index 0000000..ed9c3d5
--- /dev/null
+++ b/templates/layout/banner_main.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<body>
+    <a href="index.html" target="_self" id="banner-img"><img src="url" alt="banner-img"
+        style="width:1920; height:380px; margin-top:2.89px"></a>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/layout/footer.html b/templates/layout/footer.html
new file mode 100644
index 0000000..7b35071
--- /dev/null
+++ b/templates/layout/footer.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../../static/css/footer.css" />
+  </head>
+  <footer class="footer-container">
+    <div class="footer-content">
+      <span id="ftext1">회사명</span>
+      <span id="ftext2">(주) 위시윗 |</span>
+      <span id="ftext3">주소</span>
+      <span id="ftext4">서울특별시 서대문구 이화여대길52 |</span>
+      <span id="ftext5">대표</span>
+      <span id="ftext6">최민주 차소연 이윤진 최영서 김수연 이현정</span>
+    </div>
+  </footer>
+</html>
diff --git a/templates/layout/header_after.html b/templates/layout/header_after.html
new file mode 100644
index 0000000..9532c61
--- /dev/null
+++ b/templates/layout/header_after.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="../../static/css/header.css">
+    </head>
+    <body>
+        <div class="header">
+            <a href="index.html" target="_self" id="logo"><img src="dd" alt="logo"></a>
+            <!--로고 이미지 파일 경로 수정 필요-->
+            <a href="product_add.html" target="_self" id="reg-btn">공동 구매 등록하기</a>
+            <a href="경로" target="_self" id="wish-btn"><svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12.897 4.13328C12.897 4.83733 12.63 5.54744 12.09 6.08761L11.192 6.98587L7.32691 10.852C7.30871 10.8702 7.30264 10.8763 7.28444 10.8885C7.26623 10.8763 7.26016 10.8702 7.24196 10.852L2.47887 6.08761C1.93885 5.54744 1.67188 4.8434 1.67188 4.13328C1.67188 3.42317 1.93885 2.71306 2.47887 2.17289C3.55891 1.09862 5.30638 1.09862 6.38642 2.17289L7.27837 3.07115L8.17638 2.17289C9.25642 1.09862 10.9978 1.09862 12.0779 2.17289C12.63 2.71306 12.897 3.4171 12.897 4.13328Z" stroke="#FFFCF0" stroke-width="1.79171" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>위시
+            </a>
+            <a href="login.html" target="_self" id="mypage-btn"><svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="11.6643" cy="11.1253" r="10.7503" fill="#5BAB93"/>
+                </svg>냥냥이
+            </a>
+        </div>
+        <div class="nav">
+            <a href="index.html" target="_self" id="nav1">홈</a>
+            <a href="products_list.html" target="_self" id="nav2">식료품</a>
+            <a href="products_list.html" target="_self" id="nav3">생필품</a>
+            <a href="products_list.html" target="_self" id="nav4">문구류</a>
+            <a href="products_list.html" target="_self" id="nav5">패션잡화</a>
+            <a href="products_list.html" target="_self" id="nav6">이화굿즈</a>
+            <a href="products_list.html" target="_self" id="nav7">기타</a>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/templates/layout/header_before.html b/templates/layout/header_before.html
new file mode 100644
index 0000000..cddc0ab
--- /dev/null
+++ b/templates/layout/header_before.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../../static/css/header.css" />
+  </head>
+  <body>
+    <div class="header">
+      <div>
+        <img
+          src="../../static/img/위시윗 로고.png"
+          alt="WishWith Logo"
+          id="logo"
+          style="width: 248px; height: 40px"
+        />
+
+        <div class="btn-box">
+          <a href="login.html" id="login-btn">로그인</a>
+          <a href="signup1.html" id="reg-btn">회원가입</a>
+          <a href="wish_list.html" id="wish-btn">위시</a>
+          <a href="mypage.html" id="mypage-btn">마이페이지</a>
+          <a href="product_add.html" id="mypage-btn">등록하기</a>
+        </div>
+      </div>
+      <div class="nav">
+        <a href="index.html" id="nav1">홈</a>
+        <a href="products_list.html" id="nav2">식료품</a>
+        <a href="products_list.html" id="nav3">생필품</a>
+        <a href="products_list.html" id="nav4">문구류</a>
+        <a href="products_list.html" id="nav5">패션잡화</a>
+        <a href="products_list.html" id="nav6">이화굿즈</a>
+        <a href="products_list.html" id="nav7">기타</a>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/templates/login.html b/templates/login.html
new file mode 100644
index 0000000..3083e2a
--- /dev/null
+++ b/templates/login.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../static/css/login.css" />
+  </head>
+  <body>
+    <a href="index.html" target="_parent" id="ximg"
+      ><svg
+        width="44"
+        height="44"
+        viewBox="0 0 44 44"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M32.8214 10.7793L10.9404 32.9947"
+          stroke="black"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M10.9404 10.7793L32.8214 32.9947"
+          stroke="black"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </a>
+    <div class="textinfo">
+      <div class="text1">서비스 사용을 위해</div>
+      <div class="text2">로그인이 필요해요</div>
+    </div>
+    <a href="#" target="_self" id="login">로그인</a>
+    <a href="signup1.html" target="_self" id="signup">회원가입</a>
+    <form method="post" action="#" id="login-form">
+      <label for="id" id="id">아이디</label>
+      <input type="text" name="id" placeholder="enter your ID" />
+      <hr />
+      <br />
+      <label for="id" id="password">비밀번호</label>
+      <input type="text" name="password" placeholder="enter your PW" />
+      <hr />
+      <div class="findpw">
+        <div id="findpw1">비밀번호를 까먹으셨나요?</div>
+        <div id="findpw2"><a ref="비밀번호 찾기 페이지">비밀번호 찾기</a></div>
+        <br />
+      </div>
+      <input type="submit" value="로그인" />
+    </form>
+  </body>
+</html>
diff --git a/templates/mypage.html b/templates/mypage.html
new file mode 100644
index 0000000..df988bf
--- /dev/null
+++ b/templates/mypage.html
@@ -0,0 +1,600 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      .header {
+        background-color: white;
+        width: 100%;
+        height: 173px;
+        display: flex;
+        align-items: center;
+      }
+      .header img{
+        position:relative;
+        left:250px;
+      }
+      .banner {
+        background-color: #fffcf0;
+        width: 100%;
+        height: 119px;
+        border: 1px solid #d9d9d9;
+      }
+      .body.top {
+        width: 100%;
+        height: 222px;
+        border-bottom: 2px solid #d9d9d9;
+      }
+      .body.middle {
+        width: 100%;
+        height: 1547px;
+        background-color: FFF;
+      }
+
+      .userImg {
+        position: absolute;
+        top: 337px;
+        right: 1588px;
+        bottom: 1980px;
+        left: 250px;
+      }
+
+      #name {
+        position: absolute;
+        top: 353px;
+        right: 1489px;
+        left: 368px;
+        bottom: 2017px;
+        color: #000;
+        font-family: Pretendard Variable;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        white-space: nowrap;
+      }
+      .settingImg{
+        position:relative;
+        top:62px;
+        left:440px;
+      }
+      #id {
+        position: absolute;
+        top: 385px;
+        right: 1459px;
+        left: 368px;
+        bottom: 1995px;
+        color: #404040;
+        font-family: Pretendard Variable;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+      .reviewMaking {
+        border-radius: 20px;
+        border: 1px solid var(--mint, #5bab93);
+        background: #fff;
+        display: inline-flex;
+        padding: 10px 20px;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        color: #000;
+        text-align: center;
+        font-family: Pretendard Variable;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        position:relative;
+        left:1543px;
+        top:69px
+      }
+      .footer {
+        width: 100%;
+        height: 340px;
+        background-color: antiquewhite;
+      }
+
+      ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        position: absolute;
+        top: 462px;
+        left: 250px;
+        bottom: 1898.89;
+        
+      }
+      li {
+        float: left;
+        
+      }
+      li a {
+        display: block;
+        text-decoration: none;
+        padding: 12px 20px;
+        color: #000;
+        text-align: center;
+        font-family: Pretendard Variable;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+      }
+      li a:hover {
+        color: #5bab93;
+        border-bottom: 2px solid #5bab93;
+      }
+      .my.info {
+        position: absolute;
+        top: 552px;
+        left: 251px;
+        bottom: 1823px;
+      }
+      .my.info.title {
+        color: #000;
+        font-family: Pretendard Variable;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+      }
+      .my.info.contents {
+        position: relative;
+        top: 101px;
+        color: #000;
+      }
+      .my.info.contents p {
+        color: #000;
+        font-family: Pretendard Variable;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: bold;
+        line-height: normal;
+      }
+      .my.info.contents label{
+      position:absolute; 
+      left:200px;
+      width:200px;     
+      }
+      progress {
+        width: 210px; /* 프로그레스 바의 너비 */
+        height: 15px; /* 프로그레스 바의 높이 */
+        color: #E27A6C; /* 채워진 부분의 색상 */
+        background-color: #D9D9D9; /* 빈 부분의 색상 */
+        -webkit-appearance: none; /* 웹킷 브라우저의 기본 스타일을 제거 */
+        appearance: none; /* 최신 브라우저의 기본 스타일을 제거 */
+      }
+      
+      /* 웹킷 기반 브라우저를 위한 스타일링 */
+      progress::-webkit-progress-bar {
+        background-color: #D9D9D9;
+      }
+      
+      progress::-webkit-progress-value {
+        background-color: #E27A6C;
+      }
+      
+      /* 파이어폭스 브라우저를 위한 스타일링 */
+      progress::-moz-progress-bar {
+        background-color: #E27A6C;
+      }
+      
+      .card.container {
+        position: absolute;
+        top: 552px;
+        left: 826px;
+        width: 60%;
+        height: 388.98px;
+        align-items: left;
+        display: flex;
+        flex-direction: row;
+        gap: 30px;
+        padding: 0;
+        margin: 0;
+      }
+      .UIcard {
+        margin-top: 60px;
+        position: relative;
+        width: 270px;
+        height: 388.98px;
+        padding: 0;
+        margin: 0;
+      }
+      .card.bottom {
+        width: 268px;
+        height: 120.98px;
+        left: 0.16px;
+        top: 268px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        position: absolute;
+        background: white;
+        border-bottom-left-radius: 20px;
+        border-bottom-right-radius: 20px;
+        border: 1px #d9d9d9 solid;
+      }
+      .card.top {
+        width: 268.02px;
+        height: 268.02px;
+        left: 0px;
+        top: 0px;
+        position: absolute;
+        background: #d9d9d9;
+        border-top-left-radius: 20px;
+        border-top-right-radius: 20px;
+        border: 1px #d9d9d9 solid;
+      }
+      .card.textbox {
+        text-align: left;
+        padding-top: 8px;
+        padding-left: 20px;
+        padding-right: 20px;
+        padding-bottom: 20px;
+      }
+      .category {
+        padding-bottom: 5px;
+      }
+      .category.label {
+        color: #46a1bb;
+        font-size: 14px;
+        font-family: Pretendard Variable;
+        font-weight: 600;
+        word-wrap: break-word;
+        text-align: left;
+      }
+      .store {
+        color: #00664f;
+        font-size: 14px;
+        font-family: Pretendard Variable;
+        font-weight: 600;
+        word-wrap: break-word;
+        text-align: left;
+      }
+      .product.name {
+        color: black;
+        font-size: 16px;
+        font-family: Pretendard Variable;
+        font-weight: 600;
+        word-wrap: break-word;
+        text-align: left;
+        padding-bottom: 5px;
+      }
+      .additional.text {
+        color: #b9b9b9;
+        text-align: left;
+        font-family: Pretendard Variable;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+      #card1 {
+        position: absolute;
+        top: 552px;
+        left: 826px;
+      }
+      #card2 {
+        left: 1114px;
+      }
+      #card3 {
+        left: 1402px;
+      }
+      #card4 {
+        top: 982px;
+      }
+      #card5 {
+        top: 982px;
+        left: 1114px;
+      }
+      #card6 {
+        top: 982px;
+        left: 1402px;
+      }
+      #card7 {
+        top: 1412px;
+      }
+      #card8 {
+        top: 1412px;
+        left: 1114px;
+      }
+      #card9 {
+        top: 1412px;
+        left: 1402px;
+      }
+      .page.number {
+        position: absolute;
+        top: 1872px;
+        left: 1183px;
+        right: 576px;
+        bottom: 500px;
+        display: flex; /* Flexbox 레이아웃 사용 */
+        flex-direction: row; /* 아이템들을 가로로 배치 */
+        justify-content: flex-start; /* 시작점에서 아이템들을 정렬 */
+        flex-wrap: nowrap; /* 화면 크기가 줄어들어도 내용을 다음 줄로 넘기지 않음 */
+      }
+      .page.number a {
+        color: #b9b9b9;
+        text-align: center;
+        font-family: Pretendard Variable;
+        font-size: 14.33px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        margin-right: 35px;
+        text-decoration: none;
+        padding: 5px 10px;
+        border-radius: 10px;
+      }
+      .page.number a:hover {
+        background-color: #5bab93;
+        
+      }
+    </style>
+  </head>
+  <body>
+    <div id="header">
+    </div>
+    <div class="banner"></div>
+    <div class="body">
+      <div class="body top">
+        <img class="userImg" src="../static/img/Ellipse 5.png" alt="userImg">
+        <span id="name">냥냥이</span>
+        <span class="settingImg"><img src="../static/img/Settings Gear.png" alt="settingImg"></span>
+        <span id="id">orangorang2</span>
+        <nav>
+          <ul>
+            <li><a href="#">마이 공구</a></li>
+            <li><a href="#">마이 후기</a></li>
+            <li><a href="#">참여한 공구</a></li>
+            <li><a href="#">작성한 리뷰</a></li>
+          </ul>
+        </nav>
+        <span class="reviewMaking">
+          리뷰 작성하기
+        </span>
+      </div>
+      <div class="body middle">
+        <div class="my info title">
+          <p>냥냥이 님의 공동 구매 프로젝트는</p>
+        </div>
+        <div class="my info contents">
+          <p>실용적이에요 <label id="first"><progress value="55" max="100"></label></p>
+          <p>친절해요<label id="second"><progress value="30" max="100"></progress></p>
+          <p>계획에 맞게 진행되었어요<label id="third"><progress value="55" max="100"></progress></p>
+          <p>의미 있어요<label id="fourth"><progress value="80" max="100"></progress></p>
+          <p>퀄리티가 좋아요<label id="fifth"><progress value="55" max="100"></progress></p>
+        </div>
+        <div class="card container" id="card1">
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="category">
+                    <span class="category label"
+                      >생필품 | 이화 파빌리온 앞 |
+                    </span>
+                    <span class="store">쿠팡</span>
+                  </div>
+                  <div class="product name">
+                    해피데이 포켓형 대용량 핫팩 150g
+                  </div>
+                  <div class="additional text">
+                    추워지는 날씨 핫팩으로 함께해요!
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="card top"></div>
+          </div>
+        </div>
+        <div class="card container" id="card2">
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="category">
+                    <span class="category label"
+                      >생필품 | 이화 파빌리온 앞 |
+                    </span>
+                    <span class="store">쿠팡</span>
+                  </div>
+                  <div class="product name">
+                    해피데이 포켓형 대용량 핫팩 150g
+                  </div>
+                  <div class="additional text">
+                    추워지는 날씨 핫팩으로 함께해요!
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="card top"></div>
+          </div>
+        </div>
+        <div class="card container" id="card3">
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="category">
+                    <span class="category label"
+                      >생필품 | 이화 파빌리온 앞 |
+                    </span>
+                    <span class="store">쿠팡</span>
+                  </div>
+                  <div class="product name">
+                    해피데이 포켓형 대용량 핫팩 150g
+                  </div>
+                  <div class="additional text">
+                    추워지는 날씨 핫팩으로 함께해요!
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="card top"></div>
+          </div>
+        </div>
+        <div class="card container" id="card4">
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="category">
+                    <span class="category label"
+                      >생필품 | 이화 파빌리온 앞 |
+                    </span>
+                    <span class="store">쿠팡</span>
+                  </div>
+                  <div class="product name">
+                    해피데이 포켓형 대용량 핫팩 150g
+                  </div>
+                  <div class="additional text">
+                    추워지는 날씨 핫팩으로 함께해요!
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="card top"></div>
+          </div>
+        </div>
+        <div class="card container" id="card5">
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="category">
+                    <span class="category label"
+                      >생필품 | 이화 파빌리온 앞 |
+                    </span>
+                    <span class="store">쿠팡</span>
+                  </div>
+                  <div class="product name">
+                    해피데이 포켓형 대용량 핫팩 150g
+                  </div>
+                  <div class="additional text">
+                    추워지는 날씨 핫팩으로 함께해요!
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="card top"></div>
+          </div>
+        </div>
+        <div class="card container" id="card6">
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="category">
+                    <span class="category label"
+                      >생필품 | 이화 파빌리온 앞 |
+                    </span>
+                    <span class="store">쿠팡</span>
+                  </div>
+                  <div class="product name">
+                    해피데이 포켓형 대용량 핫팩 150g
+                  </div>
+                  <div class="additional text">
+                    추워지는 날씨 핫팩으로 함께해요!
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="card top"></div>
+          </div>
+        </div>
+        <div class="card container" id="card7">
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="category">
+                    <span class="category label"
+                      >생필품 | 이화 파빌리온 앞 |
+                    </span>
+                    <span class="store">쿠팡</span>
+                  </div>
+                  <div class="product name">
+                    해피데이 포켓형 대용량 핫팩 150g
+                  </div>
+                  <div class="additional text">
+                    추워지는 날씨 핫팩으로 함께해요!
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="card top"></div>
+          </div>
+        </div>
+        <div class="card container" id="card8">
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="category">
+                    <span class="category label"
+                      >생필품 | 이화 파빌리온 앞 |
+                    </span>
+                    <span class="store">쿠팡</span>
+                  </div>
+                  <div class="product name">
+                    해피데이 포켓형 대용량 핫팩 150g
+                  </div>
+                  <div class="additional text">
+                    추워지는 날씨 핫팩으로 함께해요!
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="card top"></div>
+          </div>
+        </div>
+        <div class="card container" id="card9">
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="category">
+                    <span class="category label"
+                      >생필품 | 이화 파빌리온 앞 |
+                    </span>
+                    <span class="store">쿠팡</span>
+                  </div>
+                  <div class="product name">
+                    해피데이 포켓형 대용량 핫팩 150g
+                  </div>
+                  <div class="additional text">
+                    추워지는 날씨 핫팩으로 함께해요!
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="card top"></div>
+          </div>
+        </div>
+        <div class="page number">
+          <div><a href="#">1</a></div>
+          <div><a href="#">2</a></div>
+          <div><a href="#">3</a></div>
+          <div><a href="#">4</a></div>
+        </div>
+      </div>
+    </div>
+    <div class="footer"></div>
+  </body>
+  <script>
+    fetch("layout/header_before.html")
+      .then((response) => response.text())
+      .then((data) => {
+        document.getElementById("header").innerHTML = data;
+      });
+  </script>
+</html>
diff --git a/templates/product_add.html b/templates/product_add.html
new file mode 100644
index 0000000..24898b7
--- /dev/null
+++ b/templates/product_add.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../static/css/product_add.css" />
+    <title>공동 구매 등록하기</title>
+  </head>
+  <body>
+
+    <!-- 이거 추가 -->
+    <form  id="productForm" action="/add-product-post" method="post">     
+    <div class="container">
+      <div class="navigation">
+        <span class="back-arrow">&larr;</span>
+        <div class="action-buttons">
+            <button class="secondary-btn" onclick="saveTemp()">임시저장</button>
+            <button class="primary-btn" id="joinBtn">공구참여</button>
+          </div>
+          
+      </div>
+      <div class="header">
+        공동 구매 등록하기
+      </div>
+
+      <div class="navBar">
+        <div class="navList selected">공구계획</div>
+        <div class="navList">상세정보</div>
+      </div>
+      <div class="content">
+        <div class="form-section">
+          <div style="display: flex; flex-direction: row;  align-items: center;">
+            <div style="display: flex; width: 30%; flex-direction: column;">
+              <div class="form-title">상품 URL</div>
+              <div class="form-description">
+                구매를 원하는 상품의 URL을 복사해 붙여넣어주세요.
+              </div>
+            </div>
+   
+            <input
+              type="text"
+              id="product-url"
+              placeholder="ex. https://naver.com"
+            />
+            <button class="register-btn">등록</button>
+          </div>
+          <div class="product-info">
+            <div class="image-placeholder"></div>
+            <div class="product-details">
+              <div>상품명: 해피데이 대용량 핫팩 150g, 25개</div>
+              <div>가격: 25,000원</div>
+              <div>배달비: 4,000원</div>
+            </div>
+          </div>
+          <div style="display: flex; flex-direction: row; align-items: center;">
+            <div style="display: flex; width: 30%; flex-direction: column;">
+              <div class="form-title">카테고리</div>
+              <div class="form-description">
+                상품의 성격과 가장 알맞은 카테고리를 선택해주세요.
+              </div>
+            </div>
+
+            <input
+              type="text"
+              id="product-category"
+              placeholder="생필품"
+              name = "product-category"
+            />
+        </div>
+      </div>
+      <div class="form-section">
+        <div style="display: flex; flex-direction: row;  align-items: center;">
+          <div style="display: flex; width: 30%; flex-direction: column;">
+            <div class="form-title">공구 일정</div>
+            <div class="form-description">
+              공구일정을 적어주세요
+            </div>
+          </div>
+
+          <input
+            type="date"
+            id="start-date"
+            name="start-date"     
+            style="width: 200px;"
+            placeholder="시작 날짜를 선택해주세요."
+            
+          />
+          <input
+            type="date"
+            id="end-date"
+            name="end-date"   
+            style="width: 200px;"
+            placeholder="종료 날짜를 선택해주세요."
+                 
+          />
+        </div>
+        
+        <div style="display: flex; flex-direction: row;  align-items: center;">
+          <div style="display: flex; width: 30%; flex-direction: column;">
+            <div class="form-title">공구 수량</div>
+            <div class="form-description">
+              공동구매를 진행할 상품의 수량을 입력해주세요.
+            </div>
+          </div>
+
+          <input
+            type="text"
+            id="product-number"
+            name="product-number"
+          />개
+      </div>
+      <div style="display: flex; flex-direction: row;  align-items: center;">
+        <div style="display: flex; width: 30%; flex-direction: column;">
+          <div class="form-title">공구 인원</div>
+          <div class="form-description">
+            공동구매를 진행할 인원을 입력해주세요. 이때, 전체 가격과 수량을 고려하여 결정해야 합니다.
+          </div>
+        </div>
+
+        <input
+          type="text"
+          id="people-number"
+        />명
+        </div>
+        <div style="display: flex; flex-direction: row;  align-items: center;">
+            <div style="display: flex; width: 30%; flex-direction: column;">
+            <div class="form-title">공구 장소</div>
+            <div class="form-description">
+                상품을 배부할 장소를 선택해주세요.
+            </div>
+            </div>
+
+        <input
+          type="text"
+          id="product-place"
+          name="product-place"
+        />
+    </div>
+    <div style="display: flex; flex-direction: row;  align-items: center;">
+        <div style="display: flex; width: 30%; flex-direction: column;">
+          <div class="form-title">한 줄 소개</div>
+          <div class="form-description">
+            공동 구매에 대해 간단하게 소개해주세요.
+한 줄 소개는 메인 페이지와 상품 상세 페이지에 노출됩니다.
+벗들의 이목을 끄는 멋진 한 줄 소개를 작성해보세요.
+          </div>
+        </div>
+
+        <input type="text"
+          id="product-description" name="product-description"/>
+    </div>
+    </div>
+    </div>
+
+  </form> <!-- 이거 추가 -->
+
+  <script>
+    function saveTemp() {
+      alert('임시저장 기능을 수행합니다.');
+      event.preventDefault();
+    }
+
+    document.getElementById('joinBtn').addEventListener('click', function () {
+      document.getElementById('productForm').submit();
+    });
+  </script>
+
+  </body>
+</html>
diff --git a/templates/product_detail.html b/templates/product_detail.html
new file mode 100644
index 0000000..478f19b
--- /dev/null
+++ b/templates/product_detail.html
@@ -0,0 +1,63 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="../static/css/product_detail.css" />
+  </head>
+  <div id="header"></div>
+
+  <body>
+    <div class="adBox"></div>
+    <div class="container">
+      <div class="infoContainer">
+        <div class="imgBox"></div>
+        <div class="infoBox">
+          <div class="company">쿠팡</div>
+          <div class="proTitle">해피데이 포켓형 대용량 핫팩 150g, 25개</div>
+          <div class="profileBox">
+            <div class="profileText">냥냥이</div>
+            <div class="description">: 추워지는 날씨 핫팩으로 함께해요!</div>
+          </div>
+          <div class="subInfo">
+            <div class="subTitle">모집기간</div>
+            <div class="subDate">2023.10.15 ~ 2023.10.21</div>
+            <div class="dDay">D-2</div>
+          </div>
+          <div class="subInfo">
+            <div class="subTitle">모집인원</div>
+            <div class="subDate">14/20 명</div>
+            <div class="progressBar"></div>
+          </div>
+          <div class="mainPrice">
+            <div class="perText">인당</div>
+            <div class="priceText">25,000 원</div>
+            <div class="realPrice">1개당 판매가 : 1000원</div>
+          </div>
+          <div class="subInfo">
+            <div class="subTitle">총 구매 개수</div>
+            <div class="subDate">250개</div>
+          </div>
+          <div class="subInfo">
+            <div class="subTitle">총 구매 가격</div>
+            <div class="subDate">500,000원(배달료 4,000원 포함)</div>
+          </div>
+          <div class="subInfo">
+            <div class="subTitle">배부장소</div>
+            <div class="subDate">이화 파빌리온 앞</div>
+          </div>
+        </div>
+        <button class="particBtn">공동 구매 참여하기</button>
+      </div>
+      <div class="navBar">
+        <div class="navList selected">공구계획</div>
+        <div class="navList">상세정보</div>
+      </div>
+    </div>
+  </body>
+  <footer></footer>
+  <script>
+    fetch("layout/header_before.html")
+      .then((response) => response.text())
+      .then((data) => {
+        document.getElementById("header").innerHTML = data;
+      });
+  </script>
+</html>
diff --git a/templates/products_list.html b/templates/products_list.html
new file mode 100644
index 0000000..bf886ff
--- /dev/null
+++ b/templates/products_list.html
@@ -0,0 +1,868 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../static/css/products_list.css"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+
+  <body>
+    <div id="header"></div>
+    <!--헤더 삽입-->
+
+    <div class="text-box1">
+      <div class="text1-1">생필품</div>
+    </div>
+    <div class="text-box2">
+      <svg
+        width="10"
+        height="15"
+        viewBox="0 0 10 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.65426 0.813477L1 4.77584"
+          stroke="#5BAB93"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4.65424 0.813477L8.30849 4.77584"
+          stroke="#5BAB93"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4.65426 14.1865L1 10.2241"
+          stroke="#5BAB93"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4.65424 14.1865L8.30849 10.2241"
+          stroke="#5BAB93"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <div class="text2-1">위시순</div>
+    </div>
+
+    <div class="card-line1">
+      <div class="card-container1">
+        <div class="container" id="cont1-1">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label"
+                  >{{data.product_category}} | {{data.product_place}} |
+                </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">{{ data.product_description }}</div>
+              <div class="price">{{data.product_number}}개, 25000원 , {{data.start_date}}부터 {{data.end_date}}까지</div>
+          
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont1-2">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont1-3">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont1-4">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont1-5">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card-line2">
+      <div class="card-container2">
+        <div class="container" id="cont2-1">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont2-2">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont2-3">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont2-4">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont2-5">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card-line3">
+      <div class="card-container3">
+        <div class="container" id="cont3-1">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont3-2">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont3-3">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont3-4">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont3-5">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M27.0606 7.06297C27.0606 8.66768 26.4521 10.2862 25.2213 11.5174L23.1745 13.5648L14.3649 22.3768C14.3234 22.4183 14.3096 22.4322 14.2681 22.4598C14.2266 22.4322 14.2128 22.4183 14.1713 22.3768L3.31495 11.5174C2.0841 10.2862 1.47559 8.68151 1.47559 7.06297C1.47559 5.44444 2.0841 3.82591 3.31495 2.59472C5.77664 0.146162 9.7596 0.146162 12.2213 2.59472L14.2543 4.64209L16.3011 2.59472C18.7628 0.146162 22.7319 0.146162 25.1936 2.59472C26.4521 3.82591 27.0606 5.43061 27.0606 7.06297Z"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="review-box">
+      <div class="text-box4">
+        <div class="text4-1">생생한 후기를 구경해보세요</div>
+      </div>
+      <div class="review-page-go">리뷰 전체 보기</div>
+
+      <div class="card-line4">
+        <div class="card-container4">
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagebox">
+      <div class="page">
+        <div class="page-now">
+          <div class="number-now">1</div>
+        </div>
+        <div class="page-text">2</div>
+        <div class="page-text">3</div>
+        <div class="page-text">4</div>
+        <div class="page-text">5</div>
+        <div class="page-text">6</div>
+        <div class="page-text">7</div>
+      </div>
+    </div>
+
+    <div class="footer"></div>
+    <!--푸터 삽입-->
+  </body>
+  <script>
+    fetch("layout/header_before.html")
+      .then((response) => response.text())
+      .then((data) => {
+        document.getElementById("header").innerHTML = data;
+      });
+  </script>
+</html>
diff --git a/templates/review_add.html b/templates/review_add.html
new file mode 100644
index 0000000..6b39472
--- /dev/null
+++ b/templates/review_add.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="../static/css/review_add.css">
+</head>
+<body>
+<div class="submit-section">
+    <button id="button1">임시저장</button>
+    <button id="button2">등록하기</button>
+</div>
+
+<p id="title1">리뷰 작성하기</p>
+<div style="display:flex; flex-direction: column;">
+<div class = "tabs">
+<div class = "tab">기본정보</div> 
+<div class = "tab">상품정보</div> 
+<div class = "tab">공지사항</div>
+</div>
+
+<div class="form-section">
+    <label for="product-name">상품 이름</label>
+    <p>공동 구매를 진행한 내역 중 리뷰를 작성할 상품을 선택해주세요.</p>
+    <select id="product-name" maxlength="100"></select>
+
+    <label for="review-content">리뷰 작성</label>
+    <p>공동 구매에 대한 리뷰를 작성해주세요.<br>작성해주신 리뷰는 리뷰 조회 페이지에 노출됩니다.</p>
+    <textarea id="review-content" placeholder="상품에 대한 리뷰를 작성해주세요." maxlength="100"></textarea>
+    <p>0/100</p>
+
+    <label for="photo-upload">사진 첨부</label>
+    <button id="photo-upload">사진 불러오기</button>
+
+    <label for="review-keyword">리뷰 키워드</label>
+    <p>리뷰 키워드를 선택해주세요.</p>
+    <select id="review-keyword" maxlength="100"></select>
+</div>
+</div>
+
+<image id="backicon" src="../static/img/Group 45.png">
+</body>
+</html>
diff --git a/templates/review_detail.html b/templates/review_detail.html
new file mode 100644
index 0000000..8c92f5c
--- /dev/null
+++ b/templates/review_detail.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../static/css/review_detail.css"
+    />
+  </head>
+  <body>
+    <div class="box1">
+      <div class="box2">
+        <img src="../static/img/Xmark.png" class="XmarkImage" />
+      </div>
+      <div style="display: flex; flex-direction: row">
+        <img src="../static/img/circle.png" class="circleImage" />
+
+        <p class="box3">냥냥이</p>
+      </div>
+      <div style="margin: 10px 0 10px 30px">2023.09.09</div>
+      <p class="box4">
+        요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서 걱정이 싹
+        사라졌네요! ㅋㅋ 다들 감기 조심하세요 이런 식으로 리뷰에 대한 내용이
+        죽죽 써져있습니다...
+      </p>
+      <hr class="box5" />
+      <p class="box6">해피데이 포켓형 대용량 핫팩 150g</p>
+    </div>
+  </body>
+</html>
diff --git a/templates/reviews_list.html b/templates/reviews_list.html
new file mode 100644
index 0000000..314b2e9
--- /dev/null
+++ b/templates/reviews_list.html
@@ -0,0 +1,693 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+    .header {
+      background-color: white;
+      width: 100%;
+      height: 173px;
+      display: flex;
+      align-items: center;
+    }
+    .header img {
+      position: relative;
+      left: 250px;
+    }
+    .banner {
+      background-color: #fffcf0;
+      width: 100%;
+      height: 119px;
+      border: 1px solid #d9d9d9;
+    }
+    .body {
+      width: 100%;
+      height: 1868px;
+    }
+    .sort {
+      border-radius: 20px;
+      border: 1px solid var(--mint, #5bab93);
+      background: #fff;
+      display: inline-flex;
+      padding: 10px 20px;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      color: #5bab93;
+      text-align: center;
+      font-family: Pretendard Variable;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+      position: relative;
+      top: 71px;
+      left: 250px;
+    }
+    .card.container {
+      position: absolute;
+      top: 448px;
+      left: 250px;
+      width: 60%;
+      height: 388.98px;
+      align-items: left;
+      display: flex;
+      flex-direction: row;
+      gap: 30px;
+      padding: 0;
+      margin: 0;
+    }
+    .UIcard {
+      margin-top: 60px;
+      position: relative;
+      width: 270px;
+      height: 388.98px;
+      padding: 0;
+      margin: 0;
+    }
+    .card.bottom {
+      width: 268px;
+      height: 163.98px;
+      left: 0.16px;
+      top: 268px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      position: absolute;
+      background: white;
+      border-bottom-left-radius: 20px;
+      border-bottom-right-radius: 20px;
+      border: 1px #d9d9d9 solid;
+    }
+
+    #name {
+      color: #00664f;
+      font-family: Pretendard Variable;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400px;
+      line-height: 18px;
+      flex-shrink: 0;
+    }
+    .card.top {
+      width: 268.02px;
+      height: 268.02px;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+      background: #d9d9d9;
+      border-top-left-radius: 20px;
+      border-top-right-radius: 20px;
+      border: 1px #d9d9d9 solid;
+    }
+    .card.textbox {
+      text-align: left;
+      padding-top: 8px;
+      padding-left: 20px;
+      padding-right: 20px;
+      padding-bottom: 20px;
+    }
+    .review.contents {
+      color: #000;
+      font-family: Pretendard Variable;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+      margin-top: 9px;
+    }
+    .line {
+      width: 268px;
+      height: 1px;
+      background-color: #d9d9d9;
+      padding: 0;
+      margin: 0;
+    }
+    .product.name {
+      color: #b9b9b9;
+      text-align: center;
+      font-family: Pretendard Variable;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+      margin-top: 13px;
+    }
+    #card2 {
+      left: 538px;
+    }
+    #card3 {
+      left: 826px;
+    }
+    #card4 {
+      left: 1114px;
+    }
+    #card5 {
+      left: 1402px;
+    }
+    #card6 {
+      top: 980px;
+    }
+    #card7 {
+      top: 980px;
+      left: 538px;
+    }
+    #card8 {
+      top: 980px;
+      left: 826px;
+    }
+    #card9 {
+      top: 980px;
+      left: 1114px;
+    }
+    #card10 {
+      top: 980px;
+      left: 1402px;
+    }
+    #card11 {
+      top: 1512px;
+    }
+    #card12 {
+      top: 1512px;
+      left: 538px;
+    }
+    #card13 {
+      top: 1512px;
+      left: 826px;
+    }
+    #card14 {
+      top: 1512px;
+      left: 1114px;
+    }
+    #card15 {
+      top: 1512px;
+      left: 1402px;
+    }
+    .page.number {
+      position: absolute;
+      top: 2047px;
+      left: 813px;
+      right: 813px;
+      bottom: 426px;
+      display: flex; /* Flexbox 레이아웃 사용 */
+      flex-direction: row; /* 아이템들을 가로로 배치 */
+      justify-content: flex-start; /* 시작점에서 아이템들을 정렬 */
+      flex-wrap: nowrap; /* 화면 크기가 줄어들어도 내용을 다음 줄로 넘기지 않음 */
+    }
+    .page.number a {
+      color: #b9b9b9;
+      text-align: center;
+      font-family: Pretendard Variable;
+      font-size: 14.33px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+      margin-right: 35px;
+      text-decoration: none;
+      padding: 5px 10px;
+      border-radius: 10px;
+    }
+    .page.number a:hover {
+      background-color: #5bab93;
+      color: #fffcf0;
+    }
+    .footer {
+      width: 100%;
+      height: 340px;
+      background-color: antiquewhite;
+    }
+  </style>
+  <body>
+    <div class="header">
+      <img src="../static/img/위시윗 로고.png" alt="위시윗로고" />
+    </div>
+    <div class="banner"></div>
+    <div class="body">
+      <span class="sort">
+        <img src="../static/img/Group.png" alt="sorting img" /> 최신순
+      </span>
+      <div class="card container" id="card1">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <img
+                    class="userImg"
+                    src="../static/img/Ellipse 2.png"
+                    alt="userImg"
+                  />
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card2">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card3">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card4">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card5">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card6">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card7">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card8">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card9">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card10">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card11">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card12">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card13">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card14">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="card container" id="card15">
+        <div class="UIcard">
+          <div class="card bottom">
+            <div class="card textbox">
+              <div class="text">
+                <div class="nickname box">
+                  <span class="nickname img"></span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <circle cx="8" cy="8" r="8" fill="#00664F" />
+                  </svg>
+                  <span id="name">냥냥이</span>
+                </div>
+                <div class="review contents">
+                  요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩 공구해서
+                  걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                </div>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+          </div>
+          <div class="card top"></div>
+        </div>
+      </div>
+      <div class="page number">
+        <div><a href="#">1</a></div>
+        <div><a href="#">2</a></div>
+        <div><a href="#">3</a></div>
+        <div><a href="#">4</a></div>
+        <div><a href="#">5</a></div>
+        <div><a href="#">6</a></div>
+        <div><a href="#">7</a></div>
+      </div>
+    </div>
+    <div class="footer"></div>
+  </body>
+</html>
diff --git a/templates/signup1.html b/templates/signup1.html
new file mode 100644
index 0000000..8a3df2f
--- /dev/null
+++ b/templates/signup1.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../static/css/signup1.css" />
+  </head>
+  <body>
+    <a href="index.html" target="_parent" id="ximg"
+      ><svg
+        width="44"
+        height="44"
+        viewBox="0 0 44 44"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M32.8214 10.7793L10.9404 32.9947"
+          stroke="black"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M10.9404 10.7793L32.8214 32.9947"
+          stroke="black"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </a>
+    <div class="textinfo">
+      <div class="text1">서비스 사용을 위해</div>
+      <div class="text2">회원가입이 필요해요</div>
+    </div>
+    <a href="login.html" target="_self" id="login">로그인</a>
+    <a href="signup1.html" target="_self" id="signup">회원가입</a>
+    <form method="post" action="/signup1_post">
+      <label for="name" id="name">이름</label>
+      <input type="text" name="name" placeholder="enter your name" />
+      <hr />
+      <div class="emailrow">
+        <label for="email" id="email">이메일</label>
+        <input type="text" name="email" placeholder="enter your e-mail" />
+        <div id="ewhain">@ewhain.net</div>
+      </div>
+      <hr />
+      <label for="phone" id="phone">전화번호</label>
+      <input type="text" name="phone" placeholder="enter your phone number" />
+      <hr />
+      <label for="id" id="id">아이디</label>
+      <input type="text" name="id" placeholder="enter your ID" />
+      <hr />
+      <label for="pw" id="pw">비밀번호</label>
+      <input type="text" name="pw" placeholder="enter your PW" />
+      <hr />
+      <label for="password2" id="password2">비밀번호 확인</label>
+      <input type="text" name="password2" placeholder="enter your PW again" />
+      <hr />
+      <div class="stepcircle">
+        <div id="circle1">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle cx="6" cy="6" r="6" fill="#5BAB93" />
+          </svg>
+        </div>
+        <div id="circle2">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle cx="6" cy="6" r="6" fill="#D9D9D9" />
+          </svg>
+        </div>
+      </div>
+      <input type="submit" value="생성" />
+    </form>
+  </body>
+</html>
diff --git a/templates/signup2.html b/templates/signup2.html
new file mode 100644
index 0000000..131f53f
--- /dev/null
+++ b/templates/signup2.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="../static/css/signup2.css">
+         <style>
+            body {
+                font-family: Arial, sans-serif;
+            }
+
+            .navbar {
+                background-color: #f8f9fa;
+                padding: 10px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .navbar__logo a {
+                text-decoration: none;
+                font-size: 1.5em;
+                color: #343a40;
+            }
+
+            .navbar__menu {
+                list-style-type: none;
+                margin: 0;
+                padding: 0;
+                display: flex;
+            }
+
+            .navbar__menu li {
+                margin-right: 20px;
+            }
+
+            .navbar__menu a {
+                text-decoration: none;
+                color: #343a40;
+                font-weight: bold;
+            }
+        </style>
+    </head>
+    <body>
+         <nav class="navbar">
+            <div class="navbar__logo">
+                <a href="/list">Orang2E</a>
+            </div>
+            <ul class="navbar__menu">
+                <li><a href="/login">Login</a></li>
+                <li><a href="/list">List</a></li>
+                <li><a href="/review">Review</a></li>
+            </ul>
+        </nav>
+        <a href="index.html" target="_parent" id="ximg"><svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M32.8214 10.7793L10.9404 32.9947" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M10.9404 10.7793L32.8214 32.9947" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        </a>
+        <div class="textinfo">
+            <div class="text1">서비스 사용을 위해</div>
+            <div class="text2">회원가입이 필요해요</div>
+        </div>
+        <a href="#" target="_self" id="login">로그인</a>
+        <a href="#" target="_self" id="signup">회원가입</a>
+        <form method="post" action="#" id="signup2-form">
+            <label for="nickname" id="name">닉네임</label>
+            <input type="text" name="nickname" placeholder="enter your nickname"><hr/>
+            <div class="upload">
+                <div><p>프로필</p></div>
+                <div><label class="custom-img-input" for="profile-img"></label>
+                <input type="file" name="profile-img"><br>
+                </div>
+            </div>
+            <pre id="info">
+프로필 사진을 설정하지 않으실 경우
+기본 이화인 프로필 사진으로 설정됩니다.
+            </pre>
+            <div class="stepcircle">
+                <div id="circle1">
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="6" cy="6" r="6" fill="#D9D9D9"/>
+                    </svg>
+                </div>
+                <div id="circle2">
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="6" cy="6" r="6" fill="#5BAB93"/></svg>
+                </div>
+            </div>
+            <input type="submit" value="회원가입">
+        </form>
+   <script>
+           document.getElementById("signup").addEventListener("click", function() {
+                window.location.href = "/signup1";
+            });
+
+          
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/templates/signup3.html b/templates/signup3.html
new file mode 100644
index 0000000..9382a62
--- /dev/null
+++ b/templates/signup3.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="../static/css/signup3.css">
+    </head>
+    <body>
+        <a href="index.html" target="_parent" id="ximg"><svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M32.8214 10.7793L10.9404 32.9947" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M10.9404 10.7793L32.8214 32.9947" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        </a>
+        <div class="text1">
+            <div class="text1-1">회원가입이</div>
+            <div class="text1-2">완료되었습니다!</div>
+        </div>
+        <div class="text2">
+            <div class="text2-1">벗들과 함께하는</div>
+            <div class="text2-2">다양한 공동 구매를 경험해보세요</div>
+        </div>
+    </form>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/wish_list.html b/templates/wish_list.html
new file mode 100644
index 0000000..001580d
--- /dev/null
+++ b/templates/wish_list.html
@@ -0,0 +1,1292 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      body {
+        width: 100vw;
+        margin: 0;
+        background: white;
+      }
+
+      .text-box1,
+      .text-box2 {
+        top: 634px;
+        padding-left: 20px;
+        padding-right: 20px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        background: white;
+        border-radius: 20px;
+        border: 1px #5bab93 solid;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        display: inline-flex;
+        position: absolute;
+        white-space: nowrap;
+      }
+
+      .text-box1 {
+        margin-left: 150px;
+      }
+
+      .text-box2 {
+        margin-left: 250px;
+      }
+
+      .text1-1,
+      .text2-1 {
+        color: #5bab93;
+        font-size: 16px;
+        font-family: Pretendard Variable;
+        font-weight: 600;
+        word-wrap: break-word;
+      }
+
+      .text4-1 {
+        color: black;
+        font-size: 16px;
+        font-family: Pretendard Variable;
+        font-weight: 600;
+        word-wrap: break-word;
+      }
+
+      .footer {
+        margin: 0px;
+        width: 100%;
+        top: 2875px;
+        height: 340px;
+        background: white;
+        position: absolute;
+      }
+
+      .card-line1,
+      .card-line2,
+      .card-line3,
+      .card-line4 {
+        position: absolute;
+        display: flex;
+        flex-direction: row;
+      }
+
+      .card-line1 {
+        top: 706px;
+      }
+
+      .card-line2 {
+        top: 1180px;
+      }
+
+      .card-line3 {
+        top: 1660px;
+      }
+
+      .card-line4 {
+        top: 160px;
+      }
+
+      .card-container1,
+      .card-container2,
+      .card-container3,
+      .card-container4 {
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: 30px;
+        margin-left: 150px;
+        position: realtive;
+      }
+
+      .container {
+        display: flex;
+        position: relative;
+        width: 270px;
+        height: 432.02px;
+      }
+
+      .inner-box1 {
+        width: 268px;
+        height: 140px;
+        left: 0.16px;
+        top: 268px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        position: absolute;
+        background: white;
+        border-bottom-left-radius: 20px;
+        border-bottom-right-radius: 20px;
+        border: 1px #d9d9d9 solid;
+      }
+
+      .inner-box2 {
+        width: 268.02px;
+        height: 268.02px;
+        left: 0px;
+        top: 0px;
+        position: absolute;
+        background: #d9d9d9;
+        border-top-left-radius: 20px;
+        border-top-right-radius: 20px;
+        border: 1px #d9d9d9 solid;
+      }
+
+      .inner-textbox {
+        text-align: left;
+        padding-top: 8px;
+        padding-left: 20px;
+        padding-right: 20px;
+        padding-bottom: 20px;
+      }
+
+      .category {
+        padding-bottom: 5px;
+      }
+
+      .category-label {
+        color: #46a1bb;
+        font-size: 14px;
+        font-family: Pretendard Variable;
+        font-weight: 600;
+        word-wrap: break-word;
+        text-align: left;
+      }
+
+      .store {
+        color: #00664f;
+        font-size: 14px;
+        font-family: Pretendard Variable;
+        font-weight: 600;
+        word-wrap: break-word;
+        text-align: left;
+      }
+
+      .product-name {
+        color: black;
+        font-size: 16px;
+        font-family: Pretendard Variable;
+        font-weight: 600;
+        word-wrap: break-word;
+        text-align: left;
+        padding-bottom: 5px;
+      }
+
+      .price {
+        color: #b9b9b9;
+        font-size: 14px;
+        font-family: Pretendard Variable;
+        font-weight: 400;
+        word-wrap: break-word;
+        text-align: left;
+      }
+
+      .progress {
+        text-align: left;
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+
+      .progress-text {
+        padding-bottom: 4px;
+      }
+
+      .dday {
+        width: 44px;
+        height: 18px;
+        position: absolute;
+        text-align: center;
+        color: #e27a6c;
+        font-size: 14px;
+        font-family: Pretendard Variable;
+        font-weight: 600;
+        word-wrap: break-word;
+      }
+
+      .discount {
+        width: 33.96px;
+        height: 18.36px;
+        position: absolute;
+        text-align: right;
+        right: 20px;
+        color: #00664f;
+        font-size: 14px;
+        font-family: Pretendard Variable;
+        font-weight: 600;
+        word-wrap: break-word;
+      }
+
+      .progress-bar-bg {
+        width: 228px;
+        height: 12px;
+        position: absolute;
+        background: #d9d9d9;
+        border-radius: 5.97px;
+        overflow: hidden;
+        /* 클리핑 추가 */
+      }
+
+      .progress-bar {
+        height: 100%;
+        /* 높이 100%로 설정 */
+        position: relative;
+        background: #00664f;
+        border-radius: 5.97px;
+        transition: width 0.5s ease;
+        /* 움직임 효과 추가 */
+      }
+
+      .heart {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: 10px;
+      }
+
+      .review-box {
+        margin: 0px;
+        width: 100%;
+        top: 2232px;
+        height: 646px;
+        background: rgb(255, 252, 240, 1);
+        position: absolute;
+      }
+
+      .review-page-go {
+        top: 110px;
+        left: 50%;
+        transform: translateX(-55%);
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        white-space: nowrap;
+        font-family: Pretendard Variable;
+        font-weight: 500;
+      }
+
+      .text-box4 {
+        left: 50%;
+        top: 50px;
+        transform: translateX(-55%);
+        padding-left: 20px;
+        padding-right: 20px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        background: white;
+        border-radius: 20px;
+        border: 1px #e27a6c solid;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        display: inline-flex;
+        position: absolute;
+        white-space: nowrap;
+      }
+
+      .text4-1 {
+        color: black;
+        font-size: 16px;
+        font-family: Pretendard Variable;
+        font-weight: 600;
+        word-wrap: break-word;
+      }
+
+      .UIcard {
+        margin-top: 60px;
+        position: relative;
+        width: 270px;
+        height: 388.98px;
+        padding: 0;
+        margin: 0;
+      }
+
+      .card.bottom {
+        width: 268px;
+        height: 145.98px;
+        left: 0.16px;
+        top: 268px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        position: absolute;
+        background: white;
+        border-bottom-left-radius: 20px;
+        border-bottom-right-radius: 20px;
+        border: 1px #d9d9d9 solid;
+      }
+
+      #name {
+        color: #00664f;
+        font-family: Pretendard Variable;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400px;
+        line-height: 18px;
+        flex-shrink: 0;
+      }
+
+      .card.top {
+        width: 268.02px;
+        height: 268.02px;
+        left: 0px;
+        top: 0px;
+        position: absolute;
+        background: #d9d9d9;
+        border-top-left-radius: 20px;
+        border-top-right-radius: 20px;
+        border: 1px #d9d9d9 solid;
+      }
+
+      .card.textbox {
+        text-align: left;
+        padding-top: 8px;
+        padding-left: 20px;
+        padding-right: 20px;
+        padding-bottom: 20px;
+      }
+
+      .review.contents {
+        color: #000;
+        font-family: Pretendard Variable;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 18px;
+        margin-top: 9px;
+      }
+
+      .line {
+        width: 268px;
+        height: 1px;
+        background-color: #d9d9d9;
+        padding: 0;
+        margin: 0;
+      }
+
+      .product.name {
+        color: #b9b9b9;
+        text-align: center;
+        font-family: Pretendard Variable;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        margin-top: 13px;
+      }
+
+      .pagebox {
+        top: 2130px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-55%);
+      }
+
+      .page {
+        height: 100%;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 35px;
+        display: inline-flex;
+      }
+
+      .page-now {
+        padding: 10px;
+        background: #5bab93;
+        border-radius: 10px;
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .number-now {
+        text-align: center;
+        color: #fffcf0;
+        font-size: 14.33px;
+        font-family: Pretendard Variable;
+        font-weight: 700;
+        word-wrap: break-word;
+      }
+
+      .page-text {
+        text-align: center;
+        color: #b9b9b9;
+        font-size: 14.33px;
+        font-family: Pretendard Variable;
+        font-weight: 700;
+        word-wrap: break-word;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="header"></div>
+    <!--헤더 삽입-->
+
+    <div class="text-box1">
+      <div class="text1-1">전체</div>
+    </div>
+    <div class="text-box2">
+      <svg
+        width="10"
+        height="15"
+        viewBox="0 0 10 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.65426 0.813477L1 4.77584"
+          stroke="#5BAB93"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4.65424 0.813477L8.30849 4.77584"
+          stroke="#5BAB93"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4.65426 14.1865L1 10.2241"
+          stroke="#5BAB93"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4.65424 14.1865L8.30849 10.2241"
+          stroke="#5BAB93"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <div class="text2-1">최신순</div>
+    </div>
+
+    <div class="card-line1">
+      <div class="card-container1">
+        <div class="container" id="cont1-1">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont1-2">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont1-3">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont1-4">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont1-5">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card-line2">
+      <div class="card-container2">
+        <div class="container" id="cont2-1">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont2-2">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont2-3">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont2-4">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont2-5">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card-line3">
+      <div class="card-container3">
+        <div class="container" id="cont3-1">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont3-2">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont3-3">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont3-4">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div class="container" id="cont3-5">
+          <div class="inner-box1">
+            <div class="inner-textbox">
+              <div class="category">
+                <span class="category-label">생필품 | 이화 파빌리온 앞 | </span>
+                <span class="store">쿠팡</span>
+              </div>
+              <div class="product-name">해피데이 포켓형 대용량 핫팩 150g</div>
+              <div class="price">25개, 25000원</div>
+            </div>
+            <div class="progress">
+              <div class="progress-text">
+                <div class="dday">D-DAY</div>
+                <div class="discount">90%</div>
+                <br />
+              </div>
+              <div class="progress-bar-bg">
+                <div class="progress-bar" style="width: 90%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="inner-box2">
+            <svg
+              class="heart"
+              width="28"
+              height="24"
+              viewBox="0 0 28 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M26.3888 7.06297C26.3888 8.66768 25.7802 10.2862 24.5494 11.5174L22.5026 13.5648L13.693 22.3768C13.6516 22.4183 13.6377 22.4322 13.5962 22.4598C13.5547 22.4322 13.5409 22.4183 13.4994 22.3768L2.64307 11.5174C1.41222 10.2862 0.803711 8.68151 0.803711 7.06297C0.803711 5.44444 1.41222 3.82591 2.64307 2.59472C5.10477 0.146162 9.08773 0.146162 11.5494 2.59472L13.5824 4.64209L15.6292 2.59472C18.0909 0.146162 22.06 0.146162 24.5217 2.59472C25.7802 3.82591 26.3888 5.43061 26.3888 7.06297Z"
+                fill="#E27A6C"
+                stroke="#E27A6C"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="review-box">
+      <div class="text-box4">
+        <div class="text4-1">생생한 후기를 구경해보세요</div>
+      </div>
+      <div class="review-page-go">리뷰 전체 보기</div>
+
+      <div class="card-line4">
+        <div class="card-container4">
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+
+          <div class="UIcard">
+            <div class="card bottom">
+              <div class="card textbox">
+                <div class="text">
+                  <div class="nickname box">
+                    <span class="nickname img"></span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                    >
+                      <circle cx="8" cy="8" r="8" fill="#00664F" />
+                    </svg>
+                    <span id="name">냥냥이</span>
+                  </div>
+                  <div class="review contents">
+                    요즘 날씨가 추워져서 걱정이 많았는데 벗들과 함께 핫팩
+                    공구해서 걱정이 싹 사라졌네요! ㅋㅋ 다들 감기 조심하세요
+                  </div>
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="product name">해피데이 포켓형 대용량 핫팩 150g</div>
+            </div>
+            <div class="card top"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagebox">
+      <div class="page">
+        <div class="page-now">
+          <div class="number-now">1</div>
+        </div>
+        <div class="page-text">2</div>
+        <div class="page-text">3</div>
+        <div class="page-text">4</div>
+        <div class="page-text">5</div>
+        <div class="page-text">6</div>
+        <div class="page-text">7</div>
+      </div>
+    </div>
+
+    <div class="footer"></div>
+    <!--푸터 삽입-->
+  </body>
+  <script>
+    fetch("layout/header_before.html")
+      .then((response) => response.text())
+      .then((data) => {
+        document.getElementById("header").innerHTML = data;
+      });
+  </script>
+</html>